diff --git a/public/images/docs.png b/public/images/docs.png
new file mode 100644
index 00000000..9950d5c4
Binary files /dev/null and b/public/images/docs.png differ
diff --git a/public/images/menu.svg b/public/images/menu.svg
index 5228ae1c..9577a9ab 100644
--- a/public/images/menu.svg
+++ b/public/images/menu.svg
@@ -1,9 +1,9 @@
 <svg t="1693281613004" class="icon" viewBox="0 0 1024 1024" version="1.1"
   xmlns="http://www.w3.org/2000/svg" p-id="1458" width="48" height="48">
-  <path d="M192 192m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" p-id="1459" fill="#4BB1F8"></path>
-  <path d="M192 512m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" p-id="1460" fill="#4BB1F8"></path>
-  <path d="M192 832m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" p-id="1461" fill="#4BB1F8"></path>
+  <path d="M192 192m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" p-id="1459" fill="#FF0083"></path>
+  <path d="M192 512m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" p-id="1460" fill="#FF0083"></path>
+  <path d="M192 832m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" p-id="1461" fill="#FF0083"></path>
   <path
     d="M864 160H352c-17.7 0-32 14.3-32 32s14.3 32 32 32h512c17.7 0 32-14.3 32-32s-14.3-32-32-32zM864 480H352c-17.7 0-32 14.3-32 32s14.3 32 32 32h512c17.7 0 32-14.3 32-32s-14.3-32-32-32zM864 800H352c-17.7 0-32 14.3-32 32s14.3 32 32 32h512c17.7 0 32-14.3 32-32s-14.3-32-32-32z"
-    p-id="1462" fill="#4BB1F8"></path>
+    p-id="1462" fill="#FF0083"></path>
 </svg>
diff --git a/public/images/my.svg b/public/images/my.svg
deleted file mode 100644
index 7a974d3d..00000000
--- a/public/images/my.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg t="1696786356862" class="icon" viewBox="0 0 1024 1024" version="1.1"
-  xmlns="http://www.w3.org/2000/svg" p-id="7589" id="mx_n_1696786356863" width="32" height="32">
-  <path
-    d="M512 85.333333c129.6 0 234.666667 105.066667 234.666667 234.666667 0 84.256-44.394667 158.133333-111.072 199.52a425.28 425.28 0 0 1 152.853333 83.466667 32 32 0 1 1-41.493333 48.736A361.045333 361.045333 0 0 0 512 565.333333c-188.672 0-345.429333 144.672-361.344 331.413334a32 32 0 0 1-63.765333-5.429334c15.114667-177.322667 138.048-322.346667 301.546666-371.786666C321.76 478.165333 277.333333 404.266667 277.333333 320c0-129.6 105.066667-234.666667 234.666667-234.666667z m415.946667 627.381334l1.066666 1.013333a29.824 29.824 0 0 1 0 43.413333l-162.261333 152.96a31.925333 31.925333 0 0 1-22.762667 8.704 31.925333 31.925333 0 0 1-22.773333-8.704l-93.184-87.84a29.824 29.824 0 0 1 0-43.413333l1.077333-1.013333a32 32 0 0 1 43.904 0l70.976 66.901333 140.053334-132.021333a32 32 0 0 1 43.904 0zM512 149.333333c-94.261333 0-170.666667 76.405333-170.666667 170.666667s76.405333 170.666667 170.666667 170.666667 170.666667-76.405333 170.666667-170.666667-76.405333-170.666667-170.666667-170.666667z"
-    fill="#0085FF" p-id="7590"></path>
-</svg>
diff --git a/public/images/projects/darwinia.png b/public/images/projects/darwinia.png
new file mode 100644
index 00000000..b8706bea
Binary files /dev/null and b/public/images/projects/darwinia.png differ
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 706c167a..a43ce551 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,8 +1,8 @@
-import Footer from "@/components/footer";
+// import Footer from "@/components/footer";
 import "./globals.css";
 import type { Metadata } from "next";
 import { IBM_Plex_Sans } from "next/font/google";
-import Header from "@/components/header";
+// import Header from "@/components/header";
 import RainbowProvider from "@/providers/rainbow-provider";
 import GraphqlProvider from "@/providers/graphql-provider";
 import AppProvider from "@/providers/app-provider";
