diff --git a/public/images/robot.svg b/public/images/robot.svg
new file mode 100644
index 0000000000..9079bbab15
--- /dev/null
+++ b/public/images/robot.svg
@@ -0,0 +1,14 @@
+<svg width="169" height="179" viewBox="0 0 169 179" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M134.186 139.13V134.13H129.186H99.3872H94.3872V139.13V168.929V173.929H99.3872H139.119H144.119V168.929V158.996V153.996H139.119H134.186V139.13Z" fill="white" stroke="#252525" stroke-width="10"/>
+<path d="M74.598 139.13V134.13H69.598H49.7319H44.7319V139.13V144.063H39.7988H34.7988V149.063V168.929V173.929H39.7988H79.531H84.531V168.929V158.996V153.996H79.531H74.598V139.13Z" fill="white" stroke="#252525" stroke-width="10"/>
+<path d="M139.124 124.197H134.124V129.197V139.135V144.135H139.124H159H164V139.135V129.197V124.197H159H139.124Z" fill="white" stroke="#252525" stroke-width="10"/>
+<path d="M29.8623 64.5981H24.8623V69.5981V139.129V144.129H29.8623H49.7284H54.7284V139.129V69.5981V64.5981H49.7284H29.8623Z" fill="white" stroke="#252525" stroke-width="10"/>
+<path d="M59.6621 64.5981H54.6621V69.5981V119.263V124.263H59.6621H158.993H163.993V119.263V69.5981V64.5981H158.993H59.6621Z" fill="white" stroke="#252525" stroke-width="10"/>
+<path d="M10 64.5981H5V69.5981V119.263V124.263H10H19.933H24.933V119.263V69.5981V64.5981H19.933H10Z" fill="white" stroke="#252525" stroke-width="10"/>
+<path d="M149.056 64.6652H154.056V59.6652V10V5H149.056H49.7251H44.7251V10V59.6652V64.6652H49.7251H149.056Z" fill="white" stroke="#252525" stroke-width="10"/>
+<path d="M19.9253 5H14.9253V10V59.6652V64.6652H19.9253H39.7914H44.7914V59.6652V10V5H39.7914H19.9253Z" fill="white" stroke="#252525" stroke-width="10"/>
+<path d="M74.5 20V40" stroke="#252525" stroke-width="10"/>
+<path d="M124 20V40" stroke="#252525" stroke-width="10"/>
+<path d="M89.5 45H109.5" stroke="#252525" stroke-width="10"/>
+<path d="M69.5 84.5H144V109" stroke="#252525" stroke-width="10"/>
+</svg>
diff --git a/src/app/explorer/components/GuildCard.tsx b/src/app/explorer/_components/GuildCard.tsx
similarity index 100%
rename from src/app/explorer/components/GuildCard.tsx
rename to src/app/explorer/_components/GuildCard.tsx
diff --git a/src/app/explorer/_components/HeaderBackground.tsx b/src/app/explorer/_components/HeaderBackground.tsx
new file mode 100644
index 0000000000..66544aba41
--- /dev/null
+++ b/src/app/explorer/_components/HeaderBackground.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import { cn } from "@/lib/cssUtils";
+import { useAtomValue } from "jotai";
+import { isNavStuckAtom, isSearchStuckAtom } from "../atoms";
+
+export const HeaderBackground = () => {
+  const isNavStuck = useAtomValue(isNavStuckAtom);
+  const isSearchStuck = useAtomValue(isSearchStuckAtom);
+
+  return (
+    <div
+      className={cn(
+        "fixed inset-x-0 top-0 z-10 h-0 bg-card shadow-md transition-all duration-200 dark:bg-background",
+        {
+          "h-16": isNavStuck,
+          "h-[calc(theme(space.36)+theme(space.2))] bg-gradient-to-b from-card to-background sm:h-[calc(theme(space.28)-theme(space.2))] dark:from-background dark:to-card-secondary/50":
+            isSearchStuck,
+        },
+      )}
+    />
+  );
+};
diff --git a/src/app/explorer/components/InfiniteScrollGuilds.tsx b/src/app/explorer/_components/InfiniteScrollGuilds.tsx
similarity index 94%
rename from src/app/explorer/components/InfiniteScrollGuilds.tsx
rename to src/app/explorer/_components/InfiniteScrollGuilds.tsx
index 155422d8ba..b4651d1f0c 100644
--- a/src/app/explorer/components/InfiniteScrollGuilds.tsx
+++ b/src/app/explorer/_components/InfiniteScrollGuilds.tsx
@@ -7,7 +7,7 @@ import { useIntersection } from "foxact/use-intersection";
 import { useAtomValue } from "jotai";
 import { useCallback, useEffect } from "react";
 import { searchAtom } from "../atoms";
