diff --git a/js/app/src/Routes.tsx b/js/app/src/Routes.tsx
index 8ec91ad0877..2ea3c98f235 100644
--- a/js/app/src/Routes.tsx
+++ b/js/app/src/Routes.tsx
@@ -91,9 +91,7 @@ import {
   LoggedOutPage,
   LoginPage,
   NewCodeProjectEvaluatorPage,
-  NewGalleryCodeProjectEvaluatorPage,
   NewGalleryLlmFromTemplateProjectEvaluatorPage,
-  NewGalleryLlmProjectEvaluatorPage,
   NewLlmProjectEvaluatorPage,
   OAuth2ConsentPage,
   PlaygroundPage,
@@ -562,40 +560,62 @@ export const appRouteObjects = createRoutesFromElements(
                 agentRoute: {
                   label: "Project Evaluator Gallery",
                   description:
-                    "Browse evaluator templates and start a project evaluator from a template or from scratch.",
+                    "Browse evaluator templates and create a project evaluator from a template, from scratch, or an existing evaluator.",
                 },
               }}
             >
+              <Route
+                path="new/template/:templateName"
+                element={<NewGalleryLlmFromTemplateProjectEvaluatorPage />}
+                handle={{
+                  agentRoute: {
+                    label: "New Project Evaluator From Gallery Template",
+                    description:
+                      "Create a project LLM evaluator seeded from the selected evaluator gallery template.",
+                  },
+                }}
+              />
               <Route
                 path="new/llm"
-                element={<NewGalleryLlmProjectEvaluatorPage />}
+                element={<NewLlmProjectEvaluatorPage />}
                 handle={{
                   agentRoute: {
                     label: "New Project LLM Evaluator From Gallery",
                     description:
-                      "Author a new LLM-as-a-judge evaluator from scratch while browsing the evaluator gallery.",
+                      "Author a new LLM-as-a-judge evaluator for a project from scratch, started from the evaluator gallery.",
                   },
                 }}
               />
               <Route
                 path="new/code"
-                element={<NewGalleryCodeProjectEvaluatorPage />}
+                element={<NewCodeProjectEvaluatorPage />}
                 handle={{
                   agentRoute: {
                     label: "New Project Code Evaluator From Gallery",
                     description:
-                      "Author a new Python or TypeScript code evaluator from scratch while browsing the evaluator gallery.",
+                      "Author a new Python or TypeScript code evaluator for a project from scratch, started from the evaluator gallery.",
                   },
                 }}
               />
               <Route
-                path="new/template/:templateName"
-                element={<NewGalleryLlmFromTemplateProjectEvaluatorPage />}
+                path="new/copy/:evaluatorId"
+                element={<CopyLlmProjectEvaluatorPage />}
                 handle={{
                   agentRoute: {
-                    label: "New Project Evaluator From Gallery Template",
+                    label: "Copy LLM Evaluator Into Project From Gallery",
                     description:
-                      "Create a project LLM evaluator seeded from the selected evaluator gallery template.",
+                      "Create a project evaluator seeded from an existing LLM evaluator while browsing the evaluator gallery. The evaluatorId route param uses the GraphQL Evaluator.id Relay node ID of the evaluator being copied.",
+                  },
+                }}
+              />
+              <Route
+                path="new/attach/:evaluatorId"
+                element={<AttachCodeProjectEvaluatorPage />}
+                handle={{
+                  agentRoute: {
+                    label: "Attach Code Evaluator To Project From Gallery",
+                    description:
+                      "Attach an existing code evaluator to a project while browsing the evaluator gallery. The evaluatorId route param uses the GraphQL Evaluator.id Relay node ID of the evaluator being attached.",
                   },
                 }}
               />
diff --git a/js/app/src/components/core/badge/types.ts b/js/app/src/components/core/badge/types.ts
index 5b2415b46c4..3a6fc938858 100644
--- a/js/app/src/components/core/badge/types.ts
+++ b/js/app/src/components/core/badge/types.ts
@@ -39,4 +39,8 @@ export interface BadgeProps extends StylableProps {
    * @default 'wrap'
    */
   overflowMode?: BadgeOverflowMode;
+  /**
+   * Native tooltip text shown on hover.
+   */
+  title?: string;
 }
