diff --git a/src/app/(home)/components/Header.tsx b/src/app/(home)/components/Header.tsx
deleted file mode 100644
index 89f149ca..00000000
--- a/src/app/(home)/components/Header.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { ConnectButton } from "~/components/common/ConnectButton"
-import { Logo } from "~/components/common/Logo"
-import { Image } from "~/components/ui/Image"
-import { UniLink } from "~/components/ui/UniLink"
-import { GITHUB_LINK } from "~/lib/env"
-import { useTranslation } from "~/lib/i18n"
-import { cn } from "~/lib/utils"
-
-const tabs = [
-  {
-    name: "Home",
-    link: "/",
-  },
-  {
-    name: "Activities",
-    link: "/activities",
-  },
-  {
-    name: (
-      <Image
-        className="no-optimization w-24"
-        alt="github stars"
-        src="https://img.shields.io/github/stars/Crossbell-Box/xLog?color=white&label=Stars&logo=github&style=social"
-      />
-    ),
-    link: GITHUB_LINK,
-  },
-]
-
-export async function Header() {
-  const { t } = await useTranslation("index")
-  // const pathname = usePathname()
-  // TODO how to set active state for Link in RSC,
-  // make <UniLink> be client component and add activeClass props or some way else
-  const pathname = "/"
-  return (
-    <header className="py-5 fixed w-full top-0 bg-white z-10">
-      <div className="max-w-screen-lg px-5 mx-auto flex justify-between items-center">
-        <UniLink href="/" className="text-2xl font-extrabold flex items-center">
-          <div className="inline-block w-9 h-9 mr-3">
-            <Logo type="lottie" width={36} height={36} autoplay={false} />
-          </div>
-          xLog
-        </UniLink>
-        <div className="space-x-14 text-zinc-500 flex">
-          {tabs?.map((tab, index) => (
-            <UniLink
-              className={cn(
-                "cursor-pointer items-center hidden sm:flex hover:text-accent text-lg",
-                {
-                  "text-accent": pathname === tab.link,
-                },
-              )}
-              key={tab.link}
-              href={tab.link}
-            >
-              {typeof tab.name === "string" ? t(tab.name) : tab.name}
-            </UniLink>
-          ))}
-          <ConnectButton size="base" variantColor="black" />
-        </div>
-      </div>
-    </header>
-  )
-}
diff --git a/src/app/(home)/components/Showcase.tsx b/src/app/(home)/components/Showcase.tsx
index 7f105da6..ec51763c 100644
--- a/src/app/(home)/components/Showcase.tsx
+++ b/src/app/(home)/components/Showcase.tsx
@@ -1,12 +1,18 @@
 "use client"
 
-import { FollowAllButton } from "~/components/common/FollowAllButton"
-import { useGetShowcase } from "~/queries/home"
+import { useState } from "react"
 
-import ShowcaseList from "./ShowcaseList"
+import { CharacterFloatCard } from "~/components/common/CharacterFloatCard"
+import { FollowAllButton } from "~/components/common/FollowAllButton"
+import { Image } from "~/components/ui/Image"
+import { UniLink } from "~/components/ui/UniLink"
+import { getSiteLink } from "~/lib/helpers"
+import { useGetShowcase } from "~/queries/home"
 
 export function ShowCase() {
   const showcaseSites = useGetShowcase()
+  const [showcaseMore, setShowcaseMore] = useState(false)
+
   return (
     <>
       <FollowAllButton
@@ -18,7 +24,56 @@ export function ShowCase() {
           .map(Number)}
         siteIds={showcaseSites.data?.map((s: { handle: string }) => s.handle)}
       />
-      <ShowcaseList sites={showcaseSites.data} />
+      <ul
+        className={`pt-10 grid grid-cols-2 md:grid-cols-3 gap-10 overflow-y-hidden relative text-left ${
+          showcaseMore ? "" : "max-h-[540px]"
+        }`}
+      >
+        <div
+          className={`absolute bottom-0 h-20 left-0 right-0 bg-gradient-to-t from-white via-white flex items-end justify-center font-bold cursor-pointer ${
+            showcaseMore ? "hidden" : ""
+          }`}
+          onClick={() => setShowcaseMore(true)}
+        >
+          {/* {t("Show more")} */}
+          Show more
+        </div>
+        {showcaseSites.data?.map((site) => (
+          <li className="inline-flex align-middle" key={site.handle}>
+            <UniLink
+              href={getSiteLink({
+                subdomain: site.handle,
+              })}
+              className="inline-flex align-middle w-full"
+            >
+              <CharacterFloatCard siteId={site.handle}>
+                <span className="w-14 h-14 inline-block">
+                  <Image
+                    className="rounded-full"
+                    src={
+                      site.metadata?.content?.avatars?.[0] ||
+                      "ipfs://bafkreiabgixxp63pg64moxnsydz7hewmpdkxxi3kdsa4oqv4pb6qvwnmxa"
+                    }
+                    alt={site.handle}
+                    width="56"
+                    height="56"
+                  ></Image>
+                </span>
+              </CharacterFloatCard>
+              <span className="ml-3 min-w-0 flex-1 justify-center inline-flex flex-col">
+                <span className="truncate w-full inline-block font-medium">
+                  {site.metadata?.content?.name}
+                </span>
+                {site.metadata?.content?.bio && (
+                  <span className="text-gray-500 text-xs truncate w-full inline-block mt-1">
+                    {site.metadata.content?.bio}
+                  </span>
+                )}
+              </span>
+            </UniLink>
+          </li>
+        ))}
+      </ul>
     </>
   )
 }
