diff --git a/src/components/common/ConnectButton.tsx b/src/components/common/ConnectButton.tsx
index 9d0fcf73..c7127814 100644
--- a/src/components/common/ConnectButton.tsx
+++ b/src/components/common/ConnectButton.tsx
@@ -9,7 +9,6 @@ import { UniLink } from "../ui/UniLink"
 import { useEffect, useState } from "react"
 import { DuplicateIcon, LogoutIcon } from "@heroicons/react/outline"
 import { BigNumber } from "ethers"
-import { CrossbellIcon } from "~/components/icons/CrossbellIcon"
 
 export const ConnectButton: React.FC<{
   left?: boolean
@@ -56,7 +55,7 @@ export const ConnectButton: React.FC<{
     addressOrName: address,
   })
 
-  const [InsufficientBalance, setInsufficientBalance] = useState<boolean>(true)
+  const [InsufficientBalance, setInsufficientBalance] = useState<boolean>(false)
 
   useEffect(() => {
     if (balance !== undefined) {
@@ -157,9 +156,7 @@ export const ConnectButton: React.FC<{
                               href="https://faucet.crossbell.io/"
                               className="text-red-600 px-4 h-8 flex items-center w-full whitespace-nowrap hover:bg-zinc-100"
                             >
-                              <span className="mr-2 fill-red-600">
-                                <CrossbellIcon />
-                              </span>
+                              <span className="mr-2 fill-red-600 i-bxs:bell"></span>
                               Insufficient $CSB balance ({balance?.formatted})
                             </UniLink>
                           )}
diff --git a/src/components/icons/CrossbellIcon.tsx b/src/components/icons/CrossbellIcon.tsx
deleted file mode 100644
index fd2709da..00000000
--- a/src/components/icons/CrossbellIcon.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from "react"
-
-export const CrossbellIcon: React.FC<React.ComponentPropsWithoutRef<"svg">> = (
-  props,
-) => {
-  return (
-    <svg
-      width="1em"
-      height="1em"
-      {...props}
-      viewBox="0 0 1024 1024"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path d="M512 1024c70.64 0 127.94-57.3 127.94-128H384.06c0 70.7 57.3 128 127.94 128z m430.78-299.42c-38.64-41.52-110.94-103.98-110.94-308.58 0-155.4-108.96-279.8-255.88-310.32V64c0-35.34-28.64-64-63.96-64s-63.96 28.66-63.96 64v41.68C301.12 136.2 192.16 260.6 192.16 416c0 204.6-72.3 267.06-110.94 308.58-12 12.9-17.32 28.32-17.22 43.42 0.22 32.8 25.96 64 64.2 64h767.6c38.24 0 64-31.2 64.2-64 0.1-15.1-5.22-30.54-17.22-43.42z"></path>
-    </svg>
-  )
-}
diff --git a/src/components/icons/LaughIcon.tsx b/src/components/icons/LaughIcon.tsx
deleted file mode 100644
index 7298de81..00000000
--- a/src/components/icons/LaughIcon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from "react"
-
-export const LaughIcon: React.FC<React.ComponentPropsWithoutRef<"svg">> = (
-  props,
-) => {
-  return (
-    <svg
-      width="1em"
-      height="1em"
-      {...props}
-      viewBox="0 0 1024 1024"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M512 16C238 16 16 238 16 512s222 496 496 496 496-222 496-496S786 16 512 16z m282.8 778.8c-75.6 75.6-176 117.2-282.8 117.2s-207.2-41.6-282.8-117.2S112 618.8 112 512s41.6-207.2 117.2-282.8S405.2 112 512 112s207.2 41.6 282.8 117.2S912 405.2 912 512s-41.6 207.2-117.2 282.8zM672 448c35.4 0 64-28.6 64-64s-28.6-64-64-64-64 28.6-64 64 28.6 64 64 64z m-320 0c35.4 0 64-28.6 64-64s-28.6-64-64-64-64 28.6-64 64 28.6 64 64 64z m388.8 128H283.2c-16.4 0-29 14-27 30 15 118.4 117.8 210 242.2 210h27.2c124.4 0 227.2-91.6 242.2-210 2-16-10.6-30-27-30z"
-        p-id="2265"
-      ></path>
-    </svg>
-  )
-}
diff --git a/src/components/site/SiteHeader.tsx b/src/components/site/SiteHeader.tsx
index 3b29f0a8..784cb5d5 100644
--- a/src/components/site/SiteHeader.tsx
+++ b/src/components/site/SiteHeader.tsx
@@ -24,8 +24,6 @@ import {
   useGetUserSites,
 } from "~/queries/site"
 import { useConnectModal } from "@rainbow-me/rainbowkit"
-import { Menu } from "@headlessui/react"
-import { CrossbellIcon } from "~/components/icons/CrossbellIcon"
 import { BlockchainIcon } from "~/components/icons/BlockchainIcon"
 import { DotsHorizontalIcon, RssIcon } from "@heroicons/react/solid"
 import { Modal } from "~/components/ui/Modal"
@@ -147,7 +145,7 @@ export const SiteHeader: React.FC<{
   const moreMenuItems = [
     {
       text: "View on Crossbell.io",
-      icon: <CrossbellIcon />,
+      icon: <span className="i-bxs:bell inline-block"></span>,
       url: CSB_IO && `${CSB_IO}/@${site?.username}`,
     },
     {
@@ -245,7 +243,9 @@ export const SiteHeader: React.FC<{
                             href={item.url}
                             className="h-10 flex w-full space-x-2 items-center px-3 hover:bg-gray-100"
                           >
-                            <span className="fill-gray-500">{item.icon}</span>
+                            <span className="fill-gray-500 flex">
+                              {item.icon}
+                            </span>
                             <span>{item.text}</span>
                           </UniLink>
                         )
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 515e3550..d85d46a6 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -9,7 +9,6 @@ import { useAccount } from "wagmi"
 import { ConnectButton } from "~/components/common/ConnectButton"
 import Image from "next/image"
 import { DotsHorizontalIcon, CheckIcon, XIcon } from "@heroicons/react/solid"
-import { LaughIcon } from "~/components/icons/LaughIcon"
 import { LoveIcon } from "~/components/icons/LoveIcon"
 import { BlockchainIcon } from "~/components/icons/BlockchainIcon"
 import { Button } from "~/components/ui/Button"