diff --git a/apps/webapp/src/app/globals.css b/apps/webapp/src/app/globals.css
index 027a8645..2bdd5f00 100644
--- a/apps/webapp/src/app/globals.css
+++ b/apps/webapp/src/app/globals.css
@@ -13,6 +13,7 @@
   --color-ui-warning-foreground: #ffffff;
   --color-ui-destructive: #d32c34;
   --color-ui-destructive-foreground: #ffffff;
+  --color-ui-bg-accent-light: #fffbfb;
 }
 
 @theme inline {
@@ -26,6 +27,7 @@
   --color-muted-foreground: var(--color-ui-text-muted);
   --color-accent: var(--color-ui-accent);
   --color-accent-foreground: var(--color-ui-text-accent);
+  --color-background-accent-light: var(--color-ui-bg-accent-light);
 
   --color-primary: var(--color-ui-primary);
   --color-primary-foreground: var(--color-ui-primary-foreground);
@@ -82,9 +84,9 @@
     @apply border-border outline-ring/50;
   }
   html {
-    @apply bg-background;
+    @apply overflow-x-hidden bg-background;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply overflow-x-hidden bg-background text-foreground;
   }
 }
diff --git a/apps/webapp/src/app/layout.tsx b/apps/webapp/src/app/layout.tsx
index ccac0d99..534f5fb9 100644
--- a/apps/webapp/src/app/layout.tsx
+++ b/apps/webapp/src/app/layout.tsx
@@ -4,7 +4,7 @@ import "./globals.css";
 import { Geist, Geist_Mono } from "next/font/google";
 
 import { AppProviders } from "@/providers";
-import { Toast, WalletChangeGuard } from "@/widget";
+import { Footer, Toast, WalletChangeGuard } from "@/widget";
 import { RegistrationContextProvider } from "@/entities/registration-process";
 import { TooltipProvider } from "@/shared/ui/tooltip";
 
