diff --git a/platform/ui-next/package.json b/platform/ui-next/package.json
index d35a8645c..d160efb1b 100644
--- a/platform/ui-next/package.json
+++ b/platform/ui-next/package.json
@@ -30,6 +30,7 @@
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.1",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.0.7",
diff --git a/platform/ui-next/src/_pages/playground.tsx b/platform/ui-next/src/_pages/playground.tsx
index fc1bf3a7e..155468249 100644
--- a/platform/ui-next/src/_pages/playground.tsx
+++ b/platform/ui-next/src/_pages/playground.tsx
@@ -24,6 +24,23 @@ import { Checkbox } from '../components/Checkbox';
 import { Toggle, toggleVariants } from '../components/Toggle';
 import { Slider } from '../components/Slider';
 import { ScrollArea, ScrollBar } from '../components/ScrollArea';
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+} from '../components/DropdownMenu';
 
 import { BackgroundColorSelect } from '../components/BackgroundColorSelect';
 
@@ -244,7 +261,7 @@ export default function Playground() {
         </div>
       </div>
 
-      <h2 className="section-header">Tabs</h2>
+      <h2 className="section-header">Select</h2>
       <div className="row">
         <div className="example">
           <Select>
@@ -260,6 +277,63 @@ export default function Playground() {
         </div>
       </div>
 
+      <h2 className="section-header">Dropdown Menu</h2>
+      <div className="row">
+        <div className="example">
+          <DropdownMenu>
+            <DropdownMenuTrigger>
+              <Button>Open Basic</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem>Item 1</DropdownMenuItem>
+              <DropdownMenuItem>Item 2</DropdownMenuItem>
+              <DropdownMenuItem>Long name Item 3</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+        <div className="example">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button>Open Align Start</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start">
+              <DropdownMenuItem>Item 1</DropdownMenuItem>
+              <DropdownMenuItem>Item 2</DropdownMenuItem>
+              <DropdownMenuItem>Long name Item 3</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+        <div className="example">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button>Open Align End</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem>Item 1</DropdownMenuItem>
+              <DropdownMenuItem>Item 2</DropdownMenuItem>
+              <DropdownMenuItem>Long name Item 3</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+        <div className="example">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button>Open Align Top</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              side="top"
+              align="start"
+            >
+              <DropdownMenuItem onSelect={() => console.log('Item 1')}>Item 1</DropdownMenuItem>
+              <DropdownMenuItem onSelect={() => console.log('Item 2')}>Item 2</DropdownMenuItem>
+              <DropdownMenuItem onSelect={() => console.log('Item 3')}>
+                Long name Item 3
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+
       <h2 className="section-header">Switch</h2>
       <div className="row">
         <div className="example">
diff --git a/platform/ui-next/src/components/Calendar/index.tsx b/platform/ui-next/src/components/Calendar/index.tsx
index 110b553c2..860849678 100644
--- a/platform/ui-next/src/components/Calendar/index.tsx
+++ b/platform/ui-next/src/components/Calendar/index.tsx
@@ -1,3 +1,3 @@
 import { Calendar } from './Calendar';
 
-export default Calendar;
+export { Calendar};
diff --git a/platform/ui-next/src/components/Combobox/index.ts b/platform/ui-next/src/components/Combobox/index.ts
index 83249c99d..968ed4e19 100644
--- a/platform/ui-next/src/components/Combobox/index.ts
+++ b/platform/ui-next/src/components/Combobox/index.ts
@@ -1,3 +1,3 @@
 import { Combobox } from './Combobox';
 
-export default Combobox;
+export { Combobox};
diff --git a/platform/ui-next/src/components/Command/index.ts b/platform/ui-next/src/components/Command/index.ts
index 2f7ec14d2..6ec0124d6 100644
--- a/platform/ui-next/src/components/Command/index.ts
+++ b/platform/ui-next/src/components/Command/index.ts
@@ -1,3 +1,13 @@
-import * as CommandComponents from './Command';
+import { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator } from './Command';
 
-export default CommandComponents;
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};
diff --git a/platform/ui-next/src/components/DateRange/index.ts b/platform/ui-next/src/components/DateRange/index.ts
index dd77e0cb0..fb10eac67 100644
--- a/platform/ui-next/src/components/DateRange/index.ts
+++ b/platform/ui-next/src/components/DateRange/index.ts
@@ -1,3 +1,3 @@
-import { DatePickerWithRange } from "./DateRange";
+import { DatePickerWithRange } from './DateRange';
 
-export default DatePickerWithRange;
+export { DatePickerWithRange };
diff --git a/platform/ui-next/src/components/Dialog/index.ts b/platform/ui-next/src/components/Dialog/index.ts
index 92f1d6d42..d792f78d7 100644
--- a/platform/ui-next/src/components/Dialog/index.ts
+++ b/platform/ui-next/src/components/Dialog/index.ts
@@ -1,3 +1,14 @@
-import * as DialogComponents from './Dialog';
+import { Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription } from './Dialog';
 
-export default DialogComponents;
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};
diff --git a/platform/ui-next/src/components/DisplaySetMessageListTooltip/DisplaySetMessageListTooltip.tsx b/platform/ui-next/src/components/DisplaySetMessageListTooltip/DisplaySetMessageListTooltip.tsx
index d0e9721b9..916ece328 100644
--- a/platform/ui-next/src/components/DisplaySetMessageListTooltip/DisplaySetMessageListTooltip.tsx
+++ b/platform/ui-next/src/components/DisplaySetMessageListTooltip/DisplaySetMessageListTooltip.tsx
@@ -63,4 +63,4 @@ DisplaySetMessageListTooltip.propTypes = {
   id: PropTypes.string,
 };
 