-import { PAGE_SIZE } from "../constants";
+import { ACTIVE_SECTION, PAGE_SIZE } from "../constants";
 import { getGuildSearch } from "../fetchers";
 
 export const InfiniteScrollGuilds = () => {
@@ -45,7 +45,7 @@ export const InfiniteScrollGuilds = () => {
   const guilds = data?.pages.flatMap((page) => page.items) || [];
 
   return (
-    <section className="grid gap-2">
+    <section className="grid gap-2" id={ACTIVE_SECTION.exploreGuilds}>
       <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
         {isLoading
           ? Array.from({ length: PAGE_SIZE }, (_, i) => (
diff --git a/src/app/explorer/components/Search.tsx b/src/app/explorer/_components/Search.tsx
similarity index 95%
rename from src/app/explorer/components/Search.tsx
rename to src/app/explorer/_components/Search.tsx
index 77af409108..6e9840d09e 100644
--- a/src/app/explorer/components/Search.tsx
+++ b/src/app/explorer/_components/Search.tsx
@@ -29,7 +29,7 @@ export const Search = () => {
     window.history.replaceState(
       null,
       "",
-      `${pathname}?${newSearchParams.toString()}`,
+      [pathname, newSearchParams.toString()].filter(Boolean).join("?"),
     );
   }, [value, pathname]);
 
diff --git a/src/app/explorer/atoms.ts b/src/app/explorer/atoms.ts
index 0fa04b9ce8..cc0ef0d59c 100644
--- a/src/app/explorer/atoms.ts
+++ b/src/app/explorer/atoms.ts
@@ -1,3 +1,5 @@
 import { atom } from "jotai";
 
 export const searchAtom = atom<string | undefined>(undefined);
+export const isNavStuckAtom = atom(false);
+export const isSearchStuckAtom = atom(false);
diff --git a/src/app/explorer/constants.ts b/src/app/explorer/constants.ts
index 0a155f3509..3c0383f14b 100644
--- a/src/app/explorer/constants.ts
+++ b/src/app/explorer/constants.ts
@@ -1 +1,5 @@
 export const PAGE_SIZE = 24;
+export const ACTIVE_SECTION = {
+  yourGuilds: "your-guilds",
+  exploreGuilds: "explore-guilds",
+};
diff --git a/src/app/explorer/page.tsx b/src/app/explorer/page.tsx
index 046c5279b0..c19399edfc 100644
--- a/src/app/explorer/page.tsx
+++ b/src/app/explorer/page.tsx
@@ -10,8 +10,10 @@ import {
   dehydrate,
 } from "@tanstack/react-query";
 import { Suspense } from "react";
-import { InfiniteScrollGuilds } from "./components/InfiniteScrollGuilds";
-import { Search } from "./components/Search";
+import { HeaderBackground } from "./_components/HeaderBackground";
+import { InfiniteScrollGuilds } from "./_components/InfiniteScrollGuilds";
+import { Search } from "./_components/Search";
+import { ACTIVE_SECTION } from "./constants";
 import { getGuildSearch } from "./fetchers";
 
 const getAssociatedGuilds = async () => {
@@ -32,21 +34,29 @@ export default async function Explorer() {
   });
 
   return (
-    <main className="container mx-auto grid max-w-screen-lg gap-8 px-4 py-8">
-      <section className="pt-6 pb-8">
-        <h1 className="font-black text-5xl">Guildhall</h1>
-      </section>
-
-      <YourGuildsSection />
-
-      <section>
-        <Search />
-      </section>
-
-      <HydrationBoundary state={dehydrate(queryClient)}>
-        <InfiniteScrollGuilds />
-      </HydrationBoundary>
-    </main>
+    <>
+      <HeaderBackground />
+      <main className="container mx-auto grid max-w-screen-lg gap-8 px-4 py-8">
+        <section className="pt-6 pb-8">
+          <h1
+            className="font-black font-display text-5xl tracking-tight"
+            id={ACTIVE_SECTION.yourGuilds}
+          >
+            Guildhall
+          </h1>
+        </section>
+
+        <YourGuildsSection />
+
+        <section>
+          <Search />
+        </section>
+
+        <HydrationBoundary state={dehydrate(queryClient)}>
+          <InfiniteScrollGuilds />
+        </HydrationBoundary>
+      </main>
+    </>
   );
 }
 
@@ -58,7 +68,7 @@ async function YourGuildsSection() {
       <AuthBoundary
         fallback={
           <div className="flex items-center gap-4 rounded-2xl bg-card px-5 py-6">
-            <img src="/icons/robot.svg" alt="Guild Robot" className="size-8" />
+            <img src="/images/robot.svg" alt="Guild Robot" className="size-8" />
 
             <p className="font-semibold">
               Sign in to view your guilds or create new ones
@@ -93,7 +103,7 @@ async function YourGuilds() {
     </div>
   ) : (
     <div className="flex items-center gap-4 rounded-2xl bg-card px-5 py-6">
-      <img src="/icons/robot.svg" alt="Guild Robot" className="size-8" />
+      <img src="/images/robot.svg" alt="Guild Robot" className="size-8" />
 
       <p className="font-semibold">
         You&apos;re not a member of any guilds yet. Explore and join some below,