diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/CompareEvaluationsPage.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/CompareEvaluationsPage.tsx
index b302b0262ae..478c4887546 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/CompareEvaluationsPage.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/CompareEvaluationsPage.tsx
@@ -77,8 +77,6 @@ export const CompareEvaluationsPage: React.FC<
 export const CompareEvaluationsPageContent: React.FC<
   CompareEvaluationsPageProps
 > = props => {
-  const [baselineEvaluationCallId, setBaselineEvaluationCallId] =
-    React.useState<string | null>(null);
   const [comparisonDimensions, setComparisonDimensions] =
     React.useState<ComparisonDimensionsType | null>(null);
 
@@ -104,14 +102,6 @@ export const CompareEvaluationsPageContent: React.FC<
     [comparisonDimensions]
   );
 
-  React.useEffect(() => {
-    // Only update the baseline if we are switching evaluations, if there
-    // is more than 1, we are in the compare view and baseline is auto set
-    if (props.evaluationCallIds.length === 1) {
-      setBaselineEvaluationCallId(props.evaluationCallIds[0]);
-    }
-  }, [props.evaluationCallIds]);
-
   if (props.evaluationCallIds.length === 0) {
     return <div>No evaluations to compare</div>;
   }
@@ -120,13 +110,11 @@ export const CompareEvaluationsPageContent: React.FC<
     <CompareEvaluationsProvider
       entity={props.entity}
       project={props.project}
+      initialEvaluationCallIds={props.evaluationCallIds}
       selectedMetrics={props.selectedMetrics}
       setSelectedMetrics={props.setSelectedMetrics}
-      initialEvaluationCallIds={props.evaluationCallIds}
-      baselineEvaluationCallId={baselineEvaluationCallId ?? undefined}
       comparisonDimensions={comparisonDimensions ?? undefined}
       onEvaluationCallIdsUpdate={props.onEvaluationCallIdsUpdate}