diff --git a/js/app/src/components/core/token/Token.tsx b/js/app/src/components/core/token/Token.tsx
index 1a8ecc62ee7..66c1421dec5 100644
--- a/js/app/src/components/core/token/Token.tsx
+++ b/js/app/src/components/core/token/Token.tsx
@@ -57,7 +57,6 @@ const tokenBaseCSS = css`
      visual's margin so the pill reads as one unit. */
   gap: var(--global-dimension-size-50);
   font-size: var(--global-dimension-font-size-75);
-  line-height: var(--global-line-height-s);
   padding: 0 var(--global-dimension-size-100);
   border-radius: var(--global-rounding-large);
   border: 1px solid transparent;
@@ -72,10 +71,14 @@ const tokenBaseCSS = css`
 
   &[data-size="S"] {
     height: var(--global-dimension-size-200);
+    /* Match line-height to height (both 16px) — otherwise the 20px "S"
+       body line-height overflows this pill's shorter box. */
+    line-height: var(--global-line-height-xs);
   }
 
   &[data-size="M"] {
     height: var(--global-dimension-size-250);
+    line-height: var(--global-line-height-s);
   }
 
   &[data-size="L"] {
@@ -83,6 +86,7 @@ const tokenBaseCSS = css`
     /* The large token scales its typography up to body size so token-heavy
        detail views stay readable; S and M keep the compact font. */
     font-size: var(--global-dimension-font-size-100);
+    line-height: var(--global-line-height-m);
   }
 
   /* Center the leading visual and the remove button inside the pill's
diff --git a/js/app/src/pages/project/evaluators/AddProjectEvaluatorMenu.tsx b/js/app/src/pages/project/evaluators/AddProjectEvaluatorMenu.tsx
index b51219c24a4..0fdfed1eaec 100644
--- a/js/app/src/pages/project/evaluators/AddProjectEvaluatorMenu.tsx
+++ b/js/app/src/pages/project/evaluators/AddProjectEvaluatorMenu.tsx
@@ -24,19 +24,28 @@ import { Truncate } from "@phoenix/components/core/utility/Truncate";
 import { View } from "@phoenix/components/core/view";
 import type { projectEvaluatorOptionsQuery } from "@phoenix/pages/project/evaluators/__generated__/projectEvaluatorOptionsQuery.graphql";
 import { projectEvaluatorOptionsQuery as projectEvaluatorOptionsQueryNode } from "@phoenix/pages/project/evaluators/projectEvaluatorOptions";
-import { useProjectEvaluatorPaths } from "@phoenix/pages/project/evaluators/projectEvaluatorPaths";
+import {
+  type ProjectEvaluatorCreationPaths,
+  useProjectEvaluatorPaths,
+} from "@phoenix/pages/project/evaluators/projectEvaluatorPaths";
 
 export const AddProjectEvaluatorMenu = ({
   size,
+  buttonClassName,
+  buttonLabel = "Add evaluator",
+  shouldShowGalleryLink = true,
+  creationPaths,
   ...props
 }: ProjectEvaluatorMenuTriggerProps) => {
   return (
     <ProjectEvaluatorMenu
       size={size}
-      buttonLabel="Add evaluator"
+      buttonClassName={buttonClassName}
+      buttonLabel={buttonLabel}
       buttonVariant="primary"
       buttonLeadingVisual={<Icon svg={<Icons.Plus />} />}
-      shouldShowGalleryLink
+      shouldShowGalleryLink={shouldShowGalleryLink}
+      creationPaths={creationPaths}
       {...props}
     />
   );
@@ -59,14 +68,22 @@ export const BuildProjectEvaluatorMenu = ({
 
 type ProjectEvaluatorMenuTriggerProps = {
   size: ButtonProps["size"];
+  buttonClassName?: string;
+  buttonLabel?: string;
+  /** Hide the "Browse eval gallery" item, e.g. when already on the gallery page. */
+  shouldShowGalleryLink?: boolean;
+  /** The routes to use for every evaluator-creation action in this menu. */
+  creationPaths: ProjectEvaluatorCreationPaths;
 } & Omit<MenuTriggerProps, "children">;
 
 function ProjectEvaluatorMenu({
   size,
+  buttonClassName,
   buttonLabel,
   buttonVariant,
   buttonLeadingVisual,
   shouldShowGalleryLink,
+  creationPaths,
   ...props
 }: ProjectEvaluatorMenuTriggerProps & {
   buttonLabel: string;
@@ -77,6 +94,7 @@ function ProjectEvaluatorMenu({
   return (
     <MenuTrigger {...props}>
       <Button
+        className={buttonClassName}
         variant={buttonVariant}
         size={size}
         leadingVisual={buttonLeadingVisual}
@@ -90,6 +108,7 @@ function ProjectEvaluatorMenu({
           <ProjectEvaluatorMenuItems
             menuLabel={buttonLabel}
             shouldShowGalleryLink={shouldShowGalleryLink}
+            creationPaths={creationPaths}
           />
         </Suspense>
       </MenuContainer>
@@ -100,9 +119,11 @@ function ProjectEvaluatorMenu({
 function ProjectEvaluatorMenuItems({
   menuLabel,
   shouldShowGalleryLink,
+  creationPaths,
 }: {
   menuLabel: string;
   shouldShowGalleryLink: boolean;
+  creationPaths: ProjectEvaluatorCreationPaths;
 }) {
   const navigate = useNavigate();
   const paths = useProjectEvaluatorPaths();
@@ -126,9 +147,9 @@ function ProjectEvaluatorMenuItems({
         aria-label={menuLabel}
         onAction={(action) => {
           if (action === "createEvaluator") {
-            navigate(paths.newLlm);
+            navigate(creationPaths.newLlm);
           } else if (action === "createCodeEvaluator") {
-            navigate(paths.newCode);
+            navigate(creationPaths.newCode);
           }
         }}
       >
@@ -139,7 +160,7 @@ function ProjectEvaluatorMenuItems({
               id="browseGallery"
               href={galleryHref}
             >
-              Browse the whole library
+              Browse eval gallery
             </MenuItem>
           </MenuSection>
         ) : null}
@@ -152,10 +173,12 @@ function ProjectEvaluatorMenuItems({
             Create new LLM evaluator
           </MenuItem>
           <EvaluatorSubmenu
-            label="Copy existing LLM evaluator"
+            label="Duplicate existing LLM evaluator"
             icon={<Icons.LLMOutput />}
             evaluators={llmEvaluators}
-            onAction={(evaluatorId) => navigate(paths.copyLlm(evaluatorId))}
+            onAction={(evaluatorId) =>
+              navigate(creationPaths.copyLlm(evaluatorId))
+            }
           />
         </MenuSection>
         <MenuSection>
@@ -167,10 +190,12 @@ function ProjectEvaluatorMenuItems({
             Create new code evaluator
           </MenuItem>
           <EvaluatorSubmenu
-            label="Attach existing code evaluator"
+            label="Use existing code evaluator"
             icon={<Icons.Code />}
             evaluators={codeEvaluators}
-            onAction={(evaluatorId) => navigate(paths.attachCode(evaluatorId))}
+            onAction={(evaluatorId) =>
+              navigate(creationPaths.attachCode(evaluatorId))
+            }
           />
         </MenuSection>
       </Menu>
diff --git a/js/app/src/pages/project/evaluators/EvaluatorTemplateCard.tsx b/js/app/src/pages/project/evaluators/EvaluatorTemplateCard.tsx
new file mode 100644
index 00000000000..d5a59da776a
--- /dev/null
+++ b/js/app/src/pages/project/evaluators/EvaluatorTemplateCard.tsx
@@ -0,0 +1,54 @@
+import { css } from "@emotion/react";
+import type { ReactNode, Ref } from "react";
+
+import { ListBoxItem } from "@phoenix/components";
+import { classNames } from "@phoenix/utils/classNames";
+
+type EvaluatorTemplateCardProps = {
+  id: string;
+  textValue: string;
+  children: ReactNode;
+  ref?: Ref<HTMLDivElement>;
+};
+
+export function EvaluatorTemplateCard({
+  id,
+  textValue,
+  children,
+  ref,
+}: EvaluatorTemplateCardProps) {
+  return (
+    <ListBoxItem
+      ref={ref}
+      css={evaluatorTemplateCardCSS}
+      id={id}
+      textValue={textValue}
+      className={classNames(
+        "react-aria-ListBoxItem",
+        "evaluator-template-card"
+      )}
+    >
+      {children}
+    </ListBoxItem>
+  );
+}
+
+const evaluatorTemplateCardCSS = css`
+  && {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: flex-start;
+    width: 100%;
+    height: auto;
+    min-height: var(--global-dimension-size-1400);
+    gap: var(--global-dimension-size-100);
+    margin: 0;
+    padding: var(--global-dimension-size-150);
+    text-align: left;
+    border: var(--global-border-size-thin) solid
+      var(--global-border-color-default);
+    border-radius: var(--global-rounding-small);
+  }
+`;
diff --git a/js/app/src/pages/project/evaluators/ProjectEvaluatorGalleryPage.tsx b/js/app/src/pages/project/evaluators/ProjectEvaluatorGalleryPage.tsx
index 7f5ca13bfa4..71a0153d138 100644
--- a/js/app/src/pages/project/evaluators/ProjectEvaluatorGalleryPage.tsx
+++ b/js/app/src/pages/project/evaluators/ProjectEvaluatorGalleryPage.tsx
@@ -1,5 +1,5 @@
 import { css } from "@emotion/react";
-import { Suspense } from "react";
+import { Suspense, useEffect, useMemo, useRef, useState } from "react";
 import { Header, ListBoxSection } from "react-aria-components";
 import { useLazyLoadQuery } from "react-relay";
 import { Outlet, useNavigate, useSearchParams } from "react-router";
@@ -8,6 +8,7 @@ import {
   Badge,
   Button,
   Counter,
+  ExpandableContent,
   Flex,
   Heading,
   List,
@@ -27,6 +28,7 @@ import {
   getPositiveOptimization,
 } from "@phoenix/components/annotation/optimizationUtils";
 import { LineClamp } from "@phoenix/components/core/utility/LineClamp";
+import { EvaluatorKindToken } from "@phoenix/components/evaluators/EvaluatorKindToken";
 import { ErrorBoundary } from "@phoenix/components/exception";
 import {
   PROJECT_EVALUATOR_CATEGORY_PARAM,
@@ -36,26 +38,36 @@ import type {
   EvaluatorCategory,
   projectEvaluatorTemplatesQuery as ProjectEvaluatorTemplatesQueryType,
 } from "@phoenix/pages/project/evaluators/__generated__/projectEvaluatorTemplatesQuery.graphql";
-import { useProjectEvaluatorPaths } from "@phoenix/pages/project/evaluators/projectEvaluatorPaths";
+import { AddProjectEvaluatorMenu } from "@phoenix/pages/project/evaluators/AddProjectEvaluatorMenu";
+import { EvaluatorTemplateCard } from "@phoenix/pages/project/evaluators/EvaluatorTemplateCard";
+import {
+  type ProjectEvaluatorCreationPaths,
+  useProjectEvaluatorPaths,
+} from "@phoenix/pages/project/evaluators/projectEvaluatorPaths";
 import {
   getProjectEvaluatorTemplateCategoryLabel,
   getProjectEvaluatorTemplateChoices,
+  getProjectEvaluatorTemplateMessages,
+  PROJECT_EVALUATOR_CATEGORIES,
   type ProjectEvaluatorTemplate,
   projectEvaluatorTemplatesQuery,
 } from "@phoenix/pages/project/evaluators/projectEvaluatorTemplates";
+import {
+  formatEvaluationTargetPlural,
+  type ProjectEvaluatorTarget,
+} from "@phoenix/pages/project/evaluators/projectEvaluatorTypes";
 
-const ALL_EVALUATORS_CATEGORY = "all" as const;
-const RECOMMENDED_CATEGORY = "recommended" as const;
 const OTHER_CATEGORY = "other" as const;
 const GALLERY_SKELETON_HEIGHT = 440;
 /** The combined minimum width of the category, template, and details columns. */
 const GALLERY_EXPANDED_MIN_WIDTH = 960;
+/**
+ * Once a category heading crosses into the top 30% of the scroll region, treat
+ * it as the section the user is currently reading.
+ */
+const SCROLL_SPY_ROOT_MARGIN = "0px 0px -70% 0px";
 
 type TemplateCategory = EvaluatorCategory | typeof OTHER_CATEGORY;
-type GalleryCategory =
-  | TemplateCategory
-  | typeof ALL_EVALUATORS_CATEGORY
-  | typeof RECOMMENDED_CATEGORY;
 
 function getGalleryCategory(
   category: EvaluatorCategory | null
@@ -63,6 +75,10 @@ function getGalleryCategory(
   return category ?? OTHER_CATEGORY;
 }
 
+function getCategoryHeadingId(category: TemplateCategory): string {
+  return `project-evaluator-gallery-category-${category.toLowerCase()}`;
+}
+
 export function ProjectEvaluatorGalleryPage() {
   return (
     <main css={galleryContainerCSS}>
@@ -88,68 +104,156 @@ function EvaluatorGallery() {
     { fetchPolicy: "store-and-network" }
   );
   const templates = data.evaluatorGalleryConfigs;
-  const categories = Array.from(
-    new Set(templates.map(({ category }) => getGalleryCategory(category)))
+  const categories = useMemo(() => {
+    const orderedCategories: TemplateCategory[] = [
+      ...PROJECT_EVALUATOR_CATEGORIES.map(({ value }) => value),
+      OTHER_CATEGORY,
+    ];
+    return orderedCategories.filter((category) =>
+      templates.some(
+        (template) => getGalleryCategory(template.category) === category
+      )
+    );
+  }, [templates]);
+  const templatesByCategory = useMemo(
+    () =>
+      new Map(
+        categories.map((category) => [
+          category,
+          templates.filter(
+            (template) => getGalleryCategory(template.category) === category
+          ),
+        ])
+      ),
+    [categories, templates]
   );
-  const recommendedTemplateCount = templates.filter(
-    ({ recommended }) => recommended
-  ).length;
-  const quickStartItems = [
-    {
-      id: ALL_EVALUATORS_CATEGORY,
-      name: "All evaluators",
-      count: templates.length,
-    },
-    {
-      id: RECOMMENDED_CATEGORY,
-      name: "Recommended",
-      count: recommendedTemplateCount,
-    },
-  ];
-  const useCaseItems = categories.map((category) => ({
+  const categoryItems = categories.map((category) => ({
     id: category,
-    name:
-      category === OTHER_CATEGORY
-        ? "Other"
-        : getProjectEvaluatorTemplateCategoryLabel(category),
-    count: templates.filter(
-      ({ category: templateCategory }) =>
-        getGalleryCategory(templateCategory) === category
-    ).length,
+    name: getProjectEvaluatorTemplateCategoryLabel(
+      category === OTHER_CATEGORY ? null : category
+    ),
+    count: templatesByCategory.get(category)?.length ?? 0,
   }));
-  const categoryItems = [...quickStartItems, ...useCaseItems];
-  const requestedCategory = searchParams.get(PROJECT_EVALUATOR_CATEGORY_PARAM);
-  // Shared or stale URLs can contain an unknown category; Recommended is the
-  // gallery's stable fallback.
-  const activeCategoryItem = categoryItems.find(
-    ({ id }) => id === requestedCategory
-  );
-  const activeCategory: GalleryCategory =
-    activeCategoryItem?.id ?? RECOMMENDED_CATEGORY;
-  const activeCategoryLabel = activeCategoryItem?.name ?? "Recommended";
-  const visibleTemplates = templates.filter(({ recommended, category }) => {
-    if (activeCategory === ALL_EVALUATORS_CATEGORY) {
-      return true;
-    }
-    if (activeCategory === RECOMMENDED_CATEGORY) {
-      return recommended;
-    }
-    return getGalleryCategory(category) === activeCategory;
-  });
   const requestedTemplateName = searchParams.get(
     PROJECT_EVALUATOR_TEMPLATE_PARAM
   );
-  // Fall back to the first visible template if a saved selection is no longer
-  // part of the active category.
+  const requestedCategoryParam = searchParams.get(
+    PROJECT_EVALUATOR_CATEGORY_PARAM
+  ) as TemplateCategory | null;
+  const requestedCategory =
+    requestedCategoryParam && categories.includes(requestedCategoryParam)
+      ? requestedCategoryParam
+      : undefined;
+  const requestedTemplate = templates.find(
+    ({ name }) => name === requestedTemplateName
+  );
+  const requestedTemplateNameToScroll = requestedTemplate?.name;
+  const requestedTemplateCategory = requestedTemplate
+    ? getGalleryCategory(requestedTemplate.category)
+    : undefined;
+  const requestedCategoryToScroll =
+    requestedTemplateCategory ?? requestedCategory;
   const selectedTemplate =
-    visibleTemplates.find(({ name }) => name === requestedTemplateName) ??
-    visibleTemplates[0];
+    requestedTemplate ??
+    templatesByCategory.get(requestedCategory ?? categories[0])?.[0];
+
+  // Section headings double as scroll-spy targets, so the sidebar can track
+  // whichever category is currently in view.
+  const headingRefs = useRef(new Map<TemplateCategory, HTMLElement>());
+  const templateCardRefs = useRef(new Map<string, HTMLDivElement>());
+  const templateScrollRegionRef = useRef<HTMLDivElement>(null);
+  const [activeCategory, setActiveCategory] = useState<
+    TemplateCategory | undefined
+  >(() => requestedCategory ?? categories[0]);
+
+  const scrollToCategory = (category: TemplateCategory) => {
+    headingRefs.current.get(category)?.scrollIntoView({ block: "start" });
+    setActiveCategory(category);
+  };
+
+  // Keep the scroll position synchronized with gallery deep links. Prefer the
+  // requested template and fall back to its category when no card is available.
+  useEffect(() => {
+    // Wait for the route commit and React Aria collection layout before moving
+    // the scroll port; otherwise router scroll restoration can win this race.
+    const animationFrameId = requestAnimationFrame(() => {
+      const requestedTemplateCard = requestedTemplateNameToScroll
+        ? templateCardRefs.current.get(requestedTemplateNameToScroll)
+        : undefined;
+      const requestedCategoryHeading = requestedCategoryToScroll
+        ? headingRefs.current.get(requestedCategoryToScroll)
+        : undefined;
+      const scrollTarget = requestedTemplateCard ?? requestedCategoryHeading;
+      scrollTarget?.scrollIntoView({
+        block: requestedTemplateCard ? "nearest" : "start",
+      });
+      if (requestedCategoryToScroll) {
+        setActiveCategory(requestedCategoryToScroll);
+      }
+    });
+    return () => cancelAnimationFrame(animationFrameId);
+  }, [requestedCategoryToScroll, requestedTemplateNameToScroll]);
+
+  useEffect(() => {
+    const scrollRegion = templateScrollRegionRef.current;
+    if (!scrollRegion) return undefined;
+    // Snapshot the mounted headings so observer entries can be mapped back to
+    // the category selection used by the sidebar and compact picker.
+    const headingsByElement = new Map<Element, TemplateCategory>(
+      categories
+        .map(
+          (category) => [headingRefs.current.get(category), category] as const
+        )
+        .filter(
+          (entry): entry is [HTMLElement, TemplateCategory] => entry[0] != null
+        )
+    );
+    if (headingsByElement.size === 0) return undefined;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        // More than one heading can occupy the active top band. The uppermost
+        // one represents the category the user is currently reading.
+        const topmostVisibleEntry = entries
+          .filter((entry) => entry.isIntersecting)
+          .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top)
+          .at(0);
+        // The final heading cannot reach the top band when the scroll port is
+        // at its limit, so treat the bottom as belonging to the last category.
+        const isAtScrollEnd =
+          scrollRegion.scrollTop + scrollRegion.clientHeight >=
+          scrollRegion.scrollHeight - 1;
+        const category = isAtScrollEnd
+          ? categories.at(-1)
+          : topmostVisibleEntry
+            ? headingsByElement.get(topmostVisibleEntry.target)
+            : undefined;
+        if (category) {
+          setActiveCategory(category);
+        }
+      },
+      { root: scrollRegion, rootMargin: SCROLL_SPY_ROOT_MARGIN }
+    );
+    // Observe every mounted category heading and release them together when
+    // the category collection changes or the gallery unmounts.
+    headingsByElement.forEach((_category, heading) =>
+      observer.observe(heading)
+    );
+    return () => observer.disconnect();
+  }, [categories]);
+
+  const setSelectedTemplate = (templateName: string) => {
+    setSearchParams((currentSearchParams) => {
+      const nextSearchParams = new URLSearchParams(currentSearchParams);
+      nextSearchParams.set(PROJECT_EVALUATOR_TEMPLATE_PARAM, templateName);
+      return nextSearchParams;
+    });
+  };
   const renderCategoryItem = ({
     id,
     name,
     count,
   }: {
-    id: GalleryCategory;
+    id: TemplateCategory;
     name: string;
     count: number;
   }) => (
@@ -158,82 +262,61 @@ function EvaluatorGallery() {
       <Counter variant="quiet">{count}</Counter>
     </ListBoxItem>
   );
-  const setSelectedCategory = (category: string) => {
-    setSearchParams((currentSearchParams) => {
-      const nextSearchParams = new URLSearchParams(currentSearchParams);
-      if (category === RECOMMENDED_CATEGORY) {
-        nextSearchParams.delete(PROJECT_EVALUATOR_CATEGORY_PARAM);
-      } else {
-        nextSearchParams.set(PROJECT_EVALUATOR_CATEGORY_PARAM, category);
-      }
-      nextSearchParams.delete(PROJECT_EVALUATOR_TEMPLATE_PARAM);
-      return nextSearchParams;
-    });
-  };
-  const setSelectedTemplate = (templateName: string) => {
-    setSearchParams((currentSearchParams) => {
-      const nextSearchParams = new URLSearchParams(currentSearchParams);
-      nextSearchParams.set(PROJECT_EVALUATOR_TEMPLATE_PARAM, templateName);
-      return nextSearchParams;
-    });
-  };
 
   return (
     <div css={galleryCSS} className="project-evaluator-gallery">
       <nav
         className="project-evaluator-gallery__categories"
-        aria-label="Evaluator template categories"
+        aria-label="Evaluator gallery navigation"
       >
-        <ListBox
-          aria-label="Evaluator template categories"
-          className="project-evaluator-gallery__category-list"
-          selectionMode="single"
-          selectionBehavior="replace"
-          disallowEmptySelection
-          selectedKeys={[activeCategory]}
-          onSelectionChange={(selection) => {
-            if (selection === "all") return;
-            const category = selection.keys().next().value;
-            if (typeof category === "string") {
-              setSelectedCategory(category);
-            }
-          }}
-        >
-          <ListBoxSection id="quick-start">
-            <Header className="project-evaluator-gallery__category-section-heading">
-              <Text elementType="h2" size="XS" weight="heavy" color="text-500">
-                Quick start
-              </Text>
-            </Header>
-            {quickStartItems.map(renderCategoryItem)}
-          </ListBoxSection>
-          <ListBoxSection id="use-cases">
-            <Header className="project-evaluator-gallery__category-section-heading">
-              <Text elementType="h2" size="XS" weight="heavy" color="text-500">
-                Use cases
-              </Text>
-            </Header>
-            {useCaseItems.map(renderCategoryItem)}
-          </ListBoxSection>
-        </ListBox>
-        <EvaluatorScratchActions
-          className="project-evaluator-gallery__scratch-actions"
-          onCreateLlmEvaluator={() => navigate(paths.galleryNewLlm)}
-          onCreateCodeEvaluator={() => navigate(paths.galleryNewCode)}
-        />
+        <EvaluatorGalleryAddMenu creationPaths={paths.galleryCreation} />
+        <div className="project-evaluator-gallery__category-scroll-region">
+          <ListBox
+            aria-label="Categories"
+            className="project-evaluator-gallery__category-list"
+            selectionMode="single"
+            selectionBehavior="replace"
+            disallowEmptySelection
+            selectedKeys={activeCategory ? [activeCategory] : []}
+            onSelectionChange={(selection) => {
+              if (selection === "all") return;
+              const category = selection.keys().next().value;
+              if (typeof category === "string") {
+                scrollToCategory(category as TemplateCategory);
+              }
+            }}
+          >
+            <ListBoxSection id="categories">
+              <Header className="project-evaluator-gallery__category-section-heading">
+                <Text
+                  elementType="h2"
+                  size="XS"
+                  weight="heavy"
+                  color="text-500"
+                >
+                  Categories
+                </Text>
+              </Header>
+              {categoryItems.map(renderCategoryItem)}
+            </ListBoxSection>
+          </ListBox>
+        </div>
       </nav>
 
       <section
         className="project-evaluator-gallery__templates"
-        aria-labelledby="evaluator-template-list-title"
+        aria-label="Evaluator templates"
       >
+        <div className="project-evaluator-gallery__compact-add-evaluator-menu">
+          <EvaluatorGalleryAddMenu creationPaths={paths.galleryCreation} />
+        </div>
         <Select
-          aria-label="Evaluator template category"
+          aria-label="Evaluator category"
           className="project-evaluator-gallery__compact-category-select"
           value={activeCategory}
           onChange={(category) => {
             if (typeof category === "string") {
-              setSelectedCategory(category);
+              scrollToCategory(category as TemplateCategory);
             }
           }}
         >
@@ -243,7 +326,7 @@ function EvaluatorGallery() {
           </Button>
           <Popover isNonModal closeOnInteractOutside>
             <ListBox css={compactCategoryListCSS}>
-              <ListBoxSection id="compact-quick-start">
+              <ListBoxSection id="compact-categories">
                 <Header className="project-evaluator-gallery__category-section-heading">
                   <Text
                     elementType="h2"
@@ -251,44 +334,21 @@ function EvaluatorGallery() {
                     weight="heavy"
                     color="text-500"
                   >
-                    Quick start
+                    Categories
                   </Text>
                 </Header>
-                {quickStartItems.map(renderCategoryItem)}
-              </ListBoxSection>
-              <ListBoxSection id="compact-use-cases">
-                <Header className="project-evaluator-gallery__category-section-heading">
-                  <Text
-                    elementType="h2"
-                    size="XS"
-                    weight="heavy"
-                    color="text-500"
-                  >
-                    Use cases
-                  </Text>
-                </Header>
-                {useCaseItems.map(renderCategoryItem)}
+                {categoryItems.map(renderCategoryItem)}
               </ListBoxSection>
             </ListBox>
           </Popover>
         </Select>
-        <Text
-          id="evaluator-template-list-title"
-          className="project-evaluator-gallery__template-list-title"
-          elementType="h2"
-          size="S"
-          weight="heavy"
-        >
-          {activeCategoryLabel}
-        </Text>
         <ListBox
-          aria-labelledby="evaluator-template-list-title"
-          className="project-evaluator-gallery__template-list"
-          items={visibleTemplates}
+          ref={templateScrollRegionRef}
+          aria-label="Evaluator templates"
+          className="project-evaluator-gallery__template-card-scroll-region"
           layout="grid"
           selectionMode="single"
           selectionBehavior="replace"
-          disallowEmptySelection
           selectedKeys={selectedTemplate ? [selectedTemplate.name] : []}
           onSelectionChange={(selection) => {
             if (selection === "all") return;
@@ -297,32 +357,71 @@ function EvaluatorGallery() {
               setSelectedTemplate(templateName);
             }
           }}
+          onAction={(key) => {
+            if (typeof key === "string") {
+              navigate(paths.galleryNewLlmFromTemplate(key));
+            }
+          }}
         >
-          {(template) => (
-            <ListBoxItem
-              key={template.name}
-              id={template.name}
-              textValue={template.name}
-            >
-              <Flex direction="row" justifyContent="space-between">
-                <Text size="S" weight="heavy">
-                  {template.name}
-                </Text>
-                <Badge size="S">LLM</Badge>
-              </Flex>
-              <LineClamp lines={3}>
-                <Text size="XS" color="text-700">
-                  {template.description}
-                </Text>
-              </LineClamp>
-            </ListBoxItem>
-          )}
+          {categories.map((category) => {
+            const headingId = getCategoryHeadingId(category);
+            return (
+              <ListBoxSection
+                key={category}
+                id={category}
+                className="project-evaluator-gallery__template-category-section"
+              >
+                <Header className="project-evaluator-gallery__template-category-header">
+                  <Text
+                    ref={(element) => {
+                      if (element) {
+                        headingRefs.current.set(category, element);
+                      } else {
+                        headingRefs.current.delete(category);
+                      }
+                    }}
+                    id={headingId}
+                    className="project-evaluator-gallery__template-category-heading"
+                    elementType="h2"
+                    size="M"
+                    weight="heavy"
+                  >
+                    {getProjectEvaluatorTemplateCategoryLabel(
+                      category === OTHER_CATEGORY ? null : category
+                    )}
+                  </Text>
+                </Header>
+                {(templatesByCategory.get(category) ?? []).map((template) => (
+                  <EvaluatorTemplateCard
+                    key={template.name}
+                    ref={(element) => {
+                      if (element) {
+                        templateCardRefs.current.set(template.name, element);
+                      } else {
+                        templateCardRefs.current.delete(template.name);
+                      }
+                    }}
+                    id={template.name}
+                    textValue={template.name}
+                  >
+                    <Text size="S" weight="heavy">
+                      {template.name}
+                    </Text>
+                    <LineClamp lines={3}>
+                      <Text size="XS" color="text-700">
+                        {template.description}
+                      </Text>
+                    </LineClamp>
+                    <EvaluatorTemplateCardFooter
+                      evaluatorKind="LLM"
+                      evaluationTargets={[template.scope ?? "SPAN"]}
+                    />
+                  </EvaluatorTemplateCard>
+                ))}
+              </ListBoxSection>
+            );
+          })}
         </ListBox>
-        <EvaluatorScratchActions
-          className="project-evaluator-gallery__compact-scratch-actions"
-          onCreateLlmEvaluator={() => navigate(paths.galleryNewLlm)}
-          onCreateCodeEvaluator={() => navigate(paths.galleryNewCode)}
-        />
       </section>
 
       <aside className="project-evaluator-gallery__details" aria-live="polite">
@@ -335,7 +434,7 @@ function EvaluatorGallery() {
           />
         ) : (
           <Text size="S" color="text-500">
-            No templates are available in this category.
+            No templates are available in the gallery.
           </Text>
         )}
       </aside>
@@ -343,23 +442,59 @@ function EvaluatorGallery() {
   );
 }
 
-function EvaluatorScratchActions({
-  className,
-  onCreateLlmEvaluator,
-  onCreateCodeEvaluator,
+function EvaluatorGalleryAddMenu({
+  creationPaths,
+}: {
+  creationPaths: ProjectEvaluatorCreationPaths;
+}) {
+  return (
+    <AddProjectEvaluatorMenu
+      size="M"
+      buttonClassName="project-evaluator-gallery__add-evaluator-button"
+      buttonLabel="Add Custom Evaluator"
+      shouldShowGalleryLink={false}
+      creationPaths={creationPaths}
+    />
+  );
+}
+
+function EvaluatorTemplateCardFooter({
+  evaluatorKind,
+  evaluationTargets,
 }: {
-  className: string;
-  onCreateLlmEvaluator: () => void;
-  onCreateCodeEvaluator: () => void;
+  evaluatorKind: "CODE" | "LLM";
+  evaluationTargets: readonly [
+    ProjectEvaluatorTarget,
+    ...ProjectEvaluatorTarget[],
+  ];
 }) {
   return (
-    <Flex direction="column" gap="size-50" className={className}>
-      <Button size="S" variant="quiet" onPress={onCreateLlmEvaluator}>
-        Start from a blank prompt
-      </Button>
-      <Button size="S" variant="quiet" onPress={onCreateCodeEvaluator}>
-        Create a code evaluator
-      </Button>
+    <Flex
+      className="project-evaluator-gallery__template-card-footer"
+      direction="row"
+      alignItems="center"
+      gap="size-100"
+      wrap
+    >
+      <Flex className="project-evaluator-gallery__template-kind">
+        <EvaluatorKindToken kind={evaluatorKind} size="S" />
+      </Flex>
+      <Flex
+        className="project-evaluator-gallery__template-targets"
+        direction="row"
+        gap="size-50"
+        wrap
+      >
+        {evaluationTargets.map((target) => (
+          <Badge
+            key={target}
+            size="S"
+            title={`Evaluates ${formatEvaluationTargetPlural(target)}`}
+          >
+            {capitalize(formatEvaluationTargetPlural(target))}
+          </Badge>
+        ))}
+      </Flex>
     </Flex>
   );
 }
@@ -377,19 +512,17 @@ function EvaluatorTemplateDetails({
     optimizationDirection: template.optimizationDirection,
     values: choices,
   });
+  const messages = getProjectEvaluatorTemplateMessages(template);
   return (
     <Flex direction="column" gap="size-200" height="100%">
       <Flex direction="column" gap="size-100">
         <Heading level={2}>{template.name}</Heading>
         <Flex direction="row" gap="size-75" wrap>
-          <Badge size="S">LLM</Badge>
+          <EvaluatorKindToken kind="LLM" size="S" />
           <Badge size="S">
             {getProjectEvaluatorTemplateCategoryLabel(template.category)}
           </Badge>
         </Flex>
-        <Text size="S" color="text-700">
-          {template.description}
-        </Text>
         {template.details ? (
           <Text size="S" color="text-700">
             {template.details}
@@ -400,7 +533,7 @@ function EvaluatorTemplateDetails({
         <div>
           <dt>
             <Text size="XS" color="text-500">
-              Scope
+              Target
             </Text>
           </dt>
           <dd>
@@ -424,7 +557,7 @@ function EvaluatorTemplateDetails({
       </dl>
       <Flex direction="column" gap="size-75">
         <Text elementType="h3" size="S" weight="heavy">
-          Output choices
+          Annotation values
         </Text>
         <List size="S">
           {choices.map(({ label, score }) => (
@@ -454,13 +587,72 @@ function EvaluatorTemplateDetails({
           ))}
         </List>
       </Flex>
-      <Button variant="primary" onPress={onUseTemplate}>
-        Customize this evaluator
-      </Button>
+      {messages.length > 0 ? (
+        <Flex direction="column" gap="size-75">
+          <Text elementType="h3" size="S" weight="heavy">
+            Prompt
+          </Text>
+          <div css={promptPreviewWellCSS}>
+            <ExpandableContent
+              height={PROMPT_PREVIEW_COLLAPSED_HEIGHT}
+              expandedBehavior="grow"
+              overlayBackgroundColor="var(--global-background-color-100)"
+            >
+              <Flex direction="column" gap="size-150">
+                {messages.map((message) => (
+                  <Flex key={message.id} direction="column" gap="size-25">
+                    <Text size="XS" color="text-500" weight="heavy">
+                      {capitalize(message.role)}
+                    </Text>
+                    <Text size="S" css={promptPreviewMessageCSS}>
+                      {message.content}
+                    </Text>
+                  </Flex>
+                ))}
+              </Flex>
+            </ExpandableContent>
+          </div>
+        </Flex>
+      ) : null}
+      <Flex direction="column" css={stickyUseTemplateFooterCSS}>
+        <Button variant="primary" onPress={onUseTemplate}>
+          Customize this evaluator
+        </Button>
+      </Flex>
     </Flex>
   );
 }
 
+// Bleeds out to the edges of the details column's own padding/gap (both
+// `var(--global-dimension-size-200)`) and re-adds that same space as padding
+// inside this element's own background, so nothing scrolls behind it.
+const stickyUseTemplateFooterCSS = css`
+  position: sticky;
+  bottom: calc(-1 * var(--project-evaluator-gallery-column-padding));
+  z-index: 1;
+  margin: calc(-1 * var(--global-dimension-size-200))
+    calc(-1 * var(--project-evaluator-gallery-column-padding))
+    calc(-1 * var(--project-evaluator-gallery-column-padding));
+  padding: var(--global-dimension-size-200)
+    var(--project-evaluator-gallery-column-padding)
+    var(--project-evaluator-gallery-column-padding);
+  background-color: var(--global-background-color-default);
+`;
+
+const PROMPT_PREVIEW_COLLAPSED_HEIGHT = 160;
+
+const promptPreviewWellCSS = css`
+  background-color: var(--global-background-color-100);
+  border: var(--global-border-size-thin) solid
+    var(--global-border-color-default);
+  border-radius: var(--global-rounding-medium);
+  padding: var(--global-dimension-size-150);
+`;
+
+const promptPreviewMessageCSS = css`
+  white-space: pre-wrap;
+`;
+
 function capitalize(value: string): string {
   return `${value.charAt(0).toUpperCase()}${value.slice(1)}`;
 }
@@ -517,7 +709,7 @@ const galleryCSS = css`
   );
   --project-evaluator-gallery-column-padding: var(--global-dimension-size-200);
   --project-evaluator-gallery-template-card-min-width: var(
-    --global-dimension-size-3000
+    --global-dimension-size-4600
   );
   --project-evaluator-gallery-template-column-min-width: calc(
     var(--project-evaluator-gallery-template-card-min-width) +
@@ -567,9 +759,9 @@ const galleryCSS = css`
   }
 
   .project-evaluator-gallery__category-list {
-    flex: 1 1 auto;
-    min-height: 0;
+    flex: none;
     gap: var(--global-dimension-size-100);
+    overflow: visible;
 
     .react-aria-ListBoxSection {
       display: flex;
@@ -584,28 +776,52 @@ const galleryCSS = css`
     }
   }
 