@@ -33,17 +33,20 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${geistSans.variable} ${geistMono.variable} antialiased overflow-x-hidden`}
       >
         <AppProviders>
           <RegistrationContextProvider>
             <TooltipProvider>
               <WalletChangeGuard />
-              <main className="min-h-screen">{children}</main>
+              <main className="min-h-screen w-full min-w-0 max-w-full overflow-x-hidden">
+                {children}
+              </main>
               <Toast />
             </TooltipProvider>
           </RegistrationContextProvider>
         </AppProviders>
+        <Footer />
       </body>
     </html>
   );
diff --git a/apps/webapp/src/app/page.tsx b/apps/webapp/src/app/page.tsx
index 4ee1b8ff..3ce992aa 100644
--- a/apps/webapp/src/app/page.tsx
+++ b/apps/webapp/src/app/page.tsx
@@ -1,10 +1 @@
-import { isRegistrationV2 } from "@/shared/lib";
-import { Header } from "@/widget";
-import { redirect } from "next/navigation";
-
-export default function HomePage() {
-  if (!isRegistrationV2()) {
-    return redirect("/registration");
-  }
-  return <Header />;
-}
+export { HomePage as default } from "@/page-components/home";
diff --git a/apps/webapp/src/features/home/hooks/use-cursor-page-pagination.ts b/apps/webapp/src/features/home/hooks/use-cursor-page-pagination.ts
new file mode 100644
index 00000000..d140de2d
--- /dev/null
+++ b/apps/webapp/src/features/home/hooks/use-cursor-page-pagination.ts
@@ -0,0 +1,148 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { getServerPage, type PageParams } from "@shinzo/ui/pagination";
+import {
+  hasNextCursorPage,
+  type CursorPaginationParams,
+} from "../lib/pagination";
+
+type CursorKeyStorage = (string | undefined)[];
+
+function readFromCursorKeyStorage(storageKey: string): CursorKeyStorage {
+  if (typeof sessionStorage === "undefined") {
+    return [undefined];
+  }
+  try {
+    const raw = sessionStorage.getItem(storageKey);
+    if (!raw) return [undefined];
+    const parsed = JSON.parse(raw) as CursorKeyStorage;
+    return Array.isArray(parsed) && parsed.length > 0 ? parsed : [undefined];
+  } catch {
+    return [undefined];
+  }
+}
+
+function writeToCursorKeyStorage(
+  storageKey: string,
+  storedKeys: CursorKeyStorage
+) {
+  if (typeof sessionStorage === "undefined") return;
+  sessionStorage.setItem(storageKey, JSON.stringify(storedKeys));
+}
+
+type UseCursorPagePaginationOptions = {
+  pageParam: string;
+  storageKey: string;
+  limit: number;
+};
+
+/**
+ * Maps URL page numbers to Cosmos cursor keys (`pagination.key` / `next_key`).
+ * Page 1 uses no key; page N uses the `next_key` saved when page N−1 was fetched.
+ */
+export function useCursorPagePagination({
+  pageParam,
+  storageKey,
+  limit,
+}: UseCursorPagePaginationOptions) {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const [storedKeys, setStoredKeys] = useState<CursorKeyStorage>(() =>
+    readFromCursorKeyStorage(storageKey)
+  );
+
+  const { page, offset }: PageParams = useMemo(
+    () =>
+      getServerPage({
+        page: searchParams.get(pageParam) ?? "1",
+        limit: String(limit),
+      }),
+    [searchParams, pageParam, limit]
+  );
+
+  /** api is returning `total: 0` on keyed pages when tested; keep the count from page 1. */
+  const [totalItems, setTotalItems] = useState(0);
+
+  const totalPages = useMemo(
+    () => Math.max(1, Math.ceil(totalItems / limit)),
+    [totalItems, limit]
+  );
+
+  const queryParams: CursorPaginationParams = useMemo(() => {
+    if (page <= 1) {
+      return { limit, count_total: true };
+    }
+
+    const cursorKey = storedKeys[page - 1];
+    if (cursorKey) {
+      return { key: cursorKey, limit, count_total: true };
+    }
+
+    // jump to last page: fall back to offset when cursor for this page was never visited
+    if (page === totalPages && totalPages > 1) {
+      return { offset: (page - 1) * limit, limit, count_total: true };
+    }
+
+    return { limit, count_total: true };
+  }, [page, storedKeys, limit, totalPages]);
+
+  const applyPaginationData = useCallback(
+    (nextKey: string | null | undefined, total: number) => {
+      if (total > 0) {
+        setTotalItems(total);
+      }
+      const effectiveTotal = total > 0 ? total : totalItems;
+      const pageCount = Math.max(1, Math.ceil(effectiveTotal / limit));
+
+      if (effectiveTotal > 0 && page > pageCount) {
+        const params = new URLSearchParams(searchParams.toString());
+        params.set(pageParam, String(pageCount));
+        router.replace(`?${params.toString()}`);
+        return;
+      }
+
+      setStoredKeys((prev) => {
+        const next = [...prev];
+        next[page] = nextKey ?? undefined;
+        writeToCursorKeyStorage(storageKey, next);
+        return next;
+      });
+    },
+    [page, limit, pageParam, router, searchParams, storageKey, totalItems]
+  );
+
+  const resetToFirstPage = useCallback(() => {
+    const resetStoredKeys: CursorKeyStorage = [undefined];
+    setTotalItems(0);
+    setStoredKeys(resetStoredKeys);
+    writeToCursorKeyStorage(storageKey, resetStoredKeys);
+    const params = new URLSearchParams(searchParams.toString());
+    params.set(pageParam, "1");
+    router.replace(`?${params.toString()}`);
+  }, [pageParam, router, searchParams, storageKey]);
+
+  useEffect(() => {
+    if (page > 1 && !storedKeys[page - 1] && page !== totalPages) {
+      resetToFirstPage();
+    }
+  }, [page, storedKeys, resetToFirstPage, totalPages]);
+
+  const canGoNext = (nextKey: string | null | undefined, total: number) => {
+    const effectiveTotal = total > 0 ? total : totalItems;
+    const totalPages = Math.max(1, Math.ceil(effectiveTotal / limit));
+    return page < totalPages && hasNextCursorPage(nextKey);
+  };
+
+  return {
+    page,
+    offset,
+    limit,
+    queryParams,
+    applyPaginationData,
+    canGoNext,
+    resetToFirstPage,
+    totalItems,
+  };
+}
diff --git a/apps/webapp/src/features/home/hooks/use-registered-hosts.ts b/apps/webapp/src/features/home/hooks/use-registered-hosts.ts
new file mode 100644
index 00000000..91ecc2aa
--- /dev/null
+++ b/apps/webapp/src/features/home/hooks/use-registered-hosts.ts
@@ -0,0 +1,51 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import {
+  buildCursorPaginationSearchParams,
+  type CursorPaginationParams,
+  type CursorPaginationResponse,
+} from "../lib/pagination";
+
+const registeredHostsApiEndpoint =
+  process.env.NEXT_PUBLIC_REGISTERED_HOSTS_API_ENDPOINT ||
+  "http://rpc.develop.devnet.shinzo.network:1317/shinzonetwork/host/v1/hosts";
+
+export type RegisteredHost = {
+  address: string;
+  did: string;
+  connection_string: string;
+};
+
+export type RegisteredHostsResponse = {
+  hosts: RegisteredHost[];
+  pagination?: CursorPaginationResponse;
+};
+
+export type RegisteredHostsPaginationParams = CursorPaginationParams;
+
+export async function fetchRegisteredHosts(
+  pagination: RegisteredHostsPaginationParams
+): Promise<RegisteredHostsResponse> {
+  const params = buildCursorPaginationSearchParams(pagination);
+
+  const response = await fetch(
+    `${registeredHostsApiEndpoint}?${params.toString()}`
+  );
+  if (!response.ok) throw new Error(`HTTP ${response.status}`);
+
+  return response.json() as Promise<RegisteredHostsResponse>;
+}
+
+export function useRegisteredHosts(
+  pagination: RegisteredHostsPaginationParams,
+  intervalMs = 30000
+) {
+  return useQuery({
+    queryKey: ["registered-hosts", pagination],
+    queryFn: () => fetchRegisteredHosts(pagination),
+    refetchInterval: intervalMs,
+    refetchIntervalInBackground: true,
+    placeholderData: (previousData) => previousData,
+  });
+}
diff --git a/apps/webapp/src/features/home/hooks/use-registered-indexers.ts b/apps/webapp/src/features/home/hooks/use-registered-indexers.ts
new file mode 100644
index 00000000..38d5cca3
--- /dev/null
+++ b/apps/webapp/src/features/home/hooks/use-registered-indexers.ts
@@ -0,0 +1,53 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import {
+  buildCursorPaginationSearchParams,
+  CursorPaginationResponse,
+  type CursorPaginationParams,
+} from "../lib/pagination";
+
+const registeredIndexerApiEndpoint =
+  process.env.NEXT_PUBLIC_REGISTERED_INDEXER_API_ENDPOINT ||
+  "http://rpc.develop.devnet.shinzo.network:1317/shinzonetwork/indexer/v1/indexers";
+
+export type RegisteredIndexer = {
+  address: string;
+  did: string;
+  connection_string: string;
+  source_chain: string;
+  source_chain_id: string;
+};
+
+export type RegisteredIndexersResponse = {
+  indexers: RegisteredIndexer[];
+  pagination?: CursorPaginationResponse;
+};
+
+export type RegisteredIndexersPaginationParams = CursorPaginationParams;
+
+export async function fetchRegisteredIndexers(
+  pagination: RegisteredIndexersPaginationParams
+): Promise<RegisteredIndexersResponse> {
+  const params = buildCursorPaginationSearchParams(pagination);
+
+  const response = await fetch(
+    `${registeredIndexerApiEndpoint}?${params.toString()}`
+  );
+  if (!response.ok) throw new Error(`HTTP ${response.status}`);
+
+  return response.json() as Promise<RegisteredIndexersResponse>;
+}
+
+export function useRegisteredIndexers(
+  pagination: RegisteredIndexersPaginationParams,
+  intervalMs = 30000
+) {
+  return useQuery({
+    queryKey: ["registered-indexers", pagination],
+    queryFn: () => fetchRegisteredIndexers(pagination),
+    refetchInterval: intervalMs,
+    refetchIntervalInBackground: true,
+    placeholderData: (previousData) => previousData,
+  });
+}
diff --git a/apps/webapp/src/features/home/index.ts b/apps/webapp/src/features/home/index.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/apps/webapp/src/features/home/lib/pagination.ts b/apps/webapp/src/features/home/lib/pagination.ts
new file mode 100644
index 00000000..c46ccef9
--- /dev/null
+++ b/apps/webapp/src/features/home/lib/pagination.ts
@@ -0,0 +1,38 @@
+export type CursorPaginationResponse = {
+  total?: string | number;
+  next_key?: string | null;
+};
+
+export type CursorPaginationParams = {
+  key?: string;
+  offset?: number;
+  limit: number;
+  count_total?: boolean;
+  reverse?: boolean;
+};
+
+export function buildCursorPaginationSearchParams(
+  pagination: CursorPaginationParams
+): URLSearchParams {
+  const params = new URLSearchParams();
+  params.set("pagination.limit", String(pagination.limit));
+
+  if (pagination.key) {
+    params.set("pagination.key", pagination.key);
+  } else if (pagination.offset !== undefined && pagination.offset > 0) {
+    params.set("pagination.offset", String(pagination.offset));
+  }
+
+  if (pagination.count_total !== undefined) {
+    params.set("pagination.count_total", String(pagination.count_total));
+  }
+  if (pagination.reverse !== undefined) {
+    params.set("pagination.reverse", String(pagination.reverse));
+  }
+
+  return params;
+}
+
+export function hasNextCursorPage(nextKey: string | null | undefined): boolean {
+  return Boolean(nextKey && nextKey.length > 0);
+}
diff --git a/apps/webapp/src/features/home/ui/home.tsx b/apps/webapp/src/features/home/ui/home.tsx
new file mode 100644
index 00000000..85bd4dc1
--- /dev/null
+++ b/apps/webapp/src/features/home/ui/home.tsx
@@ -0,0 +1,15 @@
+import { HostsHome } from "./hosts-home";
+import { IndexersHome } from "./indexers-home";
+import { StatsHome } from "./stats-home";
+import { TitleHome } from "./title-home";
+
+export function Home() {
+  return (
+    <div className="my-4 w-full min-w-0 max-w-full">
+      <TitleHome />
+      <StatsHome />
+      <IndexersHome />
+      <HostsHome />
+    </div>
+  );
+}
diff --git a/apps/webapp/src/features/home/ui/hosts-home.tsx b/apps/webapp/src/features/home/ui/hosts-home.tsx
new file mode 100644
index 00000000..8afe1704
--- /dev/null
+++ b/apps/webapp/src/features/home/ui/hosts-home.tsx
@@ -0,0 +1,117 @@
+"use client";
+
+import { Suspense, useEffect, useMemo } from "react";
+import { useRouter } from "next/navigation";
+import { TableLayout, TableNullableCell } from "@shinzo/ui/table";
+import { Pagination } from "@shinzo/ui/pagination";
+import { useRegisteredHosts } from "../hooks/use-registered-hosts";
+import { useCursorPagePagination } from "../hooks/use-cursor-page-pagination";
+
+const HOSTS_PAGE_PARAM = "hostsPage";
+const HOSTS_CURSOR_KEY = "registered-hosts-cursor-key";
+const PAGE_SIZE = 5;
+
+const tableHeadings = ["Address", "DID", "Connection String"];
+
+function HostsHomeContent() {
+  const router = useRouter();
+  const { page, queryParams, applyPaginationData, totalItems } =
+    useCursorPagePagination({
+      pageParam: HOSTS_PAGE_PARAM,
+      storageKey: HOSTS_CURSOR_KEY,
+      limit: PAGE_SIZE,
+    });
+
+  const { data: registeredHosts, isPending } = useRegisteredHosts(queryParams);
+  const hosts = registeredHosts?.hosts ?? [];
+  const pageTotal = Number(registeredHosts?.pagination?.total ?? 0);
+  const nextKey = registeredHosts?.pagination?.next_key;
+
+  useEffect(() => {
+    if (registeredHosts) {
+      applyPaginationData(nextKey, pageTotal);
+    }
+  }, [registeredHosts, nextKey, pageTotal, applyPaginationData]);
+
+  const showPagination = useMemo(() => totalItems > PAGE_SIZE, [totalItems]);
+
+  const handleRegisterAsHost = () => {
+    router.push("/host-registration");
+  };
+
+  return (
+    <section className="w-full min-w-0 max-w-full">
+      <div className="mb-8 flex min-w-0 p-8 flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+        <div className="min-w-0">
+          <h2 className="font-h2 text-h2 text-black slash-separator uppercase wrap-break-word">
+            Registered Hosts
+          </h2>
+          <p className="font-mono text-muted-foreground mt-2 wrap-break-word">
+            INFRASTRUCTURE LAYER / DATA AVAILABILITY
+          </p>
+        </div>
+        <button
+          type="button"
+          className="shrink-0 self-start px-6 py-3 text-xs font-bold uppercase tracking-widest bg-primary text-primary-foreground rounded-none transition-opacity hover:opacity-90 active:opacity-80 sm:self-auto sm:px-8"
+          onClick={handleRegisterAsHost}
+        >
+          Register as Host
+        </button>
+      </div>
+      <div className="w-full min-w-0 max-w-full overflow-hidden gap-4 flex flex-col items-end">
+        <TableLayout
+          isLoading={isPending}
+          loadingRowCount={PAGE_SIZE}
+          notFound="No hosts are registered yet."
+          headings={hosts.length > 0 ? tableHeadings : [""]}
+          gridClass="grid-cols[repeat(3,1fr)]"
+          iterable={hosts ?? []}
+          rowRenderer={(host) => (
+            <>
+              <TableNullableCell value={host?.address}>
+                {(value) => (
+                  <span className="text-sm text-foreground">{value}</span>
+                )}
+              </TableNullableCell>
+
+              <TableNullableCell value={host?.did} nowrap>
+                {(value) => (
+                  <span className="text-sm text-foreground">{value}</span>
+                )}
+              </TableNullableCell>
+
+              <TableNullableCell
+                value={host?.connection_string}
+                className="min-w-0 whitespace-normal"
+              >
+                {(value) => (
+                  <span className="text-sm text-foreground wrap-break-word break-all">
+                    {value}
+                  </span>
+                )}
+              </TableNullableCell>
+            </>
+          )}
+        />
+        {showPagination && (
+          <div className="pr-6">
+            <Pagination
+              page={page}
+              totalItems={totalItems}
+              itemsPerPage={PAGE_SIZE}
+              pageParam={HOSTS_PAGE_PARAM}
+            />
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}
+
+export function HostsHome() {
+  return (
+    <Suspense fallback={null}>
+      <HostsHomeContent />
+    </Suspense>
+  );
+}
diff --git a/apps/webapp/src/features/home/ui/indexers-home.tsx b/apps/webapp/src/features/home/ui/indexers-home.tsx
new file mode 100644
index 00000000..946fa77f
--- /dev/null
+++ b/apps/webapp/src/features/home/ui/indexers-home.tsx
@@ -0,0 +1,126 @@
+"use client";
+
+import { Suspense, useEffect, useMemo } from "react";
+import { useRouter } from "next/navigation";
+import { TableLayout, TableNullableCell } from "@shinzo/ui/table";
+import { Pagination } from "@shinzo/ui/pagination";
+import { useRegisteredIndexers } from "../hooks/use-registered-indexers";
+import { useCursorPagePagination } from "../hooks/use-cursor-page-pagination";
+
+const INDEXERS_PAGE_PARAM = "indexersPage";
+const INDEXERS_CURSOR_KEY = "registered-indexers-cursor-key";
+const PAGE_SIZE = 5;
+
+const tableHeadings = ["Address", "DID", "Chain", "Connection String"];
+
+function IndexersHomeContent() {
+  const router = useRouter();
+  const { page, queryParams, applyPaginationData, totalItems } =
+    useCursorPagePagination({
+      pageParam: INDEXERS_PAGE_PARAM,
+      storageKey: INDEXERS_CURSOR_KEY,
+      limit: PAGE_SIZE,
+    });
+
+  const { data: registeredIndexers, isPending } =
+    useRegisteredIndexers(queryParams);
+  const indexers = registeredIndexers?.indexers ?? [];
+  const pageTotal = Number(registeredIndexers?.pagination?.total ?? 0);
+  const nextKey = registeredIndexers?.pagination?.next_key;
+
+  useEffect(() => {
+    if (registeredIndexers) {
+      applyPaginationData(nextKey, pageTotal);
+    }
+  }, [registeredIndexers, nextKey, pageTotal, applyPaginationData]);
+
+  const showPagination = useMemo(() => totalItems > PAGE_SIZE, [totalItems]);
+
+  const handleRegisterAsIndexer = () => {
+    router.push("/indexer-registration");
+  };
+
+  return (
+    <section className="w-full min-w-0 max-w-full">
+      <div className="mb-8 flex min-w-0 p-8 flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+        <div className="min-w-0">
+          <h2 className="font-h2 text-h2 text-foreground slash-separator uppercase wrap-break-word">
+            Registered Indexers
+          </h2>
+          <p className="font-mono text-muted-foreground mt-2 wrap-break-word">
+            NETWORK LAYER / INDEXING SERVICES
+          </p>
+        </div>
+        <button
+          type="button"
+          className="shrink-0 self-start bg-primary px-6 py-3 text-xs font-bold uppercase tracking-widest text-primary-foreground rounded-none transition-opacity hover:opacity-90 active:opacity-80 sm:self-auto sm:px-8"
+          onClick={handleRegisterAsIndexer}
+        >
+          REGISTER AS INDEXER
+        </button>
+      </div>
+      <div className="w-full min-w-0 max-w-full overflow-hidden gap-4 flex flex-col items-end">
+        <TableLayout
+          isLoading={isPending}
+          loadingRowCount={PAGE_SIZE}
+          notFound="No Indexers are registered yet."
+          headings={indexers.length > 0 ? tableHeadings : [""]}
+          gridClass="grid-cols[repeat(4,1fr)]"
+          iterable={indexers ?? []}
+          rowRenderer={(indexer) => (
+            <>
+              <TableNullableCell value={indexer?.address}>
+                {(value) => (
+                  <span className="text-sm text-foreground">{value}</span>
+                )}
+              </TableNullableCell>
+
+              <TableNullableCell value={indexer?.did}>
+                {(value) => (
+                  <span className="text-sm text-foreground">{value}</span>
+                )}
+              </TableNullableCell>
+
+              <TableNullableCell value={indexer?.source_chain}>
+                {(value) => (
+                  <span className="text-sm text-foreground">
+                    {value.charAt(0).toUpperCase() + value.slice(1)}
+                  </span>
+                )}
+              </TableNullableCell>
+
+              <TableNullableCell
+                value={indexer?.connection_string}
+                className="min-w-0 whitespace-normal"
+              >
+                {(value) => (
+                  <span className="text-sm text-foreground wrap-break-word break-all">
+                    {value}
+                  </span>
+                )}
+              </TableNullableCell>
+            </>
+          )}
+        />
+        {showPagination && (
+          <div className="pr-6">
+            <Pagination
+              page={page}
+              totalItems={totalItems}
+              itemsPerPage={PAGE_SIZE}
+              pageParam={INDEXERS_PAGE_PARAM}
+            />
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}
+
+export function IndexersHome() {
+  return (
+    <Suspense fallback={null}>
+      <IndexersHomeContent />
+    </Suspense>
+  );
+}
diff --git a/apps/webapp/src/features/home/ui/stats-home.tsx b/apps/webapp/src/features/home/ui/stats-home.tsx
new file mode 100644
index 00000000..c72295ba
--- /dev/null
+++ b/apps/webapp/src/features/home/ui/stats-home.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import { UI_HOME_HEADER_CONTENT } from "@/shared/lib";
+import { useRegisteredHosts } from "../hooks/use-registered-hosts";
+import { useRegisteredIndexers } from "../hooks/use-registered-indexers";
+
+export function StatsHome() {
+  const { data: registeredIndexers, isPending: indexersPending } =
+    useRegisteredIndexers({
+      limit: 1,
+      count_total: true,
+    });
+  const { data: registeredHosts, isPending: hostsPending } = useRegisteredHosts(
+    {
+      limit: 1,
+      count_total: true,
+    }
+  );
+
+  const totalIndexers = indexersPending
+    ? null
+    : Number(registeredIndexers?.pagination?.total ?? 0);
+  const totalHosts = hostsPending
+    ? null
+    : Number(registeredHosts?.pagination?.total ?? 0);
+
+  return (
+    <section className="grid w-full min-w-0 max-w-full grid-cols-1 border-b bg-background-accent-light border-border md:grid-cols-2 md:divide-x md:divide-border">
+      <div className="py-6 px-8">
+        <div className="font-mono text-secondary mb-1">
+          {UI_HOME_HEADER_CONTENT.registered_indexers}
+        </div>
+        <div className="font-h2 text-h2 text-black min-h-10.5 tabular-nums">
+          {totalIndexers ?? "—"}
+        </div>
+      </div>
+      <div className="p-6">
+        <div className="font-mono text-secondary mb-1">
+          {UI_HOME_HEADER_CONTENT.registered_hosts}
+        </div>
+        <div className="font-h2 text-h2 text-black min-h-10.5 tabular-nums">
+          {totalHosts ?? "—"}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/webapp/src/features/home/ui/title-home.tsx b/apps/webapp/src/features/home/ui/title-home.tsx
new file mode 100644
index 00000000..3b9721c9
--- /dev/null
+++ b/apps/webapp/src/features/home/ui/title-home.tsx
@@ -0,0 +1,18 @@
+import { UI_HOME_HEADER_CONTENT } from "@/shared/lib";
+
+export function TitleHome() {
+  return (
+    <section className="technical-grid relative w-full min-w-0 max-w-full overflow-hidden border-b border-border px-4 pb-16 pt-24 sm:px-12">
+      <div className="flex items-center gap-2 mb-4 font-mono-label text-accent uppercase tracking-widest">
+        <span className="w-3 h-3 bg-accent"></span>
+        <span>Active Network Infrastructure</span>
+      </div>
+      <h1 className="font-h1 text-h1 text-black mb-6">
+        {UI_HOME_HEADER_CONTENT.home.title}
+      </h1>
+      <p className="font-body-lg text-body-lg text-secondary max-w-2xl">
+        {UI_HOME_HEADER_CONTENT.home.description}
+      </p>
+    </section>
+  );
+}
diff --git a/apps/webapp/src/page-components/assertion/ui/assertion.tsx b/apps/webapp/src/page-components/assertion/ui/assertion.tsx
index b6d6e840..f6da9a59 100644
--- a/apps/webapp/src/page-components/assertion/ui/assertion.tsx
+++ b/apps/webapp/src/page-components/assertion/ui/assertion.tsx
@@ -6,7 +6,7 @@ import { IndexerAssertionForm } from "@/features/indexer-assertion";
 import { useRegistrationContext } from "@/entities/registration-process";
 import { FormHeader } from "@/widget/form-header";
 import { Header } from "@/widget";
-import { UI_TEXT_CONTENT, isRegistrationV2 } from "@/shared/lib";
+import { UI_FORM_HEADER_CONTENT, isRegistrationV2 } from "@/shared/lib";
 import { usePathname } from "next/navigation";
 import { Connect } from "@/page-components/connect";
 import { Button } from "@/shared/ui/button";
@@ -23,8 +23,8 @@ export default function Assertion() {
       <div className="mx-12 my-12 flex flex-col gap-4">
         <FormHeader
           content={
-            UI_TEXT_CONTENT[
-              pathname.split("/").pop() as keyof typeof UI_TEXT_CONTENT
+            UI_FORM_HEADER_CONTENT[
+              pathname.split("/").pop() as keyof typeof UI_FORM_HEADER_CONTENT
             ]
           }
         />
diff --git a/apps/webapp/src/page-components/home/index.ts b/apps/webapp/src/page-components/home/index.ts
new file mode 100644
index 00000000..aed3c619
--- /dev/null
+++ b/apps/webapp/src/page-components/home/index.ts
@@ -0,0 +1 @@
+export { HomePage } from "./ui/page";
diff --git a/apps/webapp/src/page-components/home/ui/page.tsx b/apps/webapp/src/page-components/home/ui/page.tsx
new file mode 100644
index 00000000..c3c88182
--- /dev/null
+++ b/apps/webapp/src/page-components/home/ui/page.tsx
@@ -0,0 +1,11 @@
+import { Header } from "@/widget";
+import { Home } from "@/features/home/ui/home";
+
+export function HomePage() {
+  return (
+    <>
+      <Header />
+      <Home />
+    </>
+  );
+}
diff --git a/apps/webapp/src/page-components/registration/ui/page.tsx b/apps/webapp/src/page-components/registration/ui/page.tsx
index 9591dce9..a6aca597 100644
--- a/apps/webapp/src/page-components/registration/ui/page.tsx
+++ b/apps/webapp/src/page-components/registration/ui/page.tsx
@@ -9,7 +9,7 @@ import {
 } from "@/features/registration-form";
 import { FormHeader } from "@/widget/form-header";
 import { Header } from "@/widget";
-import { isRegistrationV2, UI_TEXT_CONTENT } from "@/shared/lib";
+import { isRegistrationV2, UI_FORM_HEADER_CONTENT } from "@/shared/lib";
 import { usePathname } from "next/navigation";
 import { Connect } from "@/page-components/connect";
 
@@ -24,8 +24,8 @@ export default function Register() {
       <div className="mx-12 my-12 flex flex-col gap-4">
         <FormHeader
           content={
-            UI_TEXT_CONTENT[
-              pathname.split("/").pop() as keyof typeof UI_TEXT_CONTENT
+            UI_FORM_HEADER_CONTENT[
+              pathname.split("/").pop() as keyof typeof UI_FORM_HEADER_CONTENT
             ]
           }
         />
diff --git a/apps/webapp/src/providers/ui/query-provider.tsx b/apps/webapp/src/providers/ui/query-provider.tsx
index c4c8ccd5..b06b77a8 100644
--- a/apps/webapp/src/providers/ui/query-provider.tsx
+++ b/apps/webapp/src/providers/ui/query-provider.tsx
@@ -3,7 +3,14 @@
 import type { ReactNode } from "react";
 import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
 
-const queryClient = new QueryClient();
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 30_000,
+      refetchOnWindowFocus: false,
+    },
+  },
+});
 
 interface AppQueryProviderProps {
   children: ReactNode;
diff --git a/apps/webapp/src/shared/lib/constants/index.ts b/apps/webapp/src/shared/lib/constants/index.ts
index 912b39b7..2b9a75ce 100644
--- a/apps/webapp/src/shared/lib/constants/index.ts
+++ b/apps/webapp/src/shared/lib/constants/index.ts
@@ -9,7 +9,7 @@ export enum EntityRole {
 export const SHINZO_PRECOMPILE_ADDRESS =
   "0x0000000000000000000000000000000000000211";
 
-export const UI_TEXT_CONTENT = {
+export const UI_FORM_HEADER_CONTENT = {
   "host-registration": {
     title: "/ Register your host to participate within the Shinzo Network",
     description:
@@ -35,3 +35,13 @@ export const UI_TEXT_CONTENT = {
 export const isRegistrationV2 = () => {
   return process.env.NEXT_PUBLIC_SHINZOHUB_V2_REGISTRATION_FLAG === "true";
 };
+
+export const UI_HOME_HEADER_CONTENT = {
+  home: {
+    title: "TECHNICAL REGISTRY",
+    description:
+      "Verifiable data infrastructure for the decentralized web. A low-level coordination layer for decentralized indexing and host services.",
+  },
+  registered_indexers: "REGISTERED INDEXERS",
+  registered_hosts: "REGISTERED HOSTS",
+} as const;
diff --git a/apps/webapp/src/widget/footer/index.ts b/apps/webapp/src/widget/footer/index.ts
new file mode 100644
index 00000000..beaba041
--- /dev/null
+++ b/apps/webapp/src/widget/footer/index.ts
@@ -0,0 +1 @@
+export { Footer } from "./ui/footer";
diff --git a/apps/webapp/src/widget/footer/ui/footer.tsx b/apps/webapp/src/widget/footer/ui/footer.tsx
new file mode 100644
index 00000000..a2f85f03
--- /dev/null
+++ b/apps/webapp/src/widget/footer/ui/footer.tsx
@@ -0,0 +1,29 @@
+export function Footer() {
+  return (
+    <footer className="w-full px-6 py-8 flex flex-col md:flex-row justify-between items-center mt-auto bg-background-muted border-t border-border font-mono text-xs uppercase tracking-widest">
+      <div className=" text-muted-foreground mb-4 md:mb-0">
+        Shinzo / Technical Registry{" "}
+      </div>
+      <div className="flex gap-8">
+        <a
+          className="text-muted-foreground hover:text-accent transition-colors"
+          href="https://shinzo.network"
+        >
+          WEBSITE
+        </a>
+        <a
+          className="text-muted-foreground hover:text-accent transition-colors"
+          href="https://docs.shinzo.network"
+        >
+          DOCUMENTATION
+        </a>
+        <a
+          className="text-muted-foreground hover:text-accent transition-colors"
+          href="https://explorer.shinzo.network"
+        >
+          EXPLORER
+        </a>
+      </div>
+    </footer>
+  );
+}
diff --git a/apps/webapp/src/widget/form-header/ui/form-header.tsx b/apps/webapp/src/widget/form-header/ui/form-header.tsx
index ebe12062..7dd244a6 100644
--- a/apps/webapp/src/widget/form-header/ui/form-header.tsx
+++ b/apps/webapp/src/widget/form-header/ui/form-header.tsx
@@ -1,9 +1,9 @@
-import { UI_TEXT_CONTENT } from "@/shared/lib";
+import { UI_FORM_HEADER_CONTENT } from "@/shared/lib";
 
 export function FormHeader({
   content,
 }: {
-  content: (typeof UI_TEXT_CONTENT)[keyof typeof UI_TEXT_CONTENT];
+  content: (typeof UI_FORM_HEADER_CONTENT)[keyof typeof UI_FORM_HEADER_CONTENT];
 }) {
   return (
     <div className="space-y-2">
diff --git a/apps/webapp/src/widget/index.ts b/apps/webapp/src/widget/index.ts
index 4ff302fd..7ac58b6a 100644
--- a/apps/webapp/src/widget/index.ts
+++ b/apps/webapp/src/widget/index.ts
@@ -3,6 +3,7 @@ export * from "./banner";
 export * from "./connect-wallet";
 export * from "./copy-to-clipboard";
 export * from "./disconnect-wallet";
+export * from "./footer";
 export * from "./form-header";
 export * from "./header";
 export * from "./input-field";
diff --git a/packages/ui/src/pagination/pagination.tsx b/packages/ui/src/pagination/pagination.tsx
index 2c933e5b..b07038f9 100644
--- a/packages/ui/src/pagination/pagination.tsx
+++ b/packages/ui/src/pagination/pagination.tsx
@@ -16,9 +16,17 @@ export interface PaginationProps extends ComponentProps<"nav"> {
   itemsPerPage?: number;
   totalItems?: number;
   page: number;
+  /** Query param name for page number (default `page`). Use distinct names when multiple paginated sections share one route. */
+  pageParam?: string;
 }
 
-export const Pagination = ({ page, itemsPerPage = DEFAULT_LIMIT, totalItems = 0, ...props }: PaginationProps) => {
+export const Pagination = ({
+  page,
+  itemsPerPage = DEFAULT_LIMIT,
+  totalItems = 0,
+  pageParam = "page",
+  ...props
+}: PaginationProps) => {
   const totalPages = Math.max(1, Math.ceil(totalItems / itemsPerPage));
 
   const pathname = usePathname();
@@ -26,7 +34,7 @@ export const Pagination = ({ page, itemsPerPage = DEFAULT_LIMIT, totalItems = 0,
 
   const getPageLink = (pageNum: number) => {
     const newParams = new URLSearchParams(params.toString());
-    newParams.set('page', pageNum.toString());
+    newParams.set(pageParam, pageNum.toString());
     const joiner = pathname.includes('?') ? '&' : '?';
     return `${pathname}${joiner}${newParams.toString()}`;
   };