-      setBaselineEvaluationCallId={setBaselineEvaluationCallId}
       setComparisonDimensions={setComparisonDimensionsAndClearInputDigest}
       selectedInputDigest={selectedInputDigest ?? undefined}
       setSelectedInputDigest={setSelectedInputDigest}>
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/compareEvaluationsContext.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/compareEvaluationsContext.tsx
index b65658a890a..638565e8ad6 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/compareEvaluationsContext.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/compareEvaluationsContext.tsx
@@ -10,9 +10,6 @@ import {ComparisonDimensionsType} from './ecpState';
 
 const CompareEvaluationsContext = React.createContext<{
   state: EvaluationComparisonState;
-  setBaselineEvaluationCallId: React.Dispatch<
-    React.SetStateAction<string | null>
-  >;
   setComparisonDimensions: React.Dispatch<
     React.SetStateAction<ComparisonDimensionsType | null>
   >;
@@ -20,6 +17,7 @@ const CompareEvaluationsContext = React.createContext<{
   setSelectedMetrics: (newModel: Record<string, boolean>) => void;
   addEvaluationCall: (newCallId: string) => void;
   removeEvaluationCall: (callId: string) => void;
+  setEvaluationCallOrder: (newCallIdOrder: string[]) => void;
 } | null>(null);
 
 export const useCompareEvaluationsState = () => {
@@ -33,34 +31,26 @@ export const useCompareEvaluationsState = () => {
 export const CompareEvaluationsProvider: React.FC<{
   entity: string;
   project: string;
+  initialEvaluationCallIds: string[];
   selectedMetrics: Record<string, boolean> | null;
   setSelectedMetrics: (newModel: Record<string, boolean>) => void;
 
-  initialEvaluationCallIds: string[];
   onEvaluationCallIdsUpdate: (newEvaluationCallIds: string[]) => void;
-  setBaselineEvaluationCallId: React.Dispatch<
-    React.SetStateAction<string | null>
-  >;
   setComparisonDimensions: React.Dispatch<
     React.SetStateAction<ComparisonDimensionsType | null>
   >;
   setSelectedInputDigest: React.Dispatch<React.SetStateAction<string | null>>;
-  baselineEvaluationCallId?: string;
   comparisonDimensions?: ComparisonDimensionsType;
   selectedInputDigest?: string;
 }> = ({
   entity,
   project,
+  initialEvaluationCallIds,
   selectedMetrics,
   setSelectedMetrics,
-
-  initialEvaluationCallIds,
   onEvaluationCallIdsUpdate,
-  setBaselineEvaluationCallId,
   setComparisonDimensions,
-
   setSelectedInputDigest,
-  baselineEvaluationCallId,
   comparisonDimensions,
   selectedInputDigest,
   children,
@@ -77,7 +67,6 @@ export const CompareEvaluationsProvider: React.FC<{
     entity,
     project,
     evaluationCallIds,
-    baselineEvaluationCallId,
     comparisonDimensions,
     selectedInputDigest,
     selectedMetrics ?? undefined
@@ -89,7 +78,6 @@ export const CompareEvaluationsProvider: React.FC<{
     }
     return {
       state: initialState.result,
-      setBaselineEvaluationCallId,
       setComparisonDimensions,
       setSelectedInputDigest,
       setSelectedMetrics,
@@ -105,14 +93,17 @@ export const CompareEvaluationsProvider: React.FC<{
         setEvaluationCallIds(newEvaluationCallIds);
         onEvaluationCallIdsUpdate(newEvaluationCallIds);
       },
+      setEvaluationCallOrder: (newCallIdOrder: string[]) => {
+        setEvaluationCallIds(newCallIdOrder);
+        onEvaluationCallIdsUpdate(newCallIdOrder);
+      },
     };
   }, [
     initialState.loading,
     initialState.result,
+    setEvaluationCallIds,
     evaluationCallIds,
     onEvaluationCallIdsUpdate,
-    setEvaluationCallIds,
-    setBaselineEvaluationCallId,
     setComparisonDimensions,
     setSelectedInputDigest,
     setSelectedMetrics,
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/ecpState.ts b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/ecpState.ts
index 35f95dbf14f..e5c1b03d60a 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/ecpState.ts
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/ecpState.ts
@@ -18,14 +18,14 @@ import {getMetricIds} from './ecpUtil';
 export type EvaluationComparisonState = {
   // The normalized data for the evaluations
   data: EvaluationComparisonData;
-  // The evaluation call id of the baseline model
-  baselineEvaluationCallId: string;
   // The dimensions to compare & filter results
   comparisonDimensions?: ComparisonDimensionsType;
   // The current digest which is in view
   selectedInputDigest?: string;
   // The selected metrics to display
   selectedMetrics?: Record<string, boolean>;
+  // Ordered call Ids
+  evaluationCallIdsOrdered: string[];
 };
 
 export type ComparisonDimensionsType = Array<{
@@ -43,12 +43,14 @@ export const useEvaluationComparisonState = (
   entity: string,
   project: string,
   evaluationCallIds: string[],
-  baselineEvaluationCallId?: string,
   comparisonDimensions?: ComparisonDimensionsType,
   selectedInputDigest?: string,
   selectedMetrics?: Record<string, boolean>
 ): Loadable<EvaluationComparisonState> => {
-  const data = useEvaluationComparisonData(entity, project, evaluationCallIds);
+  const orderedCallIds = useMemo(() => {
+    return getCallIdsOrderedForQuery(evaluationCallIds);
+  }, [evaluationCallIds]);
+  const data = useEvaluationComparisonData(entity, project, orderedCallIds);
 
   const value = useMemo(() => {
     if (data.result == null || data.loading) {
@@ -92,42 +94,45 @@ export const useEvaluationComparisonState = (
       loading: false,
       result: {
         data: data.result,
-        baselineEvaluationCallId:
-          baselineEvaluationCallId ?? evaluationCallIds[0],
         comparisonDimensions: newComparisonDimensions,
         selectedInputDigest,
         selectedMetrics,
+        evaluationCallIdsOrdered: evaluationCallIds,
       },
     };
   }, [
     data.result,
     data.loading,
-    baselineEvaluationCallId,
-    evaluationCallIds,
     comparisonDimensions,
     selectedInputDigest,
     selectedMetrics,
+    evaluationCallIds,
   ]);
 
   return value;
 };
 
+export const getOrderedCallIds = (state: EvaluationComparisonState) => {
+  return Array.from(state.evaluationCallIdsOrdered);
+};
+
+export const getBaselineCallId = (state: EvaluationComparisonState) => {
+  return getOrderedCallIds(state)[0];
+};
+
 /**
- * Should use this over keys of `state.data.evaluationCalls` because it ensures the baseline
- * evaluation call is first.
+ * Sort call IDs to ensure consistent order for memoized query params
  */
-export const getOrderedCallIds = (state: EvaluationComparisonState) => {
-  const initial = Object.keys(state.data.evaluationCalls);
-  moveItemToFront(initial, state.baselineEvaluationCallId);
-  return initial;
+const getCallIdsOrderedForQuery = (callIds: string[]) => {
+  return Array.from(callIds).sort();
 };
 
 /**
  * Should use this over keys of `state.data.models` because it ensures the baseline model is first.
  */
 export const getOrderedModelRefs = (state: EvaluationComparisonState) => {
-  const baselineRef =
-    state.data.evaluationCalls[state.baselineEvaluationCallId].modelRef;
+  const baselineCallId = getBaselineCallId(state);
+  const baselineRef = state.data.evaluationCalls[baselineCallId].modelRef;
   const refs = Object.keys(state.data.models);
   // Make sure the baseline model is first
   moveItemToFront(refs, baselineRef);
@@ -145,3 +150,29 @@ const moveItemToFront = <T>(arr: T[], item: T): T[] => {
   }
   return arr;
 };
+
+export const getOrderedEvalsWithNewBaseline = (
+  evaluationCallIds: string[],
+  newBaselineCallId: string
+) => {
+  return moveItemToFront(evaluationCallIds, newBaselineCallId);
+};
+
+export const swapEvaluationCalls = (
+  evaluationCallIds: string[],
+  ndx1: number,
+  ndx2: number
+): string[] => {
+  return swapArrayItems(evaluationCallIds, ndx1, ndx2);
+};
+
+const swapArrayItems = <T>(arr: T[], ndx1: number, ndx2: number): T[] => {
+  if (ndx1 < 0 || ndx2 < 0 || ndx1 >= arr.length || ndx2 >= arr.length) {
+    throw new Error('Index out of bounds');
+  }
+  const newArr = [...arr];
+  const from = newArr[ndx1];
+  newArr[ndx1] = newArr[ndx2];
+  newArr[ndx2] = from;
+  return newArr;
+};
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/ecpTypes.ts b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/ecpTypes.ts
index 7454e0707b4..b4642fae240 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/ecpTypes.ts
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/ecpTypes.ts
@@ -18,6 +18,7 @@ export type EvaluationComparisonData = {
   };
 
   // EvaluationCalls are the specific calls of an evaluation.
+  // The visual order of the evaluation calls is determined by the order of the keys.
   evaluationCalls: {
     [callId: string]: EvaluationCall;
   };
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ComparisonDefinitionSection/ComparisonDefinitionSection.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ComparisonDefinitionSection/ComparisonDefinitionSection.tsx
index 66ce56c4cb0..2704a66cbea 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ComparisonDefinitionSection/ComparisonDefinitionSection.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ComparisonDefinitionSection/ComparisonDefinitionSection.tsx
@@ -12,44 +12,81 @@ import {
 import {useCallsForQuery} from '../../../CallsPage/callsTableQuery';
 import {useEvaluationsFilter} from '../../../CallsPage/evaluationsFilter';
 import {Id} from '../../../common/Id';
+import {opNiceName} from '../../../common/Links';
 import {useWFHooks} from '../../../wfReactInterface/context';
 import {
   CallSchema,
   ObjectVersionKey,
 } from '../../../wfReactInterface/wfDataModelHooksInterface';
 import {useCompareEvaluationsState} from '../../compareEvaluationsContext';
-import {STANDARD_PADDING} from '../../ecpConstants';
-import {getOrderedCallIds} from '../../ecpState';
-import {EvaluationComparisonState} from '../../ecpState';
+import {
+  EvaluationComparisonState,
+  getOrderedCallIds,
+  getOrderedEvalsWithNewBaseline,
+  swapEvaluationCalls,
+} from '../../ecpState';
 import {HorizontalBox} from '../../Layout';
-import {EvaluationDefinition, VerticalBar} from './EvaluationDefinition';
+import {ItemDef} from '../DraggableSection/DraggableItem';
+import {DraggableSection} from '../DraggableSection/DraggableSection';
+import {VerticalBar} from './EvaluationDefinition';
 
 export const ComparisonDefinitionSection: React.FC<{
   state: EvaluationComparisonState;
 }> = props => {
-  const evalCallIds = useMemo(
-    () => getOrderedCallIds(props.state),
-    [props.state]
-  );
+  const {setEvaluationCallOrder, removeEvaluationCall} =
+    useCompareEvaluationsState();
+
+  const callIds = useMemo(() => {
+    return getOrderedCallIds(props.state);
+  }, [props.state]);
+
+  const items: ItemDef[] = useMemo(() => {
+    return callIds.map(callId => ({
+      key: 'evaluations',
+      value: callId,
+      label: props.state.data.evaluationCalls[callId]?.name ?? callId,
+    }));
+  }, [callIds, props.state.data.evaluationCalls]);
+
+  const onSetBaseline = (value: string | null) => {
+    if (!value) {
+      return;
+    }
+    const newSortOrder = getOrderedEvalsWithNewBaseline(callIds, value);
+    setEvaluationCallOrder(newSortOrder);
+  };
+  const onRemoveItem = (value: string) => removeEvaluationCall(value);
+  const onSortEnd = ({
+    oldIndex,
+    newIndex,
+  }: {
+    oldIndex: number;
+    newIndex: number;
+  }) => {
+    const newSortOrder = swapEvaluationCalls(callIds, oldIndex, newIndex);
+    setEvaluationCallOrder(newSortOrder);
+  };
 
   return (
-    <HorizontalBox
-      sx={{
-        alignItems: 'center',
-        paddingLeft: STANDARD_PADDING,
-        paddingRight: STANDARD_PADDING,
-        width: '100%',
-        overflow: 'auto',
-      }}>
-      {evalCallIds.map((key, ndx) => {
-        return (
-          <React.Fragment key={key}>
-            <EvaluationDefinition state={props.state} callId={key} />
-          </React.Fragment>
-        );
-      })}
-      <AddEvaluationButton state={props.state} />
-    </HorizontalBox>
+    <Tailwind>
+      <div className="flex w-full items-center gap-4 overflow-x-auto px-16">
+        <HorizontalBox>
+          <DraggableSection
+            useDragHandle
+            axis="x"
+            state={props.state}
+            items={items}
+            onSetBaseline={onSetBaseline}
+            onRemoveItem={onRemoveItem}
+            onSortEnd={onSortEnd}
+            useWindowAsScrollContainer
+          />
+        </HorizontalBox>
+        <HorizontalBox>
+          <AddEvaluationButton state={props.state} />
+        </HorizontalBox>
+      </div>
+    </Tailwind>
   );
 };
 
@@ -81,7 +118,7 @@ const ModelRefLabel: React.FC<{modelRef: string}> = props => {
   const objectVersion = useObjectVersion(objVersionKey);
   return (
     <span className="ml-2">
-      {objectVersion.result?.objectId}:{objectVersion.result?.versionIndex}
+      {objectVersion.result?.objectId}:v{objectVersion.result?.versionIndex}
     </span>
   );
 };
@@ -119,10 +156,9 @@ const AddEvaluationButton: React.FC<{
 
   const evalsNotComparing = useMemo(() => {
     return calls.result.filter(
-      call =>
-        !Object.keys(props.state.data.evaluationCalls).includes(call.callId)
+      call => !getOrderedCallIds(props.state).includes(call.callId)
     );
-  }, [calls.result, props.state.data.evaluationCalls]);
+  }, [calls.result, props.state]);
 
   const [menuOptions, setMenuOptions] =
     useState<CallSchema[]>(evalsNotComparing);
@@ -222,12 +258,18 @@ const AddEvaluationButton: React.FC<{
                     variant="ghost"
                     size="small"
                     className="pb-8 pt-8 font-['Source_Sans_Pro'] text-base font-normal text-moon-800"
-                    onClick={() => {
-                      addEvaluationCall(call.callId);
-                    }}>
+                    onClick={() => addEvaluationCall(call.callId)}>
                     <>
-                      <span>{call.displayName ?? call.spanName}</span>
-                      <Id id={call.callId} type="Call" className="ml-0 mr-4" />
+                      <span className="max-w-[250px] flex-shrink flex-grow overflow-hidden text-ellipsis whitespace-nowrap">
+                        {call.displayName ?? opNiceName(call.spanName)}
+                      </span>
+                      <span className="flex-shrink-0">
+                        <Id
+                          id={call.callId}
+                          type="Call"
+                          className="ml-0 mr-4"
+                        />
+                      </span>
                       <VerticalBar />
                       <ModelRefLabel modelRef={call.traceCall?.inputs.model} />
                     </>
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ComparisonDefinitionSection/EvaluationDefinition.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ComparisonDefinitionSection/EvaluationDefinition.tsx
index adc80d044f6..5dcf835e378 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ComparisonDefinitionSection/EvaluationDefinition.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ComparisonDefinitionSection/EvaluationDefinition.tsx
@@ -1,8 +1,5 @@
 import {Box} from '@material-ui/core';
 import {Circle} from '@mui/icons-material';
-import {PopupDropdown} from '@wandb/weave/common/components/PopupDropdown';
-import {Button} from '@wandb/weave/components/Button';
-import {Pill} from '@wandb/weave/components/Tag';
 import React, {useMemo} from 'react';
 
 import {
@@ -17,87 +14,17 @@ import {SmallRef} from '../../../../../Browse2/SmallRef';
 import {CallLink, ObjectVersionLink} from '../../../common/Links';
 import {useWFHooks} from '../../../wfReactInterface/context';
 import {ObjectVersionKey} from '../../../wfReactInterface/wfDataModelHooksInterface';
-import {useCompareEvaluationsState} from '../../compareEvaluationsContext';
-import {
-  BOX_RADIUS,
-  CIRCLE_SIZE,
-  EVAL_DEF_HEIGHT,
-  STANDARD_BORDER,
-} from '../../ecpConstants';
+import {CIRCLE_SIZE} from '../../ecpConstants';
 import {EvaluationComparisonState} from '../../ecpState';
-import {HorizontalBox} from '../../Layout';
-
-export const EvaluationDefinition: React.FC<{
-  state: EvaluationComparisonState;
-  callId: string;
-}> = props => {
-  const {removeEvaluationCall, setBaselineEvaluationCallId} =
-    useCompareEvaluationsState();
-
-  const menuOptions = useMemo(() => {
-    return [
-      {
-        key: 'add-to-baseline',
-        content: 'Set as baseline',
-        onClick: () => {
-          setBaselineEvaluationCallId(props.callId);
-        },
-        disabled: props.callId === props.state.baselineEvaluationCallId,
-      },
-      {
-        key: 'remove',
-        content: 'Remove',
-        onClick: () => {
-          removeEvaluationCall(props.callId);
-        },
-        disabled: Object.keys(props.state.data.evaluationCalls).length === 1,
-      },
-    ];
-  }, [
-    props.callId,
-    props.state.baselineEvaluationCallId,
-    props.state.data.evaluationCalls,
-    removeEvaluationCall,
-    setBaselineEvaluationCallId,
-  ]);
-
-  return (
-    <HorizontalBox
-      sx={{
-        height: EVAL_DEF_HEIGHT,
-        borderRadius: BOX_RADIUS,
-        border: STANDARD_BORDER,
-        padding: '12px',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-      }}>
-      <EvaluationCallLink {...props} />
-      {props.callId === props.state.baselineEvaluationCallId && (
-        <Pill label="Baseline" color="teal" />
-      )}
-      <div style={{marginLeft: '-14px'}}>
-        <PopupDropdown
-          sections={[menuOptions]}
-          trigger={
-            <Button
-              className="rotate-90"
-              icon="overflow-horizontal"
-              size="small"
-              variant="ghost"
-              style={{marginLeft: '4px'}}
-            />
-          }
-        />
-      </div>
-    </HorizontalBox>
-  );
-};
 
 export const EvaluationCallLink: React.FC<{
   callId: string;
   state: EvaluationComparisonState;
 }> = props => {
-  const evaluationCall = props.state.data.evaluationCalls[props.callId];
+  const evaluationCall = props.state.data.evaluationCalls?.[props.callId];
+  if (!evaluationCall) {
+    return null;
+  }
   const {entity, project} = props.state.data;
 
   return (
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/DraggableSection/DraggableItem.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/DraggableSection/DraggableItem.tsx
new file mode 100644
index 00000000000..1510c502b99
--- /dev/null
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/DraggableSection/DraggableItem.tsx
@@ -0,0 +1,103 @@
+import {Button} from '@wandb/weave/components/Button';
+import * as DropdownMenu from '@wandb/weave/components/DropdownMenu';
+import {Icon} from '@wandb/weave/components/Icon';
+import {Pill} from '@wandb/weave/components/Tag/Pill';
+import {Tailwind} from '@wandb/weave/components/Tailwind';
+import classNames from 'classnames';
+import React, {useState} from 'react';
+import {SortableElement, SortableHandle} from 'react-sortable-hoc';
+
+import {EvaluationComparisonState} from '../../ecpState';
+import {EvaluationCallLink} from '../ComparisonDefinitionSection/EvaluationDefinition';
+
+export type ItemDef = {
+  key: string;
+  value: string;
+  label?: string;
+};
+
+type DraggableItemProps = {
+  state: EvaluationComparisonState;
+  item: ItemDef;
+  numItems: number;
+  idx: number;
+  onRemoveItem: (value: string) => void;
+  onSetBaseline: (value: string | null) => void;
+};
+
+export const DraggableItem = SortableElement(
+  ({
+    state,
+    item,
+    numItems,
+    idx,
+    onRemoveItem,
+    onSetBaseline,
+  }: DraggableItemProps) => {
+    const isDeletable = numItems > 1;
+    const isBaseline = idx === 0;
+    const [isOpen, setIsOpen] = useState(false);
+
+    const onMakeBaselinePropagated = (e: React.MouseEvent) => {
+      e.stopPropagation();
+      onSetBaseline(item.value);
+    };
+
+    const onRemoveItemPropagated = (e: React.MouseEvent) => {
+      e.stopPropagation();
+      onRemoveItem(item.value);
+    };
+
+    return (
+      <Tailwind>
+        <div
+          className={classNames(
+            'flex select-none items-center gap-4 whitespace-nowrap rounded-[4px] border-[1px] border-moon-250 bg-white px-4 py-8 text-sm font-semibold hover:border-moon-350 hover:bg-moon-100'
+          )}>
+          <DragHandle />
+          <div className="flex items-center">
+            <EvaluationCallLink callId={item.value} state={state} />
+            {isBaseline && (
+              <Pill color="teal" label="Baseline" className="ml-8" />
+            )}
+          </div>
+          <DropdownMenu.Root open={isOpen} onOpenChange={setIsOpen}>
+            <DropdownMenu.Trigger>
+              <Button
+                variant="ghost"
+                icon="overflow-vertical"
+                active={isOpen}
+                size="small"
+              />
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Portal>
+              <DropdownMenu.Content align="start">
+                <DropdownMenu.Item
+                  onClick={onMakeBaselinePropagated}
+                  disabled={isBaseline}>
+                  <Icon name="baseline-alt" />
+                  Make baseline
+                </DropdownMenu.Item>
+                {isDeletable && (
+                  <>
+                    <DropdownMenu.Separator />
+                    <DropdownMenu.Item onClick={onRemoveItemPropagated}>
+                      <Icon name="delete" />
+                      Remove from comparison
+                    </DropdownMenu.Item>
+                  </>
+                )}
+              </DropdownMenu.Content>
+            </DropdownMenu.Portal>
+          </DropdownMenu.Root>
+        </div>
+      </Tailwind>
+    );
+  }
+);
+
+const DragHandle = SortableHandle(() => (
+  <div className="cursor-grab">
+    <Icon name="drag-grip" />
+  </div>
+));
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/DraggableSection/DraggableSection.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/DraggableSection/DraggableSection.tsx
new file mode 100644
index 00000000000..23a03ceb5b3
--- /dev/null
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/DraggableSection/DraggableSection.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import {SortableContainer} from 'react-sortable-hoc';
+
+import {EvaluationComparisonState} from '../../ecpState';
+import {DraggableItem} from './DraggableItem';
+import {ItemDef} from './DraggableItem';
+
+type DraggableSectionProps = {
+  state: EvaluationComparisonState;
+  items: ItemDef[];
+  onSetBaseline: (value: string | null) => void;
+  onRemoveItem: (value: string) => void;
+};
+
+export const DraggableSection = SortableContainer(
+  ({state, items, onSetBaseline, onRemoveItem}: DraggableSectionProps) => {
+    return (
+      <div className="flex flex-wrap items-center gap-16">
+        {items.map((item, index) => (
+          <DraggableItem
+            key={`item-${item.value}`}
+            numItems={items.length}
+            index={index}
+            idx={index}
+            item={item}
+            state={state}
+            onRemoveItem={onRemoveItem}
+            onSetBaseline={onSetBaseline}
+          />
+        ))}
+      </div>
+    );
+  }
+);
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ExampleCompareSection/ExampleCompareSection.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ExampleCompareSection/ExampleCompareSection.tsx
index 6041492b5c5..398f65ecd45 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ExampleCompareSection/ExampleCompareSection.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ExampleCompareSection/ExampleCompareSection.tsx
@@ -149,7 +149,7 @@ const stickySidebarHeaderMixin: React.CSSProperties = {
 
 /**
  * This component will occupy the entire space provided by the parent container.
- * It is intended to be used in teh CompareEvaluations page, as it depends on
+ * It is intended to be used in the CompareEvaluations page, as it depends on
  * the EvaluationComparisonState. However, in principle, it is a general purpose
  * model-output comparison tool. It allows the user to view inputs, then compare
  * model outputs and evaluation metrics across multiple trials.
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ExampleFilterSection/ExampleFilterSection.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ExampleFilterSection/ExampleFilterSection.tsx
index b2c8773a7d1..1146c8ea960 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ExampleFilterSection/ExampleFilterSection.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ExampleFilterSection/ExampleFilterSection.tsx
@@ -13,7 +13,7 @@ import {
 } from '../../compositeMetricsUtil';
 import {PLOT_HEIGHT, STANDARD_PADDING} from '../../ecpConstants';
 import {MAX_PLOT_DOT_SIZE, MIN_PLOT_DOT_SIZE} from '../../ecpConstants';
-import {EvaluationComparisonState} from '../../ecpState';
+import {EvaluationComparisonState, getBaselineCallId} from '../../ecpState';
 import {metricDefinitionId} from '../../ecpUtil';
 import {
   flattenedDimensionPath,
@@ -103,7 +103,7 @@ const SingleDimensionFilter: React.FC<{
   }, [props.state.data]);
 
   const {setComparisonDimensions} = useCompareEvaluationsState();
-  const baselineCallId = props.state.baselineEvaluationCallId;
+  const baselineCallId = getBaselineCallId(props.state);
   const compareCallId = Object.keys(props.state.data.evaluationCalls).find(
     callId => callId !== baselineCallId
   )!;
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ScorecardSection/ScorecardSection.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ScorecardSection/ScorecardSection.tsx
index 4b319150fa8..303f640f47e 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ScorecardSection/ScorecardSection.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ScorecardSection/ScorecardSection.tsx
@@ -32,6 +32,7 @@ import {
 } from '../../ecpConstants';
 import {
   EvaluationComparisonState,
+  getBaselineCallId,
   getOrderedCallIds,
   getOrderedModelRefs,
 } from '../../ecpState';
@@ -414,7 +415,7 @@ export const ScorecardSection: React.FC<{
                     </GridCell>
                     {evalCallIds.map((evalCallId, mNdx) => {
                       const baseline = resolveSummaryMetricResult(
-                        props.state.baselineEvaluationCallId,
+                        getBaselineCallId(props.state),
                         groupName,
                         metricKey,
                         compositeSummaryMetrics,