diff --git a/packages/ui/app/package.json b/packages/ui/app/package.json
index 56a5be6c10..74bb24700b 100644
--- a/packages/ui/app/package.json
+++ b/packages/ui/app/package.json
@@ -42,6 +42,7 @@
     "@fern-ui/components": "workspace:*",
     "@fern-ui/fdr-utils": "workspace:*",
     "@fern-ui/fern-docs-mdx": "workspace:*",
+    "@fern-ui/fern-docs-search-ui": "workspace:*",
     "@fern-ui/fern-docs-server": "workspace:*",
     "@fern-ui/fern-docs-syntax-highlighter": "workspace:*",
     "@fern-ui/fern-docs-utils": "workspace:*",
@@ -49,7 +50,6 @@
     "@fern-ui/next-seo": "workspace:*",
     "@fern-ui/react-commons": "workspace:*",
     "@fern-ui/search-utils": "workspace:*",
-    "@fern-ui/fern-docs-search-ui": "workspace:*",
     "@inkeep/widgets": "^0.2.288",
     "@next/third-parties": "14.2.9",
     "@radix-ui/colors": "^3.0.0",
@@ -57,6 +57,8 @@
     "@radix-ui/react-collapsible": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-popper": "^1.2.0",
+    "@radix-ui/react-portal": "^1.1.2",
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.1",
diff --git a/packages/ui/app/src/api-reference/endpoints/EndpointContent.tsx b/packages/ui/app/src/api-reference/endpoints/EndpointContent.tsx
index 6e2ed0861b..419e68cf94 100644
--- a/packages/ui/app/src/api-reference/endpoints/EndpointContent.tsx
+++ b/packages/ui/app/src/api-reference/endpoints/EndpointContent.tsx
@@ -23,6 +23,7 @@ import { JsonPropertyPath } from "../examples/JsonPropertyPath";
 import { useApiPageCenterElement } from "../useApiPageCenterElement";
 import { EndpointContentHeader } from "./EndpointContentHeader";
 import { EndpointContentLeft, convertNameToAnchorPart } from "./EndpointContentLeft";
