diff --git a/src/app/(routes)/icons/page.tsx b/src/app/(routes)/icons/page.tsx
new file mode 100644
index 0000000..f515501
--- /dev/null
+++ b/src/app/(routes)/icons/page.tsx
@@ -0,0 +1,21 @@
+import { Metadata } from "next";
+
+import * as icons from "@/app/_components/icons";
+
+export const metadata: Metadata = {
+  title: "Across Bridge",
+  description: "Interoperability powered by Intents.",
+};
+
+export default function IconsPage() {
+  return (
+    <main className="container mx-auto flex flex-wrap gap-4 p-12">
+      {Object.entries(icons).map(([name, Icon]) => (
+        <div key={name} className="flex flex-col items-center gap-4">
+          <Icon />
+          <code>{name}</code>
+        </div>
+      ))}
+    </main>
+  );
+}
diff --git a/src/app/_components/header-nav.tsx b/src/app/_components/header-nav.tsx
index b228bc9..5039acd 100644
--- a/src/app/_components/header-nav.tsx
+++ b/src/app/_components/header-nav.tsx
@@ -1,11 +1,18 @@
 import Link from "next/link";
 
+import { AcrossIcon } from "./icons/across";
+
 export default function HeaderNav() {
   return (
     <header className="container mx-auto flex items-center justify-between p-4">
-      <h1 className="text-2xl font-bold">Across</h1>
+      <Link href="/">
+        <AcrossIcon className="fill-aqua-100" />
+      </Link>
       <nav>
         <ul className="flex gap-4">
+          <li>
+            <Link href="/"></Link>
+          </li>
           <li>
             <Link href="/">Home</Link>
           </li>
diff --git a/src/app/_components/icons/across.tsx b/src/app/_components/icons/across.tsx
new file mode 100644
index 0000000..f30e08d
--- /dev/null
+++ b/src/app/_components/icons/across.tsx
@@ -0,0 +1,24 @@
+import { SVGProps } from "react";
+import { twMerge } from "tailwind-merge";
+
+export function AcrossIcon({ className, ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={twMerge("fill-aqua-100", className)}
+      {...props}
+    >
+      <rect width="32" height="32" rx="16" />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M6.95155 8.41964L8.51084 6.86035L14.7421 13.0917C14.364 13.2528 14.0097 13.4876 13.7012 13.7961C13.4623 14.035 13.2675 14.3014 13.117 14.5851L6.95155 8.41964ZM12.9996 17.4397L6.85938 23.5799L8.41866 25.1392L14.4964 19.0614C14.2104 18.9105 13.9419 18.7146 13.7012 18.474C13.3945 18.1673 13.1606 17.8154 12.9996 17.4397ZM17.5901 19.0582L23.5839 25.052L25.1432 23.4927L19.0835 17.433C18.9224 17.8112 18.6875 18.1655 18.379 18.474C18.1401 18.7129 17.8737 18.9076 17.5901 19.0582ZM18.9665 14.5913L25.051 8.50682L23.4917 6.94754L17.3448 13.0945C17.7204 13.2556 18.0724 13.4894 18.379 13.7961C18.6197 14.0368 18.8155 14.3053 18.9665 14.5913Z"
+        fill="#2D2E33"
+      />
+    </svg>
+  );
+}
diff --git a/src/app/_components/icons/gradient/arrow-up.tsx b/src/app/_components/icons/gradient/arrow-up.tsx
new file mode 100644
index 0000000..dd02336
--- /dev/null
+++ b/src/app/_components/icons/gradient/arrow-up.tsx
@@ -0,0 +1,124 @@
+import { SVGProps } from "react";
+
+export function ArrowUpIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="96"
+      height="96"
+      viewBox="0 0 96 96"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect width="96" height="25.7143" rx="6" fill="#44D2FF" fill-opacity="0.15" />
+      <rect
+        opacity="0.2"
+        y="70.2856"
+        width="96"
+        height="25.7143"
+        rx="6"
+        fill="#44D2FF"
+        fill-opacity="0.15"
+      />
+      <rect
+        opacity="0.5"
+        y="36"
+        width="96"
+        height="25.7143"
+        rx="6"
+        fill="#44D2FF"
+        fill-opacity="0.15"
+      />
+      <path
+        d="M38.5714 57.7152V48.2866H26L48 26.2866L70 48.2866H57.4286V57.7152H38.5714Z"
+        fill="#D9D9D9"
+      />
+      <path
+        d="M38.5714 57.7152V48.2866H26L48 26.2866L70 48.2866H57.4286V57.7152H38.5714Z"
+        fill="url(#paint0_linear_564_7320)"
+      />
+      <path
+        d="M38.5714 57.7152V48.2866H26L48 26.2866L70 48.2866H57.4286V57.7152H38.5714Z"
+        stroke="url(#paint1_linear_564_7320)"
+        stroke-width="5.14286"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path d="M38.5703 69.7153H57.4275H38.5703Z" fill="#D9D9D9" />
+      <path d="M38.5703 69.7153H57.4275H38.5703Z" fill="url(#paint2_linear_564_7320)" />
+      <path
+        d="M38.5703 69.7153H57.4275"
+        stroke="url(#paint3_linear_564_7320)"
+        stroke-width="5.14286"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_564_7320"
+          x1="48"
+          y1="26.2866"
+          x2="48"
+          y2="57.7152"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CD3F9" />
+          <stop offset="0.386534" stop-color="#B1EAFF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#00719A" />
+          <stop offset="0.620948" stop-color="#C1EEFF" />
+          <stop offset="0.708229" stop-color="#297B99" />
+          <stop offset="0.78803" stop-color="#ADE9FF" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_564_7320"
+          x1="48"
+          y1="26.2866"
+          x2="48"
+          y2="57.7152"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CD3F9" />
+          <stop offset="0.386534" stop-color="#B1EAFF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#00719A" />
+          <stop offset="0.620948" stop-color="#C1EEFF" />
+          <stop offset="0.708229" stop-color="#297B99" />
+          <stop offset="0.78803" stop-color="#ADE9FF" />
+        </linearGradient>
+        <linearGradient
+          id="paint2_linear_564_7320"
+          x1="47.9989"
+          y1="69.7153"
+          x2="47.9989"
+          y2="70.7153"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CD3F9" />
+          <stop offset="0.386534" stop-color="#B1EAFF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#00719A" />
+          <stop offset="0.620948" stop-color="#C1EEFF" />
+          <stop offset="0.708229" stop-color="#297B99" />
+          <stop offset="0.78803" stop-color="#ADE9FF" />
+        </linearGradient>
+        <linearGradient
+          id="paint3_linear_564_7320"
+          x1="47.9989"
+          y1="69.7153"
+          x2="47.9989"
+          y2="70.7153"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CD3F9" />
+          <stop offset="0.386534" stop-color="#B1EAFF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#00719A" />
+          <stop offset="0.620948" stop-color="#C1EEFF" />
+          <stop offset="0.708229" stop-color="#297B99" />
+          <stop offset="0.78803" stop-color="#ADE9FF" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
diff --git a/src/app/_components/icons/gradient/blocks-connected.tsx b/src/app/_components/icons/gradient/blocks-connected.tsx
new file mode 100644
index 0000000..a506132
--- /dev/null
+++ b/src/app/_components/icons/gradient/blocks-connected.tsx
@@ -0,0 +1,113 @@
+import { SVGProps } from "react";
+
+export function BlocksConnectedIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="96"
+      height="96"
+      viewBox="0 0 96 96"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect width="46.2857" height="25.7143" rx="6" fill="#AA81FF" fill-opacity="0.2" />
+      <rect
+        opacity="0.2"
+        y="70.2856"
+        width="46.2857"
+        height="25.7143"
+        rx="6"
+        fill="#AA81FF"
+        fill-opacity="0.2"
+      />
+      <rect
+        opacity="0.5"
+        x="46.2852"
+        y="36"
+        width="49.7143"
+        height="25.7143"
+        rx="6"
+        fill="#AA81FF"
+        fill-opacity="0.2"
+      />
+      <path
+        d="M34.2874 18.8569H22.8588C19.7029 18.8569 17.1445 21.4153 17.1445 24.5712V35.9998C17.1445 39.1557 19.7029 41.7141 22.8588 41.7141H34.2874C37.4433 41.7141 40.0017 39.1557 40.0017 35.9998V24.5712C40.0017 21.4153 37.4433 18.8569 34.2874 18.8569Z"
+        fill="#D9D9D9"
+      />
+      <path
+        d="M34.2874 18.8569H22.8588C19.7029 18.8569 17.1445 21.4153 17.1445 24.5712V35.9998C17.1445 39.1557 19.7029 41.7141 22.8588 41.7141H34.2874C37.4433 41.7141 40.0017 39.1557 40.0017 35.9998V24.5712C40.0017 21.4153 37.4433 18.8569 34.2874 18.8569Z"
+        fill="url(#paint0_linear_564_7341)"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M28.572 47.4272C30.1499 47.4272 31.4291 48.7064 31.4291 50.2844V61.713C31.4291 62.4707 31.7301 63.1974 32.266 63.7333C32.8018 64.2691 33.5285 64.5701 34.2863 64.5701H45.7148C47.2928 64.5701 48.572 65.8493 48.572 67.4272C48.572 69.0052 47.2928 70.2844 45.7148 70.2844H34.2863C32.013 70.2844 29.8328 69.3813 28.2254 67.7739C26.6179 66.1664 25.7148 63.9862 25.7148 61.713V50.2844C25.7148 48.7064 26.994 47.4272 28.572 47.4272Z"
+        fill="black"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M28.572 47.4272C30.1499 47.4272 31.4291 48.7064 31.4291 50.2844V61.713C31.4291 62.4707 31.7301 63.1974 32.266 63.7333C32.8018 64.2691 33.5285 64.5701 34.2863 64.5701H45.7148C47.2928 64.5701 48.572 65.8493 48.572 67.4272C48.572 69.0052 47.2928 70.2844 45.7148 70.2844H34.2863C32.013 70.2844 29.8328 69.3813 28.2254 67.7739C26.6179 66.1664 25.7148 63.9862 25.7148 61.713V50.2844C25.7148 48.7064 26.994 47.4272 28.572 47.4272Z"
+        fill="url(#paint1_linear_564_7341)"
+      />
+      <path
+        d="M71.428 55.9985H59.9994C56.8435 55.9985 54.2852 58.5569 54.2852 61.7128V73.1414C54.2852 76.2973 56.8435 78.8557 59.9994 78.8557H71.428C74.5839 78.8557 77.1423 76.2973 77.1423 73.1414V61.7128C77.1423 58.5569 74.5839 55.9985 71.428 55.9985Z"
+        fill="#D9D9D9"
+      />
+      <path
+        d="M71.428 55.9985H59.9994C56.8435 55.9985 54.2852 58.5569 54.2852 61.7128V73.1414C54.2852 76.2973 56.8435 78.8557 59.9994 78.8557H71.428C74.5839 78.8557 77.1423 76.2973 77.1423 73.1414V61.7128C77.1423 58.5569 74.5839 55.9985 71.428 55.9985Z"
+        fill="url(#paint2_linear_564_7341)"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_564_7341"
+          x1="28.5731"
+          y1="18.8569"
+          x2="28.5731"
+          y2="41.7141"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#A26CF9" />
+          <stop offset="0.386534" stop-color="#CEB1FF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#3B009A" />
+          <stop offset="0.620948" stop-color="#D8C1FF" />
+          <stop offset="0.708229" stop-color="#542999" />
+          <stop offset="0.78803" stop-color="#CCADFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_564_7341"
+          x1="37.1434"
+          y1="50.2844"
+          x2="37.1434"
+          y2="67.4272"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#A26CF9" />
+          <stop offset="0.386534" stop-color="#CEB1FF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#3B009A" />
+          <stop offset="0.620948" stop-color="#D8C1FF" />
+          <stop offset="0.708229" stop-color="#542999" />
+          <stop offset="0.78803" stop-color="#CCADFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint2_linear_564_7341"
+          x1="65.7137"
+          y1="55.9985"
+          x2="65.7137"
+          y2="78.8557"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#A26CF9" />
+          <stop offset="0.386534" stop-color="#CEB1FF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#3B009A" />
+          <stop offset="0.620948" stop-color="#D8C1FF" />
+          <stop offset="0.708229" stop-color="#542999" />
+          <stop offset="0.78803" stop-color="#CCADFF" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
diff --git a/src/app/_components/icons/gradient/blocks-diagonal.tsx b/src/app/_components/icons/gradient/blocks-diagonal.tsx
new file mode 100644
index 0000000..f90a0ba
--- /dev/null
+++ b/src/app/_components/icons/gradient/blocks-diagonal.tsx
@@ -0,0 +1,213 @@
+import { SVGProps } from "react";
+
+export function BlocksDiagonalIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="96"
+      height="96"
+      viewBox="0 0 96 96"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect
+        opacity="0.2"
+        width="25.5"
+        height="25.5"
+        rx="6"
+        fill="#6CF9D8"
+        fill-opacity="0.15"
+      />
+      <rect
+        opacity="0.2"
+        y="35.25"
+        width="25.5"
+        height="25.5"
+        rx="6"
+        fill="#6CF9D8"
+        fill-opacity="0.15"
+      />
+      <rect
+        y="70.5"
+        width="25.5"
+        height="25.5"
+        rx="6.48"
+        fill="url(#paint0_linear_564_7289)"
+      />
+      <rect
+        y="70.5"
+        width="25.5"
+        height="25.5"
+        rx="6.48"
+        fill="url(#paint1_linear_564_7289)"
+      />
+      <rect
+        opacity="0.2"
+        x="36"
+        width="25.5"
+        height="25.5"
+        rx="6"
+        fill="#6CF9D8"
+        fill-opacity="0.15"
+      />
+      <rect
+        x="36"
+        y="35.25"
+        width="25.5"
+        height="25.5"
+        rx="6.48"
+        fill="url(#paint2_linear_564_7289)"
+      />
+      <rect
+        x="36"
+        y="35.25"
+        width="25.5"
+        height="25.5"
+        rx="6.48"
+        fill="url(#paint3_linear_564_7289)"
+      />
+      <rect
+        opacity="0.2"
+        x="36"
+        y="70.5"
+        width="25.5"
+        height="25.5"
+        rx="6"
+        fill="#6CF9D8"
+        fill-opacity="0.15"
+      />
+      <rect
+        x="70.5"
+        width="25.5"
+        height="25.5"
+        rx="6.48"
+        fill="url(#paint4_linear_564_7289)"
+      />
+      <rect
+        x="70.5"
+        width="25.5"
+        height="25.5"
+        rx="6.48"
+        fill="url(#paint5_linear_564_7289)"
+      />
+      <rect
+        opacity="0.2"
+        x="70.5"
+        y="35.25"
+        width="25.5"
+        height="25.5"
+        rx="6"
+        fill="#6CF9D8"
+        fill-opacity="0.15"
+      />
+      <rect
+        opacity="0.2"
+        x="70.5"
+        y="70.5"
+        width="25.5"
+        height="25.5"
+        rx="6"
+        fill="#6CF9D8"
+        fill-opacity="0.15"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_564_7289"
+          x1="12.75"
+          y1="70.5"
+          x2="12.75"
+          y2="96"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#FDFDFD" />
+          <stop offset="0.386534" stop-color="#B6B6B6" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#9A9A9A" />
+          <stop offset="0.620948" stop-color="white" />
+          <stop offset="0.708229" stop-color="#999999" />
+          <stop offset="0.78803" stop-color="white" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_564_7289"
+          x1="12.75"
+          y1="70.5"
+          x2="12.75"
+          y2="96"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CF9D8" />
+          <stop offset="0.386534" stop-color="#B1FFED" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#009A76" />
+          <stop offset="0.620948" stop-color="#C1FFF0" />
+          <stop offset="0.708229" stop-color="#29997F" />
+          <stop offset="0.78803" stop-color="#ADFFEC" />
+        </linearGradient>
+        <linearGradient
+          id="paint2_linear_564_7289"
+          x1="48.75"
+          y1="35.25"
+          x2="48.75"
+          y2="60.75"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#FDFDFD" />
+          <stop offset="0.386534" stop-color="#B6B6B6" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#9A9A9A" />
+          <stop offset="0.620948" stop-color="white" />
+          <stop offset="0.708229" stop-color="#999999" />
+          <stop offset="0.78803" stop-color="white" />
+        </linearGradient>
+        <linearGradient
+          id="paint3_linear_564_7289"
+          x1="48.75"
+          y1="35.25"
+          x2="48.75"
+          y2="60.75"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CF9D8" />
+          <stop offset="0.386534" stop-color="#B1FFED" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#009A76" />
+          <stop offset="0.620948" stop-color="#C1FFF0" />
+          <stop offset="0.708229" stop-color="#29997F" />
+          <stop offset="0.78803" stop-color="#ADFFEC" />
+        </linearGradient>
+        <linearGradient
+          id="paint4_linear_564_7289"
+          x1="83.25"
+          y1="0"
+          x2="83.25"
+          y2="25.5"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#FDFDFD" />
+          <stop offset="0.386534" stop-color="#B6B6B6" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#9A9A9A" />
+          <stop offset="0.620948" stop-color="white" />
+          <stop offset="0.708229" stop-color="#999999" />
+          <stop offset="0.78803" stop-color="white" />
+        </linearGradient>
+        <linearGradient
+          id="paint5_linear_564_7289"
+          x1="83.25"
+          y1="0"
+          x2="83.25"
+          y2="25.5"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CF9D8" />
+          <stop offset="0.386534" stop-color="#B1FFED" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#009A76" />
+          <stop offset="0.620948" stop-color="#C1FFF0" />
+          <stop offset="0.708229" stop-color="#29997F" />
+          <stop offset="0.78803" stop-color="#ADFFEC" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
diff --git a/src/app/_components/icons/gradient/bridge.tsx b/src/app/_components/icons/gradient/bridge.tsx
new file mode 100644
index 0000000..a32e625
--- /dev/null
+++ b/src/app/_components/icons/gradient/bridge.tsx
@@ -0,0 +1,44 @@
+import { SVGProps } from "react";
+
+export function BridgeIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="40"
+      height="40"
+      viewBox="0 0 40 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g clip-path="url(#clip0_564_7547)">
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M20 8C13.5428 8 8 13.5332 8 20.7477V36C8 38.2091 6.20914 40 4 40C1.79086 40 0 38.2091 0 36V20.7477C0 9.46317 8.78411 0 20 0C31.2159 0 40 9.46317 40 20.7477V36C40 38.2091 38.2091 40 36 40C33.7909 40 32 38.2091 32 36V20.7477C32 13.5332 26.4572 8 20 8Z"
+          fill="url(#paint0_linear_564_7547)"
+        />
+      </g>
+      <defs>
+        <linearGradient
+          id="paint0_linear_564_7547"
+          x1="20"
+          y1="-10.9706"
+          x2="20"
+          y2="50.1865"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CF9D8" />
+          <stop offset="0.386534" stop-color="#B1FFED" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#009A76" />
+          <stop offset="0.620948" stop-color="#C1FFF0" />
+          <stop offset="0.708229" stop-color="#29997F" />
+          <stop offset="0.78803" stop-color="#ADFFEC" />
+        </linearGradient>
+        <clipPath id="clip0_564_7547">
+          <rect width="40" height="40" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/src/app/_components/icons/gradient/chat.tsx b/src/app/_components/icons/gradient/chat.tsx
new file mode 100644
index 0000000..1e36cac
--- /dev/null
+++ b/src/app/_components/icons/gradient/chat.tsx
@@ -0,0 +1,125 @@
+import { SVGProps } from "react";
+import { twMerge } from "tailwind-merge";
+
+type Variant = "light" | "aqua" | "teal";
+
+type Props = SVGProps<SVGSVGElement> & {
+  variant?: Variant;
+};
+
+export function ChatIcon({ variant = "aqua", className, ...props }: Props) {
+  const linearGradientId = `paint_linear_gradient_${variant}`;
+  return (
+    <svg
+      width="96"
+      height="96"
+      viewBox="0 0 96 96"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={twMerge(
+        variant === "aqua"
+          ? "fill-aqua-100"
+          : variant === "teal"
+            ? "fill-teal-100"
+            : "fill-light-100",
+        className,
+      )}
+      {...props}
+    >
+      <rect width="25.5" height="25.5" rx="6" fill-opacity="0.15" />
+      <rect
+        opacity="0.5"
+        y="35.25"
+        width="25.5"
+        height="25.5"
+        rx="6"
+        fill-opacity="0.15"
+      />
+      <rect
+        opacity="0.2"
+        y="70.5"
+        width="25.5"
+        height="25.5"
+        rx="6"
+        fill-opacity="0.15"
+      />
+      <rect x="70.5" width="25.5" height="25.5" rx="6" fill-opacity="0.15" />
+      <rect
+        opacity="0.5"
+        x="70.5"
+        y="35.25"
+        width="25.5"
+        height="25.5"
+        rx="6"
+        fill-opacity="0.15"
+      />
+      <rect
+        opacity="0.2"
+        x="70.5"
+        y="70.5"
+        width="25.5"
+        height="25.5"
+        rx="6"
+        fill-opacity="0.15"
+      />
+      <path
+        d="M36.0226 71.8907C36.4069 71.7604 36.8268 71.7932 37.192 71.9703C43.0818 74.8273 49.7849 75.5654 56.166 74.0473C62.7531 72.4801 68.564 68.6118 72.5514 63.1393C76.5388 57.6669 78.4405 50.9503 77.9139 44.1998C77.3873 37.4492 74.4669 31.1088 69.6791 26.3209C64.8912 21.5331 58.5508 18.6127 51.8003 18.0861C45.0497 17.5595 38.3331 19.4612 32.8607 23.4486C27.3882 27.436 23.5199 33.2469 21.9528 39.834C20.4346 46.2151 21.1727 52.9182 24.0297 58.808C24.2068 59.1732 24.2396 59.5931 24.1094 59.9774L18.9755 75.1224C18.5764 76.2997 19.7003 77.4236 20.8776 77.0245L36.0226 71.8907Z"
+        fill={`url(#${linearGradientId})`}
+      />
+      <path
+        d="M36.0226 71.8907C36.4069 71.7604 36.8268 71.7932 37.192 71.9703C43.0818 74.8273 49.7849 75.5654 56.166 74.0473C62.7531 72.4801 68.564 68.6118 72.5514 63.1393C76.5388 57.6669 78.4405 50.9503 77.9139 44.1998C77.3873 37.4492 74.4669 31.1088 69.6791 26.3209C64.8912 21.5331 58.5508 18.6127 51.8003 18.0861C45.0497 17.5595 38.3331 19.4612 32.8607 23.4486C27.3882 27.436 23.5199 33.2469 21.9528 39.834C20.4346 46.2151 21.1727 52.9182 24.0297 58.808C24.2068 59.1732 24.2396 59.5931 24.1094 59.9774L18.9755 75.1224C18.5764 76.2997 19.7003 77.4236 20.8776 77.0245L36.0226 71.8907Z"
+        fill={`url(#${linearGradientId})`}
+      />
+      <defs>
+        <linearGradient
+          id="paint_linear_gradient_light"
+          x1="48"
+          y1="18"
+          x2="48"
+          y2="78"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#FDFDFD" />
+          <stop offset="0.386534" stop-color="#B6B6B6" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#9A9A9A" />
+          <stop offset="0.620948" stop-color="white" />
+          <stop offset="0.708229" stop-color="#999999" />
+          <stop offset="0.78803" stop-color="white" />
+        </linearGradient>
+        <linearGradient
+          id="paint_linear_gradient_aqua"
+          x1="48"
+          y1="18"
+          x2="48"
+          y2="78"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CF9D8" />
+          <stop offset="0.386534" stop-color="#B1FFED" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#009A76" />
+          <stop offset="0.620948" stop-color="#C1FFF0" />
+          <stop offset="0.708229" stop-color="#29997F" />
+          <stop offset="0.78803" stop-color="#ADFFEC" />
+        </linearGradient>
+        <linearGradient
+          id="paint_linear_gradient_teal"
+          x1="48"
+          y1="18"
+          x2="48"
+          y2="78"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CD3F9" />
+          <stop offset="0.386534" stop-color="#B1EAFF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#00719A" />
+          <stop offset="0.620948" stop-color="#C1EEFF" />
+          <stop offset="0.708229" stop-color="#297B99" />
+          <stop offset="0.78803" stop-color="#ADE9FF" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
diff --git a/src/app/_components/icons/gradient/checklist.tsx b/src/app/_components/icons/gradient/checklist.tsx
new file mode 100644
index 0000000..f4efdf8
--- /dev/null
+++ b/src/app/_components/icons/gradient/checklist.tsx
@@ -0,0 +1,154 @@
+import { SVGProps } from "react";
+
+export function ChecklistIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="96"
+      height="96"
+      viewBox="0 0 96 96"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect width="25.5" height="25.5" rx="6" fill="#AA81FF" fill-opacity="0.2" />
+      <rect
+        opacity="0.5"
+        y="35.25"
+        width="25.5"
+        height="25.5"
+        rx="6"
+        fill="#AA81FF"
+        fill-opacity="0.2"
+      />
+      <rect
+        opacity="0.2"
+        y="70.5"
+        width="25.5"
+        height="25.5"
+        rx="6"
+        fill="#AA81FF"
+        fill-opacity="0.2"
+      />
+      <rect
+        x="70.5"
+        width="25.5"
+        height="25.5"
+        rx="6"
+        fill="#AA81FF"
+        fill-opacity="0.2"
+      />
+      <rect
+        opacity="0.5"
+        x="70.5"
+        y="35.25"
+        width="25.5"
+        height="25.5"
+        rx="6"
+        fill="#AA81FF"
+        fill-opacity="0.2"
+      />
+      <rect
+        opacity="0.2"
+        x="70.5"
+        y="70.5"
+        width="25.5"
+        height="25.5"
+        rx="6"
+        fill="#AA81FF"
+        fill-opacity="0.2"
+      />
+      <path
+        d="M39.4297 46.8594L45.7154 53.1452L58.2868 40.5737"
+        stroke="black"
+        stroke-width="6.28571"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M39.4297 46.8594L45.7154 53.1452L58.2868 40.5737"
+        stroke="url(#paint0_linear_564_7356)"
+        stroke-width="6.28571"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M39.4297 12.8585L45.7154 19.1442L58.2868 6.57275"
+        stroke="black"
+        stroke-width="6.28571"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M39.4297 12.8585L45.7154 19.1442L58.2868 6.57275"
+        stroke="url(#paint1_linear_564_7356)"
+        stroke-width="6.28571"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M39.4297 81.4298L45.7154 87.7155L58.2868 75.144"
+        stroke="black"
+        stroke-width="6.28571"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M39.4297 81.4298L45.7154 87.7155L58.2868 75.144"
+        stroke="url(#paint2_linear_564_7356)"
+        stroke-width="6.28571"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_564_7356"
+          x1="48.8583"
+          y1="40.5737"
+          x2="48.8583"
+          y2="53.1452"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#A26CF9" />
+          <stop offset="0.386534" stop-color="#CEB1FF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#3B009A" />
+          <stop offset="0.620948" stop-color="#D8C1FF" />
+          <stop offset="0.708229" stop-color="#542999" />
+          <stop offset="0.78803" stop-color="#CCADFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_564_7356"
+          x1="48.8583"
+          y1="6.57275"
+          x2="48.8583"
+          y2="19.1442"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#A26CF9" />
+          <stop offset="0.386534" stop-color="#CEB1FF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#3B009A" />
+          <stop offset="0.620948" stop-color="#D8C1FF" />
+          <stop offset="0.708229" stop-color="#542999" />
+          <stop offset="0.78803" stop-color="#CCADFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint2_linear_564_7356"
+          x1="48.8583"
+          y1="75.144"
+          x2="48.8583"
+          y2="87.7155"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#A26CF9" />
+          <stop offset="0.386534" stop-color="#CEB1FF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#3B009A" />
+          <stop offset="0.620948" stop-color="#D8C1FF" />
+          <stop offset="0.708229" stop-color="#542999" />
+          <stop offset="0.78803" stop-color="#CCADFF" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
diff --git a/src/app/_components/icons/gradient/checkmark-simple.tsx b/src/app/_components/icons/gradient/checkmark-simple.tsx
new file mode 100644
index 0000000..84a21b0
--- /dev/null
+++ b/src/app/_components/icons/gradient/checkmark-simple.tsx
@@ -0,0 +1,44 @@
+import { SVGProps } from "react";
+
+export function CheckmarkSimpleIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="41"
+      height="32"
+      viewBox="0 0 41 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g clip-path="url(#clip0_564_7554)">
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M39.0718 0.852012C40.5489 2.12144 40.7173 4.34798 39.4479 5.82513L18.7849 29.8693C16.3435 32.7102 11.9454 32.7102 9.50402 29.8693L1.18404 20.1879C-0.0853831 18.7107 0.0830108 16.4842 1.56016 15.2148C3.03731 13.9453 5.26385 14.1137 6.53328 15.5909L14.1445 24.4475L34.0987 1.22813C35.3681 -0.24902 37.5946 -0.417414 39.0718 0.852012Z"
+          fill="url(#paint0_linear_564_7554)"
+        />
+      </g>
+      <defs>
+        <linearGradient
+          id="paint0_linear_564_7554"
+          x1="20.316"
+          y1="3.52663"
+          x2="39.7227"
+          y2="22.9333"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#A26CF9" />
+          <stop offset="0.386534" stop-color="#CEB1FF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#3B009A" />
+          <stop offset="0.620948" stop-color="#D8C1FF" />
+          <stop offset="0.708229" stop-color="#542999" />
+          <stop offset="0.78803" stop-color="#CCADFF" />
+        </linearGradient>
+        <clipPath id="clip0_564_7554">
+          <rect width="41" height="32" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/src/app/_components/icons/gradient/checkmark.tsx b/src/app/_components/icons/gradient/checkmark.tsx
new file mode 100644
index 0000000..37cfe97
--- /dev/null
+++ b/src/app/_components/icons/gradient/checkmark.tsx
@@ -0,0 +1,56 @@
+import { SVGProps } from "react";
+
+export function CheckmarkIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="96"
+      height="96"
+      viewBox="0 0 96 96"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        opacity="0.5"
+        width="96"
+        height="96"
+        rx="48"
+        fill="url(#paint0_linear_564_7350)"
+        fill-opacity="0.2"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M26.0561 33.4301C25.5439 35.1849 25.4831 37.0406 25.8792 38.8252C24.332 39.8044 23.0575 41.159 22.1744 42.7631C21.2912 44.3671 20.8281 46.1684 20.8281 47.9995C20.8281 49.8306 21.2912 51.6319 22.1744 53.2359C23.0575 54.84 24.332 56.1946 25.8792 57.1738C25.4831 58.9584 25.5439 60.8141 26.0561 62.5689C26.5683 64.3237 27.5153 65.9207 28.8092 67.212C30.1032 68.5032 31.7022 69.4468 33.4581 69.9554C35.2139 70.4639 37.0698 70.5208 38.8535 70.1209C39.834 71.6623 41.1876 72.9313 42.7889 73.8105C44.3902 74.6897 46.1874 75.1506 48.0142 75.1506C49.841 75.1506 51.6383 74.6897 53.2396 73.8105C54.8409 72.9313 56.1944 71.6623 57.1749 70.1209C58.9595 70.5171 60.8152 70.4563 62.57 69.9441C64.3248 69.4319 65.9219 68.4849 67.2131 67.1909C68.5044 65.897 69.448 64.2979 69.9565 62.5421C70.4651 60.7862 70.522 58.9304 70.1221 57.1466C71.6576 56.1649 72.9212 54.8123 73.7965 53.2138C74.6717 51.6152 75.1305 49.822 75.1305 47.9995C75.1305 46.177 74.6717 44.3838 73.7965 42.7852C72.9212 41.1866 71.6576 39.8341 70.1221 38.8524C70.5237 37.0659 70.4671 35.2069 69.9573 33.4482C69.4475 31.6896 68.5013 30.0884 67.2065 28.7936C65.9118 27.4989 64.3106 26.5526 62.5519 26.0429C60.7933 25.5331 58.9343 25.4764 57.1478 25.8781C56.166 24.3426 54.8135 23.079 53.2149 22.2037C51.6164 21.3284 49.8232 20.8696 48.0007 20.8696C46.1782 20.8696 44.385 21.3284 42.7864 22.2037C41.1878 23.079 39.8353 24.3426 38.8535 25.8781C37.0698 25.4782 35.2139 25.5351 33.4581 26.0436C31.7022 26.5521 30.1032 27.4958 28.8092 28.787C27.5153 30.0783 26.5683 31.6753 26.0561 33.4301ZM62.321 43.3234C63.7343 41.9101 63.7343 39.6186 62.321 38.2053C60.9076 36.792 58.6162 36.792 57.2029 38.2053L45.2857 50.1224L40.6067 45.4434C39.1933 44.0301 36.9019 44.0301 35.4886 45.4434C34.0752 46.8567 34.0752 49.1482 35.4886 50.5615L42.7267 57.7996C44.14 59.2129 46.4314 59.2129 47.8448 57.7996L62.321 43.3234Z"
+        fill="url(#paint1_linear_564_7350)"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_564_7350"
+          x1="48"
+          y1="0"
+          x2="48"
+          y2="96"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#AA81FF" />
+          <stop offset="1" stop-color="#AA81FF" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_564_7350"
+          x1="47.9793"
+          y1="20.8696"
+          x2="47.9793"
+          y2="82.2859"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#A26CF9" />
+          <stop offset="0.386534" stop-color="#CEB1FF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.620948" stop-color="#D8C1FF" />
+          <stop offset="0.708229" stop-color="#542999" />
+          <stop offset="0.78803" stop-color="#CCADFF" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
diff --git a/src/app/_components/icons/gradient/code.tsx b/src/app/_components/icons/gradient/code.tsx
new file mode 100644
index 0000000..a5b02e5
--- /dev/null
+++ b/src/app/_components/icons/gradient/code.tsx
@@ -0,0 +1,116 @@
+import { SVGProps } from "react";
+
+export function CodeIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="102"
+      height="98"
+      viewBox="0 0 102 98"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect
+        x="2"
+        width="61.7143"
+        height="25.7143"
+        rx="6"
+        fill="#6CF9D8"
+        fill-opacity="0.15"
+      />
+      <rect
+        x="2"
+        y="36"
+        width="61.7143"
+        height="24"
+        rx="6"
+        fill="#6CF9D8"
+        fill-opacity="0.15"
+      />
+      <rect
+        x="2"
+        y="70.2856"
+        width="96"
+        height="25.7143"
+        rx="6"
+        fill="#6CF9D8"
+        fill-opacity="0.15"
+      />
+      <rect
+        x="72.5"
+        width="25.5"
+        height="25.5"
+        rx="6"
+        fill="#6CF9D8"
+        fill-opacity="0.15"
+      />
+      <g filter="url(#filter0_d_564_7383)">
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M61.795 23.7251C62.3234 22.0341 61.381 20.2349 59.69 19.7064C57.999 19.178 56.1997 20.1205 55.6713 21.8115L39.6321 73.137C39.1036 74.828 40.0461 76.6272 41.7371 77.1557C43.4281 77.6841 45.2273 76.7417 45.7557 75.0507L61.795 23.7251ZM33.7333 33.3303C34.9861 34.5831 34.9861 36.6142 33.7333 37.8669L23.1702 48.43L33.7333 58.9931C34.9861 60.2459 34.9861 62.277 33.7333 63.5297C32.4806 64.7824 30.4495 64.7824 29.1967 63.5297L16.3653 50.6983C15.1126 49.4456 15.1126 47.4145 16.3653 46.1617L29.1967 33.3303C30.4495 32.0776 32.4806 32.0776 33.7333 33.3303ZM67.6901 33.3303C68.9429 32.0776 70.974 32.0776 72.2267 33.3303L85.0581 46.1617C86.3109 47.4145 86.3109 49.4456 85.0581 50.6983L72.2267 63.5297C70.974 64.7824 68.9429 64.7824 67.6901 63.5297C66.4374 62.277 66.4374 60.2459 67.6901 58.9931L78.2532 48.43L67.6901 37.8669C66.4374 36.6142 66.4374 34.5831 67.6901 33.3303Z"
+          fill="black"
+        />
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M61.795 23.7251C62.3234 22.0341 61.381 20.2349 59.69 19.7064C57.999 19.178 56.1997 20.1205 55.6713 21.8115L39.6321 73.137C39.1036 74.828 40.0461 76.6272 41.7371 77.1557C43.4281 77.6841 45.2273 76.7417 45.7557 75.0507L61.795 23.7251ZM33.7333 33.3303C34.9861 34.5831 34.9861 36.6142 33.7333 37.8669L23.1702 48.43L33.7333 58.9931C34.9861 60.2459 34.9861 62.277 33.7333 63.5297C32.4806 64.7824 30.4495 64.7824 29.1967 63.5297L16.3653 50.6983C15.1126 49.4456 15.1126 47.4145 16.3653 46.1617L29.1967 33.3303C30.4495 32.0776 32.4806 32.0776 33.7333 33.3303ZM67.6901 33.3303C68.9429 32.0776 70.974 32.0776 72.2267 33.3303L85.0581 46.1617C86.3109 47.4145 86.3109 49.4456 85.0581 50.6983L72.2267 63.5297C70.974 64.7824 68.9429 64.7824 67.6901 63.5297C66.4374 62.277 66.4374 60.2459 67.6901 58.9931L78.2532 48.43L67.6901 37.8669C66.4374 36.6142 66.4374 34.5831 67.6901 33.3303Z"
+          fill="url(#paint0_linear_564_7383)"
+        />
+      </g>
+      <defs>
+        <filter
+          id="filter0_d_564_7383"
+          x="0.171124"
+          y="9.3898"
+          width="101.08"
+          height="88.2525"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dy="5.08489" />
+          <feGaussianBlur stdDeviation="7.62733" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="BackgroundImageFix"
+            result="effect1_dropShadow_564_7383"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_dropShadow_564_7383"
+            result="shape"
+          />
+        </filter>
+        <linearGradient
+          id="paint0_linear_564_7383"
+          x1="50.7118"
+          y1="19.5596"
+          x2="50.7118"
+          y2="77.3025"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CF9D8" />
+          <stop offset="0.386534" stop-color="#B1FFED" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#009A76" />
+          <stop offset="0.620948" stop-color="#C1FFF0" />
+          <stop offset="0.708229" stop-color="#29997F" />
+          <stop offset="0.78803" stop-color="#ADFFEC" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
diff --git a/src/app/_components/icons/gradient/cross-chain.tsx b/src/app/_components/icons/gradient/cross-chain.tsx
new file mode 100644
index 0000000..c74c331
--- /dev/null
+++ b/src/app/_components/icons/gradient/cross-chain.tsx
@@ -0,0 +1,125 @@
+import { SVGProps } from "react";
+
+export function CrossChainIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="96"
+      height="96"
+      viewBox="0 0 96 96"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="25.5" height="25.5" rx="6" fill="#AA81FF" fill-opacity="0.2" />
+      <rect
+        opacity="0.5"
+        y="35.25"
+        width="25.5"
+        height="25.5"
+        rx="6"
+        fill="#AA81FF"
+        fill-opacity="0.2"
+      />
+      <rect
+        opacity="0.2"
+        y="70.5"
+        width="25.5"
+        height="25.5"
+        rx="6"
+        fill="#AA81FF"
+        fill-opacity="0.2"
+      />
+      <rect
+        x="70.5"
+        width="25.5"
+        height="25.5"
+        rx="6"
+        fill="#AA81FF"
+        fill-opacity="0.2"
+      />
+      <rect
+        opacity="0.5"
+        x="70.5"
+        y="35.25"
+        width="25.5"
+        height="25.5"
+        rx="6"
+        fill="#AA81FF"
+        fill-opacity="0.2"
+      />
+      <rect
+        opacity="0.2"
+        x="70.5"
+        y="70.5"
+        width="25.5"
+        height="25.5"
+        rx="6"
+        fill="#AA81FF"
+        fill-opacity="0.2"
+      />
+      <rect x="36" width="25.5" height="25.5" rx="6" fill="#AA81FF" fill-opacity="0.2" />
+      <rect x="36" y="35.25" width="25.5" height="25.5" rx="12.75" fill="#D9D9D9" />
+      <rect
+        x="36"
+        y="35.25"
+        width="25.5"
+        height="25.5"
+        rx="12.75"
+        fill="url(#paint0_linear_564_7369)"
+      />
+      <rect
+        opacity="0.2"
+        x="36"
+        y="70.5"
+        width="25.5"
+        height="25.5"
+        rx="6"
+        fill="#AA81FF"
+        fill-opacity="0.2"
+      />
+      <circle
+        cx="48.8583"
+        cy="48.8573"
+        r="28.2857"
+        stroke="url(#paint1_linear_564_7369)"
+        strokeWidth="10.2857"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeDasharray="123.43 123.43"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_564_7369"
+          x1="48.75"
+          y1="35.25"
+          x2="48.75"
+          y2="60.75"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#A26CF9" />
+          <stop offset="0.386534" stop-color="#CEB1FF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#3B009A" />
+          <stop offset="0.620948" stop-color="#D8C1FF" />
+          <stop offset="0.708229" stop-color="#542999" />
+          <stop offset="0.78803" stop-color="#CCADFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_564_7369"
+          x1="48.8583"
+          y1="15.4287"
+          x2="48.8583"
+          y2="82.2859"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#A26CF9" />
+          <stop offset="0.386534" stop-color="#CEB1FF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#3B009A" />
+          <stop offset="0.620948" stop-color="#D8C1FF" />
+          <stop offset="0.708229" stop-color="#542999" />
+          <stop offset="0.78803" stop-color="#CCADFF" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
diff --git a/src/app/_components/icons/gradient/dollar.tsx b/src/app/_components/icons/gradient/dollar.tsx
new file mode 100644
index 0000000..f840eff
--- /dev/null
+++ b/src/app/_components/icons/gradient/dollar.tsx
@@ -0,0 +1,74 @@
+import { SVGProps } from "react";
+
+export function DollarIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="96"
+      height="96"
+      viewBox="0 0 96 96"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect width="61.7143" height="25.7143" rx="6" fill="#6CF9D8" fill-opacity="0.15" />
+      <rect
+        opacity="0.5"
+        y="35.3569"
+        width="25.5"
+        height="25.5"
+        rx="6"
+        fill="#6CF9D8"
+        fill-opacity="0.15"
+      />
+      <rect
+        opacity="0.5"
+        x="70.5"
+        y="35.1431"
+        width="25.5"
+        height="25.5"
+        rx="6"
+        fill="#6CF9D8"
+        fill-opacity="0.15"
+      />
+      <rect
+        x="36"
+        y="70.2856"
+        width="60"
+        height="25.7143"
+        rx="6"
+        fill="#6CF9D8"
+        fill-opacity="0.15"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M51.4297 18.4292C51.4297 16.7723 50.0865 15.4292 48.4297 15.4292C46.7728 15.4292 45.4297 16.7723 45.4297 18.4292V24.4292H40.9297C37.3493 24.4292 33.9155 25.8515 31.3837 28.3833C28.852 30.915 27.4297 34.3488 27.4297 37.9292C27.4297 41.5096 28.852 44.9434 31.3837 47.4751C33.9155 50.0069 37.3493 51.4292 40.9297 51.4292H45.4297V66.4292H30.4297C28.7728 66.4292 27.4297 67.7723 27.4297 69.4292C27.4297 71.0861 28.7728 72.4292 30.4297 72.4292H45.4297V78.4292C45.4297 80.0861 46.7728 81.4292 48.4297 81.4292C50.0865 81.4292 51.4297 80.0861 51.4297 78.4292V72.4292H55.9297C59.5101 72.4292 62.9439 71.0069 65.4756 68.4751C68.0074 65.9434 69.4297 62.5096 69.4297 58.9292C69.4297 55.3488 68.0074 51.915 65.4756 49.3833C62.9439 46.8515 59.5101 45.4292 55.9297 45.4292H51.4297V30.4292H63.4297C65.0865 30.4292 66.4297 29.0861 66.4297 27.4292C66.4297 25.7723 65.0865 24.4292 63.4297 24.4292H51.4297V18.4292ZM45.4297 30.4292H40.9297C38.9406 30.4292 37.0329 31.2194 35.6264 32.6259C34.2199 34.0324 33.4297 35.9401 33.4297 37.9292C33.4297 39.9183 34.2199 41.826 35.6264 43.2325C37.0329 44.639 38.9406 45.4292 40.9297 45.4292H45.4297V30.4292ZM51.4297 51.4292V66.4292H55.9297C57.9188 66.4292 59.8265 65.639 61.233 64.2325C62.6395 62.826 63.4297 60.9183 63.4297 58.9292C63.4297 56.9401 62.6395 55.0324 61.233 53.6259C59.8265 52.2194 57.9188 51.4292 55.9297 51.4292H51.4297Z"
+        fill="black"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M51.4297 18.4292C51.4297 16.7723 50.0865 15.4292 48.4297 15.4292C46.7728 15.4292 45.4297 16.7723 45.4297 18.4292V24.4292H40.9297C37.3493 24.4292 33.9155 25.8515 31.3837 28.3833C28.852 30.915 27.4297 34.3488 27.4297 37.9292C27.4297 41.5096 28.852 44.9434 31.3837 47.4751C33.9155 50.0069 37.3493 51.4292 40.9297 51.4292H45.4297V66.4292H30.4297C28.7728 66.4292 27.4297 67.7723 27.4297 69.4292C27.4297 71.0861 28.7728 72.4292 30.4297 72.4292H45.4297V78.4292C45.4297 80.0861 46.7728 81.4292 48.4297 81.4292C50.0865 81.4292 51.4297 80.0861 51.4297 78.4292V72.4292H55.9297C59.5101 72.4292 62.9439 71.0069 65.4756 68.4751C68.0074 65.9434 69.4297 62.5096 69.4297 58.9292C69.4297 55.3488 68.0074 51.915 65.4756 49.3833C62.9439 46.8515 59.5101 45.4292 55.9297 45.4292H51.4297V30.4292H63.4297C65.0865 30.4292 66.4297 29.0861 66.4297 27.4292C66.4297 25.7723 65.0865 24.4292 63.4297 24.4292H51.4297V18.4292ZM45.4297 30.4292H40.9297C38.9406 30.4292 37.0329 31.2194 35.6264 32.6259C34.2199 34.0324 33.4297 35.9401 33.4297 37.9292C33.4297 39.9183 34.2199 41.826 35.6264 43.2325C37.0329 44.639 38.9406 45.4292 40.9297 45.4292H45.4297V30.4292ZM51.4297 51.4292V66.4292H55.9297C57.9188 66.4292 59.8265 65.639 61.233 64.2325C62.6395 62.826 63.4297 60.9183 63.4297 58.9292C63.4297 56.9401 62.6395 55.0324 61.233 53.6259C59.8265 52.2194 57.9188 51.4292 55.9297 51.4292H51.4297Z"
+        fill="url(#paint0_linear_564_7429)"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_564_7429"
+          x1="48.4297"
+          y1="15.4292"
+          x2="48.4297"
+          y2="81.4292"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CF9D8" />
+          <stop offset="0.386534" stop-color="#B1FFED" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#009A76" />
+          <stop offset="0.620948" stop-color="#C1FFF0" />
+          <stop offset="0.708229" stop-color="#29997F" />
+          <stop offset="0.78803" stop-color="#ADFFEC" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
diff --git a/src/app/_components/icons/gradient/double-chevron-right.tsx b/src/app/_components/icons/gradient/double-chevron-right.tsx
new file mode 100644
index 0000000..9b759cc
--- /dev/null
+++ b/src/app/_components/icons/gradient/double-chevron-right.tsx
@@ -0,0 +1,123 @@
+import { SVGProps } from "react";
+
+export function DoubleChevronRightIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="96"
+      height="96"
+      viewBox="0 0 96 96"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        opacity="0.5"
+        y="35.25"
+        width="25.5"
+        height="25.5"
+        rx="6"
+        fill="#6CF9D8"
+        fill-opacity="0.15"
+      />
+      <rect
+        opacity="0.5"
+        x="70.5"
+        y="35.25"
+        width="25.5"
+        height="25.5"
+        rx="6"
+        fill="#6CF9D8"
+        fill-opacity="0.15"
+      />
+      <rect
+        x="36.2148"
+        width="25.5"
+        height="25.5"
+        rx="6"
+        fill="#6CF9D8"
+        fill-opacity="0.15"
+      />
+      <rect
+        opacity="0.5"
+        x="36.2148"
+        y="35.25"
+        width="25.5"
+        height="25.5"
+        rx="6"
+        fill="#6CF9D8"
+        fill-opacity="0.15"
+      />
+      <rect
+        opacity="0.2"
+        x="36.2148"
+        y="70.5"
+        width="25.5"
+        height="25.5"
+        rx="6"
+        fill="#6CF9D8"
+        fill-opacity="0.15"
+      />
+      <path
+        d="M52 68.001L72 48.001L52 28.001"
+        stroke="black"
+        stroke-width="8"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M52 68.001L72 48.001L52 28.001"
+        stroke="url(#paint0_linear_564_7414)"
+        stroke-width="8"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M24 68.001L44 48.001L24 28.001"
+        stroke="black"
+        stroke-width="8"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M24 68.001L44 48.001L24 28.001"
+        stroke="url(#paint1_linear_564_7414)"
+        stroke-width="8"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_564_7414"
+          x1="72"
+          y1="48.001"
+          x2="52"
+          y2="48.001"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CF9D8" />
+          <stop offset="0.386534" stop-color="#B1FFED" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#009A76" />
+          <stop offset="0.620948" stop-color="#C1FFF0" />
+          <stop offset="0.708229" stop-color="#29997F" />
+          <stop offset="0.78803" stop-color="#ADFFEC" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_564_7414"
+          x1="44"
+          y1="48.001"
+          x2="24"
+          y2="48.001"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CF9D8" />
+          <stop offset="0.386534" stop-color="#B1FFED" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#009A76" />
+          <stop offset="0.620948" stop-color="#C1FFF0" />
+          <stop offset="0.708229" stop-color="#29997F" />
+          <stop offset="0.78803" stop-color="#ADFFEC" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
diff --git a/src/app/_components/icons/gradient/feather.tsx b/src/app/_components/icons/gradient/feather.tsx
new file mode 100644
index 0000000..0002218
--- /dev/null
+++ b/src/app/_components/icons/gradient/feather.tsx
@@ -0,0 +1,107 @@
+import { SVGProps } from "react";
+
+export function FeatherIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="104"
+      height="96"
+      viewBox="0 0 104 96"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M20.1429 5.14307H16.7143C14.8957 5.14307 13.1515 6.14646 11.8656 7.93253C10.5796 9.71859 9.85714 12.141 9.85714 14.6669V38.4764C9.85714 41.0023 9.1347 43.4247 7.84873 45.2107C6.56277 46.9968 4.81863 48.0002 3 48.0002C4.81863 48.0002 6.56277 49.0036 7.84873 50.7897C9.1347 52.5757 9.85714 54.9981 9.85714 57.524V81.3335C9.85714 86.5716 12.9429 90.8574 16.7143 90.8574H20.1429"
+        stroke="url(#paint0_linear_564_7302)"
+        stroke-opacity="0.15"
+        stroke-width="5.14286"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M71.6183 48.619C74.5133 45.724 76.1397 41.7975 76.1397 37.7033C76.1397 33.6091 74.5133 29.6826 71.6183 26.7876C68.7232 23.8925 64.7967 22.2661 60.7025 22.2661C56.6084 22.2661 52.6819 23.8925 49.7868 26.7876L34.5988 41.9756C33.2099 43.3645 32.4297 45.2481 32.4297 47.2122V58.5961C32.4297 62.6862 35.7453 66.0018 39.8354 66.0018H51.2129C53.1808 66.0018 55.0678 65.2186 56.4572 63.825L71.6183 48.619Z"
+        fill="url(#paint1_linear_564_7302)"
+      />
+      <path
+        d="M71.6183 48.619C74.5133 45.724 76.1397 41.7975 76.1397 37.7033C76.1397 33.6091 74.5133 29.6826 71.6183 26.7876C68.7232 23.8925 64.7967 22.2661 60.7025 22.2661C56.6084 22.2661 52.6819 23.8925 49.7868 26.7876L34.5988 41.9756C33.2099 43.3645 32.4297 45.2481 32.4297 47.2122V58.5961C32.4297 62.6862 35.7453 66.0018 39.8354 66.0018H51.2129C53.1808 66.0018 55.0678 65.2186 56.4572 63.825L71.6183 48.619Z"
+        fill="url(#paint2_linear_564_7302)"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M62.5303 39.5333C63.5345 38.5291 63.5345 36.9009 62.5303 35.8967C61.5261 34.8925 59.898 34.8925 58.8938 35.8967L22.8938 71.8967C21.8896 72.9009 21.8896 74.5291 22.8938 75.5333C23.898 76.5375 25.5261 76.5375 26.5303 75.5333L48.1292 53.9344C48.3165 53.9778 48.5116 54.0007 48.7121 54.0007L64.1406 54.0007C65.5608 54.0007 66.7121 52.8494 66.7121 51.4293C66.7121 50.0091 65.5608 48.8578 64.1406 48.8578L53.2057 48.8578L62.5303 39.5333Z"
+        fill="black"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M62.5303 39.5333C63.5345 38.5291 63.5345 36.9009 62.5303 35.8967C61.5261 34.8925 59.898 34.8925 58.8938 35.8967L22.8938 71.8967C21.8896 72.9009 21.8896 74.5291 22.8938 75.5333C23.898 76.5375 25.5261 76.5375 26.5303 75.5333L48.1292 53.9344C48.3165 53.9778 48.5116 54.0007 48.7121 54.0007L64.1406 54.0007C65.5608 54.0007 66.7121 52.8494 66.7121 51.4293C66.7121 50.0091 65.5608 48.8578 64.1406 48.8578L53.2057 48.8578L62.5303 39.5333Z"
+        fill="white"
+      />
+      <path
+        d="M83.5703 90.8574H86.9989C88.8175 90.8574 90.5617 89.854 91.8476 88.0679C93.1336 86.2818 93.856 83.8594 93.856 81.3335V57.524C93.856 52.2859 96.9417 48.0002 100.713 48.0002C98.8945 48.0002 97.1504 46.9968 95.8644 45.2107C94.5785 43.4247 93.856 41.0023 93.856 38.4764V14.6669C93.856 12.141 93.1336 9.71859 91.8476 7.93253C90.5617 6.14646 88.8175 5.14307 86.9989 5.14307H83.5703"
+        stroke="url(#paint3_linear_564_7302)"
+        stroke-opacity="0.15"
+        stroke-width="5.14286"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_564_7302"
+          x1="11.5714"
+          y1="5.14307"
+          x2="11.5714"
+          y2="90.8574"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#6CF9D8" />
+          <stop offset="1" stop-color="#6CF9D8" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_564_7302"
+          x1="54.2847"
+          y1="22.2661"
+          x2="54.2847"
+          y2="66.0018"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#FDFDFD" />
+          <stop offset="0.386534" stop-color="#B6B6B6" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#9A9A9A" />
+          <stop offset="0.620948" stop-color="white" />
+          <stop offset="0.708229" stop-color="#999999" />
+          <stop offset="0.78803" stop-color="white" />
+        </linearGradient>
+        <linearGradient
+          id="paint2_linear_564_7302"
+          x1="54.2847"
+          y1="22.2661"
+          x2="54.2847"
+          y2="66.0018"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CF9D8" />
+          <stop offset="0.386534" stop-color="#B1FFED" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#009A76" />
+          <stop offset="0.620948" stop-color="#C1FFF0" />
+          <stop offset="0.708229" stop-color="#29997F" />
+          <stop offset="0.78803" stop-color="#ADFFEC" />
+        </linearGradient>
+        <linearGradient
+          id="paint3_linear_564_7302"
+          x1="92.1417"
+          y1="5.14307"
+          x2="92.1417"
+          y2="90.8574"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#6CF9D8" />
+          <stop offset="1" stop-color="#6CF9D8" stop-opacity="0" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
diff --git a/src/app/_components/icons/gradient/logos/arbitrum.tsx b/src/app/_components/icons/gradient/logos/arbitrum.tsx
new file mode 100644
index 0000000..73748c4
--- /dev/null
+++ b/src/app/_components/icons/gradient/logos/arbitrum.tsx
@@ -0,0 +1,97 @@
+import { LogoIconProps } from "./types";
+
+export function ArbitrumIcon({ variant = "aqua", ...props }: LogoIconProps) {
+  const linearGradientBasedId = `paint_linear_gradient_${variant}`;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="43"
+      height="49"
+      viewBox="0 0 43 49"
+      fill="none"
+      {...props}
+    >
+      <g filter="url(#filter0_b_564_7460)">
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M40.6693 10.9286C41.9058 11.7056 42.6951 13.0402 42.7535 14.4981L42.7535 34.4443C42.6987 35.7532 42.0904 36.9615 41.0563 37.7627L23.1278 48.1455C23.0695 48.1793 23.0088 48.209 22.9455 48.2321C22.4595 48.4098 21.9486 48.5 21.4255 48.5C20.8177 48.5 20.1433 48.3675 19.6745 48.1398C19.6151 48.111 19.4468 48.0183 19.2 47.8799C19.0405 47.7904 18.8462 47.6805 18.6281 47.5564L13.2006 44.4315C12.5577 44.0614 12.3406 43.2378 12.7173 42.5988L12.8623 42.353C13.2334 41.7235 14.0421 41.51 14.6756 41.8744L20.8709 45.4377C21.1653 45.5573 21.5064 45.576 21.8131 45.4941C21.8898 45.4736 21.9615 45.4384 22.0301 45.3986L26.9264 42.5612C27.5826 42.1809 27.7899 41.3307 27.3824 40.6911L21.9489 32.163C21.6794 31.7401 21.6701 31.2017 21.9247 30.7697L24.4447 26.4933C24.9507 25.6347 26.1854 25.6144 26.7193 26.4559L33.5598 37.2377C33.9432 37.8419 34.7351 38.0358 35.3543 37.677L35.9571 37.3276C35.9591 37.3264 35.9597 37.3239 35.9585 37.322L27.2124 23.1769C26.9521 22.7558 26.9464 22.2252 27.1978 21.7987L29.214 18.3774C29.7184 17.5216 30.948 17.4981 31.4847 18.334L37.3296 27.4376C38.0487 28.5577 39.7849 28.0484 39.7849 26.7172L39.7849 14.6073C39.7623 14.1296 39.5086 13.6926 39.104 13.4349L21.9977 3.59527C21.5978 3.39852 21.0901 3.4009 20.6907 3.6015C20.6367 3.62849 3.64267 13.4653 3.56407 13.5216C3.24908 13.7475 3.03988 14.0818 2.97255 14.4565C2.96217 14.513 2.95485 14.5704 2.95139 14.6286L2.97003 26.042C2.9722 27.3704 4.70354 27.8789 5.42375 26.7626L11.8275 16.837C12.9418 15.0182 15.3694 14.4323 17.6231 14.4641L17.9392 14.4725C18.9698 14.4996 19.5809 15.636 19.0354 16.5108L5.36461 38.435C4.98454 39.0445 4.1899 39.2434 3.56751 38.8848L0.667627 37.2137C0.254551 36.9757 1.87018e-07 36.5352 1.84544e-07 36.0585L1.7972e-07 35.1291L7.26014e-08 14.4891C0.0691085 13.1386 0.741902 11.9092 1.84566 11.1182C2.04095 10.9784 2.24775 10.8541 2.46222 10.7481C2.49341 10.7326 2.52167 10.7179 2.55177 10.7005C3.47881 10.1629 19.222 1.03275 19.3626 0.961835C20.5879 0.345594 22.1158 0.346385 23.3389 0.96223L40.6693 10.9286ZM28.0719 16.5502C28.597 15.6595 27.9525 14.536 26.9185 14.5398L23.0389 14.5538C22.5744 14.5555 22.1442 14.7989 21.9035 15.1962L7.2262 39.4165C6.83851 40.0563 7.05292 40.8897 7.70122 41.263L10.8886 43.0982C11.5221 43.4629 12.3311 43.2496 12.7024 42.6199L13.5313 41.2141L28.0719 16.5502Z"
+          fill={`url(#${linearGradientBasedId}_1)`}
+        />
+      </g>
+      <defs>
+        <filter
+          id="filter0_b_564_7460"
+          x="-13.5"
+          y="-13"
+          width="70"
+          height="75"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feGaussianBlur in="BackgroundImageFix" stdDeviation="6.75" />
+          <feComposite
+            in2="SourceAlpha"
+            operator="in"
+            result="effect1_backgroundBlur_564_7460"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_backgroundBlur_564_7460"
+            result="shape"
+          />
+        </filter>
+        <linearGradient
+          id="paint_linear_gradient_aqua_1"
+          x1="21.3767"
+          y1="0.5"
+          x2="21.3767"
+          y2="48.5"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CF9D8" />
+          <stop offset="0.386534" stop-color="#B1FFED" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#009A76" />
+          <stop offset="0.620948" stop-color="#C1FFF0" />
+          <stop offset="0.708229" stop-color="#29997F" />
+          <stop offset="0.78803" stop-color="#ADFFEC" />
+        </linearGradient>
+        <linearGradient
+          id="paint_linear_gradient_purple_1"
+          x1="22.0447"
+          y1="0.5"
+          x2="22.0447"
+          y2="77.2051"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#A26CF9" />
+          <stop offset="0.386534" stop-color="#CEB1FF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#3B009A" />
+          <stop offset="0.620948" stop-color="#D8C1FF" />
+          <stop offset="0.708229" stop-color="#542999" />
+          <stop offset="0.78803" stop-color="#CCADFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint_linear_gradient_teal_1"
+          x1="21.3767"
+          y1="0.5"
+          x2="21.3767"
+          y2="48.5"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CD3F9" />
+          <stop offset="0.386534" stop-color="#B1EAFF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#00719A" />
+          <stop offset="0.620948" stop-color="#C1EEFF" />
+          <stop offset="0.708229" stop-color="#297B99" />
+          <stop offset="0.78803" stop-color="#ADE9FF" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
diff --git a/src/app/_components/icons/gradient/logos/base.tsx b/src/app/_components/icons/gradient/logos/base.tsx
new file mode 100644
index 0000000..fb09f1c
--- /dev/null
+++ b/src/app/_components/icons/gradient/logos/base.tsx
@@ -0,0 +1,99 @@
+import { LogoIconProps } from "./types";
+
+export function BaseIcon({ variant = "aqua", ...props }: LogoIconProps) {
+  const linearGradientBasedId = `paint_linear_gradient_${variant}`;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="45"
+      height="47"
+      viewBox="0 0 45 47"
+      fill="none"
+      {...props}
+    >
+      <g clip-path="url(#clip0_564_7528)" filter="url(#filter0_b_564_7528)">
+        <path d="M22.5227 45.6088C34.9333 45.6088 45.001 35.5456 45.001 23.1249C45.001 10.7113 34.9403 0.641113 22.5227 0.641113C10.7524 0.641113 1.08573 9.70502 0.128906 21.2319H29.8326V25.0109H0.128906C1.08573 36.5449 10.7524 45.6088 22.5227 45.6088Z" />
+        <path
+          d="M22.5227 45.6088C34.9333 45.6088 45.001 35.5456 45.001 23.1249C45.001 10.7113 34.9403 0.641113 22.5227 0.641113C10.7524 0.641113 1.08573 9.70502 0.128906 21.2319H29.8326V25.0109H0.128906C1.08573 36.5449 10.7524 45.6088 22.5227 45.6088Z"
+          fill={`url(#${linearGradientBasedId}_1)`}
+        />
+      </g>
+      <defs>
+        <filter
+          id="filter0_b_564_7528"
+          x="-13.5"
+          y="-13"
+          width="72"
+          height="73"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feGaussianBlur in="BackgroundImageFix" stdDeviation="6.75" />
+          <feComposite
+            in2="SourceAlpha"
+            operator="in"
+            result="effect1_backgroundBlur_564_7528"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_backgroundBlur_564_7528"
+            result="shape"
+          />
+        </filter>
+        <linearGradient
+          id="paint_linear_gradient_aqua_1"
+          x1="22.5649"
+          y1="0.641113"
+          x2="22.5649"
+          y2="45.6088"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CF9D8" />
+          <stop offset="0.386534" stop-color="#B1FFED" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#009A76" />
+          <stop offset="0.620948" stop-color="#C1FFF0" />
+          <stop offset="0.708229" stop-color="#29997F" />
+          <stop offset="0.78803" stop-color="#ADFFEC" />
+        </linearGradient>
+        <linearGradient
+          id="paint_linear_gradient_purple_1"
+          x1="22.5649"
+          y1="0.641113"
+          x2="22.5649"
+          y2="72.5005"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#A26CF9" />
+          <stop offset="0.386534" stop-color="#CEB1FF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#3B009A" />
+          <stop offset="0.620948" stop-color="#D8C1FF" />
+          <stop offset="0.708229" stop-color="#542999" />
+          <stop offset="0.78803" stop-color="#CCADFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint_linear_gradient_teal_1"
+          x1="22.5649"
+          y1="0.641113"
+          x2="22.5649"
+          y2="45.6088"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CD3F9" />
+          <stop offset="0.386534" stop-color="#B1EAFF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#00719A" />
+          <stop offset="0.620948" stop-color="#C1EEFF" />
+          <stop offset="0.708229" stop-color="#297B99" />
+          <stop offset="0.78803" stop-color="#ADE9FF" />
+        </linearGradient>
+        <clipPath id="clip0_564_7528">
+          <rect width="45" height="46" fill="white" transform="translate(0 0.5)" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/src/app/_components/icons/gradient/logos/ethereum.tsx b/src/app/_components/icons/gradient/logos/ethereum.tsx
new file mode 100644
index 0000000..b78c959
--- /dev/null
+++ b/src/app/_components/icons/gradient/logos/ethereum.tsx
@@ -0,0 +1,355 @@
+import { LogoIconProps } from "./types";
+
+export function EthereumIcon({ variant = "aqua", ...props }: LogoIconProps) {
+  const linearGradientBasedId = `paint_linear_gradient_${variant}`;
+  return (
+    <svg
+      width="31"
+      height="53"
+      viewBox="0 0 31 53"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g filter="url(#filter0_b_564_7445)">
+        <path
+          d="M15.2869 0L14.9531 1.14454V34.3565L15.2869 34.6927L30.5671 25.5799L15.2869 0Z"
+          fill={`url(#${linearGradientBasedId}_1)`}
+        />
+        <path
+          d="M15.2802 0L0 25.5799L15.2802 34.6928V18.5727V0Z"
+          fill={`url(#${linearGradientBasedId}_2)`}
+        />
+        <path
+          d="M15.2818 39.7078L15.0938 39.9391V51.7699L15.2818 52.3241L30.5712 30.5996L15.2818 39.7078Z"
+          fill={`url(#${linearGradientBasedId}_3)`}
+        />
+        <path
+          d="M15.2802 52.3242V39.7078L0 30.5996L15.2802 52.3242Z"
+          fill={`url(#${linearGradientBasedId}_4)`}
+        />
+        <path
+          d="M15.2773 34.6912L30.5573 25.5785L15.2773 18.5713V34.6912Z"
+          fill={`url(#${linearGradientBasedId}_5)`}
+        />
+        <path
+          d="M0 25.5785L15.28 34.6913V18.5713L0 25.5785Z"
+          fill={`url(#${linearGradientBasedId}_6)`}
+        />
+      </g>
+      <defs>
+        <filter
+          id="filter0_b_564_7445"
+          x="-13.5"
+          y="-13.5"
+          width="58"
+          height="80"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feGaussianBlur in="BackgroundImageFix" stdDeviation="6.75" />
+          <feComposite
+            in2="SourceAlpha"
+            operator="in"
+            result="effect1_backgroundBlur_564_7445"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_backgroundBlur_564_7445"
+            result="shape"
+          />
+        </filter>
+        <linearGradient
+          id="paint_linear_gradient_aqua_1"
+          x1="22.7601"
+          y1="0"
+          x2="22.7601"
+          y2="34.6927"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CF9D8" />
+          <stop offset="0.386534" stop-color="#B1FFED" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#009A76" />
+          <stop offset="0.620948" stop-color="#C1FFF0" />
+          <stop offset="0.708229" stop-color="#29997F" />
+          <stop offset="0.78803" stop-color="#ADFFEC" />
+        </linearGradient>
+        <linearGradient
+          id="paint_linear_gradient_purple_1"
+          x1="23.4281"
+          y1="0"
+          x2="23.4281"
+          y2="55.4397"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#A26CF9" />
+          <stop offset="0.386534" stop-color="#CEB1FF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#3B009A" />
+          <stop offset="0.620948" stop-color="#D8C1FF" />
+          <stop offset="0.708229" stop-color="#542999" />
+          <stop offset="0.78803" stop-color="#CCADFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint_linear_gradient_teal_1"
+          x1="22.7601"
+          y1="0"
+          x2="22.7601"
+          y2="34.6927"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CD3F9" />
+          <stop offset="0.386534" stop-color="#B1EAFF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#00719A" />
+          <stop offset="0.620948" stop-color="#C1EEFF" />
+          <stop offset="0.708229" stop-color="#297B99" />
+          <stop offset="0.78803" stop-color="#ADE9FF" />
+        </linearGradient>
+        <linearGradient
+          id="paint_linear_gradient_aqua_2"
+          x1="7.6401"
+          y1="0"
+          x2="7.6401"
+          y2="34.6928"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CF9D8" />
+          <stop offset="0.386534" stop-color="#B1FFED" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#009A76" />
+          <stop offset="0.620948" stop-color="#C1FFF0" />
+          <stop offset="0.708229" stop-color="#29997F" />
+          <stop offset="0.78803" stop-color="#ADFFEC" />
+        </linearGradient>
+        <linearGradient
+          id="paint_linear_gradient_purple_2"
+          x1="8.30807"
+          y1="0"
+          x2="8.30807"
+          y2="55.4399"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#A26CF9" />
+          <stop offset="0.386534" stop-color="#CEB1FF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#3B009A" />
+          <stop offset="0.620948" stop-color="#D8C1FF" />
+          <stop offset="0.708229" stop-color="#542999" />
+          <stop offset="0.78803" stop-color="#CCADFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint_linear_gradient_teal_2"
+          x1="7.6401"
+          y1="0"
+          x2="7.6401"
+          y2="34.6928"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CD3F9" />
+          <stop offset="0.386534" stop-color="#B1EAFF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#00719A" />
+          <stop offset="0.620948" stop-color="#C1EEFF" />
+          <stop offset="0.708229" stop-color="#297B99" />
+          <stop offset="0.78803" stop-color="#ADE9FF" />
+        </linearGradient>
+        <linearGradient
+          id="paint_linear_gradient_aqua_3"
+          x1="22.8325"
+          y1="30.5996"
+          x2="22.8325"
+          y2="52.3241"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CF9D8" />
+          <stop offset="0.386534" stop-color="#B1FFED" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#009A76" />
+          <stop offset="0.620948" stop-color="#C1FFF0" />
+          <stop offset="0.708229" stop-color="#29997F" />
+          <stop offset="0.78803" stop-color="#ADFFEC" />
+        </linearGradient>
+        <linearGradient
+          id="paint_linear_gradient_purple_3"
+          x1="23.5005"
+          y1="30.5996"
+          x2="23.5005"
+          y2="65.3159"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#A26CF9" />
+          <stop offset="0.386534" stop-color="#CEB1FF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#3B009A" />
+          <stop offset="0.620948" stop-color="#D8C1FF" />
+          <stop offset="0.708229" stop-color="#542999" />
+          <stop offset="0.78803" stop-color="#CCADFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint_linear_gradient_teal_3"
+          x1="22.8325"
+          y1="30.5996"
+          x2="22.8325"
+          y2="52.3241"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CD3F9" />
+          <stop offset="0.386534" stop-color="#B1EAFF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#00719A" />
+          <stop offset="0.620948" stop-color="#C1EEFF" />
+          <stop offset="0.708229" stop-color="#297B99" />
+          <stop offset="0.78803" stop-color="#ADE9FF" />
+        </linearGradient>
+        <linearGradient
+          id="paint_linear_gradient_aqua_4"
+          x1="7.6401"
+          y1="30.5996"
+          x2="7.6401"
+          y2="52.3242"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CF9D8" />
+          <stop offset="0.386534" stop-color="#B1FFED" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#009A76" />
+          <stop offset="0.620948" stop-color="#C1FFF0" />
+          <stop offset="0.708229" stop-color="#29997F" />
+          <stop offset="0.78803" stop-color="#ADFFEC" />
+        </linearGradient>
+        <linearGradient
+          id="paint_linear_gradient_purple_4"
+          x1="8.30807"
+          y1="30.5996"
+          x2="8.30807"
+          y2="65.3161"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#A26CF9" />
+          <stop offset="0.386534" stop-color="#CEB1FF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#3B009A" />
+          <stop offset="0.620948" stop-color="#D8C1FF" />
+          <stop offset="0.708229" stop-color="#542999" />
+          <stop offset="0.78803" stop-color="#CCADFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint_linear_gradient_teal_4"
+          x1="7.6401"
+          y1="30.5996"
+          x2="7.6401"
+          y2="52.3242"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CD3F9" />
+          <stop offset="0.386534" stop-color="#B1EAFF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#00719A" />
+          <stop offset="0.620948" stop-color="#C1EEFF" />
+          <stop offset="0.708229" stop-color="#297B99" />
+          <stop offset="0.78803" stop-color="#ADE9FF" />
+        </linearGradient>
+        <linearGradient
+          id="paint_linear_gradient_aqua_5"
+          x1="22.9173"
+          y1="18.5713"
+          x2="22.9173"
+          y2="34.6912"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CF9D8" />
+          <stop offset="0.386534" stop-color="#B1FFED" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#009A76" />
+          <stop offset="0.620948" stop-color="#C1FFF0" />
+          <stop offset="0.708229" stop-color="#29997F" />
+          <stop offset="0.78803" stop-color="#ADFFEC" />
+        </linearGradient>
+        <linearGradient
+          id="paint_linear_gradient_purple_5"
+          x1="23.5853"
+          y1="18.5713"
+          x2="23.5853"
+          y2="44.3312"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#A26CF9" />
+          <stop offset="0.386534" stop-color="#CEB1FF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#3B009A" />
+          <stop offset="0.620948" stop-color="#D8C1FF" />
+          <stop offset="0.708229" stop-color="#542999" />
+          <stop offset="0.78803" stop-color="#CCADFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint_linear_gradient_teal_5"
+          x1="22.9173"
+          y1="18.5713"
+          x2="22.9173"
+          y2="34.6912"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CD3F9" />
+          <stop offset="0.386534" stop-color="#B1EAFF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#00719A" />
+          <stop offset="0.620948" stop-color="#C1EEFF" />
+          <stop offset="0.708229" stop-color="#297B99" />
+          <stop offset="0.78803" stop-color="#ADE9FF" />
+        </linearGradient>
+        <linearGradient
+          id="paint_linear_gradient_aqua_6"
+          x1="7.63998"
+          y1="18.5713"
+          x2="7.63998"
+          y2="34.6913"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CF9D8" />
+          <stop offset="0.386534" stop-color="#B1FFED" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#009A76" />
+          <stop offset="0.620948" stop-color="#C1FFF0" />
+          <stop offset="0.708229" stop-color="#29997F" />
+          <stop offset="0.78803" stop-color="#ADFFEC" />
+        </linearGradient>
+        <linearGradient
+          id="paint_linear_gradient_purple_6"
+          x1="8.30795"
+          y1="18.5713"
+          x2="8.30795"
+          y2="44.3314"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#A26CF9" />
+          <stop offset="0.386534" stop-color="#CEB1FF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#3B009A" />
+          <stop offset="0.620948" stop-color="#D8C1FF" />
+          <stop offset="0.708229" stop-color="#542999" />
+          <stop offset="0.78803" stop-color="#CCADFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint_linear_gradient_teal_6"
+          x1="7.63998"
+          y1="18.5713"
+          x2="7.63998"
+          y2="34.6913"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CD3F9" />
+          <stop offset="0.386534" stop-color="#B1EAFF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#00719A" />
+          <stop offset="0.620948" stop-color="#C1EEFF" />
+          <stop offset="0.708229" stop-color="#297B99" />
+          <stop offset="0.78803" stop-color="#ADE9FF" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
diff --git a/src/app/_components/icons/gradient/logos/optimism.tsx b/src/app/_components/icons/gradient/logos/optimism.tsx
new file mode 100644
index 0000000..326a013
--- /dev/null
+++ b/src/app/_components/icons/gradient/logos/optimism.tsx
@@ -0,0 +1,147 @@
+import { LogoIconProps } from "./types";
+
+export function OptimismIcon({ variant = "aqua", ...props }: LogoIconProps) {
+  const linearGradientBasedId = `paint_linear_gradient_${variant}`;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="61"
+      height="31"
+      viewBox="0 0 61 31"
+      fill="none"
+      {...props}
+    >
+      <g filter="url(#filter0_b_564_7453)">
+        <path
+          d="M11.8766 30.2764C8.53843 30.2764 5.80338 29.4986 3.67145 27.943C1.56756 26.3597 0.515625 24.1097 0.515625 21.193C0.515625 20.5819 0.585754 19.8319 0.726014 18.943C1.09069 16.943 1.60964 14.5403 2.28289 11.7347C4.19041 4.09582 9.11349 0.276367 17.0521 0.276367C19.2121 0.276367 21.1477 0.637479 22.8589 1.3597C24.57 2.05415 25.9164 3.1097 26.8983 4.52636C27.88 5.91526 28.371 7.58192 28.371 9.52637C28.371 10.1097 28.3009 10.8458 28.1607 11.7347C27.7398 14.2069 27.2349 16.6097 26.6459 18.943C25.664 22.7486 23.9669 25.5958 21.5545 27.4847C19.1419 29.3458 15.9161 30.2764 11.8766 30.2764ZM12.4657 24.2764C14.0366 24.2764 15.369 23.818 16.4631 22.9013C17.5851 21.9847 18.3846 20.5819 18.8614 18.6931C19.5067 16.0819 19.9975 13.8041 20.3342 11.8597C20.4464 11.2764 20.5025 10.6791 20.5025 10.068C20.5025 7.54025 19.17 6.27637 16.5051 6.27637C14.9342 6.27637 13.5877 6.73471 12.4657 7.65137C11.3716 8.56804 10.5862 9.97081 10.1093 11.8597C9.60439 13.7208 9.09946 15.9986 8.59453 18.6931C8.48231 19.2485 8.42621 19.8319 8.42621 20.443C8.42621 22.9985 9.7727 24.2764 12.4657 24.2764Z"
+          fill={`url(#${linearGradientBasedId}_1)`}
+        />
+        <path
+          d="M32.6469 29.859C32.379 29.859 32.1641 29.7858 32.0019 29.6393C31.9522 29.5944 31.9121 29.5397 31.8821 29.4798C31.7821 29.28 31.7564 29.0593 31.8053 28.8174L37.612 1.73405C37.6681 1.42849 37.8224 1.17849 38.0749 0.98405C38.3273 0.789605 38.5939 0.692383 38.8744 0.692383L50.0669 0.692383C53.1807 0.692383 55.6773 1.33127 57.5568 2.60906C59.4643 3.88683 60.4181 5.73405 60.4181 8.15071C60.4181 8.84515 60.334 9.56737 60.1657 10.3174C59.4643 13.5118 58.0477 15.8729 55.9158 17.4008C53.8119 18.9285 50.9225 19.6923 47.2477 19.6923L42.6475 19.6923C42.0177 19.6923 41.4738 20.1329 41.3432 20.749L39.6317 28.8174C39.5756 29.123 39.4213 29.3729 39.1688 29.5674C38.9164 29.7618 38.65 29.859 38.3693 29.859L32.6469 29.859ZM47.5423 13.9424C48.7205 13.9424 49.7444 13.6229 50.614 12.984C51.5117 12.3452 52.1007 11.4285 52.3812 10.234C52.4654 9.76182 52.5075 9.34516 52.5075 8.98404C52.5075 8.17849 52.269 7.56738 51.7922 7.15071C51.3153 6.70627 50.5018 6.48405 49.3517 6.48405L45.3801 6.48405C44.7515 6.48405 44.2082 6.92318 44.0764 7.53788L43.0491 12.3295C42.8712 13.1596 43.5039 13.9424 44.3529 13.9424L47.5423 13.9424Z"
+          fill={`url(#${linearGradientBasedId}_2)`}
+        />
+      </g>
+      <defs>
+        <filter
+          id="filter0_b_564_7453"
+          x="-13.5"
+          y="-13.5"
+          width="88"
+          height="58"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feGaussianBlur in="BackgroundImageFix" stdDeviation="6.75" />
+          <feComposite
+            in2="SourceAlpha"
+            operator="in"
+            result="effect1_backgroundBlur_564_7453"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_backgroundBlur_564_7453"
+            result="shape"
+          />
+        </filter>
+        <linearGradient
+          id="paint_linear_gradient_aqua_1"
+          x1="22.7601"
+          y1="0"
+          x2="22.7601"
+          y2="34.6927"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CF9D8" />
+          <stop offset="0.386534" stop-color="#B1FFED" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#009A76" />
+          <stop offset="0.620948" stop-color="#C1FFF0" />
+          <stop offset="0.708229" stop-color="#29997F" />
+          <stop offset="0.78803" stop-color="#ADFFEC" />
+        </linearGradient>
+        <linearGradient
+          id="paint_linear_gradient_purple_1"
+          x1="14.4433"
+          y1="0.276367"
+          x2="14.4433"
+          y2="48.2171"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#A26CF9" />
+          <stop offset="0.386534" stop-color="#CEB1FF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#3B009A" />
+          <stop offset="0.620948" stop-color="#D8C1FF" />
+          <stop offset="0.708229" stop-color="#542999" />
+          <stop offset="0.78803" stop-color="#CCADFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint_linear_gradient_teal_1"
+          x1="22.7601"
+          y1="0"
+          x2="22.7601"
+          y2="34.6927"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CD3F9" />
+          <stop offset="0.386534" stop-color="#B1EAFF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#00719A" />
+          <stop offset="0.620948" stop-color="#C1EEFF" />
+          <stop offset="0.708229" stop-color="#297B99" />
+          <stop offset="0.78803" stop-color="#ADE9FF" />
+        </linearGradient>
+        <linearGradient
+          id="paint_linear_gradient_aqua_2"
+          x1="7.6401"
+          y1="0"
+          x2="7.6401"
+          y2="34.6928"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CF9D8" />
+          <stop offset="0.386534" stop-color="#B1FFED" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#009A76" />
+          <stop offset="0.620948" stop-color="#C1FFF0" />
+          <stop offset="0.708229" stop-color="#29997F" />
+          <stop offset="0.78803" stop-color="#ADFFEC" />
+        </linearGradient>
+        <linearGradient
+          id="paint_linear_gradient_purple_2"
+          x1="46.0997"
+          y1="0.692383"
+          x2="46.0997"
+          y2="47.3013"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#A26CF9" />
+          <stop offset="0.386534" stop-color="#CEB1FF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#3B009A" />
+          <stop offset="0.620948" stop-color="#D8C1FF" />
+          <stop offset="0.708229" stop-color="#542999" />
+          <stop offset="0.78803" stop-color="#CCADFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint_linear_gradient_teal_2"
+          x1="7.6401"
+          y1="0"
+          x2="7.6401"
+          y2="34.6928"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CD3F9" />
+          <stop offset="0.386534" stop-color="#B1EAFF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#00719A" />
+          <stop offset="0.620948" stop-color="#C1EEFF" />
+          <stop offset="0.708229" stop-color="#297B99" />
+          <stop offset="0.78803" stop-color="#ADE9FF" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
diff --git a/src/app/_components/icons/gradient/logos/polygon.tsx b/src/app/_components/icons/gradient/logos/polygon.tsx
new file mode 100644
index 0000000..07e9c0f
--- /dev/null
+++ b/src/app/_components/icons/gradient/logos/polygon.tsx
@@ -0,0 +1,95 @@
+import { LogoIconProps } from "./types";
+
+export function PolygonIcon({ variant = "aqua", ...props }: LogoIconProps) {
+  const linearGradientBasedId = `paint_linear_gradient_${variant}`;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="49"
+      height="45"
+      viewBox="0 0 49 45"
+      fill="none"
+      {...props}
+    >
+      <g filter="url(#filter0_b_564_7457)">
+        <path
+          d="M37.275 14.3619C36.3928 13.8577 35.2585 13.8577 34.2503 14.3619L27.1927 18.5208L22.4036 21.1674L15.472 25.3264C14.5898 25.8305 13.4555 25.8305 12.4473 25.3264L7.02802 22.0496C6.14582 21.5455 5.51567 20.5373 5.51567 19.403L5.51567 13.1016C5.51567 12.0933 6.01979 11.0851 7.02802 10.455L12.4473 7.30423C13.3295 6.80011 14.4637 6.80011 15.472 7.30423L20.8912 10.581C21.7734 11.0851 22.4036 12.0933 22.4036 13.2276L22.4036 15.074C22.4036 16.1011 23.5161 16.7425 24.405 16.2279L26.5274 14.9991C26.9392 14.7607 27.1927 14.321 27.1927 13.8452L27.1927 10.3289C27.1927 9.32069 26.6886 8.31246 25.6803 7.68231L15.598 1.75895C14.7158 1.25483 13.5815 1.25483 12.5733 1.75895L2.23891 7.80834C1.23068 8.31246 0.726563 9.32069 0.726563 10.3289L0.726563 22.1757C0.726563 23.1839 1.23068 24.1921 2.23891 24.8223L12.4473 30.7456C13.3295 31.2498 14.4637 31.2498 15.472 30.7456L22.4036 26.7127L27.1927 23.9401L34.1243 19.9071C35.0065 19.403 36.1407 19.403 37.149 19.9071L42.5682 23.0579C43.4504 23.562 44.0806 24.5702 44.0806 25.7045L44.0806 32.0059C44.0806 33.0142 43.5765 34.0224 42.5682 34.6525L37.275 37.8033C36.3928 38.3074 35.2585 38.3074 34.2503 37.8033L28.8311 34.6525C27.9489 34.1484 27.3187 33.1402 27.3187 32.0059L27.3187 30.2856C27.3187 29.2585 26.2062 28.6171 25.3173 29.1317L23.1949 30.3605C22.7831 30.5989 22.5296 31.0386 22.5296 31.5144L22.5296 34.9046C22.5296 35.9128 23.0337 36.9211 24.042 37.5512L34.2503 43.4746C35.1325 43.9787 36.2668 43.9787 37.275 43.4746L47.4834 37.5512C48.3656 37.0471 48.9957 36.0389 48.9957 34.9046L48.9957 22.9318C48.9957 21.9236 48.4916 20.9154 47.4834 20.2852L37.275 14.3619Z"
+          fill={`url(#${linearGradientBasedId}_1)`}
+        />
+      </g>
+      <defs>
+        <filter
+          id="filter0_b_564_7457"
+          x="-13.5"
+          y="-13"
+          width="76"
+          height="71"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feGaussianBlur in="BackgroundImageFix" stdDeviation="6.75" />
+          <feComposite
+            in2="SourceAlpha"
+            operator="in"
+            result="effect1_backgroundBlur_564_7457"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_backgroundBlur_564_7457"
+            result="shape"
+          />
+        </filter>
+        <linearGradient
+          id="paint_linear_gradient_aqua_1"
+          x1="22.7601"
+          y1="0"
+          x2="22.7601"
+          y2="34.6927"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CF9D8" />
+          <stop offset="0.386534" stop-color="#B1FFED" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#009A76" />
+          <stop offset="0.620948" stop-color="#C1FFF0" />
+          <stop offset="0.708229" stop-color="#29997F" />
+          <stop offset="0.78803" stop-color="#ADFFEC" />
+        </linearGradient>
+        <linearGradient
+          id="paint_linear_gradient_purple_1"
+          x1="24.1971"
+          y1="1.38086"
+          x2="24.1971"
+          y2="69.2518"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#A26CF9" />
+          <stop offset="0.386534" stop-color="#CEB1FF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#3B009A" />
+          <stop offset="0.620948" stop-color="#D8C1FF" />
+          <stop offset="0.708229" stop-color="#542999" />
+          <stop offset="0.78803" stop-color="#CCADFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint_linear_gradient_teal_1"
+          x1="22.7601"
+          y1="0"
+          x2="22.7601"
+          y2="34.6927"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CD3F9" />
+          <stop offset="0.386534" stop-color="#B1EAFF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#00719A" />
+          <stop offset="0.620948" stop-color="#C1EEFF" />
+          <stop offset="0.708229" stop-color="#297B99" />
+          <stop offset="0.78803" stop-color="#ADE9FF" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
diff --git a/src/app/_components/icons/gradient/logos/types.ts b/src/app/_components/icons/gradient/logos/types.ts
new file mode 100644
index 0000000..5d19a1e
--- /dev/null
+++ b/src/app/_components/icons/gradient/logos/types.ts
@@ -0,0 +1,7 @@
+import { SVGProps } from "react";
+
+export type LogoIconVariant = "aqua" | "teal" | "purple";
+
+export type LogoIconProps = SVGProps<SVGSVGElement> & {
+  variant?: LogoIconVariant;
+};
diff --git a/src/app/_components/icons/gradient/logos/zksync.tsx b/src/app/_components/icons/gradient/logos/zksync.tsx
new file mode 100644
index 0000000..0da0e1b
--- /dev/null
+++ b/src/app/_components/icons/gradient/logos/zksync.tsx
@@ -0,0 +1,164 @@
+import { LogoIconProps } from "./types";
+
+export function ZkSyncIcon({ variant = "aqua", ...props }: LogoIconProps) {
+  const linearGradientBasedId = `paint_linear_gradient_${variant}`;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="56"
+      height="31"
+      viewBox="0 0 56 31"
+      fill="none"
+      {...props}
+    >
+      <g clip-path="url(#clip0_564_7544)">
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M53.9094 15.792L38.8289 0.638184V11.7363L23.8555 22.8478L38.8289 22.8581V30.9458L53.9094 15.792Z"
+        />
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M53.9094 15.792L38.8289 0.638184V11.7363L23.8555 22.8478L38.8289 22.8581V30.9458L53.9094 15.792Z"
+          fill={`url(#${linearGradientBasedId}_1)`}
+        />
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M0.757812 15.7856L15.8383 30.9394V19.9589L30.702 8.84005L15.8383 8.82974V0.631836L0.757812 15.7856Z"
+        />
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M0.757812 15.7856L15.8383 30.9394V19.9589L30.702 8.84005L15.8383 8.82974V0.631836L0.757812 15.7856Z"
+          fill={`url(#${linearGradientBasedId}_2)`}
+        />
+      </g>
+      <defs>
+        <filter
+          id="filter0_b_564_7528"
+          x="-13.5"
+          y="-13"
+          width="72"
+          height="73"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feGaussianBlur in="BackgroundImageFix" stdDeviation="6.75" />
+          <feComposite
+            in2="SourceAlpha"
+            operator="in"
+            result="effect1_backgroundBlur_564_7528"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_backgroundBlur_564_7528"
+            result="shape"
+          />
+        </filter>
+        <linearGradient
+          id="paint_linear_gradient_aqua_1"
+          x1="38.8824"
+          y1="0.638184"
+          x2="38.8824"
+          y2="30.9458"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CF9D8" />
+          <stop offset="0.386534" stop-color="#B1FFED" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#009A76" />
+          <stop offset="0.620948" stop-color="#C1FFF0" />
+          <stop offset="0.708229" stop-color="#29997F" />
+          <stop offset="0.78803" stop-color="#ADFFEC" />
+        </linearGradient>
+        <linearGradient
+          id="paint_linear_gradient_purple_1"
+          x1="38.8824"
+          y1="0.638184"
+          x2="38.8824"
+          y2="49.0705"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#A26CF9" />
+          <stop offset="0.386534" stop-color="#CEB1FF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#3B009A" />
+          <stop offset="0.620948" stop-color="#D8C1FF" />
+          <stop offset="0.708229" stop-color="#542999" />
+          <stop offset="0.78803" stop-color="#CCADFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint_linear_gradient_teal_1"
+          x1="38.8824"
+          y1="0.638184"
+          x2="38.8824"
+          y2="30.9458"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CD3F9" />
+          <stop offset="0.386534" stop-color="#B1EAFF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#00719A" />
+          <stop offset="0.620948" stop-color="#C1EEFF" />
+          <stop offset="0.708229" stop-color="#297B99" />
+          <stop offset="0.78803" stop-color="#ADE9FF" />
+        </linearGradient>
+        <linearGradient
+          id="paint_linear_gradient_aqua_2"
+          x1="15.7299"
+          y1="0.631836"
+          x2="15.7299"
+          y2="30.9394"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CF9D8" />
+          <stop offset="0.386534" stop-color="#B1FFED" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#009A76" />
+          <stop offset="0.620948" stop-color="#C1FFF0" />
+          <stop offset="0.708229" stop-color="#29997F" />
+          <stop offset="0.78803" stop-color="#ADFFEC" />
+        </linearGradient>
+        <linearGradient
+          id="paint_linear_gradient_purple_2"
+          x1="15.7299"
+          y1="0.631836"
+          x2="15.7299"
+          y2="49.064"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#A26CF9" />
+          <stop offset="0.386534" stop-color="#CEB1FF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#3B009A" />
+          <stop offset="0.620948" stop-color="#D8C1FF" />
+          <stop offset="0.708229" stop-color="#542999" />
+          <stop offset="0.78803" stop-color="#CCADFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint_linear_gradient_teal_2"
+          x1="15.7299"
+          y1="0.631836"
+          x2="15.7299"
+          y2="30.9394"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CD3F9" />
+          <stop offset="0.386534" stop-color="#B1EAFF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#00719A" />
+          <stop offset="0.620948" stop-color="#C1EEFF" />
+          <stop offset="0.708229" stop-color="#297B99" />
+          <stop offset="0.78803" stop-color="#ADE9FF" />
+        </linearGradient>
+        <clipPath id="clip0_564_7528">
+          <rect width="45" height="46" fill="white" transform="translate(0 0.5)" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/src/app/_components/icons/gradient/plus.tsx b/src/app/_components/icons/gradient/plus.tsx
new file mode 100644
index 0000000..af0ea13
--- /dev/null
+++ b/src/app/_components/icons/gradient/plus.tsx
@@ -0,0 +1,89 @@
+import { SVGProps } from "react";
+
+export function PlusIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="41"
+      height="40"
+      viewBox="0 0 41 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g clip-path="url(#clip0_564_7550)" filter="url(#filter0_b_564_7550)">
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M24.0281 3.75137C24.0281 1.67955 22.3485 0 20.2767 0C18.2049 0 16.5253 1.67955 16.5253 3.75137V16.2589H4.02871C1.95689 16.2589 0.277344 17.9385 0.277344 20.0103C0.277344 22.0821 1.95689 23.7616 4.02871 23.7616H16.5253V36.2486C16.5253 38.3204 18.2049 40 20.2767 40C22.3485 40 24.0281 38.3204 24.0281 36.2486V23.7616H36.526C38.5978 23.7616 40.2773 22.0821 40.2773 20.0103C40.2773 17.9385 38.5978 16.2589 36.526 16.2589H24.0281V3.75137Z"
+          fill="url(#paint0_linear_564_7550)"
+        />
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M24.0281 3.75137C24.0281 1.67955 22.3485 0 20.2767 0C18.2049 0 16.5253 1.67955 16.5253 3.75137V16.2589H4.02871C1.95689 16.2589 0.277344 17.9385 0.277344 20.0103C0.277344 22.0821 1.95689 23.7616 4.02871 23.7616H16.5253V36.2486C16.5253 38.3204 18.2049 40 20.2767 40C22.3485 40 24.0281 38.3204 24.0281 36.2486V23.7616H36.526C38.5978 23.7616 40.2773 22.0821 40.2773 20.0103C40.2773 17.9385 38.5978 16.2589 36.526 16.2589H24.0281V3.75137Z"
+          fill="url(#paint1_linear_564_7550)"
+        />
+      </g>
+      <defs>
+        <filter
+          id="filter0_b_564_7550"
+          x="-12"
+          y="-12"
+          width="65"
+          height="64"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feGaussianBlur in="BackgroundImageFix" stdDeviation="6" />
+          <feComposite
+            in2="SourceAlpha"
+            operator="in"
+            result="effect1_backgroundBlur_564_7550"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_backgroundBlur_564_7550"
+            result="shape"
+          />
+        </filter>
+        <linearGradient
+          id="paint0_linear_564_7550"
+          x1="20.2773"
+          y1="0"
+          x2="20.2773"
+          y2="39.8076"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CF9D8" />
+          <stop offset="0.386534" stop-color="#B1FFED" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#009A76" />
+          <stop offset="0.620948" stop-color="#C1FFF0" />
+          <stop offset="0.708229" stop-color="#29997F" />
+          <stop offset="0.78803" stop-color="#ADFFEC" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_564_7550"
+          x1="20.2773"
+          y1="0"
+          x2="20.2773"
+          y2="40"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CD3F9" />
+          <stop offset="0.386534" stop-color="#B1EAFF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#00719A" />
+          <stop offset="0.620948" stop-color="#C1EEFF" />
+          <stop offset="0.708229" stop-color="#297B99" />
+          <stop offset="0.78803" stop-color="#ADE9FF" />
+        </linearGradient>
+        <clipPath id="clip0_564_7550">
+          <rect width="41" height="40" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/src/app/_components/icons/gradient/shield-large.tsx b/src/app/_components/icons/gradient/shield-large.tsx
new file mode 100644
index 0000000..d5a56ca
--- /dev/null
+++ b/src/app/_components/icons/gradient/shield-large.tsx
@@ -0,0 +1,111 @@
+import { SVGProps } from "react";
+
+export function ShieldLargeIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="96"
+      height="98"
+      viewBox="0 0 96 98"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect width="96" height="25.7143" rx="6" fill="#6CF9D8" fill-opacity="0.15" />
+      <rect
+        y="35.0356"
+        width="96"
+        height="25.7143"
+        rx="6"
+        fill="#6CF9D8"
+        fill-opacity="0.15"
+      />
+      <rect
+        y="70.2856"
+        width="96"
+        height="25.7143"
+        rx="6"
+        fill="#6CF9D8"
+        fill-opacity="0.15"
+      />
+      <g filter="url(#filter0_d_564_7400)">
+        <path
+          d="M43.7598 78.8513C46.2448 80.4572 49.3762 80.4572 51.8612 78.8513C59.0606 74.1988 73.3359 63.1117 73.3359 48.343V31.5693C73.3359 27.7927 71.0139 24.4047 67.4917 23.0422L51.1091 16.7048C48.9867 15.8837 46.6343 15.8837 44.5119 16.7048L28.1294 23.0422C24.6072 24.4047 22.2852 27.7927 22.2852 31.5693V48.343C22.2852 63.1117 36.5604 74.1988 43.7598 78.8513Z"
+          fill="url(#paint0_linear_564_7400)"
+        />
+        <path
+          d="M43.7598 78.8513C46.2448 80.4572 49.3762 80.4572 51.8612 78.8513C59.0606 74.1988 73.3359 63.1117 73.3359 48.343V31.5693C73.3359 27.7927 71.0139 24.4047 67.4917 23.0422L51.1091 16.7048C48.9867 15.8837 46.6343 15.8837 44.5119 16.7048L28.1294 23.0422C24.6072 24.4047 22.2852 27.7927 22.2852 31.5693V48.343C22.2852 63.1117 36.5604 74.1988 43.7598 78.8513Z"
+          fill="url(#paint1_linear_564_7400)"
+        />
+      </g>
+      <defs>
+        <filter
+          id="filter0_d_564_7400"
+          x="9.37759"
+          y="7.48382"
+          width="76.8659"
+          height="89.7819"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dy="4.30252" />
+          <feGaussianBlur stdDeviation="6.45378" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="BackgroundImageFix"
+            result="effect1_dropShadow_564_7400"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_dropShadow_564_7400"
+            result="shape"
+          />
+        </filter>
+        <linearGradient
+          id="paint0_linear_564_7400"
+          x1="47.8105"
+          y1="15.4287"
+          x2="47.8105"
+          y2="81.2573"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CD3F9" />
+          <stop offset="0.386534" stop-color="#B1EAFF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#00719A" />
+          <stop offset="0.620948" stop-color="#C1EEFF" />
+          <stop offset="0.708229" stop-color="#297B99" />
+          <stop offset="0.78803" stop-color="#ADE9FF" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_564_7400"
+          x1="47.8105"
+          y1="15.4287"
+          x2="47.8105"
+          y2="81.2573"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CF9D8" />
+          <stop offset="0.386534" stop-color="#B1FFED" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#009A76" />
+          <stop offset="0.620948" stop-color="#C1FFF0" />
+          <stop offset="0.708229" stop-color="#29997F" />
+          <stop offset="0.78803" stop-color="#ADFFEC" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
diff --git a/src/app/_components/icons/gradient/shield-small.tsx b/src/app/_components/icons/gradient/shield-small.tsx
new file mode 100644
index 0000000..da4bacd
--- /dev/null
+++ b/src/app/_components/icons/gradient/shield-small.tsx
@@ -0,0 +1,60 @@
+import { SVGProps } from "react";
+
+export function ShieldIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="96"
+      height="96"
+      viewBox="0 0 96 96"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        x="4.28571"
+        y="4.28571"
+        width="87.4286"
+        height="87.4286"
+        rx="43.7143"
+        stroke="url(#paint0_linear_564_7328)"
+        stroke-opacity="0.15"
+        stroke-width="8.57143"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-dasharray="44.57 44.57"
+      />
+      <path
+        d="M44.0242 71.3162C46.4542 72.9433 49.5492 72.9433 51.9792 71.3162C57.5118 67.6115 66.8588 59.8526 66.8588 49.7144V39.2101C66.8588 35.4189 64.519 32.021 60.9772 30.6687L51.2629 26.9596C49.1627 26.1577 46.8406 26.1577 44.7404 26.9596L35.0261 30.6687C31.4843 32.021 29.1445 35.4189 29.1445 39.2101V49.7144C29.1445 59.8526 38.4915 67.6115 44.0242 71.3162Z"
+        fill="url(#paint1_linear_564_7328)"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_564_7328"
+          x1="48"
+          y1="0"
+          x2="48"
+          y2="96"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#44D2FF" />
+          <stop offset="1" stop-color="#44D2FF" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_564_7328"
+          x1="48.0017"
+          y1="25.7144"
+          x2="48.0017"
+          y2="73.7144"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CD3F9" />
+          <stop offset="0.386534" stop-color="#B1EAFF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#00719A" />
+          <stop offset="0.620948" stop-color="#C1EEFF" />
+          <stop offset="0.708229" stop-color="#297B99" />
+          <stop offset="0.78803" stop-color="#ADE9FF" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
diff --git a/src/app/_components/icons/index.tsx b/src/app/_components/icons/index.tsx
new file mode 100644
index 0000000..7671471
--- /dev/null
+++ b/src/app/_components/icons/index.tsx
@@ -0,0 +1,27 @@
+export { AcrossIcon } from "./across";
+
+// Gradient icons
+export { ArrowUpIcon } from "./gradient/arrow-up";
+export { BlocksConnectedIcon } from "./gradient/blocks-connected";
+export { BlocksDiagonalIcon } from "./gradient/blocks-diagonal";
+export { BridgeIcon } from "./gradient/bridge";
+export { ChatIcon } from "./gradient/chat";
+export { ChecklistIcon } from "./gradient/checklist";
+export { CheckmarkSimpleIcon } from "./gradient/checkmark-simple";
+export { CheckmarkIcon } from "./gradient/checkmark";
+export { CodeIcon } from "./gradient/code";
+export { CrossChainIcon } from "./gradient/cross-chain";
+export { DollarIcon } from "./gradient/dollar";
+export { DoubleChevronRightIcon } from "./gradient/double-chevron-right";
+export { FeatherIcon } from "./gradient/feather";
+export { PlusIcon } from "./gradient/plus";
+export { ShieldLargeIcon } from "./gradient/shield-large";
+export { ShieldIcon } from "./gradient/shield-small";
+
+// Gradient logo icons
+export { ArbitrumIcon } from "./gradient/logos/arbitrum";
+export { BaseIcon } from "./gradient/logos/base";
+export { EthereumIcon } from "./gradient/logos/ethereum";
+export { OptimismIcon } from "./gradient/logos/optimism";
+export { PolygonIcon } from "./gradient/logos/polygon";
+export { ZkSyncIcon } from "./gradient/logos/zksync";