@@ -14,8 +14,8 @@ const ibm_plex_sans = IBM_Plex_Sans({
 });
 
 export const metadata: Metadata = {
-  title: "Helix xToken - Helix Bridge",
-  description: "Helix Bridge for xToken cross-chain.",
+  title: "Darwinia xToken - Helix Bridge",
+  description: "Darwinia xToken cross-chain powered by Helix Bridge.",
 };
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
@@ -26,9 +26,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           <RainbowProvider>
             <AppProvider>
               <TransferProvider>
-                <Header />
+                {/* <Header /> */}
                 {children}
-                <Footer />
+                {/* <Footer /> */}
               </TransferProvider>
             </AppProvider>
           </RainbowProvider>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index ae42f323..09146587 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,12 +1,7 @@
-import PageWrap from "@/ui/page-wrap";
 import dynamic from "next/dynamic";
 
-const Transfer = dynamic(() => import("@/components/transfer"), { ssr: false });
+const PageSelect = dynamic(() => import("@/components/page-select"), { ssr: false });
 
-export default function HomePage() {
-  return (
-    <PageWrap>
-      <Transfer />
-    </PageWrap>
-  );
+export default function Home() {
+  return <PageSelect />;
 }
diff --git a/src/app/records/[id]/page.tsx b/src/app/records/[id]/page.tsx
index 15c72510..1ca3efa7 100644
--- a/src/app/records/[id]/page.tsx
+++ b/src/app/records/[id]/page.tsx
@@ -1,3 +1,5 @@
+import Footer from "@/components/footer";
+import Header from "@/components/header";
 import RecordDetail from "@/components/record-detail";
 import PageWrap from "@/ui/page-wrap";
 
@@ -9,8 +11,12 @@ interface Props {
 
 export default function RecordPage({ params }: Props) {
   return (
-    <PageWrap>
-      <RecordDetail id={params.id} />
-    </PageWrap>
+    <>
+      <Header />
+      <PageWrap>
+        <RecordDetail id={params.id} />
+      </PageWrap>
+      <Footer />
+    </>
   );
 }
diff --git a/src/app/records/page.tsx b/src/app/records/page.tsx
index b6d9be8d..dc7c10ac 100644
--- a/src/app/records/page.tsx
+++ b/src/app/records/page.tsx
@@ -1,3 +1,5 @@
+import Footer from "@/components/footer";
+import Header from "@/components/header";
 import PageWrap from "@/ui/page-wrap";
 import dynamic from "next/dynamic";
 
@@ -5,8 +7,12 @@ const HistoryRecords = dynamic(() => import("@/components/history-records"));
 
 export default function RecordsPage() {
   return (
-    <PageWrap>
-      <HistoryRecords />
-    </PageWrap>
+    <>
+      <Header />
+      <PageWrap>
+        <HistoryRecords />
+      </PageWrap>
+      <Footer />
+    </>
   );
 }
diff --git a/src/components/chain-switch.tsx b/src/components/chain-switch.tsx
new file mode 100644
index 00000000..af6c045b
--- /dev/null
+++ b/src/components/chain-switch.tsx
@@ -0,0 +1,32 @@
+import { getChainConfigs } from "@/utils";
+import { offset, useClick, useDismiss, useFloating, useInteractions, useTransitionStyles } from "@floating-ui/react";
+import { useMemo, useState } from "react";
+import { useNetwork } from "wagmi";
+
+const chainOptions = getChainConfigs();
+
+export default function ChainSwitch() {
+  const [isOpen, setIsOpen] = useState(false);
+  const { refs, context, floatingStyles } = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    middleware: [offset(6)],
+  });
+  const { styles, isMounted } = useTransitionStyles(context, {
+    initial: { transform: "translateY(-10px)", opacity: 0 },
+    open: { transform: "translateY(0)", opacity: 1 },
+    close: { transform: "translateY(-10px)", opacity: 0 },
+  });
+  const click = useClick(context);
+  const dismiss = useDismiss(context);
+  const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss]);
+
+  const { chain } = useNetwork();
+  // const activeChain = useMemo(() => chainOptions.find((option) => option.id === chain?.id))
+
+  return (
+    <>
+      <button ref={refs.setReference} {...getReferenceProps()}></button>
+    </>
+  );
+}
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index e3527a7c..c708ce1d 100644
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -1,71 +1,43 @@
-"use client";
-
 import Image from "next/image";