+import { EndpointContentSummary } from "./EndpointContentSummary";
 import { useExampleSelection } from "./useExampleSelection";
 
 const EndpointContentCodeSnippets = dynamic(
@@ -251,6 +252,8 @@ export const EndpointContent = memo<EndpointContent.Props>((props) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [initialExampleHeight]);
 
+    const summaryRef = useRef<HTMLDivElement>(null);
+
     return (
         <section className="fern-endpoint-content" ref={ref} id={useHref(node.slug)}>
             <div
@@ -261,12 +264,14 @@ export const EndpointContent = memo<EndpointContent.Props>((props) => {
                 <EndpointContentHeader context={context} breadcrumb={breadcrumb} streamToggle={props.streamToggle} />
                 <div className="md:grid md:grid-cols-2 md:gap-8 lg:gap-12">
                     <div
+                        ref={summaryRef}
                         className="flex min-w-0 max-w-content-width flex-1 flex-col pt-8 md:py-8"
                         style={{
                             // TODO: do we still need to set minHeight here?
                             minHeight: `${minHeight}px`,
                         }}
                     >
+                        <EndpointContentSummary context={context} boundary={summaryRef.current} />
                         <EndpointContentLeft
                             context={context}
                             // TODO: remove this code call
diff --git a/packages/ui/app/src/api-reference/endpoints/EndpointContentHeader.tsx b/packages/ui/app/src/api-reference/endpoints/EndpointContentHeader.tsx
index d0c3b0fc29..09c06b50b2 100644
--- a/packages/ui/app/src/api-reference/endpoints/EndpointContentHeader.tsx
+++ b/packages/ui/app/src/api-reference/endpoints/EndpointContentHeader.tsx
@@ -37,7 +37,7 @@ export const EndpointContentHeader = memo<EndpointContentHeaderProps>(({ context
                 method={endpoint.method}
                 options={endpoint.environments}
                 showEnvironment
-                large
+                size="lg"
             />
         </header>
     );
diff --git a/packages/ui/app/src/api-reference/endpoints/EndpointContentSummary.tsx b/packages/ui/app/src/api-reference/endpoints/EndpointContentSummary.tsx
new file mode 100644
index 0000000000..cf17a84d96
--- /dev/null
+++ b/packages/ui/app/src/api-reference/endpoints/EndpointContentSummary.tsx
@@ -0,0 +1,74 @@
+import { EndpointContext } from "@fern-api/fdr-sdk/api-definition";
+import { AvailabilityBadge, cn } from "@fern-ui/components";
+import * as Popper from "@radix-ui/react-popper";
+import { Portal } from "@radix-ui/react-portal";
+import { forwardRef, useEffect, useRef } from "react";
+import { BgImageGradient } from "../../components/BgImageGradient";
+
+export const EndpointContentSummary = forwardRef<
+    HTMLDivElement,
+    Omit<Popper.PopperContentProps, "ref" | "asChild"> & {
+        context: EndpointContext;
+        boundary: HTMLElement | null;
+    }
+>(({ context, boundary, ...rest }, ref) => {
+    const { endpoint, node } = context;
+    const anchorRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (anchorRef.current == null) {
+            return;
+        }
+        const observer = new IntersectionObserver(
+            (entries) => {
+                console.log(entries);
+            },
+            {
+                root: boundary,
+            },
+        );
+
+        observer.observe(anchorRef.current);
+        return () => observer.disconnect();
+    }, [boundary]);
+
+    return (
+        <Popper.Root>
+            <Popper.Anchor className="sticky top-header-height" ref={anchorRef}></Popper.Anchor>
+            <Portal asChild container={boundary}>
+                <Popper.Content
+                    side="bottom"
+                    align="center"
+                    collisionBoundary={boundary}
+                    {...rest}
+                    className={cn(
+                        "backdrop-blur-lg lg:backdrop-blur relative overflow-hidden",
+                        "w-[calc(var(--radix-popper-anchor-width)+64px)]",
+                        "-mx-8",
+                        rest.className,
+                    )}
+                    ref={ref}
+                >
+                    <div className="clipped-background">
+                        <BgImageGradient className="h-screen opacity-60 dark:opacity-80" />
+                    </div>
+                    <div className="mx-8 py-4 border-b border-[var(--grayscale-a5)]">
+                        <span>
+                            <h4 className="fern-page-heading">{node.title}</h4>
+                            {endpoint.availability != null && (
+                                <AvailabilityBadge
+                                    availability={endpoint.availability}
+                                    rounded
+                                    size="sm"
+                                    className="ms-1"
+                                />
+                            )}
+                        </span>
+                    </div>
+                </Popper.Content>
+            </Portal>
+        </Popper.Root>
+    );
+});
+
+EndpointContentSummary.displayName = "EndpointContentSummary";
diff --git a/packages/ui/app/src/api-reference/endpoints/EndpointUrl.tsx b/packages/ui/app/src/api-reference/endpoints/EndpointUrl.tsx
index ca26289e72..1e8174af53 100644
--- a/packages/ui/app/src/api-reference/endpoints/EndpointUrl.tsx
+++ b/packages/ui/app/src/api-reference/endpoints/EndpointUrl.tsx
@@ -17,14 +17,14 @@ export declare namespace EndpointUrl {
         environmentId?: ApiDefinition.EnvironmentId;
         options?: APIV1Read.Environment[];
         showEnvironment?: boolean;
-        large?: boolean;
+        size?: "sm" | "md" | "lg";
         className?: string;
     }>;
 }
 
 // TODO: this component needs a refresh
 export const EndpointUrl = React.forwardRef<HTMLDivElement, PropsWithChildren<EndpointUrl.Props>>(function EndpointUrl(
-    { path, method, baseUrl, environmentId, large, className, showEnvironment, options },
+    { path, method, baseUrl, environmentId, size = "md", className, showEnvironment, options },
     parentRef,
 ) {
     const ref = useRef<HTMLDivElement>(null);
@@ -86,7 +86,7 @@ export const EndpointUrl = React.forwardRef<HTMLDivElement, PropsWithChildren<En
 
     return (
         <div ref={ref} className={cn("flex items-center gap-1 pr-2", className)}>
-            <HttpMethodTag method={method} />
+            <HttpMethodTag method={method} size={size === "sm" ? "sm" : "lg"} />
 
             <div className={cn("flex items-center")}>
                 <span
@@ -108,8 +108,8 @@ export const EndpointUrl = React.forwardRef<HTMLDivElement, PropsWithChildren<En
                             >
                                 <span
                                     className={cn("font-mono", {
-                                        "text-xs": !large,
-                                        "text-sm": large,
+                                        "text-xs": size === "sm" || size === "md",
+                                        "text-sm": size === "lg",
                                     })}
                                 >
                                     {showEnvironment && (
diff --git a/packages/ui/components/src/index.ts b/packages/ui/components/src/index.ts
index 7306cee67d..40250f4519 100644
--- a/packages/ui/components/src/index.ts
+++ b/packages/ui/components/src/index.ts
@@ -24,6 +24,7 @@ export * from "./FernTextarea";
 export * from "./FernToast";
 export * from "./FernTooltip";
 export * from "./FontAwesomeIcon";
-export * from "./badges/badge";
+export * from "./badges";
+export * from "./cn";
 export * from "./kbd";
 export * from "./util/shared-component-types";
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 94fb59bbc3..6beed110d9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1165,6 +1165,12 @@ importers:
       '@radix-ui/react-popover':
         specifier: ^1.1.2
         version: 1.1.2(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-popper':
+        specifier: ^1.2.0
+        version: 1.2.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal':
+        specifier: ^1.1.2
+        version: 1.1.2(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-select':
         specifier: ^2.1.2
         version: 2.1.2(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -26230,7 +26236,7 @@ snapshots:
       '@typescript-eslint/parser': 7.17.0(eslint@8.57.0)(typescript@5.4.3)
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.4.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.4.3))(eslint@8.57.0))(eslint@8.57.0)
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.4.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0)
       eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.4.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
       eslint-plugin-jsx-a11y: 6.8.0(eslint@8.57.0)
       eslint-plugin-react: 7.34.1(eslint@8.57.0)
@@ -26253,12 +26259,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.4.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.4.3))(eslint@8.57.0))(eslint@8.57.0):
+  eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.4.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0):
     dependencies:
       debug: 4.3.7
       enhanced-resolve: 5.16.1
       eslint: 8.57.0
-      eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.4.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.4.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.4.3))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0)
+      eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.4.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.4.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0)
       eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.4.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
       fast-glob: 3.3.2
       get-tsconfig: 4.7.5
@@ -26270,14 +26276,14 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-module-utils@2.8.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.4.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.4.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.4.3))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0):
+  eslint-module-utils@2.8.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.4.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.4.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
       '@typescript-eslint/parser': 7.17.0(eslint@8.57.0)(typescript@5.4.3)
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.4.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.4.3))(eslint@8.57.0))(eslint@8.57.0)
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.4.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -26311,7 +26317,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.4.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.4.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.4.3))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0)
+      eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.4.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.4.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0)
       hasown: 2.0.2
       is-core-module: 2.13.1
       is-glob: 4.0.3