diff --git a/src/features/transforms/sorting/SortBySelector.tsx b/src/features/transforms/sorting/SortBySelector.tsx
index c21f4a9ac..eb6cbf520 100644
--- a/src/features/transforms/sorting/SortBySelector.tsx
+++ b/src/features/transforms/sorting/SortBySelector.tsx
@@ -1,4 +1,3 @@
-import { ArrowDownUpIcon } from 'lucide-react';
 import React from 'react';
 
 import Selector from '@features/params/ui/Selector';
@@ -8,14 +7,14 @@ import { getApplicableFields } from '@features/transforms/fields/FieldApplicabil
 
 import TransformEnum from '../TransformEnum';
 
-const SortBySelector: React.FC<{ showLabel?: boolean }> = ({ showLabel = true }) => {
+const SortBySelector: React.FC = () => {
   const { sortBy, updatePageParams, objectType } = usePageParams();
   const applicableSortBys = getApplicableFields(TransformEnum.Sort, objectType);
 
   return (
     <Selector
-      selectorLabel={showLabel ? 'Sort By' : <ArrowDownUpIcon size="1.2em" />}
-      selectorDescription={showLabel ? 'Choose the order of items in the view.' : undefined}
+      selectorLabel="Sort By"
+      selectorDescription="Choose the order of items in the view."
       options={applicableSortBys}
       onChange={(sortBy) => updatePageParams({ sortBy })}
       selected={sortBy}
diff --git a/src/features/transforms/sorting/SortPopupCard.tsx b/src/features/transforms/sorting/SortPopupCard.tsx
new file mode 100644
index 000000000..0b99cf29c
--- /dev/null
+++ b/src/features/transforms/sorting/SortPopupCard.tsx
@@ -0,0 +1,39 @@
+import { ArrowDownUpIcon } from 'lucide-react';
+import React from 'react';
+
+import PopupCard from '@features/layers/popupcard/PopupCard';
+import { SelectorDisplay } from '@features/params/ui/SelectorDisplayContext';
+import { getOptionStyle } from '@features/params/ui/SelectorOption';
+import usePageParams from '@features/params/usePageParams';
+
+import { PositionInGroup } from '@shared/lib/PositionInGroup';
+
+import SecondarySortBySelector from './SecondarySortBySelector';
+import SortBySelector from './SortBySelector';
+import SortDirectionSelector from './SortDirectionSelector';
+
+const SortPopupCard: React.FC = () => {
+  const { sortBy } = usePageParams();
+
+  return (
+    <div className="selector" style={{ gap: '0.25em' }}>
+      <ArrowDownUpIcon size="1.2em" />
+      <PopupCard
+        buttonLabel={<>{sortBy} ▶</>}
+        buttonClassName="selected"
+        buttonStyle={getOptionStyle(SelectorDisplay.Dropdown, true, PositionInGroup.Standalone)}
+        description="Change how items are sorted."
+        title="Sort"
+        body={() => (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5em' }}>
+            <SortBySelector />
+            <SecondarySortBySelector />
+            <SortDirectionSelector />
+          </div>
+        )}
+      />
+    </div>
+  );
+};
+
+export default SortPopupCard;
diff --git a/src/pages/DataPageBody.tsx b/src/pages/DataPageBody.tsx
index fde219c53..0889fdfca 100644
--- a/src/pages/DataPageBody.tsx
+++ b/src/pages/DataPageBody.tsx
@@ -6,7 +6,7 @@ import { PathContainer } from '@widgets/pathnav/PathNav';
 
 import ResultCount from '@features/pagination/ResultCount';
 import FilterPath from '@features/transforms/filtering/FilterPath';
-import SortBySelector from '@features/transforms/sorting/SortBySelector';
+import SortPopupCard from '@features/transforms/sorting/SortPopupCard';
 
 import ContainErrorsAndSuspense from '@shared/containers/ContainErrorsAndSuspense';
 
@@ -42,7 +42,7 @@ const DataPageBody: React.FC = () => {
             gap: '0.5rem',
           }}
         >
-          <SortBySelector showLabel={false} />
+          <SortPopupCard />
           <ViewSelector />
         </div>
       </div>
diff --git a/src/widgets/controls/Settings.tsx b/src/widgets/controls/Settings.tsx
index d179709b0..22267800f 100644
--- a/src/widgets/controls/Settings.tsx
+++ b/src/widgets/controls/Settings.tsx
@@ -9,9 +9,6 @@ import ColorGradientSelector from '@features/transforms/coloring/ColorGradientSe
 import FieldFocusSelector from '@features/transforms/fields/FieldFocusSelector';
 import ScaleBySelector from '@features/transforms/scales/ScaleBySelector';
 import SearchBySelector from '@features/transforms/search/SearchBySelector';
-import SecondarySortBySelector from '@features/transforms/sorting/SecondarySortBySelector';
-import SortBySelector from '@features/transforms/sorting/SortBySelector';
-import SortDirectionSelector from '@features/transforms/sorting/SortDirectionSelector';
 
 import LocaleSeparatorSelector from './selectors/LocaleSeparatorSelector';
 import PageBrightnessSelector from './selectors/PageBrightnessSelector';
@@ -26,9 +23,6 @@ const Settings = (): React.ReactNode => {
       {isDataPage && (
         <>
           <LimitInput />
-          <SortBySelector />
-          <SecondarySortBySelector />
-          <SortDirectionSelector />
           <ColorBySelector />
           <ColorGradientSelector />
           <ScaleBySelector />