+  .project-evaluator-gallery__category-scroll-region {
+    flex: 1 1 auto;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--global-dimension-size-100);
+    overflow-y: auto;
+  }
+
   .project-evaluator-gallery__category-section-heading {
     padding: var(--global-dimension-size-50) var(--global-dimension-size-100);
     letter-spacing: 0.06em;
     text-transform: uppercase;
   }
 
-  .project-evaluator-gallery__scratch-actions,
-  .project-evaluator-gallery__compact-scratch-actions {
+  .project-evaluator-gallery__add-evaluator-button {
     flex: none;
-    padding-top: var(--global-dimension-size-200);
-    border-top: var(--global-border-size-thin) solid
-      var(--global-border-color-default);
+    align-self: stretch;
+    width: 100%;
+    margin-bottom: var(--global-dimension-size-200);
   }
 
-  .project-evaluator-gallery__compact-category-select,
-  .project-evaluator-gallery__compact-scratch-actions {
+  .project-evaluator-gallery__compact-category-select {
     display: none;
   }
 
-  .project-evaluator-gallery__template-list {
+  .project-evaluator-gallery__compact-add-evaluator-menu {
+    display: none;
+  }
+
+  .project-evaluator-gallery__template-card-scroll-region {
     flex: 1 1 auto;
     min-height: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--global-dimension-size-400);
+    margin-top: var(--global-dimension-size-100);
+    overflow-y: auto;
+    scroll-behavior: smooth;
+
+    @media (prefers-reduced-motion: reduce) {
+      scroll-behavior: auto;
+    }
+  }
+
+  .project-evaluator-gallery__template-category-section {
     display: grid;
     grid-template-columns: repeat(
       auto-fit,
@@ -613,16 +829,29 @@ const galleryCSS = css`
     );
     align-content: start;
     gap: var(--global-dimension-size-100);
-    margin-top: var(--global-dimension-size-100);
+  }
 
-    .react-aria-ListBoxItem {
-      min-height: var(--global-dimension-size-1400);
-      gap: var(--global-dimension-size-100);
-      margin: 0;
-      padding: var(--global-dimension-size-150);
-      border: var(--global-border-size-thin) solid
-        var(--global-border-color-default);
-    }
+  .project-evaluator-gallery__template-category-header {
+    grid-column: 1 / -1;
+  }
+
+  .project-evaluator-gallery__template-category-heading {
+    /* Anchor target for the category nav; offset so scrollIntoView doesn't
+       tuck it flush against the scroll region's top edge. */
+    scroll-margin-top: var(--global-dimension-size-100);
+  }
+
+  .project-evaluator-gallery__template-card-footer {
+    width: 100%;
+    margin-top: auto;
+  }
+
+  .project-evaluator-gallery__template-kind {
+    flex: none;
+  }
+
+  .project-evaluator-gallery__template-targets {
+    min-width: 0;
   }
 
   .project-evaluator-gallery__definition-list {
@@ -662,27 +891,17 @@ const galleryCSS = css`
       width: 100%;
     }
 
+    .project-evaluator-gallery__compact-add-evaluator-menu {
+      display: flex;
+      flex: none;
+      justify-content: flex-start;
+    }
+
     .project-evaluator-gallery__templates {
       grid-column: 1;
       grid-row: 1;
     }
 
-    .project-evaluator-gallery__template-list-title {
-      display: none;
-    }
-
-    .project-evaluator-gallery__template-list {
-      grid-template-columns: minmax(
-        var(--project-evaluator-gallery-template-card-min-width),
-        1fr
-      );
-    }
-
-    .project-evaluator-gallery__compact-scratch-actions {
-      display: flex;
-      margin-top: var(--global-dimension-size-200);
-    }
-
     .project-evaluator-gallery__details {
       grid-column: 2;
       grid-row: 1;
diff --git a/js/app/src/pages/project/evaluators/ProjectEvaluatorSlideoverRoutes.tsx b/js/app/src/pages/project/evaluators/ProjectEvaluatorSlideoverRoutes.tsx
index a40b30b7f9f..bfc68f70f51 100644
--- a/js/app/src/pages/project/evaluators/ProjectEvaluatorSlideoverRoutes.tsx
+++ b/js/app/src/pages/project/evaluators/ProjectEvaluatorSlideoverRoutes.tsx
@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { useLazyLoadQuery } from "react-relay";
-import { useNavigate, useParams } from "react-router";
+import { useLocation, useNavigate, useParams } from "react-router";
 import invariant from "tiny-invariant";
 
 import type { projectEvaluatorDetailsQuery } from "@phoenix/pages/project/evaluators/__generated__/projectEvaluatorDetailsQuery.graphql";
@@ -18,7 +18,6 @@ import {
   projectEvaluatorDetailsQueryNode,
   UNSUPPORTED_PROMPT_TEMPLATE_ERROR,
 } from "@phoenix/pages/project/evaluators/projectEvaluatorOptions";
-import { useProjectEvaluatorPaths } from "@phoenix/pages/project/evaluators/projectEvaluatorPaths";
 import { ProjectEvaluatorSlideoverError } from "@phoenix/pages/project/evaluators/ProjectEvaluatorSlideoverError";
 import {
   buildTemplateCreationMode,
@@ -26,29 +25,24 @@ import {
 } from "@phoenix/pages/project/evaluators/projectEvaluatorTemplates";
 
 /**
- * Closes the slideover by leaving its route — to the evaluators list unless
- * the caller names another destination. Replaces rather than pushes, so a
- * slideover the user has dismissed does not sit one step back in history
- * waiting to be reopened.
+ * Closes the slideover by leaving its nested route for its parent page.
+ * Replaces rather than pushes, so a dismissed slideover does not sit one step
+ * back in history waiting to be reopened. The current search is retained so
+ * the parent page restores the view state the slideover was opened over.
  */
-function useCloseSlideover(to?: string) {
+function useCloseSlideover() {
   const navigate = useNavigate();
-  const { list } = useProjectEvaluatorPaths();
-  const destination = to ?? list;
+  const { search } = useLocation();
   return (isOpen: boolean) => {
     if (!isOpen) {
-      navigate(destination, { replace: true });
+      navigate(
+        { pathname: "..", search },
+        { relative: "route", replace: true }
+      );
     }
   };
 }
 
-function useCloseGallerySlideover() {
-  // Gallery slideovers close over the selected category and template rather
-  // than resetting the gallery to its default view.
-  const { galleryReturn } = useProjectEvaluatorPaths();
-  return useCloseSlideover(galleryReturn);
-}
-
 function useRouteProjectId() {
   const { projectId } = useParams();
   invariant(projectId, "projectId is required");
@@ -84,19 +78,6 @@ export function NewLlmProjectEvaluatorPage() {
   );
 }
 
-export function NewGalleryLlmProjectEvaluatorPage() {
-  const projectId = useRouteProjectId();
-  const onOpenChange = useCloseGallerySlideover();
-  return (
-    <CreateProjectEvaluatorSlideover
-      isOpen
-      onOpenChange={onOpenChange}
-      projectId={projectId}
-      creationMode={{ kind: "scratch" }}
-    />
-  );
-}
-
 export function NewCodeProjectEvaluatorPage() {
   const projectId = useRouteProjectId();
   const onOpenChange = useCloseSlideover();
@@ -110,24 +91,11 @@ export function NewCodeProjectEvaluatorPage() {
   );
 }
 
-export function NewGalleryCodeProjectEvaluatorPage() {
-  const projectId = useRouteProjectId();
-  const onOpenChange = useCloseGallerySlideover();
-  return (
-    <CreateProjectEvaluatorSlideover
-      isOpen
-      onOpenChange={onOpenChange}
-      projectId={projectId}
-      creationMode={{ kind: "newCode" }}
-    />
-  );
-}
-
 export function NewGalleryLlmFromTemplateProjectEvaluatorPage() {
   const projectId = useRouteProjectId();
   const { templateName } = useParams();
   invariant(templateName, "templateName is required");
-  const onOpenChange = useCloseGallerySlideover();
+  const onOpenChange = useCloseSlideover();
   const data = useLazyLoadQuery<ProjectEvaluatorTemplatesQueryType>(
     projectEvaluatorTemplatesQuery,
     {},
@@ -233,10 +201,7 @@ export function AttachCodeProjectEvaluatorPage() {
 export function EditProjectEvaluatorPage() {
   const { projectEvaluatorId } = useParams();
   invariant(projectEvaluatorId, "projectEvaluatorId is required");
-  // The edit route nests under the evaluator's details page, so closing lands
-  // on the details view it was opened over rather than the list.
-  const { details } = useProjectEvaluatorPaths();
-  const onOpenChange = useCloseSlideover(details(projectEvaluatorId));
+  const onOpenChange = useCloseSlideover();
   const { evaluator, sandboxConfigs } = useProjectEvaluator(projectEvaluatorId);
   if (
     evaluator.evaluator.kind !== "LLM" &&
diff --git a/js/app/src/pages/project/evaluators/ProjectEvaluatorsEmptyState.tsx b/js/app/src/pages/project/evaluators/ProjectEvaluatorsEmptyState.tsx
index 71cce7c00e4..c46292a553a 100644
--- a/js/app/src/pages/project/evaluators/ProjectEvaluatorsEmptyState.tsx
+++ b/js/app/src/pages/project/evaluators/ProjectEvaluatorsEmptyState.tsx
@@ -1,6 +1,6 @@
 import { css } from "@emotion/react";
 import { type ReactNode, Suspense, useRef, useState } from "react";
-import { useLazyLoadQuery } from "react-relay";
+import { graphql, useLazyLoadQuery } from "react-relay";
 
 import {
   Flex,
@@ -13,20 +13,31 @@ import {
   Text,
 } from "@phoenix/components";
 import { ErrorBoundary } from "@phoenix/components/exception";
-import type { projectEvaluatorTemplatesQuery as ProjectEvaluatorTemplatesQueryType } from "@phoenix/pages/project/evaluators/__generated__/projectEvaluatorTemplatesQuery.graphql";
+import type {
+  projectEvaluatorCategoryCardsQuery as ProjectEvaluatorCategoryCardsQueryType,
+  projectEvaluatorCategoryCardsQuery$data,
+} from "@phoenix/pages/project/evaluators/__generated__/projectEvaluatorCategoryCardsQuery.graphql";
 import { BuildProjectEvaluatorMenu } from "@phoenix/pages/project/evaluators/AddProjectEvaluatorMenu";
 import { useProjectEvaluatorPaths } from "@phoenix/pages/project/evaluators/projectEvaluatorPaths";
-import {
-  PROJECT_EVALUATOR_CATEGORIES,
-  type ProjectEvaluatorTemplate,
-  projectEvaluatorTemplatesQuery,
-} from "@phoenix/pages/project/evaluators/projectEvaluatorTemplates";
+import { PROJECT_EVALUATOR_CATEGORIES } from "@phoenix/pages/project/evaluators/projectEvaluatorTemplates";
 
 const MAX_CATEGORY_TEMPLATES = 3;
 const CATEGORY_CARDS_PER_VIEW = 3;
 const CATEGORY_CARD_MIN_HEIGHT = 250;
 const CATEGORY_CAROUSEL_ID = "project-evaluator-category-carousel";
 
+const projectEvaluatorCategoryCardsQuery = graphql`
+  query projectEvaluatorCategoryCardsQuery {
+    evaluatorGalleryConfigs {
+      name
+      category
+    }
+  }
+`;
+
+type ProjectEvaluatorCategoryCardTemplate =
+  projectEvaluatorCategoryCardsQuery$data["evaluatorGalleryConfigs"][number];
+
 export function ProjectEvaluatorsEmptyState() {
   const paths = useProjectEvaluatorPaths();
   return (
@@ -43,9 +54,12 @@ export function ProjectEvaluatorsEmptyState() {
         </Suspense>
       </ErrorBoundary>
       <Flex direction="row" gap="size-100" wrap="wrap" justifyContent="center">
-        <BuildProjectEvaluatorMenu size="S" />
+        <BuildProjectEvaluatorMenu
+          size="S"
+          creationPaths={paths.listCreation}
+        />
         <LinkButton size="S" variant="primary" to={paths.gallery}>
-          Browse the library
+          Browse eval gallery
         </LinkButton>
       </Flex>
     </Flex>
@@ -53,8 +67,8 @@ export function ProjectEvaluatorsEmptyState() {
 }
 
 function EvaluatorCategoryCards() {
-  const data = useLazyLoadQuery<ProjectEvaluatorTemplatesQueryType>(
-    projectEvaluatorTemplatesQuery,
+  const data = useLazyLoadQuery<ProjectEvaluatorCategoryCardsQueryType>(
+    projectEvaluatorCategoryCardsQuery,
     {},
     { fetchPolicy: "store-and-network" }
   );
@@ -64,7 +78,7 @@ function EvaluatorCategoryCards() {
 function CategoryCards({
   templates,
 }: {
-  templates: readonly ProjectEvaluatorTemplate[];
+  templates: readonly ProjectEvaluatorCategoryCardTemplate[];
 }) {
   const paths = useProjectEvaluatorPaths();
   // Keep the full track mounted so native scrolling can animate continuously
@@ -82,22 +96,37 @@ function CategoryCards({
   const showCategoryAtIndex = (categoryIndex: number) => {
     const categoryCardList = categoryCardListRef.current;
     const targetCategoryCard = categoryCardList?.children.item(categoryIndex);
-    if (targetCategoryCard instanceof HTMLElement) {
-      // The scroll port's padding keeps adjacent cards peeking at the edges.
-      targetCategoryCard.scrollIntoView({
-        block: "nearest",
-        inline: "start",
+    if (categoryCardList && targetCategoryCard instanceof HTMLElement) {
+      const categoryCardListRect = categoryCardList.getBoundingClientRect();
+      const targetCategoryCardRect = targetCategoryCard.getBoundingClientRect();
+      const scrollPaddingInlineStart =
+        Number.parseFloat(
+          getComputedStyle(categoryCardList).scrollPaddingInlineStart
+        ) || 0;
+      // Move only the carousel. scrollIntoView would also move the table's
+      // shared horizontal scroll container when the table overflows.
+      categoryCardList.scrollTo({
+        left:
+          categoryCardList.scrollLeft +
+          targetCategoryCardRect.left -
+          categoryCardListRect.left -
+          scrollPaddingInlineStart,
       });
     }
     setFirstVisibleCategoryIndex(categoryIndex);
   };
 
   const showPreviousCategories = () => {
-    showCategoryAtIndex(Math.max(firstVisibleCategoryIndex - 1, 0));
+    showCategoryAtIndex(
+      Math.max(firstVisibleCategoryIndex - CATEGORY_CARDS_PER_VIEW, 0)
+    );
   };
   const showNextCategories = () => {
     showCategoryAtIndex(
-      Math.min(firstVisibleCategoryIndex + 1, lastFirstVisibleCategoryIndex)
+      Math.min(
+        firstVisibleCategoryIndex + CATEGORY_CARDS_PER_VIEW,
+        lastFirstVisibleCategoryIndex
+      )
     );
   };
 
@@ -253,7 +282,7 @@ function CategoryCarouselControls({
 const emptyStateContentCSS = css`
   box-sizing: border-box;
   margin-inline: auto;
-  padding: var(--global-dimension-size-400) 0 var(--global-dimension-size-600);
+  padding: var(--global-dimension-size-700) 0 var(--global-dimension-size-600);
 `;
 
 const categoryCarouselControlCSS = css`
diff --git a/js/app/src/pages/project/evaluators/ProjectEvaluatorsPage.tsx b/js/app/src/pages/project/evaluators/ProjectEvaluatorsPage.tsx
index b7911b710dc..a460d96b467 100644
--- a/js/app/src/pages/project/evaluators/ProjectEvaluatorsPage.tsx
+++ b/js/app/src/pages/project/evaluators/ProjectEvaluatorsPage.tsx
@@ -4,10 +4,11 @@ import { graphql, useLazyLoadQuery } from "react-relay";
 import { Outlet, useParams } from "react-router";
 import invariant from "tiny-invariant";
 
-import { Flex, PageHeader, Skeleton, View } from "@phoenix/components";
+import { Flex, Skeleton, Text, View } from "@phoenix/components";
 import { useTimeRange } from "@phoenix/components/datetime";
 import type { ProjectEvaluatorsPageQuery } from "@phoenix/pages/project/evaluators/__generated__/ProjectEvaluatorsPageQuery.graphql";
 import { AddProjectEvaluatorMenu } from "@phoenix/pages/project/evaluators/AddProjectEvaluatorMenu";
+import { useProjectEvaluatorPaths } from "@phoenix/pages/project/evaluators/projectEvaluatorPaths";
 import { ProjectEvaluatorsTable } from "@phoenix/pages/project/evaluators/ProjectEvaluatorsTable";
 import { ProjectEvaluatorsToolbar } from "@phoenix/pages/project/evaluators/ProjectEvaluatorsToolbar";
 
@@ -80,17 +81,34 @@ function ProjectEvaluatorsPageContent({
     { fetchPolicy: "store-and-network" }
   );
   invariant(data.project, "project is required");
+  const paths = useProjectEvaluatorPaths();
   const isEmptyState =
     (data.project.evaluatorCount ?? 0) === 0 && filter.trim().length === 0;
   return (
     <>
       {isEmptyState ? (
-        <View borderBottomWidth="thin" borderBottomColor="default" flex="none">
-          <PageHeader
-            title="Evaluators"
-            subTitle="Evaluators read span inputs, outputs, retrieved documents, and tool calls, then return labels or scores you can filter, chart, and alert on."
-            extra={<AddProjectEvaluatorMenu size="M" />}
-          />
+        <View
+          padding="size-100"
+          borderBottomWidth="thin"
+          borderBottomColor="default"
+          flex="none"
+        >
+          <Flex
+            direction="row"
+            justifyContent="space-between"
+            alignItems="center"
+            gap="size-100"
+          >
+            <Text size="S" color="text-700">
+              Evaluators read span inputs, outputs, retrieved documents, and
+              tool calls, then return labels or scores you can filter, chart,
+              and alert on.
+            </Text>
+            <AddProjectEvaluatorMenu
+              size="M"
+              creationPaths={paths.listCreation}
+            />
+          </Flex>
         </View>
       ) : (
         <ProjectEvaluatorsToolbar
diff --git a/js/app/src/pages/project/evaluators/ProjectEvaluatorsTable.tsx b/js/app/src/pages/project/evaluators/ProjectEvaluatorsTable.tsx
index 8bb8ef4a943..b9fdcf392f1 100644
--- a/js/app/src/pages/project/evaluators/ProjectEvaluatorsTable.tsx
+++ b/js/app/src/pages/project/evaluators/ProjectEvaluatorsTable.tsx
@@ -60,6 +60,11 @@ import {
 import { isModelProvider } from "@phoenix/utils/generativeUtils";
 
 const PAGE_SIZE = 30;
+/**
+ * Below this many evaluators, the gallery promo stays visible beneath the
+ * table so a project that's just getting started keeps seeing it.
+ */
+const GALLERY_PROMO_MAX_EVALUATOR_COUNT = 15;
 
 const scrollableAreaCSS = css`
   flex: 1 1 auto;
@@ -498,6 +503,10 @@ export function ProjectEvaluatorsTable({
       </div>
     );
   }
+  // hasNext means more evaluators exist beyond this page, so rows.length is
+  // only the true total once the full connection has loaded.
+  const showGalleryPromo =
+    !isFiltered && !hasNext && rows.length < GALLERY_PROMO_MAX_EVALUATOR_COUNT;
   return (
     <div css={scrollableAreaCSS}>
       <table
@@ -608,6 +617,11 @@ export function ProjectEvaluatorsTable({
           </Flex>
         </View>
       ) : null}
+      {showGalleryPromo ? (
+        <View borderTopWidth="thin" borderTopColor="default">
+          <ProjectEvaluatorsEmptyState />
+        </View>
+      ) : null}
     </div>
   );
 }
diff --git a/js/app/src/pages/project/evaluators/ProjectEvaluatorsToolbar.tsx b/js/app/src/pages/project/evaluators/ProjectEvaluatorsToolbar.tsx
index f02f779a7c3..b134727ea26 100644
--- a/js/app/src/pages/project/evaluators/ProjectEvaluatorsToolbar.tsx
+++ b/js/app/src/pages/project/evaluators/ProjectEvaluatorsToolbar.tsx
@@ -1,5 +1,6 @@
 import { DebouncedSearch, Flex, View } from "@phoenix/components";
 import { AddProjectEvaluatorMenu } from "@phoenix/pages/project/evaluators/AddProjectEvaluatorMenu";
+import { useProjectEvaluatorPaths } from "@phoenix/pages/project/evaluators/projectEvaluatorPaths";
 
 /**
  * The evaluators tab's own header: search on the left, creation on the right.
@@ -13,6 +14,7 @@ export function ProjectEvaluatorsToolbar({
   filter: string;
   onFilterChange: (filter: string) => void;
 }) {
+  const paths = useProjectEvaluatorPaths();
   return (
     <View
       padding="size-100"
@@ -33,7 +35,10 @@ export function ProjectEvaluatorsToolbar({
           onChange={onFilterChange}
         />
         <Flex direction="row" alignItems="center" gap="size-100" flex="none">
-          <AddProjectEvaluatorMenu size="M" />
+          <AddProjectEvaluatorMenu
+            size="M"
+            creationPaths={paths.listCreation}
+          />
         </Flex>
       </Flex>
     </View>
diff --git a/js/app/src/pages/project/evaluators/__generated__/projectEvaluatorCategoryCardsQuery.graphql.ts b/js/app/src/pages/project/evaluators/__generated__/projectEvaluatorCategoryCardsQuery.graphql.ts
new file mode 100644
index 00000000000..f340ad66ac0
--- /dev/null
+++ b/js/app/src/pages/project/evaluators/__generated__/projectEvaluatorCategoryCardsQuery.graphql.ts
@@ -0,0 +1,82 @@
+/**
+ * @generated SignedSource<<a85df42485d6c69b61bdd55da966d39f>>
+ * @lightSyntaxTransform
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type EvaluatorCategory = "AGENTS" | "GROUNDING_AND_RETRIEVAL" | "RESPONSE_QUALITY" | "SAFETY_AND_SECURITY" | "USER_EXPERIENCE";
+export type projectEvaluatorCategoryCardsQuery$variables = Record<PropertyKey, never>;
+export type projectEvaluatorCategoryCardsQuery$data = {
+  readonly evaluatorGalleryConfigs: ReadonlyArray<{
+    readonly category: EvaluatorCategory | null;
+    readonly name: string;
+  }>;
+};
+export type projectEvaluatorCategoryCardsQuery = {
+  response: projectEvaluatorCategoryCardsQuery$data;
+  variables: projectEvaluatorCategoryCardsQuery$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "alias": null,
+    "args": null,
+    "concreteType": "ClassificationEvaluatorConfig",
+    "kind": "LinkedField",
+    "name": "evaluatorGalleryConfigs",
+    "plural": true,
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "name",
+        "storageKey": null
+      },
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "category",
+        "storageKey": null
+      }
+    ],
+    "storageKey": null
+  }
+];
+return {
+  "fragment": {
+    "argumentDefinitions": [],
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "projectEvaluatorCategoryCardsQuery",
+    "selections": (v0/*:: as any*/),
+    "type": "Query",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": [],
+    "kind": "Operation",
+    "name": "projectEvaluatorCategoryCardsQuery",
+    "selections": (v0/*:: as any*/)
+  },
+  "params": {
+    "cacheID": "37f203807a26e3217d23ff16be421fca",
+    "id": null,
+    "metadata": {},
+    "name": "projectEvaluatorCategoryCardsQuery",
+    "operationKind": "query",
+    "text": "query projectEvaluatorCategoryCardsQuery {\n  evaluatorGalleryConfigs {\n    name\n    category\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "e41ebc1806e1a898862f3022618e20b9";
+
+export default node;
diff --git a/js/app/src/pages/project/evaluators/__generated__/projectEvaluatorTemplatesQuery.graphql.ts b/js/app/src/pages/project/evaluators/__generated__/projectEvaluatorTemplatesQuery.graphql.ts
index aefb875852f..2f674d903cb 100644
--- a/js/app/src/pages/project/evaluators/__generated__/projectEvaluatorTemplatesQuery.graphql.ts
+++ b/js/app/src/pages/project/evaluators/__generated__/projectEvaluatorTemplatesQuery.graphql.ts
@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<71a77d7dc4a2b943c67f5d9f41d16c54>>
+ * @generated SignedSource<<3ba5bece667c2aeb6e53064903e2ff41>>
  * @lightSyntaxTransform
  */
 
@@ -24,7 +24,6 @@ export type projectEvaluatorTemplatesQuery$data = {
     }>;
     readonly name: string;
     readonly optimizationDirection: OptimizationDirection;
-    readonly recommended: boolean;
     readonly scope: EvaluatorScope | null;
   }>;
 };
@@ -70,27 +69,20 @@ v4 = {
   "storageKey": null
 },
 v5 = {
-  "alias": null,
-  "args": null,
-  "kind": "ScalarField",
-  "name": "recommended",
-  "storageKey": null
-},
-v6 = {
   "alias": null,
   "args": null,
   "kind": "ScalarField",
   "name": "category",
   "storageKey": null
 },
-v7 = {
+v6 = {
   "alias": null,
   "args": null,
   "kind": "ScalarField",
   "name": "details",
   "storageKey": null
 },
-v8 = {
+v7 = {
   "kind": "InlineFragment",
   "selections": [
     {
@@ -115,7 +107,7 @@ v8 = {
   "type": "TextContentPart",
   "abstractKey": null
 },
-v9 = {
+v8 = {
   "alias": null,
   "args": null,
   "kind": "ScalarField",
@@ -144,7 +136,6 @@ return {
           (v4/*:: as any*/),
           (v5/*:: as any*/),
           (v6/*:: as any*/),
-          (v7/*:: as any*/),
           {
             "alias": null,
             "args": null,
@@ -165,11 +156,11 @@ return {
                     "name": "content",
                     "plural": true,
                     "selections": [
-                      (v8/*:: as any*/)
+                      (v7/*:: as any*/)
                     ],
                     "storageKey": null
                   },
-                  (v9/*:: as any*/)
+                  (v8/*:: as any*/)
                 ],
                 "args": null,
                 "argumentDefinitions": []
@@ -205,7 +196,6 @@ return {
           (v4/*:: as any*/),
           (v5/*:: as any*/),
           (v6/*:: as any*/),
-          (v7/*:: as any*/),
           {
             "alias": null,
             "args": null,
@@ -229,11 +219,11 @@ return {
                     "name": "__typename",
                     "storageKey": null
                   },
-                  (v8/*:: as any*/)
+                  (v7/*:: as any*/)
                 ],
                 "storageKey": null
               },
-              (v9/*:: as any*/)
+              (v8/*:: as any*/)
             ],
             "storageKey": null
           }
@@ -243,16 +233,16 @@ return {
     ]
   },
   "params": {
-    "cacheID": "df501872be9d85392c84aca78c3a9bdb",
+    "cacheID": "f0e73fa7c6554ae4221a97efd090ac9c",
     "id": null,
     "metadata": {},
     "name": "projectEvaluatorTemplatesQuery",
     "operationKind": "query",
-    "text": "query projectEvaluatorTemplatesQuery {\n  evaluatorGalleryConfigs {\n    name\n    description\n    choices\n    optimizationDirection\n    scope\n    recommended\n    category\n    details\n    messages {\n      ...promptUtils_promptMessages\n    }\n  }\n}\n\nfragment promptUtils_promptMessages on PromptMessage {\n  content {\n    __typename\n    ... on TextContentPart {\n      text {\n        text\n      }\n    }\n  }\n  role\n}\n"
+    "text": "query projectEvaluatorTemplatesQuery {\n  evaluatorGalleryConfigs {\n    name\n    description\n    choices\n    optimizationDirection\n    scope\n    category\n    details\n    messages {\n      ...promptUtils_promptMessages\n    }\n  }\n}\n\nfragment promptUtils_promptMessages on PromptMessage {\n  content {\n    __typename\n    ... on TextContentPart {\n      text {\n        text\n      }\n    }\n  }\n  role\n}\n"
   }
 };
 })();
 
-(node as any).hash = "0e340a9d94ce94b0cc95de808a9b6de5";
+(node as any).hash = "157fdc1db6e6d4a22592570e2efd0a2d";
 
 export default node;
diff --git a/js/app/src/pages/project/evaluators/__tests__/projectEvaluatorPaths.test.tsx b/js/app/src/pages/project/evaluators/__tests__/projectEvaluatorPaths.test.tsx
index 2db3eaddff6..75cfcfac354 100644
--- a/js/app/src/pages/project/evaluators/__tests__/projectEvaluatorPaths.test.tsx
+++ b/js/app/src/pages/project/evaluators/__tests__/projectEvaluatorPaths.test.tsx
@@ -26,7 +26,20 @@ function TestProjectEvaluatorPaths() {
   return (
     <output
       data-gallery={paths.gallery}
-      data-gallery-return={paths.galleryReturn}
+      data-list-new-llm={paths.listCreation.newLlm}
+      data-list-new-code={paths.listCreation.newCode}
+      data-list-copy-llm={paths.listCreation.copyLlm("Evaluator:llm/source")}
+      data-list-attach-code={paths.listCreation.attachCode(
+        "Evaluator:code/source"
+      )}
+      data-gallery-new-llm={paths.galleryCreation.newLlm}
+      data-gallery-new-code={paths.galleryCreation.newCode}
+      data-gallery-copy-llm={paths.galleryCreation.copyLlm(
+        "Evaluator:llm/source"
+      )}
+      data-gallery-attach-code={paths.galleryCreation.attachCode(
+        "Evaluator:code/source"
+      )}
       data-response-quality-gallery={paths.galleryCategory("RESPONSE_QUALITY")}
       data-template-gallery={paths.galleryTemplate({
         category: "RESPONSE_QUALITY",
@@ -37,7 +50,7 @@ function TestProjectEvaluatorPaths() {
 }
 
 describe("useProjectEvaluatorPaths", () => {
-  it("separates the default gallery entry and slideover return destinations", () => {
+  it("builds list and gallery destinations while preserving view state", () => {
     act(() => {
       root.render(
         <MemoryRouter
@@ -56,12 +69,33 @@ describe("useProjectEvaluatorPaths", () => {
     });
 
     const output = container.querySelector("output");
-    expect(output?.getAttribute("data-gallery-return")).toBe(
-      "/projects/project-1/evaluator-gallery?timeRangeKey=7d&category=AGENTS&template=Hallucination&proof=preserved"
-    );
     expect(output?.getAttribute("data-gallery")).toBe(
       "/projects/project-1/evaluator-gallery?timeRangeKey=7d&proof=preserved"
     );
+    expect(output?.getAttribute("data-list-new-llm")).toBe(
+      "/projects/project-1/evaluators/new/llm?timeRangeKey=7d&category=AGENTS&template=Hallucination&proof=preserved"
+    );
+    expect(output?.getAttribute("data-list-new-code")).toBe(
+      "/projects/project-1/evaluators/new/code?timeRangeKey=7d&category=AGENTS&template=Hallucination&proof=preserved"
+    );
+    expect(output?.getAttribute("data-list-copy-llm")).toBe(
+      "/projects/project-1/evaluators/new/copy/Evaluator%3Allm%2Fsource?timeRangeKey=7d&category=AGENTS&template=Hallucination&proof=preserved"
+    );
+    expect(output?.getAttribute("data-list-attach-code")).toBe(
+      "/projects/project-1/evaluators/new/attach/Evaluator%3Acode%2Fsource?timeRangeKey=7d&category=AGENTS&template=Hallucination&proof=preserved"
+    );
+    expect(output?.getAttribute("data-gallery-new-llm")).toBe(
+      "/projects/project-1/evaluator-gallery/new/llm?timeRangeKey=7d&category=AGENTS&template=Hallucination&proof=preserved"
+    );
+    expect(output?.getAttribute("data-gallery-new-code")).toBe(
+      "/projects/project-1/evaluator-gallery/new/code?timeRangeKey=7d&category=AGENTS&template=Hallucination&proof=preserved"
+    );
+    expect(output?.getAttribute("data-gallery-copy-llm")).toBe(
+      "/projects/project-1/evaluator-gallery/new/copy/Evaluator%3Allm%2Fsource?timeRangeKey=7d&category=AGENTS&template=Hallucination&proof=preserved"
+    );
+    expect(output?.getAttribute("data-gallery-attach-code")).toBe(
+      "/projects/project-1/evaluator-gallery/new/attach/Evaluator%3Acode%2Fsource?timeRangeKey=7d&category=AGENTS&template=Hallucination&proof=preserved"
+    );
     expect(output?.getAttribute("data-response-quality-gallery")).toBe(
       "/projects/project-1/evaluator-gallery?timeRangeKey=7d&category=RESPONSE_QUALITY&proof=preserved"
     );
diff --git a/js/app/src/pages/project/evaluators/projectEvaluatorPaths.ts b/js/app/src/pages/project/evaluators/projectEvaluatorPaths.ts
index 7fdb3506d8d..597cb4ff9ce 100644
--- a/js/app/src/pages/project/evaluators/projectEvaluatorPaths.ts
+++ b/js/app/src/pages/project/evaluators/projectEvaluatorPaths.ts
@@ -25,6 +25,13 @@ export const newLlmProjectEvaluatorPath = (projectRootPath: string) =>
 export const newCodeProjectEvaluatorPath = (projectRootPath: string) =>
   `${projectEvaluatorsPath(projectRootPath)}/new/code`;
 
+export type ProjectEvaluatorCreationPaths = {
+  newLlm: string;
+  newCode: string;
+  copyLlm: (evaluatorId: string) => string;
+  attachCode: (evaluatorId: string) => string;
+};
+
 /**
  * The evaluator slideover paths for the project currently in the URL.
  *
@@ -45,6 +52,20 @@ export function useProjectEvaluatorPaths() {
     const list = projectEvaluatorsPath(rootPath);
     const gallery = projectEvaluatorGalleryPath(rootPath);
     const withCurrentSearch = (path: string) => `${path}${search}`;
+    const buildCreationPaths = (
+      parentPath: string
+    ): ProjectEvaluatorCreationPaths => ({
+      newLlm: withCurrentSearch(`${parentPath}/new/llm`),
+      newCode: withCurrentSearch(`${parentPath}/new/code`),
+      copyLlm: (evaluatorId: string) =>
+        withCurrentSearch(
+          `${parentPath}/new/copy/${encodeURIComponent(evaluatorId)}`
+        ),
+      attachCode: (evaluatorId: string) =>
+        withCurrentSearch(
+          `${parentPath}/new/attach/${encodeURIComponent(evaluatorId)}`
+        ),
+    });
     // A fresh gallery entry clears stale selection while preserving unrelated
     // project-page state in the query string.
     const defaultGallerySearch = withSearchParams(search, (searchParams) => {
@@ -54,8 +75,6 @@ export function useProjectEvaluatorPaths() {
     return {
       list: withCurrentSearch(list),
       gallery: `${gallery}${defaultGallerySearch}`,
-      // Nested gallery routes use this exact return URL when they close.
-      galleryReturn: withCurrentSearch(gallery),
       galleryCategory: (category: EvaluatorCategory) =>
         `${gallery}${withSearchParams(search, (searchParams) => {
           searchParams.set(PROJECT_EVALUATOR_CATEGORY_PARAM, category);
@@ -72,22 +91,12 @@ export function useProjectEvaluatorPaths() {
           searchParams.set(PROJECT_EVALUATOR_CATEGORY_PARAM, category);
           searchParams.set(PROJECT_EVALUATOR_TEMPLATE_PARAM, templateName);
         })}`,
-      newLlm: withCurrentSearch(newLlmProjectEvaluatorPath(rootPath)),
-      newCode: withCurrentSearch(newCodeProjectEvaluatorPath(rootPath)),
-      galleryNewLlm: withCurrentSearch(`${gallery}/new/llm`),
+      listCreation: buildCreationPaths(list),
+      galleryCreation: buildCreationPaths(gallery),
       galleryNewLlmFromTemplate: (templateName: string) =>
         withCurrentSearch(
           `${gallery}/new/template/${encodeURIComponent(templateName)}`
         ),
-      galleryNewCode: withCurrentSearch(`${gallery}/new/code`),
-      copyLlm: (evaluatorId: string) =>
-        withCurrentSearch(
-          `${list}/new/copy/${encodeURIComponent(evaluatorId)}`
-        ),
-      attachCode: (evaluatorId: string) =>
-        withCurrentSearch(
-          `${list}/new/attach/${encodeURIComponent(evaluatorId)}`
-        ),
       details: (projectEvaluatorId: string) =>
         withCurrentSearch(`${list}/${encodeURIComponent(projectEvaluatorId)}`),
       edit: (projectEvaluatorId: string) =>
diff --git a/js/app/src/pages/project/evaluators/projectEvaluatorTemplates.ts b/js/app/src/pages/project/evaluators/projectEvaluatorTemplates.ts
index c24e05ca612..f1f08933a88 100644
--- a/js/app/src/pages/project/evaluators/projectEvaluatorTemplates.ts
+++ b/js/app/src/pages/project/evaluators/projectEvaluatorTemplates.ts
@@ -16,7 +16,6 @@ export const projectEvaluatorTemplatesQuery = graphql`
       choices
       optimizationDirection
       scope
-      recommended
       category
       details
       messages {
@@ -78,6 +77,14 @@ export function getProjectEvaluatorTemplateChoices(config: {
   return Object.entries(choices).map(([label, score]) => ({ label, score }));
 }
 
+export function getProjectEvaluatorTemplateMessages(
+  config: ProjectEvaluatorTemplate
+) {
+  return convertPromptVersionMessagesToPlaygroundInstanceMessages({
+    promptMessagesRefs: config.messages,
+  });
+}
+
 export function buildTemplateCreationMode(
   config: ProjectEvaluatorTemplate
 ): ProjectEvaluatorCreationMode {
@@ -94,11 +101,7 @@ export function buildTemplateCreationMode(
           values: getProjectEvaluatorTemplateChoices(config),
         },
       ],
-      defaultMessages: convertPromptVersionMessagesToPlaygroundInstanceMessages(
-        {
-          promptMessagesRefs: config.messages,
-        }
-      ),
+      defaultMessages: getProjectEvaluatorTemplateMessages(config),
       templateFormat: "MUSTACHE",
       includeExplanation: true,
     },
diff --git a/js/app/tests/projects.spec.ts b/js/app/tests/projects.spec.ts
index 1bf7ecb51f2..acb9b3d99ab 100644
--- a/js/app/tests/projects.spec.ts
+++ b/js/app/tests/projects.spec.ts
@@ -215,7 +215,7 @@ test.describe.serial("Projects", () => {
       page.getByRole("heading", { name: "Evaluators", exact: true })
     ).toBeVisible();
     await expect(
-      page.getByRole("link", { name: "Browse the library" })
+      page.getByRole("link", { name: "Browse eval gallery" })
     ).toBeVisible();
     await expect(
       page.getByRole("button", { name: "Build from scratch" })
@@ -230,7 +230,7 @@ test.describe.serial("Projects", () => {
 
     await page.getByRole("button", { name: "Build from scratch" }).click();
     await expect(
-      page.getByRole("menuitem", { name: "Browse the whole library" })
+      page.getByRole("menuitem", { name: "Browse eval gallery" })
     ).toHaveCount(0);
     await page
       .getByRole("menuitem", { name: "Create new LLM evaluator" })