-export default DisplaySetMessageListTooltip;
+export { DisplaySetMessageListTooltip };
diff --git a/platform/ui-next/src/components/DisplaySetMessageListTooltip/index.ts b/platform/ui-next/src/components/DisplaySetMessageListTooltip/index.ts
index 8655260a0..b90a5c9f1 100644
--- a/platform/ui-next/src/components/DisplaySetMessageListTooltip/index.ts
+++ b/platform/ui-next/src/components/DisplaySetMessageListTooltip/index.ts
@@ -1,3 +1,3 @@
-import DisplaySetMessageListTooltip from './DisplaySetMessageListTooltip';
+import { DisplaySetMessageListTooltip } from './DisplaySetMessageListTooltip';
 
-export default DisplaySetMessageListTooltip;
+export { DisplaySetMessageListTooltip };
diff --git a/platform/ui-next/src/components/DropdownMenu/DropdownMenu.tsx b/platform/ui-next/src/components/DropdownMenu/DropdownMenu.tsx
new file mode 100644
index 000000000..a4f57aace
--- /dev/null
+++ b/platform/ui-next/src/components/DropdownMenu/DropdownMenu.tsx
@@ -0,0 +1,189 @@
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { CheckIcon, ChevronRightIcon, DotFilledIcon } from '@radix-ui/react-icons';
+
+import { cn } from '../../lib/utils';
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      'focus:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center rounded px-2 py-1 text-sm outline-none',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRightIcon className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-input z-50 min-w-[8rem] overflow-hidden rounded border p-1 shadow-lg',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'bg-popover text-popover-foreground border-input z-50 min-w-[8rem] overflow-hidden rounded border p-1 shadow-md',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded px-2 py-1 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded py-1 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <CheckIcon className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded py-1 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <DotFilledIcon className="h-4 w-4 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn('px-2 py-1 text-sm font-semibold', inset && 'pl-8', className)}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn('bg-muted -mx-1 my-1 h-px', className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
+      {...props}
+    />
+  );
+};
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};
diff --git a/platform/ui-next/src/components/DropdownMenu/index.ts b/platform/ui-next/src/components/DropdownMenu/index.ts
new file mode 100644
index 000000000..e33a795ca
--- /dev/null
+++ b/platform/ui-next/src/components/DropdownMenu/index.ts
@@ -0,0 +1,35 @@
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+} from './DropdownMenu';
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};
diff --git a/platform/ui-next/src/components/PanelSection/PanelSection.tsx b/platform/ui-next/src/components/PanelSection/PanelSection.tsx
index 3e58011de..2c942fe2d 100644
--- a/platform/ui-next/src/components/PanelSection/PanelSection.tsx
+++ b/platform/ui-next/src/components/PanelSection/PanelSection.tsx
@@ -63,4 +63,4 @@ PanelSection.propTypes = {
   ),
 };
 