-import { PropsWithChildren, useEffect, useState } from "react";
+import { PropsWithChildren } from "react";
 
 export default function Footer() {
-  const [mainnetOrTestnet, setMainnetOrTestnet] = useState<{ label: "Mainnet" | "Testnet"; link: string }>();
-
-  useEffect(() => {
-    if (window.location.hostname === "helixbridge.app") {
-      setMainnetOrTestnet({ label: "Testnet", link: "https://testnet.helixbridge.app" });
-    } else if (window.location.hostname === "testnet.helixbridge.app") {
-      setMainnetOrTestnet({ label: "Mainnet", link: "https://helixbridge.app" });
-    } else if (window.location.hostname === "helix-stg.vercel.app") {
-      setMainnetOrTestnet({ label: "Testnet", link: "https://helix-stg-test.vercel.app" });
-    } else if (window.location.hostname === "helix-stg-test.vercel.app") {
-      setMainnetOrTestnet({ label: "Mainnet", link: "https://helix-stg.vercel.app" });
-    } else if (window.location.hostname === "helix-dev-main.vercel.app") {
-      setMainnetOrTestnet({ label: "Testnet", link: "https://helix-dev-test.vercel.app" });
-    } else if (window.location.hostname === "helix-dev-test.vercel.app") {
-      setMainnetOrTestnet({ label: "Mainnet", link: "https://helix-dev-main.vercel.app" });
-    }
-  }, []);
-
   return (
-    <div className="app-footer w-full">
-      <div className="mx-auto flex h-full max-w-8xl shrink-0 items-center justify-center px-middle">
-        {/* Copyright */}
-        <span className="text-sm font-medium text-white/50">{`© ${new Date().getFullYear()} Helix Bridge`}</span>
-
-        <div className="mx-3 h-4 w-[1px] bg-white/30 lg:mx-5 lg:bg-transparent" />
-
-        <div className="flex shrink-0 items-center gap-middle lg:gap-5">
-          <a
-            className="text-sm font-medium text-white/50 transition hover:text-white active:scale-95"
-            href="https://docs.helixbridge.app/"
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            Docs
-          </a>
-
-          {mainnetOrTestnet && (
-            <a
-              className="text-sm font-medium text-white/50 transition hover:text-white active:scale-95"
-              href={mainnetOrTestnet.link}
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              {mainnetOrTestnet.label}
-            </a>
-          )}
-
-          <div className="hidden h-4 w-[1px] bg-white/30 lg:block" />
-
-          <SocialLink href="https://github.com/helix-bridge">
-            <Image width={18} height={18} alt="Github" src="/images/social/github.svg" />
-          </SocialLink>
-          <SocialLink href="https://twitter.com/helixbridges">
-            <Image width={18} height={18} alt="Twitter" src="/images/social/twitter.svg" />
-          </SocialLink>
-          <SocialLink href="https://discord.gg/6XyyNGugdE">
-            <Image width={22} height={22} alt="Discord" src="/images/social/discord.svg" />
-          </SocialLink>
-          <SocialLink href="mailto:hello@helixbridge.app">
-            <Image width={18} height={18} alt="Email" src="/images/social/email.svg" />
-          </SocialLink>
-        </div>
+    <div className="app-footer flex items-center justify-center px-middle lg:justify-between lg:px-5">
+      <span className="text-xs font-semibold text-white/50">{`© ${new Date().getFullYear()} Powered by Helix Bridge`}</span>
+
+      <div className="hidden items-center gap-5 lg:flex">
+        <a
+          className="text-xs font-semibold text-white/50 transition hover:text-white active:scale-95"
+          href="https://assethub-bridge.darwinia.network/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          Assethub Bridge
+        </a>
+        <a
+          className="text-xs font-semibold text-white/50 transition hover:text-white active:scale-95"
+          href="https://docs.helixbridge.app/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          Docs
+        </a>
+
+        <div className="h-3 w-[1px] bg-white/30" />
+
+        <SocialLink href="https://github.com/helix-bridge">
+          <Image width={16} height={16} alt="Github" src="/images/social/github.svg" />
+        </SocialLink>
+        <SocialLink href="https://twitter.com/helixbridges">
+          <Image width={16} height={16} alt="Twitter" src="/images/social/twitter.svg" />
+        </SocialLink>
+        <SocialLink href="https://discord.gg/6XyyNGugdE">
+          <Image width={20} height={20} alt="Discord" src="/images/social/discord.svg" />
+        </SocialLink>
+        <SocialLink href="mailto:hello@helixbridge.app">
+          <Image width={16} height={16} alt="Email" src="/images/social/email.svg" />
+        </SocialLink>
       </div>
     </div>
   );
diff --git a/src/components/header.tsx b/src/components/header.tsx
index c2afb2a6..7d35ceb4 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -32,67 +32,58 @@ export default function Header() {
 
   return (
     <>
-      <div className="app-header fixed left-0 top-0 z-10 w-full border-b border-b-white/25 bg-app-bg lg:border-b-transparent">
-        <div className="mx-auto flex h-full max-w-8xl items-center justify-between px-middle">
-          {/* Left */}
-          <div className="flex items-center gap-5">
-            {/* Logo */}
-            <div className="flex items-center gap-middle">
-              <Link href="/">
-                <Image width={90} height={25} alt="Logo" src="/images/logo.svg" />
-              </Link>
-              <div className="inline-flex items-center justify-center rounded-small bg-primary px-1 py-[1px]">
-                <span className="text-xs font-bold text-black">{isProduction() ? "xToken" : "testnet"}</span>
-              </div>
-            </div>
-
-            {/* Navigations */}
-            <div className="hidden items-center gap-middle lg:flex">
-              {navigationsConfig.map(({ href, label, external, soon, disabled }) =>
-                external ? (
-                  <a
-                    rel="noopener noreferrer"
-                    target="_blank"
-                    href={href}
-                    key={label}
-                    className={`rounded-middle px-3 py-1 text-sm font-bold text-white transition hover:bg-white/10 active:translate-y-1`}
-                  >
-                    {label}
-                  </a>
-                ) : soon || disabled ? (
-                  <Tooltip key={label} content={soon ? "Coming soon" : "This feature is temporarily under maintenance"}>
-                    <span className="rounded-middle px-3 py-1 text-sm font-bold text-white/50">{label}</span>
-                  </Tooltip>
-                ) : (
-                  <Link
-                    key={label}
-                    href={href}
-                    className={`rounded-middle px-3 py-1 text-sm font-bold transition-all hover:bg-white/10 active:translate-y-1 ${
-                      pathname === href ? "text-primary underline decoration-2 underline-offset-8" : "text-white"
-                    }`}
-                  >
-                    {label}
-                  </Link>
-                ),
-              )}
-            </div>
-          </div>
+      <div className="app-header fixed left-0 top-0 z-10 flex w-full items-center justify-between border-b border-b-white/25 bg-app-bg px-middle lg:border-b-transparent lg:px-5">
+        {/* Left */}
+        <div className="flex items-center gap-5">
+          <Link href="/">
+            <Image width={152} height={18} alt="Logo" src="/images/projects/darwinia.png" />
+          </Link>
 
-          {/* Right */}
           <div className="hidden items-center gap-middle lg:flex">
-            <ChainIdentity />
-            <HistoryNav />
-            <User placement="bottom-end" prefixLength={14} suffixLength={10} />
+            {navigationsConfig.map(({ href, label, external, soon, disabled }) =>
+              external ? (
+                <a
+                  rel="noopener noreferrer"
+                  target="_blank"
+                  href={href}
+                  key={label}
+                  className={`rounded-middle px-3 py-1 text-sm font-bold text-white transition hover:bg-white/10 active:translate-y-1`}
+                >
+                  {label}
+                </a>
+              ) : soon || disabled ? (
+                <Tooltip key={label} content={soon ? "Coming soon" : "This feature is temporarily under maintenance"}>
+                  <span className="rounded-middle px-3 py-1 text-sm font-bold text-white/50">{label}</span>
+                </Tooltip>
+              ) : (
+                <Link
+                  key={label}
+                  href={href}
+                  className={`rounded-middle px-3 py-1 text-sm font-bold transition-all hover:bg-white/10 active:translate-y-1 ${
+                    pathname === href ? "text-primary underline decoration-2 underline-offset-8" : "text-white"
+                  }`}
+                >
+                  {label}
+                </Link>
+              ),
+            )}
           </div>
-          <Image
-            width={24}
-            height={24}
-            alt="Menu"
-            src="/images/menu.svg"
-            className="inline transition-transform active:translate-y-1 lg:hidden"
-            onClick={setIsOpenTrue}
-          />
         </div>
+
+        {/* Right */}
+        <div className="hidden items-center gap-middle lg:flex">
+          <ChainIdentity />
+          <HistoryNav />
+          <User placement="bottom-end" prefixLength={14} suffixLength={10} />
+        </div>
+        <Image
+          width={24}
+          height={24}
+          alt="Menu"
+          src="/images/menu.svg"
+          className="inline transition-transform active:translate-y-1 lg:hidden"
+          onClick={setIsOpenTrue}
+        />
       </div>
 
       <Drawer maskClosable isOpen={isOpen} onClose={setIsOpenFalse}>
diff --git a/src/components/home-page.tsx b/src/components/home-page.tsx
new file mode 100644
index 00000000..cfa28669
--- /dev/null
+++ b/src/components/home-page.tsx
@@ -0,0 +1,79 @@
+import Image from "next/image";
+import { PropsWithChildren } from "react";
+
+export default function HomePage() {
+  return (
+    <main className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden">
+      <div className="container flex flex-col items-center justify-center gap-12 px-middle lg:flex-row lg:justify-between lg:gap-middle">
+        <div className="flex flex-col">
+          <Image alt="Logo" width={210} height={56} src="/images/logo.svg" className="shrink-0" />
+          <span className="mt-11 inline-block text-3xl font-bold text-white lg:w-[32.8rem]">
+            Fully Open-Source and Decentralized Cross-Chain Asset Bridge
+          </span>
+          <span className="mt-5 inline-block text-sm font-normal text-white/60 lg:w-[36rem]">
+            Built on top of common messaging bridges that already exist between chains, and provides secure, fast, and
+            low-cost cross-chain functionality for users.
+          </span>
+        </div>
+        <div className="flex items-center gap-8">
+          <Card icon="/images/network/darwinia.png" link="https://bridge.darwinia.network" label="Darwinia" />
+          <Card icon="/images/docs.png" link="https://docs.helixbridge.app" label="Docs" external />
+        </div>
+      </div>
+
+      <div className="fixed bottom-0 left-0 flex w-full items-center justify-center p-middle lg:justify-between lg:p-5">
+        <span className="text-xs font-semibold text-white/50">{`© ${new Date().getFullYear()} Helix Bridge`}</span>
+        <div className="hidden items-center gap-5 lg:flex">
+          <Social href="https://github.com/helix-bridge">
+            <Image width={16} height={16} alt="Github" src="/images/social/github.svg" />
+          </Social>
+          <Social href="https://twitter.com/helixbridges">
+            <Image width={16} height={16} alt="Twitter" src="/images/social/twitter.svg" />
+          </Social>
+          <Social href="https://discord.gg/6XyyNGugdE">
+            <Image width={20} height={20} alt="Discord" src="/images/social/discord.svg" />
+          </Social>
+          <Social href="mailto:hello@helixbridge.app">
+            <Image width={16} height={16} alt="Email" src="/images/social/email.svg" />
+          </Social>
+        </div>
+      </div>
+
+      <div
+        className="absolute -bottom-[90vw] left-0 h-[100vw] w-screen rounded-full opacity-40 blur-[6.15rem]"
+        style={{
+          background: "linear-gradient(#1859FF 100%, #0286FF 100%), linear-gradient(271deg, #1859FF 0%, #0286FF 100%)",
+        }}
+      />
+    </main>
+  );
+}
+
+function Card({ icon, link, label, external }: { icon: string; link: string; label: string; external?: boolean }) {
+  return (
+    <a
+      className="group flex h-52 w-40 flex-col items-center justify-center gap-7 rounded-3xl bg-[#1F282C] transition-shadow hover:shadow-[0px_0px_40px_0px_rgba(0,133,255,0.50)]"
+      target={external ? "_blank" : "_self"}
+      href={link}
+    >
+      <Image alt={label} width={70} height={70} src={icon} className="shrink-0 rounded-full" />
+      <div className="text-base font-bold text-white">
+        <span>{label}</span>
+        <span className="hidden group-hover:inline">&nbsp;{`>`}</span>
+      </div>
+    </a>
+  );
+}
+
+function Social({ children, href }: PropsWithChildren<{ href: string }>) {
+  return (
+    <a
+      target="_blank"
+      rel="noopener noreferrer"
+      href={href}
+      className="opacity-60 transition-[transform,opacity] hover:scale-105 hover:opacity-100 active:scale-95"
+    >
+      {children}
+    </a>
+  );
+}
diff --git a/src/components/page-select.tsx b/src/components/page-select.tsx
new file mode 100644
index 00000000..7c2c640a
--- /dev/null
+++ b/src/components/page-select.tsx
@@ -0,0 +1,10 @@
+"use client";
+
+import HomePage from "./home-page";
+import ProjectPage from "./project-page";
+
+const isHomePage = !window.location.hostname.split(".").includes("darwinia");
+
+export default function PageSelect() {
+  return isHomePage ? <HomePage /> : <ProjectPage />;
+}
diff --git a/src/components/project-page.tsx b/src/components/project-page.tsx
new file mode 100644
index 00000000..c0fc0ba7
--- /dev/null
+++ b/src/components/project-page.tsx
@@ -0,0 +1,18 @@
+import PageWrap from "@/ui/page-wrap";
+import dynamic from "next/dynamic";
+import Header from "./header";
+import Footer from "./footer";
+
+const Transfer = dynamic(() => import("@/components/transfer"), { ssr: false });
+
+export default function ProjectPage() {
+  return (
+    <>
+      <Header />
+      <PageWrap>
+        <Transfer />
+      </PageWrap>
+      <Footer />
+    </>
+  );
+}
diff --git a/src/components/user.tsx b/src/components/user.tsx
index 70fd75a8..76eac90a 100644
--- a/src/components/user.tsx
+++ b/src/components/user.tsx
@@ -85,7 +85,7 @@ export default function User({ placement, prefixLength = 10, suffixLength = 8, o
           .map((balance) => (
             <button
               key={`${balance.chain.network}-${balance.token.symbol}`}
-              className="flex items-center gap-large rounded-middle px-3 py-2 transition-colors hover:bg-white/10 disabled:cursor-default lg:py-middle"
+              className="flex items-center gap-large rounded-2xl px-3 py-2 transition-colors hover:bg-white/10 disabled:cursor-default lg:py-middle"
               disabled={pathname !== "/"}
               onClick={() => {
                 const _sourceChain = balance.chain;
@@ -144,7 +144,7 @@ export default function User({ placement, prefixLength = 10, suffixLength = 8, o
 }
 
 function LabelSpan({ children }: PropsWithChildren<unknown>) {
-  return <span className="text-base font-medium text-white">{children}</span>;
+  return <span className="text-sm font-bold text-white">{children}</span>;
 }
 
 function ChildSpan({ children }: PropsWithChildren<unknown>) {
diff --git a/src/providers/rainbow-provider.tsx b/src/providers/rainbow-provider.tsx
index 74ef1e4b..5a8a8d9e 100644
--- a/src/providers/rainbow-provider.tsx
+++ b/src/providers/rainbow-provider.tsx
@@ -36,7 +36,7 @@ export default function RainbowProvider({ children }: PropsWithChildren<unknown>
   return (
     <WagmiConfig config={wagmiConfig}>
       <RainbowKitProvider
-        theme={darkTheme({ borderRadius: "medium", accentColor: "#0085FF" })}
+        theme={darkTheme({ borderRadius: "medium", accentColor: "#FF0083" })}
         chains={chains}
         appInfo={{ appName }}
       >
diff --git a/src/ui/drawer.tsx b/src/ui/drawer.tsx
index 8b10bc3c..b2cf3044 100644
--- a/src/ui/drawer.tsx
+++ b/src/ui/drawer.tsx
@@ -49,7 +49,7 @@ export default function Drawer({
           <div className="flex h-full w-full flex-col items-start">
             <div className="flex w-full items-center justify-between p-middle">
               <Link href="/" onClick={onClose}>
-                <Image width={90} height={25} alt="Logo" src="/images/logo.svg" />
+                <Image width={152} height={18} alt="Logo" src="/images/projects/darwinia.png" />
               </Link>
               <Image
                 width={24}
diff --git a/src/ui/tooltip.tsx b/src/ui/tooltip.tsx
index 7193fde3..6c3765cd 100644
--- a/src/ui/tooltip.tsx
+++ b/src/ui/tooltip.tsx
@@ -64,7 +64,7 @@ export default function Tooltip({
       {isMounted && (
         <FloatingPortal>
           <div ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()} className="z-30">
-            <FloatingArrow ref={arrowRef} style={styles} context={context} fill="#0085FF" />
+            <FloatingArrow ref={arrowRef} style={styles} context={context} fill="#FF0083" />
             <div
               style={styles}
               className={`flex items-center rounded-middle bg-primary px-middle py-small ${contentClassName}`}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index cfb01d3f..63c7b17b 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -15,7 +15,7 @@ const config: Config = {
         "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
       },
       colors: {
-        primary: "#0085FF",
+        primary: "#FF0083",
         component: "#303A44",
         inner: "#242D30",
         "app-bg": "#00141D",