diff --git a/platform/ui-next/src/_pages/patterns-measurements.tsx b/platform/ui-next/src/_pages/patterns-measurements.tsx
new file mode 100644
index 00000000000..7aefa478bc0
--- /dev/null
+++ b/platform/ui-next/src/_pages/patterns-measurements.tsx
@@ -0,0 +1,165 @@
+// src/_pages/patterns.tsx
+
+import React, { useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import '../tailwind.css';
+
+import { Button } from '../components/Button';
+import {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+} from '../components/Select';
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuLabel,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+  DropdownMenuPortal,
+} from '../components/DropdownMenu';
+import { Icons } from '../components/Icons/Icons';
+import DataRow from '../_prototypes/DataRow/DataRow';
+import dataList from '../_prototypes/DataRow/dataList.json';
+import actionOptionsMap from '../_prototypes/DataRow/actionOptionsMap';
+import {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from '../components/Accordion/Accordion';
+import { Slider } from '../components/Slider';
+import { Switch } from '../components/Switch';
+import { Label } from '../components/Label';
+import { Input } from '../components/Input';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '../components/Tabs';
+
+import { ChevronDownIcon } from '@radix-ui/react-icons'; // Ensure ChevronDownIcon is imported
+
+interface DataItem {
+  id: number;
+  title: string;
+  description: string;
+  optionalField?: string;
+  colorHex?: string;
+  details?: string;
+}
+
+interface ListGroup {
+  type: string;
+  items: DataItem[];
+}
+
+function Patterns() {
+  // State to track the selected row ID
+  const [selectedRowId, setSelectedRowId] = useState<string | null>(null);
+
+  // Handle actions from DataRow
+  const handleAction = (id: string, action: string) => {
+    console.log(`Action "${action}" triggered for item with id: ${id}`);
+    // Implement actual action logic here
+  };
+
+  // Handle row selection
+  const handleRowSelect = (id: string) => {
+    setSelectedRowId(prevSelectedId => (prevSelectedId === id ? null : id));
+  };
+
+  // Find the "Organ Segmentation" list group
+  const organSegmentationGroup = dataList.find(
+    (listGroup: ListGroup) => listGroup.type === 'Organ Segmentation'
+  );
+
+  // Find the "ROI Tools" list group
+  const roiToolsGroup = dataList.find((listGroup: ListGroup) => listGroup.type === 'ROI Tools');
+
+  if (!organSegmentationGroup) {
+    return <div className="text-red-500">Organ Segmentation data not found.</div>;
+  }
+
+  return (
+    <div className="my-4 flex max-w-6xl justify-end py-6">
+      {/* Simulated Panel List for "Segmentation" */}
+      <div className="w-64 space-y-0">
+        <Accordion
+          type="multiple"
+          defaultValue={['measurements-list', 'measurements-additional']}
+          collapsible
+        >
+          {/* Segmentation Tools */}
+          <AccordionItem value="measurements-list">
+            <AccordionTrigger className="bg-popover hover:bg-accent text-muted-foreground my-0.5 flex h-7 w-full items-center justify-between rounded py-2 pr-1 pl-2 font-normal">
+              <span>Measurements</span>
+            </AccordionTrigger>
+            <AccordionContent>
+              <div className="flex h-9 w-full items-center rounded pr-0.5">
+                <div className="flex space-x-1">
+                  <Button variant="ghost">
+                    <Icons.Add />
+                    Export
+                  </Button>
+                  <Button variant="ghost">
+                    <Icons.Add />
+                    Create Report
+                  </Button>
+                </div>
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  className="ml-auto"
+                >
+                  <Icons.Hide className="h-6 w-6" />
+                </Button>
+              </div>
+              <div className="space-y-px">
+                {roiToolsGroup.items.map((item, index) => {
+                  const compositeId = `${roiToolsGroup.type}-${item.id}-panel`; // Ensure unique composite ID
+                  return (
+                    <DataRow
+                      key={`panel-${compositeId}`} // Prefix to ensure uniqueness
+                      number={index + 1}
+                      title={item.title}
+                      description={item.description}
+                      optionalField={item.optionalField}
+                      colorHex={item.colorHex}
+                      details={item.details}
+                      actionOptions={actionOptionsMap[roiToolsGroup.type] || ['Action']}
+                      onAction={(action: string) => handleAction(compositeId, action)}
+                      isSelected={selectedRowId === compositeId}
+                      onSelect={() => handleRowSelect(compositeId)}
+                    />
+                  );
+                })}
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+          {/*
+          <AccordionItem value="measurements-additional">
+            <AccordionTrigger className="bg-popover hover:bg-accent text-muted-foreground my-0.5 flex h-7 w-full items-center justify-between rounded py-2 pr-1 pl-2 font-normal">
+              <span>Additional Findings</span>
+            </AccordionTrigger>
+            <AccordionContent>
+              <div className="bg-muted mb-0.5 h-12 rounded-b pb-3"></div>
+            </AccordionContent>
+          </AccordionItem>
+          */}
+        </Accordion>
+      </div>
+    </div>
+  );
+}
+
+const container = document.getElementById('root');
+const root = createRoot(container!);
+root.render(<Patterns />);
diff --git a/platform/ui-next/src/_pages/patterns-backup.tsx b/platform/ui-next/src/_pages/patterns-panelsplit.tsx
similarity index 100%
rename from platform/ui-next/src/_pages/patterns-backup.tsx
rename to platform/ui-next/src/_pages/patterns-panelsplit.tsx
diff --git a/platform/ui-next/src/_pages/patterns-segmentations.tsx b/platform/ui-next/src/_pages/patterns-segmentations.tsx
new file mode 100644
index 00000000000..52613293ea9
--- /dev/null
+++ b/platform/ui-next/src/_pages/patterns-segmentations.tsx
@@ -0,0 +1,252 @@
+// src/_pages/patterns.tsx
+
+import React, { useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import '../tailwind.css';
+
+import { Button } from '../components/Button';
+import {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+} from '../components/Select';
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuLabel,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+  DropdownMenuPortal,
+} from '../components/DropdownMenu';
+import { Icons } from '../components/Icons/Icons';
+import DataRow from '../_prototypes/DataRow/DataRow';
+import dataList from '../_prototypes/DataRow/dataList.json';
+import actionOptionsMap from '../_prototypes/DataRow/actionOptionsMap';
+import {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from '../components/Accordion/Accordion';
+import { Slider } from '../components/Slider';
+import { Switch } from '../components/Switch';
+import { Label } from '../components/Label';
+import { Input } from '../components/Input';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '../components/Tabs';
+
+import { ChevronDownIcon } from '@radix-ui/react-icons'; // Ensure ChevronDownIcon is imported
+
+interface DataItem {
+  id: number;
+  title: string;
+  description: string;
+  optionalField?: string;
+  colorHex?: string;
+  details?: string;
+}
+
+interface ListGroup {
+  type: string;
+  items: DataItem[];
+}
+
+function Patterns() {
+  // State to track the selected row ID
+  const [selectedRowId, setSelectedRowId] = useState<string | null>(null);
+
+  // Handle actions from DataRow
+  const handleAction = (id: string, action: string) => {
+    console.log(`Action "${action}" triggered for item with id: ${id}`);
+    // Implement actual action logic here
+  };
+
+  // Handle row selection
+  const handleRowSelect = (id: string) => {
+    setSelectedRowId(prevSelectedId => (prevSelectedId === id ? null : id));
+  };
+
+  // Find the "Organ Segmentation" list group
+  const organSegmentationGroup = dataList.find(
+    (listGroup: ListGroup) => listGroup.type === 'Organ Segmentation'
+  );
+
+  if (!organSegmentationGroup) {
+    return <div className="text-red-500">Organ Segmentation data not found.</div>;
+  }
+
+  return (
+    <div className="my-4 flex max-w-6xl justify-end py-6">
+      {/* Simulated Panel List for "Segmentation" */}
+      <div className="w-64 space-y-0">
+        <Accordion
+          type="multiple"
+          defaultValue={['segmentation-tools', 'segmentation-list']}
+          collapsible
+        >
+          {/* Segmentation Tools */}
+          <AccordionItem value="segmentation-tools">
+            <AccordionTrigger className="bg-popover hover:bg-accent text-muted-foreground my-0.5 flex h-7 w-full items-center justify-between rounded py-2 pr-1 pl-2 font-normal">
+              <span>Segmentation Tools</span>
+            </AccordionTrigger>
+            <AccordionContent>
+              <div className="bg-muted mb-0.5 h-32 rounded-b pb-3"></div>
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="segmentation-list">
+            <AccordionTrigger className="bg-popover hover:bg-accent text-muted-foreground my-0.5 flex h-7 w-full items-center justify-between rounded py-2 pr-1 pl-2 font-normal">
+              <span>Segmentation List</span>
+            </AccordionTrigger>
+            <AccordionContent>
+              <div className="mb-0">
+                <div className="bg-muted flex h-10 w-full items-center space-x-1 rounded-t px-1.5">
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                      >
+                        <Icons.Actions className="h-6 w-6" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="start">
+                      <DropdownMenuItem>Create New Segmentation</DropdownMenuItem>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuLabel>Current Segmentation</DropdownMenuLabel>
+                      <DropdownMenuItem>Rename</DropdownMenuItem>
+                      <DropdownMenuItem>Delete</DropdownMenuItem>
+                      <DropdownMenuSub>
+                        <DropdownMenuSubTrigger>Export</DropdownMenuSubTrigger>
+                        <DropdownMenuPortal>
+                          <DropdownMenuSubContent>
+                            <DropdownMenuItem>Export DICOM SEG</DropdownMenuItem>
+                            <DropdownMenuItem>Download DICOM SEG</DropdownMenuItem>
+                            <DropdownMenuItem>Download DICOM RTSTRUCT</DropdownMenuItem>
+                          </DropdownMenuSubContent>
+                        </DropdownMenuPortal>
+                      </DropdownMenuSub>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                  <Select>
+                    <SelectTrigger className="w-full">
+                      <SelectValue placeholder="Segmentation 1" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="seg1">Segmentation 1</SelectItem>
+                      <SelectItem value="seg2">Segmentation 2</SelectItem>
+                      <SelectItem value="seg3">Segmentation 3</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                  >
+                    <Icons.Info className="h-6 w-6" />
+                  </Button>
+                </div>
+                <AccordionItem value="segmentation-display">
+                  <AccordionTrigger className="bg-muted hover:bg-accent mt-0.5 flex h-7 w-full items-center justify-between rounded-b pr-1 pl-2 font-normal text-white">
+                    <span className="text-primary pl-8 pr-1">Appearance Settings</span>
+                  </AccordionTrigger>
+                  <AccordionContent>
+                    <div className="bg-muted mb-0.5 space-y-3 px-1.5 pt-1 pb-6">
+                      <div className="my-2 flex items-center">
+                        <Label className="text-muted-foreground mx-1 w-14 flex-none whitespace-nowrap">
+                          Opacity
+                        </Label>
+                        <Slider
+                          className="mx-1 flex-1"
+                          defaultValue={[85]}
+                          max={100}
+                          step={1}
+                        />
+                        <Input
+                          className="mx-1 w-10 flex-none"
+                          placeholder="85"
+                        />
+                      </div>
+                      <div className="my-2 flex items-center">
+                        <Label className="text-muted-foreground mx-1 w-14 flex-none whitespace-nowrap">
+                          Border
+                        </Label>
+                        <Slider
+                          className="mx-1 flex-1"
+                          defaultValue={[10]}
+                          max={100}
+                          step={1}
+                        />
+                        <Input
+                          className="mx-1 w-10 flex-none"
+                          placeholder="2"
+                        />
+                      </div>
+                      <div className="my-2 flex items-center pl-1">
+                        <Switch defaultChecked />
+                        <Label className="text-muted-foreground mx-2 w-14 flex-none whitespace-nowrap">
+                          Sync changes in all viewports
+                        </Label>
+                      </div>
+                      <div className="my-2 flex items-center pl-1">
+                        <Switch />
+                        <Label className="text-muted-foreground mx-2 w-14 flex-none whitespace-nowrap">
+                          Display inactive segments
+                        </Label>
+                      </div>
+                    </div>
+                  </AccordionContent>
+                </AccordionItem>
+
+                <div className="mt-2 flex h-9 w-full items-center justify-between rounded pl-6 pr-2">
+                  <Button variant="ghost">
+                    <Icons.Add className="h-3 w-3" />
+                    Add Segment
+                  </Button>
+                  <Button
+                    size="icon"
+                    variant="ghost"
+                  >
+                    <Icons.Hide className="h-6 w-6" />
+                  </Button>
+                </div>
+              </div>
+              <div className="space-y-px">
+                {organSegmentationGroup.items.map((item, index) => {
+                  const compositeId = `${organSegmentationGroup.type}-${item.id}-panel`; // Ensure unique composite ID
+                  return (
+                    <DataRow
+                      key={`panel-${compositeId}`} // Prefix to ensure uniqueness
+                      number={index + 1}
+                      title={item.title}
+                      description={item.description}
+                      optionalField={item.optionalField}
+                      colorHex={item.colorHex}
+                      details={item.details}
+                      actionOptions={actionOptionsMap[organSegmentationGroup.type] || ['Action']}
+                      onAction={(action: string) => handleAction(compositeId, action)}
+                      isSelected={selectedRowId === compositeId}
+                      onSelect={() => handleRowSelect(compositeId)}
+                    />
+                  );
+                })}
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </div>
+    </div>
+  );
+}
+
+const container = document.getElementById('root');
+const root = createRoot(container!);
+root.render(<Patterns />);
diff --git a/platform/ui-next/src/_pages/patterns.tsx b/platform/ui-next/src/_pages/patterns.tsx
index a41482ddab9..8ff377a95b5 100644
--- a/platform/ui-next/src/_pages/patterns.tsx
+++ b/platform/ui-next/src/_pages/patterns.tsx
@@ -4,9 +4,48 @@ import React, { useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import '../tailwind.css';
 
+import { Button } from '../components/Button';
+import {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+} from '../components/Select';
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuLabel,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+  DropdownMenuPortal,
+} from '../components/DropdownMenu';
+import { Icons } from '../components/Icons/Icons';
 import DataRow from '../_prototypes/DataRow/DataRow';
 import dataList from '../_prototypes/DataRow/dataList.json';
 import actionOptionsMap from '../_prototypes/DataRow/actionOptionsMap';
+import {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from '../components/Accordion/Accordion';
+import { Slider } from '../components/Slider';
+import { Switch } from '../components/Switch';
+import { Label } from '../components/Label';
+import { Input } from '../components/Input';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '../components/Tabs';
+
+import { ChevronDownIcon } from '@radix-ui/react-icons'; // Ensure ChevronDownIcon is imported
 
 interface DataItem {
   id: number;
@@ -24,7 +63,7 @@ interface ListGroup {
 
 function Patterns() {
   // State to track the selected row ID
-  const [selectedRowId, setSelectedRowId] = useState<string | null>(null); // Changed to string for composite ID
+  const [selectedRowId, setSelectedRowId] = useState<string | null>(null);
 
   // Handle actions from DataRow
   const handleAction = (id: string, action: string) => {
@@ -37,58 +76,155 @@ function Patterns() {
     setSelectedRowId(prevSelectedId => (prevSelectedId === id ? null : id));
   };
 
-  return (
-    <div className="my-4 mx-auto max-w-6xl py-6">
-      <div className="mb-6 text-3xl">Patterns Page</div>
-
-      {/* Iterate over each list group */}
-      {dataList.map((listGroup: ListGroup, groupIndex: number) => (
-        <div
-          key={`original-${groupIndex}`}
-          className="mb-18"
-        >
-          {/* List Group Title */}
-          <h2 className="mb-20 text-2xl font-bold">{listGroup.type}</h2>
+  // Find the "Organ Segmentation" list group
+  const organSegmentationGroup = dataList.find(
+    (listGroup: ListGroup) => listGroup.type === 'Organ Segmentation'
+  );
 
-          {/* Container for DataRow components */}
-          <div className="space-y-px">
-            {listGroup.items.map((item, index) => {
-              const compositeId = `${item.type}-${item.id}`; // Ensure 'type' is present in DataItem if needed
-              return (
-                <DataRow
-                  key={`original-${compositeId}`} // Prefix to ensure uniqueness
-                  number={index + 1}
-                  title={item.title}
-                  description={item.description}
-                  optionalField={item.optionalField}
-                  colorHex={item.colorHex}
-                  details={item.details}
-                  actionOptions={actionOptionsMap[listGroup.type] || ['Action']}
-                  onAction={(action: string) => handleAction(compositeId, action)}
-                  isSelected={selectedRowId === compositeId}
-                  onSelect={() => handleRowSelect(compositeId)}
-                />
-              );
-            })}
-          </div>
-        </div>
-      ))}
+  if (!organSegmentationGroup) {
+    return <div className="text-red-500">Organ Segmentation data not found.</div>;
+  }
 
-      {/* New 250px Wide Panel */}
-      <div className="w-64">
-        <div className="space-y-1">
-          {dataList.map((listGroup: ListGroup, groupIndex: number) => (
-            <div
-              key={`panel-${groupIndex}`}
-              className="mb-20"
-            >
-              {/* List Group Title */}
-              <h3 className="mb-20 text-xl font-semibold">{listGroup.type}</h3>
+  return (
+    <div className="my-4 flex max-w-6xl justify-end py-6">
+      {/* Simulated Panel List for "Segmentation" */}
+      <div className="w-64 space-y-0">
+        <Accordion
+          type="multiple"
+          defaultValue={['segmentation-tools', 'segmentation-list']}
+          collapsible
+        >
+          {/* Segmentation Tools */}
+          <AccordionItem value="segmentation-tools">
+            <AccordionTrigger className="bg-popover hover:bg-accent text-muted-foreground my-0.5 flex h-7 w-full items-center justify-between rounded py-2 pr-1 pl-2 font-normal">
+              <span>Segmentation Tools</span>
+            </AccordionTrigger>
+            <AccordionContent>
+              <div className="bg-muted mb-0.5 h-32 rounded-b pb-3"></div>
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="segmentation-list">
+            <AccordionTrigger className="bg-popover hover:bg-accent text-muted-foreground my-0.5 flex h-7 w-full items-center justify-between rounded py-2 pr-1 pl-2 font-normal">
+              <span>Segmentation List</span>
+            </AccordionTrigger>
+            <AccordionContent>
+              <div className="mb-0">
+                <div className="bg-muted flex h-10 w-full items-center space-x-1 rounded-t px-1.5">
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                      >
+                        <Icons.Actions className="h-6 w-6" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="start">
+                      <DropdownMenuItem>Create New Segmentation</DropdownMenuItem>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuLabel>Current Segmentation</DropdownMenuLabel>
+                      <DropdownMenuItem>Rename</DropdownMenuItem>
+                      <DropdownMenuItem>Delete</DropdownMenuItem>
+                      <DropdownMenuSub>
+                        <DropdownMenuSubTrigger>Export</DropdownMenuSubTrigger>
+                        <DropdownMenuPortal>
+                          <DropdownMenuSubContent>
+                            <DropdownMenuItem>Export DICOM SEG</DropdownMenuItem>
+                            <DropdownMenuItem>Download DICOM SEG</DropdownMenuItem>
+                            <DropdownMenuItem>Download DICOM RTSTRUCT</DropdownMenuItem>
+                          </DropdownMenuSubContent>
+                        </DropdownMenuPortal>
+                      </DropdownMenuSub>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                  <Select>
+                    <SelectTrigger className="w-full">
+                      <SelectValue placeholder="Segmentation 1" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="seg1">Segmentation 1</SelectItem>
+                      <SelectItem value="seg2">Segmentation 2</SelectItem>
+                      <SelectItem value="seg3">Segmentation 3</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                  >
+                    <Icons.Info className="h-6 w-6" />
+                  </Button>
+                </div>
+                <AccordionItem value="segmentation-display">
+                  <AccordionTrigger className="bg-muted hover:bg-accent mt-0.5 flex h-7 w-full items-center justify-between rounded-b pr-1 pl-2 font-normal text-white">
+                    <span className="text-primary pl-8 pr-1">Appearance Settings</span>
+                  </AccordionTrigger>
+                  <AccordionContent>
+                    <div className="bg-muted mb-0.5 space-y-3 px-1.5 pt-1 pb-6">
+                      <div className="my-2 flex items-center">
+                        <Label className="text-muted-foreground mx-1 w-14 flex-none whitespace-nowrap">
+                          Opacity
+                        </Label>
+                        <Slider
+                          className="mx-1 flex-1"
+                          defaultValue={[85]}
+                          max={100}
+                          step={1}
+                        />
+                        <Input
+                          className="mx-1 w-10 flex-none"
+                          placeholder="85"
+                        />
+                      </div>
+                      <div className="my-2 flex items-center">
+                        <Label className="text-muted-foreground mx-1 w-14 flex-none whitespace-nowrap">
+                          Border
+                        </Label>
+                        <Slider
+                          className="mx-1 flex-1"
+                          defaultValue={[10]}
+                          max={100}
+                          step={1}
+                        />
+                        <Input
+                          className="mx-1 w-10 flex-none"
+                          placeholder="2"
+                        />
+                      </div>
+                      <div className="my-2 flex items-center pl-1">
+                        <Switch defaultChecked />
+                        <Label className="text-muted-foreground mx-2 w-14 flex-none whitespace-nowrap">
+                          Sync changes in all viewports
+                        </Label>
+                      </div>
+                      <div className="my-2 flex items-center pl-1">
+                        <Switch />
+                        <Label className="text-muted-foreground mx-2 w-14 flex-none whitespace-nowrap">
+                          Display inactive segments
+                        </Label>
+                      </div>
+                    </div>
+                  </AccordionContent>
+                </AccordionItem>
 
-              {/* Container for DataRow components */}
+                <div className="mt-1.5 flex h-9 w-full items-center justify-between rounded pl-6 pr-2">
+                  <Button
+                    size="small"
+                    variant="ghost"
+                  >
+                    <Icons.Add />
+                    Add Segment
+                  </Button>
+                  <Button
+                    size="icon"
+                    variant="ghost"
+                  >
+                    <Icons.Hide className="h-6 w-6" />
+                  </Button>
+                </div>
+              </div>
               <div className="space-y-px">
-                {listGroup.items.map((item, index) => {
-                  const compositeId = `${item.type}-${item.id}-panel`; // Unique composite ID for panel
+                {organSegmentationGroup.items.map((item, index) => {
+                  const compositeId = `${organSegmentationGroup.type}-${item.id}-panel`; // Ensure unique composite ID
                   return (
                     <DataRow
                       key={`panel-${compositeId}`} // Prefix to ensure uniqueness
@@ -98,7 +234,7 @@ function Patterns() {
                       optionalField={item.optionalField}
                       colorHex={item.colorHex}
                       details={item.details}
-                      actionOptions={actionOptionsMap[listGroup.type] || ['Action']}
+                      actionOptions={actionOptionsMap[organSegmentationGroup.type] || ['Action']}
                       onAction={(action: string) => handleAction(compositeId, action)}
                       isSelected={selectedRowId === compositeId}
                       onSelect={() => handleRowSelect(compositeId)}
@@ -106,9 +242,9 @@ function Patterns() {
                   );
                 })}
               </div>
-            </div>
-          ))}
-        </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
       </div>
     </div>
   );
diff --git a/platform/ui-next/src/_pages/playground.tsx b/platform/ui-next/src/_pages/playground.tsx
index 44c1d252e04..5cac2e10d25 100644
--- a/platform/ui-next/src/_pages/playground.tsx
+++ b/platform/ui-next/src/_pages/playground.tsx
@@ -374,6 +374,20 @@ export default function Playground() {
         </div>
       </div>
 
+      <h2 className="section-header">Accordion</h2>
+      <div className="row">
+        <div className="example">
+          <div className="w-40 px-5">
+            <Slider
+              className="w-full"
+              defaultValue={[50]}
+              max={100}
+              step={1}
+            />
+          </div>
+        </div>
+      </div>
+
       <h2 className="section-header">Scroll Area</h2>
       <div className="row">
         <div className="example">
diff --git a/platform/ui-next/src/components/Accordion/Accordion.tsx b/platform/ui-next/src/components/Accordion/Accordion.tsx
index 76a0b92b366..bc9d7c2dcfb 100644
--- a/platform/ui-next/src/components/Accordion/Accordion.tsx
+++ b/platform/ui-next/src/components/Accordion/Accordion.tsx
@@ -36,7 +36,7 @@ const AccordionTrigger = React.forwardRef<
       {...props}
     >
       {children}
-      <ChevronDownIcon className="text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200" />
+      <ChevronDownIcon className="text-primary h-4 w-4 shrink-0 transition-transform duration-200" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ));
diff --git a/platform/ui-next/src/components/DropdownMenu/DropdownMenu.tsx b/platform/ui-next/src/components/DropdownMenu/DropdownMenu.tsx
index a4f57aaceae..377c18d9080 100644
--- a/platform/ui-next/src/components/DropdownMenu/DropdownMenu.tsx
+++ b/platform/ui-next/src/components/DropdownMenu/DropdownMenu.tsx
@@ -142,7 +142,7 @@ const DropdownMenuLabel = React.forwardRef<
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Label
     ref={ref}
-    className={cn('px-2 py-1 text-sm font-semibold', inset && 'pl-8', className)}
+    className={cn('text-muted-foreground px-2 py-1 text-xs', inset && 'pl-8', className)}
     {...props}
   />
 ));
@@ -154,7 +154,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn('bg-muted -mx-1 my-1 h-px', className)}
+    className={cn('bg-muted my-1 mx-2 h-px', className)}
     {...props}
   />
 ));
diff --git a/platform/ui-next/src/components/Icons/Icons.tsx b/platform/ui-next/src/components/Icons/Icons.tsx
index ec3aa6d6215..dec47efc56b 100644
--- a/platform/ui-next/src/components/Icons/Icons.tsx
+++ b/platform/ui-next/src/components/Icons/Icons.tsx
@@ -5,6 +5,51 @@ type IconProps = React.HTMLAttributes<SVGElement>;
 export const Icons = {
   // Usage example: <Icons.ArrowLeft />
 
+  Add: (props: IconProps) => (
+    <svg
+      width="24px"
+      height="24px"
+      viewBox="0 0 24 24"
+    >
+      <g
+        id="Add"
+        stroke="none"
+        strokeWidth="1"
+        fill="none"
+        fillRule="evenodd"
+      >
+        <rect
+          id="Rectangle"
+          x="0"
+          y="0"
+          width="24"
+          height="24"
+        ></rect>
+        <g
+          id="Group"
+          transform="translate(6, 6)"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <line
+            x1="6"
+            y1="0"
+            x2="6"
+            y2="12"
+            id="Path"
+          ></line>
+          <line
+            x1="12"
+            y1="6"
+            x2="0"
+            y2="6"
+            id="Path"
+          ></line>
+        </g>
+      </g>
+    </svg>
+  ),
   ChevronClosed: (props: IconProps) => (
     <svg
       width="24px"
@@ -75,6 +120,99 @@ export const Icons = {
       </g>
     </svg>
   ),
+  Controls: (props: IconProps) => (
+    <svg
+      width="18px"
+      height="18px"
+      viewBox="0 0 18 18"
+    >
+      <g
+        id="Controls"
+        stroke="none"
+        strokeWidth="1"
+        fill="none"
+        fillRule="evenodd"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <circle
+          id="Oval"
+          stroke="currentColor"
+          cx="9"
+          cy="3.34782609"
+          r="1.73913043"
+        ></circle>
+        <line
+          x1="10.7373913"
+          y1="3.34782609"
+          x2="16.4095652"
+          y2="3.34782609"
+          id="Path"
+          stroke="currentColor"
+        ></line>
+        <line
+          x1="1.62695652"
+          y1="3.34782609"
+          x2="7.2573913"
+          y2="3.34782609"
+          id="Path"
+          stroke="currentColor"
+        ></line>
+        <g
+          id="Group-26"
+          transform="translate(9.0183, 9) scale(-1, 1) translate(-9.0183, -9)translate(1.627, 7.2609)"
+          stroke="currentColor"
+        >
+          <circle
+            id="Oval"
+            transform="translate(3.8948, 1.7391) scale(-1, 1) translate(-3.8948, -1.7391)"
+            cx="3.89478261"
+            cy="1.73913043"
+            r="1.73913043"
+          ></circle>
+          <line
+            x1="5.63043478"
+            y1="1.73913043"
+            x2="14.7826087"
+            y2="1.73913043"
+            id="Path"
+            transform="translate(10.2065, 1.7391) scale(-1, 1) translate(-10.2065, -1.7391)"
+          ></line>
+          <line
+            x1="0"
+            y1="1.73913043"
+            x2="2.15217391"
+            y2="1.73913043"
+            id="Path"
+            transform="translate(1.0761, 1.7391) scale(-1, 1) translate(-1.0761, -1.7391)"
+          ></line>
+        </g>
+        <circle
+          id="Oval"
+          stroke="currentColor"
+          cx="7.26086957"
+          cy="14.6521739"
+          r="1.73913043"
+        ></circle>
+        <line
+          x1="8.99652174"
+          y1="14.6521739"
+          x2="16.4095652"
+          y2="14.6521739"
+          id="Path"
+          stroke="currentColor"
+        ></line>
+        <line
+          x1="1.62695652"
+          y1="14.6521739"
+          x2="5.52173913"
+          y2="14.6521739"
+          id="Path"
+          stroke="currentColor"
+        ></line>
+      </g>
+    </svg>
+  ),
   Download: (props: IconProps) => (
     <svg
       width="24px"
@@ -146,6 +284,94 @@ export const Icons = {
       </g>
     </svg>
   ),
+  Hide: (props: IconProps) => (
+    <svg
+      width="24px"
+      height="24px"
+      viewBox="0 0 24 24"
+    >
+      <g
+        id="hide"
+        stroke="none"
+        strokeWidth="1"
+        fill="none"
+        fillRule="evenodd"
+      >
+        <rect
+          id="Rectangle"
+          x="0"
+          y="0"
+          width="24"
+          height="24"
+        ></rect>
+        <circle
+          id="Oval"
+          stroke="#348CFD"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          cx="12.4986195"
+          cy="11.8041442"
+          r="2.58684689"
+        ></circle>
+        <path
+          d="M20.906611,11.5617197 C20.0470387,10.5861089 16.6094888,7 12.4986195,7 C8.38775024,7 4.95020027,10.5861089 4.090628,11.5617197 C3.96979067,11.7007491 3.96979067,11.9075393 4.090628,12.0465687 C4.95020027,13.0221796 8.38775024,16.6082885 12.4986195,16.6082885 C16.6094888,16.6082885 20.0470387,13.0221796 20.906611,12.0465687 C21.0274483,11.9075393 21.0274483,11.7007491 20.906611,11.5617197 Z"
+          id="Path"
+          stroke="#348CFD"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        ></path>
+      </g>
+    </svg>
+  ),
+  Info: (props: IconProps) => (
+    <svg
+      width="24px"
+      height="24px"
+      viewBox="0 0 24 24"
+    >
+      <g
+        id="icon-download"
+        stroke="none"
+        strokeWidth="1"
+        fill="none"
+        fillRule="evenodd"
+      >
+        <rect
+          id="Rectangle"
+          x="0"
+          y="0"
+          width="24"
+          height="24"
+          rx="4"
+        ></rect>
+        <circle
+          id="Oval"
+          fillRule="nonzero"
+          cx="12.192"
+          cy="12.192"
+          r="8.192"
+        ></circle>
+        <path
+          d="M12.192,4.00160754 C7.66678807,4.00160754 4,7.6683956 4,12.1928038 C4,16.7172119 7.66759184,20.3848038 12.192,20.3848038 C16.7172119,20.3848038 20.384,16.7172119 20.384,12.1928038 C20.384,7.6683956 16.7172119,4.00080377 12.192,4.00080377 L12.192,4.00160754 Z M12.192,4.8053752 C16.2727284,4.8053752 19.5802323,8.11287912 19.5802323,12.1936075 C19.5802323,16.2735322 16.2727284,19.5818399 12.192,19.5818399 C8.11127159,19.5818399 4.80376766,16.2735322 4.80376766,12.1936075 C4.80376766,8.11287912 8.11127159,4.80457143 12.192,4.80457143 L12.192,4.8053752 Z"
+          id="Shape"
+          fill="#348CFD"
+          fillRule="nonzero"
+        ></path>
+        <path
+          d="M11.5425557,10.4920314 C12.0867064,10.4920314 12.534405,10.905168 12.5882575,11.4356546 L12.5938838,11.5425557 L12.5938838,16.0870581 C12.5938838,16.308898 12.4138399,16.4889419 12.192,16.4889419 C11.9950769,16.4889419 11.8303046,16.346675 11.7965463,16.1593972 L11.7901162,16.0870581 L11.7901162,11.5425557 C11.7901162,11.4260094 11.7089356,11.3279498 11.5996232,11.3014254 L11.5433595,11.2957991 L10.2436672,11.2957991 C10.0218273,11.2957991 9.84178336,11.1157551 9.84178336,10.8939152 C9.84178336,10.6961884 9.98405024,10.5322198 10.1713281,10.4984615 L10.2436672,10.4920314 L11.541752,10.4920314 L11.5425557,10.4920314 Z M11.2178336,7.24561381 L11.3094631,7.25124019 C11.6679435,7.29625118 11.9444396,7.60168289 11.9444396,7.97221978 C11.9444396,8.37410361 11.6197174,8.69882575 11.2178336,8.69882575 C10.8167535,8.69882575 10.4920314,8.37329984 10.4920314,7.97221978 C10.4920314,7.60248666 10.7685275,7.29625118 11.1270078,7.25124019 L11.2178336,7.24561381 Z"
+          id="Shape"
+          fill="#348CFD"
+          fillRule="nonzero"
+        ></path>
+        <path
+          d="M14.139529,15.6867818 C14.3613689,15.6867818 14.5414129,15.8668257 14.5414129,16.0886656 C14.5414129,16.2855887 14.399146,16.4503611 14.2118681,16.4841193 L14.139529,16.4905495 L10.244471,16.4905495 C10.0226311,16.4905495 9.84258713,16.3105055 9.84258713,16.0886656 C9.84258713,15.8909388 9.984854,15.7269702 10.1721319,15.6932119 L10.244471,15.6867818 L14.139529,15.6867818 L14.139529,15.6867818 Z"
+          id="Path"
+          fill="#348CFD"
+          fillRule="nonzero"
+        ></path>
+      </g>
+    </svg>
+  ),
   ListView: (props: IconProps) => (
     <svg
       width="24px"
@@ -270,6 +496,47 @@ export const Icons = {
       </g>
     </svg>
   ),
+  Actions: (props: IconProps) => (
+    <svg
+      width="24px"
+      height="24px"
+      viewBox="0 0 24 24"
+    >
+      <g
+        id="more-dropdown"
+        stroke="none"
+        strokeWidth="1"
+        fill="none"
+        fillRule="evenodd"
+      >
+        <rect
+          id="Rectangle"
+          x="0"
+          y="0"
+          width="24"
+          height="24"
+        ></rect>
+        <g
+          id="Group-2"
+          transform="translate(5, 4)"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <circle
+            id="Oval"
+            cx="6.74621802"
+            cy="7.5938001"
+            r="1.68710308"
+          ></circle>
+          <path
+            d="M8.17972732,1.06493425 L8.67634848,2.69920529 C8.84616867,3.26259112 9.42371506,3.59782471 9.99714943,3.46585687 L11.6537273,3.08194406 C12.2982043,2.9366791 12.9621245,3.22831522 13.2911435,3.80120174 C13.6201625,4.37408825 13.5374848,5.09450899 13.0872366,5.57796434 L11.9284539,6.82714853 C11.528377,7.25995707 11.528377,7.92764314 11.9284539,8.36045168 L13.0872366,9.60963586 C13.5374848,10.0930912 13.6201625,10.813512 13.2911435,11.3863985 C12.9621245,11.959285 12.2982043,12.2509211 11.6537273,12.1056561 L9.99714943,11.7217433 C9.42371506,11.5897755 8.84616867,11.9250091 8.67634848,12.4883949 L8.17972732,14.122666 C7.98874475,14.7549849 7.40616232,15.1876002 6.745631,15.1876002 C6.08509968,15.1876002 5.50251725,14.7549849 5.31153468,14.122666 L4.81491352,12.4883949 C4.64509333,11.9250091 4.06754694,11.5897755 3.49411257,11.7217433 L1.83753467,12.1056561 C1.19305769,12.2509211 0.529137506,11.959285 0.200118485,11.3863985 C-0.128900535,10.813512 -0.0462227777,10.0930912 0.404025372,9.60963586 L1.56280807,8.36045168 C1.96288499,7.92764314 1.96288499,7.25995707 1.56280807,6.82714853 L0.404025372,5.57796434 C-0.0462227777,5.09450899 -0.128900535,4.37408825 0.200118485,3.80120174 C0.529137506,3.22831522 1.19305769,2.9366791 1.83753467,3.08194406 L3.49411257,3.46585687 C4.06754694,3.59782471 4.64509333,3.26259112 4.81491352,2.69920529 L5.31153468,1.06493425 C5.50251725,0.43261528 6.08509968,0 6.745631,0 C7.40616232,0 7.98874475,0.43261528 8.17972732,1.06493425 Z"
+            id="Path"
+          ></path>
+        </g>
+      </g>
+    </svg>
+  ),
   PinFill: (props: IconProps) => (
     <svg
       width="24px"