-export default PanelSection;
+export { PanelSection };
diff --git a/platform/ui-next/src/components/PanelSection/index.ts b/platform/ui-next/src/components/PanelSection/index.ts
index 32189f310..4c1b5ce48 100644
--- a/platform/ui-next/src/components/PanelSection/index.ts
+++ b/platform/ui-next/src/components/PanelSection/index.ts
@@ -1,3 +1,2 @@
-import PanelSection from './PanelSection';
-
-export default PanelSection;
+import { PanelSection } from './PanelSection';
+export { PanelSection };
diff --git a/platform/ui-next/src/components/Popover/index.ts b/platform/ui-next/src/components/Popover/index.ts
index 56fdcd0c0..a3b98405a 100644
--- a/platform/ui-next/src/components/Popover/index.ts
+++ b/platform/ui-next/src/components/Popover/index.ts
@@ -1,3 +1,3 @@
-import * as Popover from './Popover';
+import { Popover, PopoverContent, PopoverTrigger, PopoverAnchor } from './Popover';
 
-export default Popover;
+export { Popover, PopoverContent, PopoverTrigger, PopoverAnchor };
diff --git a/platform/ui-next/src/components/Separator/index.ts b/platform/ui-next/src/components/Separator/index.ts
index 43685ffac..6c6026407 100644
--- a/platform/ui-next/src/components/Separator/index.ts
+++ b/platform/ui-next/src/components/Separator/index.ts
@@ -1,3 +1,3 @@
-import { Separator } from "./Separator";
+import { Separator } from './Separator';
 
-export default Separator;
+export { Separator };
diff --git a/platform/ui-next/src/components/SidePanel/SidePanel.tsx b/platform/ui-next/src/components/SidePanel/SidePanel.tsx
index bd3cc95b1..c1b79eaaf 100644
--- a/platform/ui-next/src/components/SidePanel/SidePanel.tsx
+++ b/platform/ui-next/src/components/SidePanel/SidePanel.tsx
@@ -419,4 +419,4 @@ SidePanel.propTypes = {
   expandedWidth: PropTypes.number,
 };
 
-export default SidePanel;
+export { SidePanel };
diff --git a/platform/ui-next/src/components/SidePanel/index.ts b/platform/ui-next/src/components/SidePanel/index.ts
index 68034ac14..133f86c99 100644
--- a/platform/ui-next/src/components/SidePanel/index.ts
+++ b/platform/ui-next/src/components/SidePanel/index.ts
@@ -1,2 +1,2 @@
-import SidePanel from './SidePanel';
-export default SidePanel;
+import { SidePanel } from './SidePanel';
+export { SidePanel };
diff --git a/platform/ui-next/src/components/StudyBrowser/StudyBrowser.tsx b/platform/ui-next/src/components/StudyBrowser/StudyBrowser.tsx
index a419107e1..a5a225854 100644
--- a/platform/ui-next/src/components/StudyBrowser/StudyBrowser.tsx
+++ b/platform/ui-next/src/components/StudyBrowser/StudyBrowser.tsx
@@ -140,4 +140,4 @@ StudyBrowser.propTypes = {
   ),
 };
 
-export default StudyBrowser;
+export { StudyBrowser };
diff --git a/platform/ui-next/src/components/StudyBrowser/index.ts b/platform/ui-next/src/components/StudyBrowser/index.ts
index aa85fa066..e56fc8820 100644
--- a/platform/ui-next/src/components/StudyBrowser/index.ts
+++ b/platform/ui-next/src/components/StudyBrowser/index.ts
@@ -1,2 +1,2 @@
-import StudyBrowser from './StudyBrowser';
-export default StudyBrowser;
+import { StudyBrowser } from './StudyBrowser';
+export { StudyBrowser };
diff --git a/platform/ui-next/src/components/StudyBrowserSort/StudyBrowserSort.tsx b/platform/ui-next/src/components/StudyBrowserSort/StudyBrowserSort.tsx
index f1d38ad93..a5538c2ab 100644
--- a/platform/ui-next/src/components/StudyBrowserSort/StudyBrowserSort.tsx
+++ b/platform/ui-next/src/components/StudyBrowserSort/StudyBrowserSort.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Icons } from '../Icons';
 
