diff --git a/web-common/src/components/button/Button.svelte b/web-common/src/components/button/Button.svelte
index 1971619c296..caf45918bbd 100644
--- a/web-common/src/components/button/Button.svelte
+++ b/web-common/src/components/button/Button.svelte
@@ -235,7 +235,7 @@
   /* LINK STYLES */
 
   .link {
-    @apply text-primary-600;
+    @apply text-primary-600 p-0;
   }
 
   .link:hover {
diff --git a/web-common/src/components/menu/DashboardMetricsDraggableList.svelte b/web-common/src/components/menu/DashboardMetricsDraggableList.svelte
new file mode 100644
index 00000000000..e5f03eaa219
--- /dev/null
+++ b/web-common/src/components/menu/DashboardMetricsDraggableList.svelte
@@ -0,0 +1,461 @@
+<script lang="ts">
+  import * as Popover from "@rilldata/web-common/components/popover";
+  import DragHandle from "@rilldata/web-common/components/icons/DragHandle.svelte";
+  import { clamp } from "@rilldata/web-common/lib/clamp";
+  import type {
+    MetricsViewSpecMeasureV2,
+    MetricsViewSpecDimensionV2,
+  } from "@rilldata/web-common/runtime-client";
+  import { Button } from "../button";
+  import CaretDownIcon from "@rilldata/web-common/components/icons/CaretDownIcon.svelte";
+  import EyeOffIcon from "@rilldata/web-common/components/icons/EyeInvisible.svelte";
+  import EyeIcon from "@rilldata/web-common/components/icons/Eye.svelte";
+  import Search from "../search/Search.svelte";
+  import { Tooltip } from "bits-ui";
+
+  const UPPER_BOUND = 12 + 28 + 25;
+  const ITEM_HEIGHT = 28;
+  const THROTTLE_MS = 16; // ~60fps = 60 frames per second = 1000ms / 60 frames = ~16.67ms per frame
+
+  type SelectableItem = MetricsViewSpecMeasureV2 | MetricsViewSpecDimensionV2;
+
+  export let selectedItems: string[];
+  export let allItems: SelectableItem[] = [];
+  export let type: "measure" | "dimension" = "measure";
+  export let onSelectedChange: (items: string[]) => void;
+
+  let searchText = "";
+  let active = false;
+  let initialMousePosition = 0;
+  let contentRect = new DOMRectReadOnly();
+  let dragContainer: HTMLDivElement;
+  let dropIndex: number | null = null;
+  let clone: HTMLElement | null = null;
+  let dragId: string | null = null; // {all|visible}-{measure|dimension}-{measure-name}
+  let dragIndex = -1;
+  let dragItemInitialTop = 0;
+  let threshold = 0;
+  let lastUpdateTime = 0;
+
+  $: ({ height } = contentRect);
+
+  // Calculate lower bound based on number of shown items to prevent dragging beyond last item
+  $: lowerBound = Math.min(
+    height - ITEM_HEIGHT - 6,
+    UPPER_BOUND + (selectedItems.length - 1) * ITEM_HEIGHT,
+  );
+
+  $: allItemsMap = new Map(allItems.map((item) => [item.name, item]));
+
+  $: numAvailable = allItems?.length ?? 0;
+  $: numShown = selectedItems?.filter((x) => x).length ?? 0;
+
+  $: numShownString =
+    numAvailable === numShown ? "All" : `${numShown} of ${numAvailable}`;
+
+  $: tooltipText = `Choose ${type === "measure" ? "measures" : "dimensions"} to display`;
+
+  $: filteredSelectedItems = searchText
+    ? selectedItems.filter((id) => {
+        const item = allItemsMap.get(id);
+        return (
+          item?.displayName?.toLowerCase().includes(searchText.toLowerCase()) ??
+          false
+        );
+      })
+    : selectedItems;
+
+  $: filteredHiddenItems = searchText
+    ? Array.from(allItemsMap.entries()).filter(
+        ([id, item]) =>
+          id &&
+          !selectedItems.includes(id) &&
+          (item.displayName?.toLowerCase().includes(searchText.toLowerCase()) ??
+            false),
+      )
+    : Array.from(allItemsMap.entries()).filter(
+        ([id]) => id && !selectedItems.includes(id),
+      );
+
+  function handleMouseDown(e: MouseEvent) {
+    e.preventDefault();
+
+    if (e.button !== 0) return;
+
+    // If only one item is selected, don't allow dragging
+    if (selectedItems.length === 1) return;
+
+    const dragItem = e.target;
+
+    // Find the closest parent element with drag data
+    const dragElement =
+      dragItem instanceof HTMLElement
+        ? dragItem
+        : dragItem instanceof Element
+          ? (dragItem.closest("[data-item-name]") as HTMLElement)
+          : null;
+
+    if (!dragElement) return;
+
+    dragId = dragElement.id ?? null;
+
+    const { index, itemName } = dragElement.dataset;
+
+    if (!itemName || index === undefined || index === null || index === "")
+      return;
+
+    clone = dragElement.cloneNode(true) as HTMLElement;
+
+    const rect = dragContainer.getBoundingClientRect();
+    dragItemInitialTop = dragElement.getBoundingClientRect().top - rect.top;
+
+    if (+index > selectedItems.length - 1) {
+      threshold = e.clientY - rect.bottom + ITEM_HEIGHT;
+      dropIndex = null;
+      dragIndex = selectedItems.length;
+    } else {
+      threshold = 0;
+      dragIndex = +index;
+      dropIndex = dragIndex;
+    }
+
+    clone.style.transform = `translateY(${dragItemInitialTop}px)`;
+    clone.style.width = dragElement.clientWidth + "px";
+    clone.style.left = "6px";
+
+    clone.classList.add(
+      "bg-slate-100",
+      "cursor-grabbing",
+      "shadow-md",
+      "outline",
+      "outline-gray-300",
+      "outline-1",
+      "opacity-60",
+      "will-change-transform",
+    );
+
+    clone.style.position = "absolute";
+    dragContainer.appendChild(clone);
+
+    initialMousePosition = e.clientY;
+    lastUpdateTime = performance.now();
+
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener(
+      "mouseup",
+      () => {
+        if (dropIndex !== null && dragIndex > selectedItems.length - 1) {
+          selectedItems.splice(dropIndex, 0, itemName);
+          selectedItems = selectedItems;
+        } else if (dropIndex !== null && dropIndex > selectedItems.length) {
+          selectedItems = selectedItems.filter((_, i) => i !== dragIndex);
+        } else if (dropIndex !== null && dragIndex !== dropIndex) {
+          selectedItems = reorderItems(selectedItems, dragIndex, dropIndex);
+        }
+
+        onSelectedChange(selectedItems);
+        dragIndex = -1;
+        dragId = null;
+        dropIndex = null;
+
+        clone?.remove();
+
+        window.removeEventListener("mousemove", handleMouseMove);
+      },
+      { once: true },
+    );
+  }
+
+  function handleMouseMove(e: MouseEvent) {
+    e.preventDefault();
+
+    if (!clone) return;
+
+    const now = performance.now();
+    if (now - lastUpdateTime < THROTTLE_MS) return;
+    lastUpdateTime = now;
+
+    const delta = e.clientY - initialMousePosition;
+    const newPxValue = dragItemInitialTop + delta;
+
+    clone.style.transform = `translateY(${clamp(UPPER_BOUND, newPxValue, lowerBound)}px)`;
+
+    if (threshold && delta > threshold) {
+      dropIndex = null;
+    } else {
+      const newIndex = Math.round((delta - threshold) / ITEM_HEIGHT);
+      // Prevent dragging items to hidden section by limiting dropIndex to last shown item
+      dropIndex = Math.max(
+        0,
+        Math.min(selectedItems.length - 1, newIndex + dragIndex),
+      );
+    }
+  }
+
+  function reorderItems<T>(items: T[], from: number, to: number | null): T[] {
+    if (to === null) return items;
+    const result = Array.from(items);
+    const [removed] = result.splice(from, 1);
+    result.splice(to, 0, removed);
+    return result;
+  }
+</script>
+
+<Popover.Root bind:open={active}>
+  <Popover.Trigger asChild let:builder>
+    <Button builders={[builder]} type="text" label={tooltipText} on:click>
+      <div
+        class="flex items-center gap-x-0.5 px-1 text-gray-700 hover:text-inherit"
+      >
+        <strong
+          >{`${numShownString} ${type === "measure" ? "Measures" : "Dimensions"}`}</strong
+        >
+        <span class="transition-transform" class:-rotate-180={active}>
+          <CaretDownIcon />
+        </span>
+      </div>
+    </Button>
+  </Popover.Trigger>
+  <Popover.Content
+    class="p-0 z-popover"
+    align="start"
+    collisionPadding={100}
+    strategy="absolute"
+    fitViewport={true}
+    overflowY="auto"
+    overflowX="hidden"
+    minHeight="100px"
+  >
+    <div
+      bind:this={dragContainer}
+      bind:contentRect
+      class="flex flex-col relative"
+      role="presentation"
+    >
+      <div class="px-3 pt-3 pb-0">
+        <Search
+          bind:value={searchText}
+          label="Search list"
+          showBorderOnFocus={false}
+        />
+      </div>
+
+      <div
+        role="presentation"
+        class="shown-section flex flex-col flex-1 p-1.5 pt-0"
+        on:mousedown={handleMouseDown}
+      >
+        <header
+          class="flex-none flex w-full py-1.5 pb-1 justify-between px-2 sticky top-0 from-white from-80% to-transparent bg-gradient-to-b z-10"
+        >
+          <h3 class="uppercase text-gray-500 font-semibold">
+            Shown {type === "measure" ? "Measures" : "Dimensions"}
+          </h3>
+          {#if selectedItems.length > 1}
+            <button
+              class="text-primary-500 pointer-events-auto hover:text-primary-600 font-medium text-[11px]"
+              on:click={() => {
+                selectedItems = [selectedItems[0]];
+                onSelectedChange(selectedItems);
+              }}
+            >
+              Hide all
+            </button>
+          {/if}
+        </header>
+        {#if filteredSelectedItems.length === 0}
+          <div class="px-2 py-2 text-xs text-gray-500">
+            {searchText
+              ? `No matching ${type === "measure" ? "measures" : "dimensions"} shown`
+              : `No ${type === "measure" ? "measures" : "dimensions"} shown`}
+          </div>
+        {:else}
+          {#each filteredSelectedItems as id, i (i)}
+            {@const elementId = `visible-${type === "measure" ? "measures" : "dimensions"}-${id}`}
+            {@const isDragItem = dragId === elementId}
+            {#if allItemsMap.get(id)?.description || selectedItems.length === 1}
+              <Tooltip.Root openDelay={200} portal="body">
+                <Tooltip.Trigger>
+                  <div
+                    role="presentation"
+                    data-index={i}
+                    data-item-name={id}
+                    id={elementId}
+                    class:sr-only={isDragItem}
+                    class:transition-margin={dragIndex !== -1 &&
+                      dropIndex !== dragIndex}
+                    class:drag-transition={dragIndex !== -1}
+                    class:mt-7={dropIndex !== null &&
+                      !isDragItem &&
+                      i === dropIndex + (i > dragIndex ? 1 : 0)}
+                    class:mb-7={dropIndex === selectedItems.length - 1 &&
+                      i ===
+                        selectedItems.length -
+                          1 -
+                          (dragIndex === selectedItems.length - 1 ? 1 : 0)}
+                    style:pointer-events={isDragItem ? "none" : "auto"}
+                    style:height="{ITEM_HEIGHT}px"
+                    class="w-full flex gap-x-1 flex-none px-2 py-1 pointer-events-auto cursor-grab items-center hover:bg-slate-50 rounded-sm"
+                    class:cursor-not-allowed={selectedItems.length === 1}
+                  >
+                    <DragHandle size="16px" className="text-gray-400" />
+
+                    {allItemsMap.get(id)?.displayName ??
+                      `Unknown ${type === "measure" ? "measure" : "dimension"}`}
+
+                    <button
+                      class="ml-auto hover:bg-slate-200 p-1 rounded-sm active:bg-slate-300"
+                      on:click={() => {
+                        selectedItems = selectedItems.filter((_, j) => j !== i);
+                        onSelectedChange(selectedItems);
+                      }}
+                      on:mousedown|stopPropagation={() => {
+                        // NO-OP
+                      }}
+                      disabled={selectedItems.length === 1}
+                      class:pointer-events-none={selectedItems.length === 1}
+                      class:opacity-50={selectedItems.length === 1}
+                    >
+                      <EyeIcon size="14px" color="#6b7280" />
+                    </button>
+                  </div>
+                </Tooltip.Trigger>
+
+                <Tooltip.Content side="right" sideOffset={12} class="z-popover">
+                  <div
+                    class="bg-gray-800 text-gray-50 rounded p-2 pt-1 pb-1 shadow-md pointer-events-none z-50"
+                  >
+                    {#if selectedItems.length === 1}
+                      Must show at least one {type === "measure"
+                        ? "measure"
+                        : "dimension"}
+                    {:else}
+                      {allItemsMap.get(id)?.description}
+                    {/if}
+                  </div>
+                </Tooltip.Content>
+              </Tooltip.Root>
+            {:else}
+              <!-- FIXME: hoist to DraggableListItem -->
+              <div
+                role="presentation"
+                data-index={i}
+                data-item-name={id}
+                id={elementId}
+                class:sr-only={isDragItem}
+                class:transition-margin={dragIndex !== -1 &&
+                  dropIndex !== dragIndex}
+                class:drag-transition={dragIndex !== -1}
+                class:mt-7={dropIndex !== null &&
+                  !isDragItem &&
+                  i === dropIndex + (i > dragIndex ? 1 : 0)}
+                class:mb-7={dropIndex === selectedItems.length - 1 &&
+                  i ===
+                    selectedItems.length -
+                      1 -
+                      (dragIndex === selectedItems.length - 1 ? 1 : 0)}
+                style:pointer-events={isDragItem ? "none" : "auto"}
+                style:height="{ITEM_HEIGHT}px"
+                class="w-full flex gap-x-1 flex-none px-2 py-1 pointer-events-auto cursor-grab items-center hover:bg-slate-50 rounded-sm"
+                class:cursor-not-allowed={selectedItems.length === 1}
+              >
+                <DragHandle size="16px" className="text-gray-400" />
+
+                {allItemsMap.get(id)?.displayName ??
+                  `Unknown ${type === "measure" ? "measure" : "dimension"}`}
+
+                <button
+                  class="ml-auto hover:bg-slate-200 p-1 rounded-sm active:bg-slate-300"
+                  on:click={() => {
+                    selectedItems = selectedItems.filter((_, j) => j !== i);
+                    onSelectedChange(selectedItems);
+                  }}
+                  on:mousedown|stopPropagation={() => {
+                    // NO-OP
+                  }}
+                  disabled={selectedItems.length === 1}
+                  class:pointer-events-none={selectedItems.length === 1}
+                  class:opacity-50={selectedItems.length === 1}
+                >
+                  <EyeIcon size="14px" color="#6b7280" />
+                </button>
+              </div>
+            {/if}
+          {/each}
+        {/if}
+      </div>
+      {#if selectedItems.length < allItems.length}
+        <span class="flex-none h-px bg-slate-200 w-full" />
+        <div class="hidden-section flex flex-col flex-1 min-h-0 p-1.5 pt-0">
+          <header
+            class="flex-none flex py-1.5 justify-between px-2 sticky top-0 from-white from-80% to-transparent bg-gradient-to-b"
+          >
+            <h3
+              class="uppercase text-xs text-gray-500 font-semibold from-white from-80% to-transparent bg-gradient-to-b"
+            >
+              Hidden {type === "measure" ? "Measures" : "Dimensions"}
+            </h3>
+            <button
+              class="pointer-events-auto text-primary-500 text-[11px] font-medium"
+              on:click={() => {
+                selectedItems = allItems.map((item) => item.name ?? "");
+                onSelectedChange(selectedItems);
+              }}
+            >
+              Show all
+            </button>
+          </header>
+          {#if filteredHiddenItems.length === 0}
+            <div class="px-2 py-2 text-xs text-gray-500">
+              {searchText
+                ? `No matching hidden ${type === "measure" ? "measures" : "dimensions"}`
+                : `No hidden ${type === "measure" ? "measures" : "dimensions"}`}
+            </div>
+          {:else}
+            {#each filteredHiddenItems as [id = "", item], i (i)}
+              {@const elementId = `all-${type === "measure" ? "measures" : "dimensions"}-${id}`}
+              {@const isDragItem = dragId === elementId}
+              <div
+                data-index={i + selectedItems.length - 1}
+                id={elementId}
+                data-item-name={id}
+                class:z-50={isDragItem}
+                class:opacity-0={isDragItem}
+                style:height="{ITEM_HEIGHT}px"
+                class="w-full flex gap-x-1 px-2 py-1 justify-between pointer-events-auto items-center p-1 rounded-sm"
+              >
+                {item.displayName}
+
+                <button
+                  class="hover:bg-slate-200 p-1 rounded-sm active:bg-slate-300"
+                  on:click={() => {
+                    selectedItems = [...selectedItems, id];
+                    onSelectedChange(selectedItems);
+                  }}
+                >
+                  <EyeOffIcon size="14px" color="#9ca3af" />
+                </button>
+              </div>
+            {/each}
+          {/if}
+        </div>
+      {/if}
+    </div>
+  </Popover.Content>
+</Popover.Root>
+
+<style lang="postcss">
+  .transition-margin {
+    transition-property: margin-top, margin-bottom;
+    transition-duration: 100ms;
+    will-change: margin-top, margin-bottom;
+  }
+
+  .drag-transition {
+    transition: none;
+  }
+
+  h3 {
+    @apply text-[11px] text-gray-500;
+  }
+</style>
diff --git a/web-common/src/components/menu/LeaderboardMeasureCountSelector.svelte b/web-common/src/components/menu/LeaderboardMeasureCountSelector.svelte
index 7e35a4ace73..107ed34c229 100644
--- a/web-common/src/components/menu/LeaderboardMeasureCountSelector.svelte
+++ b/web-common/src/components/menu/LeaderboardMeasureCountSelector.svelte
@@ -7,9 +7,7 @@
 
   export let measures: MetricsViewSpecMeasureV2[];
   export let count: number = 1;
-  export let sortByMeasure: string | null;
   export let onMeasureCountChange: (count: number) => void;
-  export let resetSort: () => void;
 
   let isHovered = false;
 
@@ -27,25 +25,8 @@
     }
   }
 
-  function getFilteredMeasuresByMeasureCount(
-    measures: MetricsViewSpecMeasureV2[],
-    count: number,
-  ) {
-    return measures.slice(0, count);
-  }
-
-  $: filteredMeasures = getFilteredMeasuresByMeasureCount(measures, count);
   $: visibleMeasuresCount = measures.length;
 
-  // Workaround for feature flag `leaderboardMeasureCount`
-  // If the sortByMeasure isn't in the filtered measures, we need to reset the sort
-  $: if (
-    sortByMeasure &&
-    !filteredMeasures.some((measure) => measure.name === sortByMeasure)
-  ) {
-    resetSort();
-  }
-
   // Update count to match visible measures when filtered count is greater
   $: if (visibleMeasuresCount < count) {
     onMeasureCountChange(visibleMeasuresCount);
diff --git a/web-common/src/components/popover/popover-content.svelte b/web-common/src/components/popover/popover-content.svelte
index f5cda74e931..9d1fe4c0b2e 100644
--- a/web-common/src/components/popover/popover-content.svelte
+++ b/web-common/src/components/popover/popover-content.svelte
@@ -2,13 +2,26 @@
   import { cn, flyAndScale } from "@rilldata/web-common/lib/shadcn";
   import { Popover as PopoverPrimitive } from "bits-ui";
 
-  type $$Props = PopoverPrimitive.ContentProps;
+  type $$Props = PopoverPrimitive.ContentProps & {
+    overflowY?: string;
+    overflowX?: string;
+    minHeight?: string;
+  };
 
   let className: $$Props["class"] = undefined;
+
   export let transition: $$Props["transition"] = flyAndScale;
   export let transitionConfig: $$Props["transitionConfig"] = undefined;
   export let align: $$Props["align"] = "center";
   export let sideOffset: $$Props["sideOffset"] = 4;
+  export let avoidCollisions: $$Props["avoidCollisions"] = true;
+  export let collisionPadding: $$Props["collisionPadding"] = 8;
+  export let collisionBoundary: $$Props["collisionBoundary"] = undefined;
+  export let fitViewport: $$Props["fitViewport"] = false;
+  export let strategy: $$Props["strategy"] = undefined;
+  export let overflowY: string = "auto";
+  export let overflowX: string = "auto";
+  export let minHeight: string = "0px";
   export { className as class };
 </script>
 
@@ -17,9 +30,17 @@
   {transitionConfig}
   {align}
   {sideOffset}
+  {avoidCollisions}
+  {collisionPadding}
+  {collisionBoundary}
+  {fitViewport}
+  {strategy}
   {...$$restProps}
   class={cn(
     "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+    overflowY && `overflow-y-${overflowY}`,
+    overflowX && `overflow-x-${overflowX}`,
+    minHeight && `min-h-[${minHeight}]`,
     className,
   )}
 >
diff --git a/web-common/src/features/dashboards/leaderboard/LeaderboardControls.svelte b/web-common/src/features/dashboards/leaderboard/LeaderboardControls.svelte
index 75422046c08..301da73f97d 100644
--- a/web-common/src/features/dashboards/leaderboard/LeaderboardControls.svelte
+++ b/web-common/src/features/dashboards/leaderboard/LeaderboardControls.svelte
@@ -5,9 +5,9 @@
   import { metricsExplorerStore } from "web-common/src/features/dashboards/stores/dashboard-stores";
   import { getStateManagers } from "../state-managers/state-managers";
   import LeaderboardMeasureCountSelector from "@rilldata/web-common/components/menu/LeaderboardMeasureCountSelector.svelte";
-  import { featureFlags } from "../../feature-flags";
   import LeaderboardActiveMeasureDropdown from "@rilldata/web-common/components/menu/LeaderboardActiveMeasureDropdown.svelte";
-  import { SortType } from "../proto-state/derived-types";
+  import { featureFlags } from "@rilldata/web-common/features/feature-flags";
+  import DashboardMetricsDraggableList from "@rilldata/web-common/components/menu/DashboardMetricsDraggableList.svelte";
 
   export let exploreName: string;
 
@@ -16,24 +16,24 @@
     selectors: {
       measures: {
         leaderboardMeasureCount,
-        visibleMeasures,
         leaderboardMeasureName,
         getMeasureByName,
+        visibleMeasures,
       },
       dimensions: { visibleDimensions, allDimensions },
-      sorting: { sortByMeasure },
     },
     actions: {
-      dimensions: { toggleDimensionVisibility },
       contextColumn: { setContextColumn },
-      sorting: { toggleSort, setSortDescending },
+      dimensions: { setDimensionVisibility, toggleDimensionVisibility },
       setLeaderboardMeasureCount,
       setLeaderboardMeasureName,
     },
   } = StateManagers;
 
-  const { leaderboardMeasureCount: leaderboardMeasureCountFeatureFlag } =
-    featureFlags;
+  const {
+    leaderboardMeasureCount: leaderboardMeasureCountFeatureFlag,
+    reorderMeasuresDimensions,
+  } = featureFlags;
 
   $: measures = getSimpleMeasures($visibleMeasures);
 
@@ -73,19 +73,30 @@
       class="flex flex-row items-center ui-copy-muted gap-x-1"
       style:max-width="768px"
     >
-      <DashboardVisibilityDropdown
-        category="Dimensions"
-        tooltipText="Choose dimensions to display"
-        onSelect={(name) => toggleDimensionVisibility(allDimensionNames, name)}
-        selectableItems={$allDimensions.map(({ name, displayName }) => ({
-          name: name || "",
-          label: displayName || name || "",
-        }))}
-        selectedItems={visibleDimensionsNames}
-        onToggleSelectAll={() => {
-          toggleDimensionVisibility(allDimensionNames);
-        }}
-      />
+      {#if $reorderMeasuresDimensions}
+        <DashboardMetricsDraggableList
+          type="dimension"
+          onSelectedChange={(items) =>
+            setDimensionVisibility(items, allDimensionNames)}
+          allItems={$allDimensions}
+          selectedItems={visibleDimensionsNames}
+        />
+      {:else}
+        <DashboardVisibilityDropdown
+          category="Dimensions"
+          tooltipText="Choose dimensions to display"
+          onSelect={(name) =>
+            toggleDimensionVisibility(allDimensionNames, name)}
+          selectableItems={$allDimensions.map(({ name, displayName }) => ({
+            name: name || "",
+            label: displayName || name || "",
+          }))}
+          selectedItems={visibleDimensionsNames}
+          onToggleSelectAll={() => {
+            toggleDimensionVisibility(allDimensionNames);
+          }}
+        />
+      {/if}
 
       {#if $leaderboardMeasureCountFeatureFlag}
         <LeaderboardMeasureCountSelector
@@ -94,12 +105,6 @@
           onMeasureCountChange={(count) => {
             setLeaderboardMeasureCount(count);
           }}
-          resetSort={() => {
-            // Fallback to the first visible measure if sort_by measure is not in the context
-            toggleSort(SortType.VALUE, $visibleMeasures[0].name);
-            setSortDescending();
-          }}
-          sortByMeasure={$sortByMeasure}
         />
       {:else}
         <LeaderboardActiveMeasureDropdown
diff --git a/web-common/src/features/dashboards/state-managers/actions/dimensions.ts b/web-common/src/features/dashboards/state-managers/actions/dimensions.ts
index 8be1a2dc03a..1020722d142 100644
--- a/web-common/src/features/dashboards/state-managers/actions/dimensions.ts
+++ b/web-common/src/features/dashboards/state-managers/actions/dimensions.ts
@@ -37,6 +37,17 @@ export const toggleDimensionVisibility = (
     dashboard.visibleDimensionKeys.size === allDimensions.length;
 };
 
+export const setDimensionVisibility = (
+  { dashboard }: DashboardMutables,
+  dimensions?: string[],
+  allDimensions?: string[],
+) => {
+  dashboard.visibleDimensionKeys = new Set(dimensions);
+
+  dashboard.allDimensionsVisible =
+    dashboard.visibleDimensionKeys.size === allDimensions?.length;
+};
+
 export const dimensionActions = {
   /**
    * Sets the primary dimension for the dashboard, which
@@ -45,4 +56,5 @@ export const dimensionActions = {
    */
   setPrimaryDimension,
   toggleDimensionVisibility,
+  setDimensionVisibility,
 };
diff --git a/web-common/src/features/dashboards/state-managers/actions/measures.ts b/web-common/src/features/dashboards/state-managers/actions/measures.ts
index aad4b79ecbf..e05d5d5d05e 100644
--- a/web-common/src/features/dashboards/state-managers/actions/measures.ts
+++ b/web-common/src/features/dashboards/state-managers/actions/measures.ts
@@ -30,6 +30,18 @@ export const toggleMeasureVisibility = (
     dashboard.visibleMeasureKeys.size === allMeasures.length;
 };
 
+export const setMeasureVisibility = (
+  { dashboard }: DashboardMutables,
+  measures?: string[],
+  allMeasures?: string[],
+) => {
+  dashboard.visibleMeasureKeys = new Set(measures);
+
+  dashboard.allMeasuresVisible =
+    dashboard.visibleMeasureKeys.size === allMeasures?.length;
+};
+
 export const measureActions = {
   toggleMeasureVisibility,
+  setMeasureVisibility,
 };
diff --git a/web-common/src/features/dashboards/state-managers/selectors/dimensions.ts b/web-common/src/features/dashboards/state-managers/selectors/dimensions.ts
index 8abe4391282..f9fab6fa70c 100644
--- a/web-common/src/features/dashboards/state-managers/selectors/dimensions.ts
+++ b/web-common/src/features/dashboards/state-managers/selectors/dimensions.ts
@@ -29,15 +29,11 @@ export const visibleDimensions = ({
 }: DashboardDataSources): MetricsViewSpecDimensionV2[] => {
   if (!validMetricsView?.dimensions || !validExplore?.dimensions) return [];
 
-  return (
-    validMetricsView.dimensions
-      .filter((d) => dashboard.visibleDimensionKeys.has(d.name!))
-      // Sort the filtered dimensions based on their order in validExplore.dimensions
-      .sort(
-        (a, b) =>
-          validExplore.dimensions!.indexOf(a.name!) -
-          validExplore.dimensions!.indexOf(b.name!),
-      )
+  return Array.from(dashboard.visibleDimensionKeys).map(
+    (key) =>
+      validMetricsView.dimensions?.find(
+        (d) => d.name === key,
+      ) as MetricsViewSpecDimensionV2,
   );
 };
 
diff --git a/web-common/src/features/dashboards/state-managers/selectors/measures.ts b/web-common/src/features/dashboards/state-managers/selectors/measures.ts
index c8e19ded43f..51b1c7db6b2 100644
--- a/web-common/src/features/dashboards/state-managers/selectors/measures.ts
+++ b/web-common/src/features/dashboards/state-managers/selectors/measures.ts
@@ -45,15 +45,11 @@ export const visibleMeasures = ({
 }: DashboardDataSources): MetricsViewSpecMeasureV2[] => {
   if (!validMetricsView?.measures || !validExplore?.measures) return [];
 
-  return (
-    validMetricsView.measures
-      .filter((m) => dashboard.visibleMeasureKeys.has(m.name!))
-      // Sort the filtered measures based on their order in validExplore.measures
-      .sort(
-        (a, b) =>
-          validExplore.measures!.indexOf(a.name!) -
-          validExplore.measures!.indexOf(b.name!),
-      )
+  return Array.from(dashboard.visibleMeasureKeys).map(
+    (key) =>
+      validMetricsView.measures?.find(
+        (m) => m.name === key,
+      ) as MetricsViewSpecMeasureV2,
   );
 };
 
diff --git a/web-common/src/features/dashboards/time-series/MetricsTimeSeriesCharts.svelte b/web-common/src/features/dashboards/time-series/MetricsTimeSeriesCharts.svelte
index 9b60af3d2c4..967805000b9 100644
--- a/web-common/src/features/dashboards/time-series/MetricsTimeSeriesCharts.svelte
+++ b/web-common/src/features/dashboards/time-series/MetricsTimeSeriesCharts.svelte
@@ -3,7 +3,6 @@
   import SimpleDataGraphic from "@rilldata/web-common/components/data-graphic/elements/SimpleDataGraphic.svelte";
   import { Axis } from "@rilldata/web-common/components/data-graphic/guides";
   import { bisectData } from "@rilldata/web-common/components/data-graphic/utils";
-  import DashboardVisibilityDropdown from "@rilldata/web-common/components/menu/DashboardVisibilityDropdown.svelte";
   import { LeaderboardContextColumn } from "@rilldata/web-common/features/dashboards/leaderboard-context-column";
   import ReplacePivotDialog from "@rilldata/web-common/features/dashboards/pivot/ReplacePivotDialog.svelte";
   import { splitPivotChips } from "@rilldata/web-common/features/dashboards/pivot/pivot-utils";
@@ -47,6 +46,9 @@
     getOrderedStartEnd,
     updateChartInteractionStore,
   } from "./utils";
+  import DashboardMetricsDraggableList from "@rilldata/web-common/components/menu/DashboardMetricsDraggableList.svelte";
+  import { featureFlags } from "@rilldata/web-common/features/feature-flags";
+  import DashboardVisibilityDropdown from "@rilldata/web-common/components/menu/DashboardVisibilityDropdown.svelte";
 
   export let exploreName: string;
   export let workspaceWidth: number;
@@ -64,11 +66,13 @@
       dimensionFilters: { includedDimensionValues },
     },
     actions: {
-      measures: { toggleMeasureVisibility },
+      measures: { setMeasureVisibility, toggleMeasureVisibility },
     },
     validSpecStore,
   } = getStateManagers();
 
+  const { reorderMeasuresDimensions } = featureFlags;
+
   const timeControlsStore = useTimeControlStore(getStateManagers());
   const timeSeriesDataStore = useTimeSeriesDataStore(getStateManagers());
 
@@ -106,8 +110,6 @@
   $: isAlternateChart = tddChartType !== TDDChart.DEFAULT;
 
   $: expandedMeasure = $getMeasureByName(expandedMeasureName);
-  // List of measures which will be shown on the dashboard
-  // List of measures which will be shown on the dashboard
   let renderedMeasures: MetricsViewSpecMeasureV2[];
   $: {
     renderedMeasures = expandedMeasure ? [expandedMeasure] : $visibleMeasures;
@@ -303,19 +305,29 @@
         chartType={tddChartType}
       />
     {:else}
-      <DashboardVisibilityDropdown
-        category="Measures"
-        tooltipText="Choose measures to display"
-        onSelect={(name) => toggleMeasureVisibility(allMeasureNames, name)}
-        selectableItems={$allMeasures.map(({ name, displayName }) => ({
-          name: name || "",
-          label: displayName || name || "",
-        }))}
-        selectedItems={visibleMeasureNames}
-        onToggleSelectAll={() => {
-          toggleMeasureVisibility(allMeasureNames);
-        }}
-      />
+      {#if $reorderMeasuresDimensions}
+        <DashboardMetricsDraggableList
+          type="measure"
+          onSelectedChange={(items) =>
+            setMeasureVisibility(items, allMeasureNames)}
+          allItems={$allMeasures}
+          selectedItems={visibleMeasureNames}
+        />
+      {:else}
+        <DashboardVisibilityDropdown
+          category="Measures"
+          tooltipText="Choose measures to display"
+          onSelect={(name) => toggleMeasureVisibility(allMeasureNames, name)}
+          selectableItems={$allMeasures.map(({ name, displayName }) => ({
+            name: name || "",
+            label: displayName || name || "",
+          }))}
+          selectedItems={visibleMeasureNames}
+          onToggleSelectAll={() => {
+            toggleMeasureVisibility(allMeasureNames);
+          }}
+        />
+      {/if}
 
       {#if !hideStartPivotButton}
         <button
diff --git a/web-common/src/features/feature-flags.ts b/web-common/src/features/feature-flags.ts
index 4b76fb6ff4f..5753caa6ecb 100644
--- a/web-common/src/features/feature-flags.ts
+++ b/web-common/src/features/feature-flags.ts
@@ -48,6 +48,7 @@ class FeatureFlags {
   alerts = new FeatureFlag("user", true);
   reports = new FeatureFlag("user", true);
   leaderboardMeasureCount = new FeatureFlag("user", false);
+  reorderMeasuresDimensions = new FeatureFlag("user", false);
 
   constructor() {
     const updateFlags = (userFlags: V1InstanceFeatureFlags) => {
diff --git a/web-common/tailwind.config.ts b/web-common/tailwind.config.ts
index dbe01bc4289..c5c2c607955 100644
--- a/web-common/tailwind.config.ts
+++ b/web-common/tailwind.config.ts
@@ -100,6 +100,9 @@ export default {
         md: "calc(var(--radius) - 2px)",
         sm: "calc(var(--radius) - 4px)",
       },
+      zIndex: {
+        popover: "80",
+      },
     },
   },
   plugins: [