diff --git a/src/app/(home)/components/ShowcaseList.tsx b/src/app/(home)/components/ShowcaseList.tsx
deleted file mode 100644
index e2fb4241..00000000
--- a/src/app/(home)/components/ShowcaseList.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-"use client"
-
-import { CharacterEntity } from "crossbell.js"
-import { useState } from "react"
-
-import { CharacterFloatCard } from "~/components/common/CharacterFloatCard"
-import { Image } from "~/components/ui/Image"
-import { UniLink } from "~/components/ui/UniLink"
-import { getSiteLink } from "~/lib/helpers"
-
-export default function ShowcaseList({ sites }: { sites?: CharacterEntity[] }) {
-  const [showcaseMore, setShowcaseMore] = useState(false)
-
-  return (
-    <ul
-      className={`pt-10 grid grid-cols-2 md:grid-cols-3 gap-10 overflow-y-hidden relative text-left ${
-        showcaseMore ? "" : "max-h-[540px]"
-      }`}
-    >
-      <div
-        className={`absolute bottom-0 h-20 left-0 right-0 bg-gradient-to-t from-white via-white flex items-end justify-center font-bold cursor-pointer ${
-          showcaseMore ? "hidden" : ""
-        }`}
-        onClick={() => setShowcaseMore(true)}
-      >
-        {/* {t("Show more")} */}
-        Show more
-      </div>
-      {sites?.map((site) => (
-        <li className="inline-flex align-middle" key={site.handle}>
-          <UniLink
-            href={getSiteLink({
-              subdomain: site.handle,
-            })}
-            className="inline-flex align-middle w-full"
-          >
-            <CharacterFloatCard siteId={site.handle}>
-              <span className="w-14 h-14 inline-block">
-                <Image
-                  className="rounded-full"
-                  src={
-                    site.metadata?.content?.avatars?.[0] ||
-                    "ipfs://bafkreiabgixxp63pg64moxnsydz7hewmpdkxxi3kdsa4oqv4pb6qvwnmxa"
-                  }
-                  alt={site.handle}
-                  width="56"
-                  height="56"
-                ></Image>
-              </span>
-            </CharacterFloatCard>
-            <span className="ml-3 min-w-0 flex-1 justify-center inline-flex flex-col">
-              <span className="truncate w-full inline-block font-medium">
-                {site.metadata?.content?.name}
-              </span>
-              {site.metadata?.content?.bio && (
-                <span className="text-gray-500 text-xs truncate w-full inline-block mt-1">
-                  {site.metadata.content?.bio}
-                </span>
-              )}
-            </span>
-          </UniLink>
-        </li>
-      ))}
-    </ul>
-  )
-}
diff --git a/src/app/(home)/layout.tsx b/src/app/(home)/layout.tsx
index daba730b..9d2c85fe 100644
--- a/src/app/(home)/layout.tsx
+++ b/src/app/(home)/layout.tsx
@@ -1,19 +1,73 @@
+import { ConnectButton } from "~/components/common/ConnectButton"
 import { DarkModeSwitch } from "~/components/common/DarkModeSwitch"
+import { Logo } from "~/components/common/Logo"
+import { Image } from "~/components/ui/Image"
 import { UniLink } from "~/components/ui/UniLink"
 import { APP_NAME, DISCORD_LINK, GITHUB_LINK, TWITTER_LINK } from "~/lib/env"
 import { getSiteLink } from "~/lib/helpers"
+import { useTranslation } from "~/lib/i18n"
+import { cn } from "~/lib/utils"
 
-import { Header } from "./components/Header"
+const tabs = [
+  {
+    name: "Home",
+    link: "/",
+  },
+  {
+    name: "Activities",
+    link: "/activities",
+  },
+  {
+    name: (
+      <Image
+        className="no-optimization w-24"
+        alt="github stars"
+        src="https://img.shields.io/github/stars/Crossbell-Box/xLog?color=white&label=Stars&logo=github&style=social"
+      />
+    ),
+    link: GITHUB_LINK,
+  },
+]
 
 export default async function HomeLayout({
   children,
 }: {
   children?: React.ReactNode
 }) {
+  const { t } = await useTranslation("index")
+
   return (
     <>
-      {/* @ts-expect-error RSC */}
-      <Header />
+      <header className="py-5 fixed w-full top-0 bg-white z-10">
+        <div className="max-w-screen-lg px-5 mx-auto flex justify-between items-center">
+          <UniLink
+            href="/"
+            className="text-2xl font-extrabold flex items-center"
+          >
+            <div className="inline-block w-9 h-9 mr-3">
+              <Logo type="lottie" width={36} height={36} autoplay={false} />
+            </div>
+            xLog
+          </UniLink>
+          <div className="space-x-14 text-zinc-500 flex">
+            {tabs?.map((tab, index) => (
+              <UniLink
+                className={cn(
+                  "cursor-pointer items-center hidden sm:flex hover:text-accent text-lg",
+                  {
+                    "text-accent": "/" === tab.link,
+                  },
+                )}
+                key={tab.link}
+                href={tab.link}
+              >
+                {typeof tab.name === "string" ? t(tab.name) : tab.name}
+              </UniLink>
+            ))}
+            <ConnectButton size="base" variantColor="black" />
+          </div>
+        </div>
+      </header>
       {children}
       <footer className="mt-10 font-medium border-t">
         <div className="max-w-screen-lg px-5 py-14 mx-auto flex justify-between">
diff --git a/src/components/ui/UniLink.tsx b/src/components/ui/UniLink.tsx
index 4a7d0f55..4d2e1a3a 100644
--- a/src/components/ui/UniLink.tsx
+++ b/src/components/ui/UniLink.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import Link from "next/link"
 
 export type UniLinkProps = {