-export default function StudyBrowserSort({ servicesManager }: withAppTypes) {
+export function StudyBrowserSort({ servicesManager }: withAppTypes) {
   const { customizationService, displaySetService } = servicesManager.services;
   const { values: sortFunctions } = customizationService.get('studyBrowser.sortFunctions');
 
diff --git a/platform/ui-next/src/components/StudyBrowserSort/index.ts b/platform/ui-next/src/components/StudyBrowserSort/index.ts
index 1f9a4601e..ef6fa4a02 100644
--- a/platform/ui-next/src/components/StudyBrowserSort/index.ts
+++ b/platform/ui-next/src/components/StudyBrowserSort/index.ts
@@ -1,3 +1,3 @@
-import StudyBrowserSort from './StudyBrowserSort';
+import { StudyBrowserSort } from './StudyBrowserSort';
 
-export default StudyBrowserSort;
+export { StudyBrowserSort };
diff --git a/platform/ui-next/src/components/StudyBrowserViewOptions/StudyBrowserViewOptions.tsx b/platform/ui-next/src/components/StudyBrowserViewOptions/StudyBrowserViewOptions.tsx
index 05dfd0be4..964a484ed 100644
--- a/platform/ui-next/src/components/StudyBrowserViewOptions/StudyBrowserViewOptions.tsx
+++ b/platform/ui-next/src/components/StudyBrowserViewOptions/StudyBrowserViewOptions.tsx
@@ -1,10 +1,6 @@
 import React from 'react';
 
-export default function StudyBrowserViewOptions({
-  tabs,
-  onSelectTab,
-  activeTabName,
-}: withAppTypes) {
+export function StudyBrowserViewOptions({ tabs, onSelectTab, activeTabName }: withAppTypes) {
   const handleTabChange = (tabName: string) => {
     onSelectTab(tabName);
   };
diff --git a/platform/ui-next/src/components/StudyBrowserViewOptions/index.ts b/platform/ui-next/src/components/StudyBrowserViewOptions/index.ts
index d2193c6ad..bc14664af 100644
--- a/platform/ui-next/src/components/StudyBrowserViewOptions/index.ts
+++ b/platform/ui-next/src/components/StudyBrowserViewOptions/index.ts
@@ -1,3 +1,3 @@
-import StudyBrowserViewOptions from './StudyBrowserViewOptions';
+import { StudyBrowserViewOptions } from './StudyBrowserViewOptions';
 
-export default StudyBrowserViewOptions;
+export { StudyBrowserViewOptions };
diff --git a/platform/ui-next/src/components/StudyItem/StudyItem.tsx b/platform/ui-next/src/components/StudyItem/StudyItem.tsx
index 977db0871..2cdb69d20 100644
--- a/platform/ui-next/src/components/StudyItem/StudyItem.tsx
+++ b/platform/ui-next/src/components/StudyItem/StudyItem.tsx
@@ -85,4 +85,4 @@ StudyItem.propTypes = {
   viewPreset: PropTypes.string,
 };
 
-export default StudyItem;
+export { StudyItem };
diff --git a/platform/ui-next/src/components/StudyItem/index.ts b/platform/ui-next/src/components/StudyItem/index.ts
index 0c9680c4f..39b3b6860 100644
--- a/platform/ui-next/src/components/StudyItem/index.ts
+++ b/platform/ui-next/src/components/StudyItem/index.ts
@@ -1,2 +1,2 @@
-import StudyItem from './StudyItem';
-export default StudyItem;
+import { StudyItem } from './StudyItem';
+export { StudyItem };
diff --git a/platform/ui-next/src/components/Thumbnail/Thumbnail.tsx b/platform/ui-next/src/components/Thumbnail/Thumbnail.tsx
index 387036236..129889d1d 100644
--- a/platform/ui-next/src/components/Thumbnail/Thumbnail.tsx
+++ b/platform/ui-next/src/components/Thumbnail/Thumbnail.tsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { useDrag } from 'react-dnd';
 import { Icons } from '../Icons';
-import DisplaySetMessageListTooltip from '../DisplaySetMessageListTooltip';
+import { DisplaySetMessageListTooltip } from '../DisplaySetMessageListTooltip';
 import { TooltipTrigger, TooltipContent, TooltipProvider, Tooltip } from '../Tooltip';
 
 /**
@@ -291,4 +291,4 @@ Thumbnail.propTypes = {
   countIcon: PropTypes.string,
 };
 
-export default Thumbnail;
+export { Thumbnail };
diff --git a/platform/ui-next/src/components/Thumbnail/index.ts b/platform/ui-next/src/components/Thumbnail/index.ts
index 275561d01..6f5566223 100644
--- a/platform/ui-next/src/components/Thumbnail/index.ts
+++ b/platform/ui-next/src/components/Thumbnail/index.ts
@@ -1,2 +1,2 @@
-import Thumbnail from './Thumbnail';
-export default Thumbnail;
+import { Thumbnail } from './Thumbnail';
+export { Thumbnail };
diff --git a/platform/ui-next/src/components/ThumbnailList/ThumbnailList.tsx b/platform/ui-next/src/components/ThumbnailList/ThumbnailList.tsx
index f0b0179f0..31bdf4450 100644
--- a/platform/ui-next/src/components/ThumbnailList/ThumbnailList.tsx
+++ b/platform/ui-next/src/components/ThumbnailList/ThumbnailList.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Thumbnail from '../Thumbnail';
+import { Thumbnail } from '../Thumbnail';
 
 const ThumbnailList = ({
   thumbnails,
@@ -143,20 +143,4 @@ ThumbnailList.propTypes = {
   viewPreset: PropTypes.string,
 };
 
-// TODO: Support "Viewport Identificator"?
-function _getModalityTooltip(modality) {
-  if (_modalityTooltips.hasOwnProperty(modality)) {
-    return _modalityTooltips[modality];
-  }
-
-  return 'Unknown';
-}
-
-const _modalityTooltips = {
-  SR: 'Structured Report',
-  SEG: 'Segmentation',
-  OT: 'Other',
-  RTSTRUCT: 'RT Structure Set',
-};
-
-export default ThumbnailList;
+export { ThumbnailList };
diff --git a/platform/ui-next/src/components/ThumbnailList/index.ts b/platform/ui-next/src/components/ThumbnailList/index.ts
index e2cfade78..c4f5922f3 100644
--- a/platform/ui-next/src/components/ThumbnailList/index.ts
+++ b/platform/ui-next/src/components/ThumbnailList/index.ts
@@ -1,2 +1,2 @@
-import ThumbnailList from './ThumbnailList';
-export default ThumbnailList;
+import { ThumbnailList } from './ThumbnailList';
+export { ThumbnailList };
diff --git a/platform/ui-next/src/components/index.ts b/platform/ui-next/src/components/index.ts
index 0b85d6dc7..2f48a9d06 100644
--- a/platform/ui-next/src/components/index.ts
+++ b/platform/ui-next/src/components/index.ts
@@ -1,12 +1,34 @@
 import { Button, buttonVariants } from './Button';
 import { ThemeWrapper } from './ThemeWrapper';
-import Command from './Command';
-import Dialog from './Dialog';
-import Combobox from './Combobox';
-import Popover from './Popover';
-import Calendar from './Calendar';
-import DatePickerWithRange from './DateRange';
-import Separator from './Separator';
+import {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+} from './Command';
+import {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+} from './Dialog';
+
+import { Combobox } from './Combobox';
+import { Popover, PopoverContent, PopoverTrigger, PopoverAnchor } from './Popover';
+import { Calendar } from './Calendar';
+import { DatePickerWithRange } from './DateRange';
+import { Separator } from './Separator';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from './Tabs';
 import { Toggle, toggleVariants } from './Toggle';
 import { ToggleGroup, ToggleGroupItem } from './ToggleGroup';
@@ -18,30 +40,62 @@ import { Slider } from './Slider';
 import { ScrollArea, ScrollBar } from './ScrollArea';
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './Accordion';
 import { Icons } from './Icons';
-import SidePanel from './SidePanel';
-import StudyItem from './StudyItem';
-import StudyBrowser from './StudyBrowser';
-import StudyBrowserSort from './StudyBrowserSort';
-import StudyBrowserViewOptions from './StudyBrowserViewOptions';
-import Thumbnail from './Thumbnail';
-import ThumbnailList from './ThumbnailList';
-import PanelSection from './PanelSection';
-import DisplaySetMessageListTooltip from './DisplaySetMessageListTooltip';
+import { SidePanel } from './SidePanel';
+import { StudyItem } from './StudyItem';
+import { StudyBrowser } from './StudyBrowser';
+import { StudyBrowserSort } from './StudyBrowserSort';
+import { StudyBrowserViewOptions } from './StudyBrowserViewOptions';
+import { Thumbnail } from './Thumbnail';
+import { ThumbnailList } from './ThumbnailList';
+import { PanelSection } from './PanelSection';
+import { DisplaySetMessageListTooltip } from './DisplaySetMessageListTooltip';
 import { Toolbox, ToolboxUI } from './Toolbox';
-
-// Prototypes
-import { PanelSplit } from '../_prototypes/PanelSplit';
-import { ItemList } from '../_prototypes/PanelSplit/ItemList';
-import { PropertiesPanel } from '../_prototypes/PanelSplit/PropertiesPanel';
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+} from './DropdownMenu';
 
 export {
   Button,
   buttonVariants,
   ThemeWrapper,
   Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
   Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
   Combobox,
   Popover,
+  PopoverContent,
+  PopoverTrigger,
+  PopoverAnchor,
   Calendar,
   DatePickerWithRange,
   Input,
@@ -76,7 +130,19 @@ export {
   DisplaySetMessageListTooltip,
   Toolbox,
   ToolboxUI,
-  PanelSplit,
-  ItemList,
-  PropertiesPanel,
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
 };
diff --git a/yarn.lock b/yarn.lock
index 8bd793ce8..527b81ba7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3755,6 +3755,19 @@
     "@radix-ui/react-use-callback-ref" "1.1.0"
     "@radix-ui/react-use-escape-keydown" "1.1.0"
 
+"@radix-ui/react-dropdown-menu@^2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.1.tgz#3dc578488688250dbbe109d9ff2ca28a9bca27ec"
+  integrity sha512-y8E+x9fBq9qvteD2Zwa4397pUVhYsh9iq44b5RD5qu1GMJWBCBuVg1hMyItbc6+zH00TxGRqd9Iot4wzf3OoBQ==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-context" "1.1.0"
+    "@radix-ui/react-id" "1.1.0"
+    "@radix-ui/react-menu" "2.1.1"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
+
 "@radix-ui/react-focus-guards@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz#1ea7e32092216b946397866199d892f71f7f98ad"
@@ -3823,6 +3836,30 @@
   dependencies:
     "@radix-ui/react-primitive" "2.0.0"
 
+"@radix-ui/react-menu@2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-menu/-/react-menu-2.1.1.tgz#bd623ace0e1ae1ac78023a505fec0541d59fb346"
+  integrity sha512-oa3mXRRVjHi6DZu/ghuzdylyjaMXLymx83irM7hTxutQbD+7IhPKdMdRHD26Rm+kHRrWcrUkkRPv5pd47a2xFQ==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-collection" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-context" "1.1.0"
+    "@radix-ui/react-direction" "1.1.0"
+    "@radix-ui/react-dismissable-layer" "1.1.0"
+    "@radix-ui/react-focus-guards" "1.1.0"
+    "@radix-ui/react-focus-scope" "1.1.0"
+    "@radix-ui/react-id" "1.1.0"
+    "@radix-ui/react-popper" "1.2.0"
+    "@radix-ui/react-portal" "1.1.1"
+    "@radix-ui/react-presence" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-roving-focus" "1.1.0"
+    "@radix-ui/react-slot" "1.1.0"
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "2.5.7"
+
 "@radix-ui/react-popover@^1.0.7":
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-popover/-/react-popover-1.0.7.tgz#23eb7e3327330cb75ec7b4092d685398c1654e3c"
@@ -7240,10 +7277,10 @@ axobject-query@^3.2.1:
   dependencies:
     dequal "^2.0.3"
 
-b4a@^1.6.4:
-  version "1.6.6"
-  resolved "https://registry.yarnpkg.com/b4a/-/b4a-1.6.6.tgz#a4cc349a3851987c3c4ac2d7785c18744f6da9ba"
-  integrity sha512-5Tk1HLk6b6ctmjIkAcU/Ujv/1WqiDl0F0JdRCR80VsOcUlHcu7pWeWRlOqQLHfDEsVx9YH/aif5AG4ehoCtTmg==
+b4a@^1.6.4, b4a@^1.6.6:
+  version "1.6.7"
+  resolved "https://registry.yarnpkg.com/b4a/-/b4a-1.6.7.tgz#a99587d4ebbfbd5a6e3b21bdb5d5fa385767abe4"
+  integrity sha512-OnAYlL5b7LEkALw87fUVafQw5rVR9RjwGd4KUwNQ6DrrNmaVaUCgLipfVlzrPQ4tWOR9P0IXGNOx50jYCCdSJg==
 
 babel-core@^7.0.0-bridge.0:
   version "7.0.0-bridge.0"
@@ -7454,23 +7491,23 @@ balanced-match@^1.0.0:
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
 bare-events@^2.0.0, bare-events@^2.2.0:
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/bare-events/-/bare-events-2.4.2.tgz#3140cca7a0e11d49b3edc5041ab560659fd8e1f8"
-  integrity sha512-qMKFd2qG/36aA4GwvKq8MxnPgCQAmBWmSyLWsJcbn8v03wvIPQ/hG1Ms8bPzndZxMDoHpxez5VOS+gC9Yi24/Q==
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/bare-events/-/bare-events-2.5.0.tgz#305b511e262ffd8b9d5616b056464f8e1b3329cc"
+  integrity sha512-/E8dDe9dsbLyh2qrZ64PEPadOQ0F4gbl1sUJOrmph7xOiIxfY8vwab/4bFLh4Y88/Hk/ujKcrQKc+ps0mv873A==
 
 bare-fs@^2.1.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/bare-fs/-/bare-fs-2.3.1.tgz#cdbd63dac7a552dfb2b87d18c822298d1efd213d"
-  integrity sha512-W/Hfxc/6VehXlsgFtbB5B4xFcsCl+pAh30cYhoFyXErf6oGrwjh8SwiPAdHgpmWonKuYpZgGywN0SXt7dgsADA==
+  version "2.3.5"
+  resolved "https://registry.yarnpkg.com/bare-fs/-/bare-fs-2.3.5.tgz#05daa8e8206aeb46d13c2fe25a2cd3797b0d284a"
+  integrity sha512-SlE9eTxifPDJrT6YgemQ1WGFleevzwY+XAP1Xqgl56HtcrisC2CHCZ2tq6dBpcH2TnNxwUEUGhweo+lrQtYuiw==
   dependencies:
     bare-events "^2.0.0"
     bare-path "^2.0.0"
     bare-stream "^2.0.0"
 
 bare-os@^2.1.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/bare-os/-/bare-os-2.4.0.tgz#5de5e3ba7704f459c9656629edca7cc736e06608"
-  integrity sha512-v8DTT08AS/G0F9xrhyLtepoo9EJBJ85FRSMbu1pQUlAf6A8T0tEEQGMVObWeqpjhSPXsE0VGlluFBJu2fdoTNg==
+  version "2.4.4"
+  resolved "https://registry.yarnpkg.com/bare-os/-/bare-os-2.4.4.tgz#01243392eb0a6e947177bb7c8a45123d45c9b1a9"
+  integrity sha512-z3UiI2yi1mK0sXeRdc4O1Kk8aOa/e+FNWZcTiPB/dfTWyLypuE99LibgRaQki914Jq//yAWylcAt+mknKdixRQ==
 
 bare-path@^2.0.0, bare-path@^2.1.0:
   version "2.1.3"
@@ -7480,11 +7517,12 @@ bare-path@^2.0.0, bare-path@^2.1.0:
     bare-os "^2.1.0"
 
 bare-stream@^2.0.0:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/bare-stream/-/bare-stream-2.1.3.tgz#070b69919963a437cc9e20554ede079ce0a129b2"
-  integrity sha512-tiDAH9H/kP+tvNO5sczyn9ZAA7utrSMobyDchsnyyXBuUe2FSQWbxhtuHB8jwpHYYevVo2UJpcmvvjrbHboUUQ==
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/bare-stream/-/bare-stream-2.3.0.tgz#5bef1cab8222517315fca1385bd7f08dff57f435"
+  integrity sha512-pVRWciewGUeCyKEuRxwv06M079r+fRjAQjBEK2P6OYGrO43O+Z0LrPZZEjlc4mB6C2RpZ9AxJ1s7NLEtOHO6eA==
   dependencies:
-    streamx "^2.18.0"
+    b4a "^1.6.6"
+    streamx "^2.20.0"
 
 base16@^1.0.0:
   version "1.0.0"
@@ -9387,9 +9425,9 @@ dayjs@^1.10.4:
   integrity sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg==
 
 dcmjs@*, dcmjs@>=0.33.0, dcmjs@^0.29.8:
-  version "0.33.1"
-  resolved "https://registry.yarnpkg.com/dcmjs/-/dcmjs-0.33.1.tgz#4297f40667a1ecbc3c5a84f9a207457ab3ae7856"
-  integrity sha512-/vwOPAX5fOQSwqf8t7bV7sy1h2h+gTWw5t/be8OIY7IwUpuKuKRChZvxINAjNZ9DDWHMB/uSOS7NJceu1YChfQ==
+  version "0.34.1"
+  resolved "https://registry.yarnpkg.com/dcmjs/-/dcmjs-0.34.1.tgz#d70c514f6daf8128950cc9efd1aceb99dda79ab4"
+  integrity sha512-sswNQwILvJ2piRoWElEtJKYvKquk8gn3iU5K3X11Tv5UvGF7x4uNx+P9DTNiO/CgTdW0GUiVRdmXJG2WhrIoYA==
   dependencies:
     "@babel/runtime-corejs3" "^7.22.5"
     adm-zip "^0.5.10"
@@ -20208,10 +20246,10 @@ stream-shift@^1.0.0:
   resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.3.tgz#85b8fab4d71010fc3ba8772e8046cc49b8a3864b"
   integrity sha512-76ORR0DO1o1hlKwTbi/DM3EXWGf3ZJYO8cXX5RJwnul2DEg2oyoZyjLNoQM8WsvZiFKCRfC1O0J7iCvie3RZmQ==
 
-streamx@^2.15.0, streamx@^2.18.0:
-  version "2.18.0"
-  resolved "https://registry.yarnpkg.com/streamx/-/streamx-2.18.0.tgz#5bc1a51eb412a667ebfdcd4e6cf6a6fc65721ac7"
-  integrity sha512-LLUC1TWdjVdn1weXGcSxyTR3T4+acB6tVGXT95y0nGbca4t4o/ng1wKAGTljm9VicuCVLvRlqFYXYy5GwgM7sQ==
+streamx@^2.15.0, streamx@^2.20.0:
+  version "2.20.1"
+  resolved "https://registry.yarnpkg.com/streamx/-/streamx-2.20.1.tgz#471c4f8b860f7b696feb83d5b125caab2fdbb93c"
+  integrity sha512-uTa0mU6WUC65iUvzKH4X9hEdvSW7rbPxPtwfWiLMSj3qTdQbAiUboZTxauKfpFuGIGa1C2BYijZ7wgdUXICJhA==
   dependencies:
     fast-fifo "^1.3.2"
     queue-tick "^1.0.1"
@@ -20834,9 +20872,9 @@ test-exclude@^6.0.0:
     minimatch "^3.0.4"
 
 text-decoder@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/text-decoder/-/text-decoder-1.1.1.tgz#5df9c224cebac4a7977720b9f083f9efa1aefde8"
-  integrity sha512-8zll7REEv4GDD3x4/0pW+ppIxSNs7H1J10IKFZsuOMscumCdM2a+toDGLPA3T+1+fLBql4zbt5z83GEQGGV5VA==
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/text-decoder/-/text-decoder-1.2.0.tgz#85f19d4d5088e0b45cd841bdfaeac458dbffeefc"
+  integrity sha512-n1yg1mOj9DNpk3NeZOx7T6jchTbyJS3i3cucbNN6FcdPriMZx7NsgrGpWWdWZZGxD7ES1XB+3uoqHMgOKaN+fg==
   dependencies:
     b4a "^1.6.4"