ui(components): Viewport components updated to ui-next with design updates (#4886)

2025-04-07 16:45:05 -04:00 · 2025-04-07 16:45:05 -04:00 · a8ac297e16
commit a8ac297e16
parent 4e09f85d5d
53 changed files with 933 additions and 326 deletions
--- a/extensions/cornerstone-dicom-rt/src/viewports/OHIFCornerstoneRTViewport.tsx
+++ b/extensions/cornerstone-dicom-rt/src/viewports/OHIFCornerstoneRTViewport.tsx
@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import { ViewportActionArrows } from '@ohif/ui';
+import { ViewportActionArrows } from '@ohif/ui-next';
 import { useViewportGrid } from '@ohif/ui-next';
 import { utils } from '@ohif/extension-cornerstone';

--- a/extensions/cornerstone-dicom-rt/src/viewports/_getStatusComponent.tsx
+++ b/extensions/cornerstone-dicom-rt/src/viewports/_getStatusComponent.tsx
@ -1,6 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { ViewportActionButton } from '@ohif/ui';
+import { ViewportActionButton } from '@ohif/ui-next';
 import { Icons, Tooltip, TooltipTrigger, TooltipContent } from '@ohif/ui-next';

 export default function _getStatusComponent({ isHydrated, onStatusClick }) {
@ -56,4 +56,4 @@ export default function _getStatusComponent({ isHydrated, onStatusClick }) {
      {!ToolTipMessage && <StatusArea />}
    </>
  );
-}
+}
--- a/extensions/cornerstone-dicom-seg/src/viewports/OHIFCornerstoneSEGViewport.tsx
+++ b/extensions/cornerstone-dicom-seg/src/viewports/OHIFCornerstoneSEGViewport.tsx
@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ViewportActionArrows } from '@ohif/ui';
+import { ViewportActionArrows } from '@ohif/ui-next';
 import { useViewportGrid } from '@ohif/ui-next';
 import createSEGToolGroupAndAddTools from '../utils/initSEGToolGroup';
 import promptHydrateSEG from '../utils/promptHydrateSEG';
--- a/extensions/cornerstone-dicom-seg/src/viewports/_getStatusComponent.tsx
+++ b/extensions/cornerstone-dicom-seg/src/viewports/_getStatusComponent.tsx
@ -1,6 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { ViewportActionButton } from '@ohif/ui';
+import { ViewportActionButton } from '@ohif/ui-next';
 import { Icons, Tooltip, TooltipTrigger, TooltipContent } from '@ohif/ui-next';

 export default function _getStatusComponent({ isHydrated, onStatusClick }) {
@ -56,4 +56,4 @@ export default function _getStatusComponent({ isHydrated, onStatusClick }) {
      {!ToolTipMessage && <StatusArea />}
    </>
  );
-}
+}
--- a/extensions/cornerstone-dicom-sr/src/components/OHIFCornerstoneSRMeasurementViewport.tsx
+++ b/extensions/cornerstone-dicom-sr/src/components/OHIFCornerstoneSRMeasurementViewport.tsx
@ -5,7 +5,7 @@ import { ExtensionManager, useToolbar } from '@ohif/core';

 import { setTrackingUniqueIdentifiersForElement } from '../tools/modules/dicomSRModule';

-import { ViewportActionArrows } from '@ohif/ui';
+import { ViewportActionArrows } from '@ohif/ui-next';
 import createReferencedImageDisplaySet from '../utils/createReferencedImageDisplaySet';
 import { usePositionPresentationStore } from '@ohif/extension-cornerstone';
 import { useViewportGrid } from '@ohif/ui-next';
--- a/extensions/cornerstone-dicom-sr/src/onModeEnter.tsx
+++ b/extensions/cornerstone-dicom-sr/src/onModeEnter.tsx
@ -1,7 +1,7 @@
 import React from 'react';

 import { SOPClassHandlerId, SOPClassHandlerId3D } from './id';
-import { ViewportActionButton } from '@ohif/ui';
+import { ViewportActionButton } from '@ohif/ui-next';
 import i18n from '@ohif/i18n';

 export default function onModeEnter({ servicesManager }) {
--- a/extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.tsx
+++ b/extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.tsx
@ -3,7 +3,8 @@ import { useResizeDetector } from 'react-resize-detector';
 import * as cs3DTools from '@cornerstonejs/tools';
 import { Enums, eventTarget, getEnabledElement } from '@cornerstonejs/core';
 import { MeasurementService } from '@ohif/core';
-import { AllInOneMenu, useViewportDialog } from '@ohif/ui';
+import { AllInOneMenu } from '@ohif/ui-next';
+import { useViewportDialog } from '@ohif/ui';
 import type { Types as csTypes } from '@cornerstonejs/core';

 import { setEnabledElement } from '../state';
@ -99,7 +100,7 @@ const OHIFCornerstoneViewport = React.memo(
    const [viewportDialogState] = useViewportDialog();
    // useCallback for scroll bar height calculation
    const setImageScrollBarHeight = useCallback(() => {
-      const scrollbarHeight = `${elementRef.current.clientHeight - 40}px`;
+      const scrollbarHeight = `${elementRef.current.clientHeight - 10}px`;
      setScrollbarHeight(scrollbarHeight);
    }, [elementRef]);

--- a/extensions/cornerstone/src/Viewport/Overlays/CustomizableViewportOverlay.tsx
+++ b/extensions/cornerstone/src/Viewport/Overlays/CustomizableViewportOverlay.tsx
@ -3,7 +3,7 @@ import { vec3 } from 'gl-matrix';
 import PropTypes from 'prop-types';
 import { metaData, Enums, utilities } from '@cornerstonejs/core';
 import type { ImageSliceData } from '@cornerstonejs/core/types';
-import { ViewportOverlay } from '@ohif/ui';
+import { ViewportOverlay } from '@ohif/ui-next';
 import type { InstanceMetadata } from '@ohif/core/src/types';
 import { formatDICOMDate, formatDICOMTime, formatNumberPrecision } from './utils';
 import { utils } from '@ohif/core';
@ -368,7 +368,7 @@ function OverlayItem(props) {
      title={title}
    >
      {label ? <span className="mr-1 shrink-0">{label}</span> : null}
-      <span className="ml-1 mr-2 shrink-0">{value}</span>
+      <span className="ml-0 mr-2 shrink-0">{value}</span>
    </div>
  );
 }
@ -387,10 +387,10 @@ function VOIOverlayItem({ voi, customization }: OverlayItemProps) {
      className="overlay-item flex flex-row"
      style={{ color: customization?.color }}
    >
-      <span className="mr-1 shrink-0">W:</span>
-      <span className="ml-1 mr-2 shrink-0">{windowWidth.toFixed(0)}</span>
-      <span className="mr-1 shrink-0">L:</span>
-      <span className="ml-1 shrink-0">{windowCenter.toFixed(0)}</span>
+      <span className="mr-0.5 shrink-0 opacity-[0.67]">W:</span>
+      <span className="mr-2.5 shrink-0">{windowWidth.toFixed(0)}</span>
+      <span className="mr-0.5 shrink-0 opacity-[0.67]">L:</span>
+      <span className="shrink-0">{windowCenter.toFixed(0)}</span>
    </div>
  );
 }
@ -404,7 +404,7 @@ function ZoomOverlayItem({ scale, customization }: OverlayItemProps) {
      className="overlay-item flex flex-row"
      style={{ color: (customization && customization.color) || undefined }}
    >
-      <span className="mr-1 shrink-0">Zoom:</span>
+      <span className="mr-0.5 shrink-0 opacity-[0.67]">Zoom:</span>
      <span>{scale.toFixed(2)}x</span>
    </div>
  );
@ -428,7 +428,7 @@ function InstanceNumberOverlayItem({
      <span>
        {instanceNumber !== undefined && instanceNumber !== null ? (
          <>
-            <span className="mr-1 shrink-0">I:</span>
+            <span className="mr-0.5 shrink-0 opacity-[0.67]">I:</span>
            <span>{`${instanceNumber} (${imageIndex + 1}/${numberOfSlices})`}</span>
          </>
        ) : (
--- a/extensions/cornerstone/src/Viewport/Overlays/ViewportImageScrollbar.tsx
+++ b/extensions/cornerstone/src/Viewport/Overlays/ViewportImageScrollbar.tsx
@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Enums, VolumeViewport3D, utilities as csUtils } from '@cornerstonejs/core';
-import { ImageScrollbar } from '@ohif/ui';
+import { ImageScrollbar } from '@ohif/ui-next';

 function CornerstoneImageScrollbar({
  viewportData,
--- a/extensions/cornerstone/src/Viewport/Overlays/ViewportOrientationMarkers.css
+++ b/extensions/cornerstone/src/Viewport/Overlays/ViewportOrientationMarkers.css
@ -3,19 +3,18 @@
  --marker-height: 100px;
  --scrollbar-width: 20px;
  pointer-events: none;
-  font-size: 15px;
  line-height: 18px;
 }
 .ViewportOrientationMarkers .orientation-marker {
  position: absolute;
 }
 .ViewportOrientationMarkers .top-mid {
-  top: 0.6rem;
+  top: 0.38rem;
  left: 50%;
 }
 .ViewportOrientationMarkers .left-mid {
  top: 47%;
-  left: 5px;
+  left: 0.38rem;
 }
 .ViewportOrientationMarkers .right-mid {
  top: 47%;
--- a/extensions/cornerstone/src/Viewport/Overlays/ViewportOrientationMarkers.tsx
+++ b/extensions/cornerstone/src/Viewport/Overlays/ViewportOrientationMarkers.tsx
@ -119,8 +119,8 @@ function ViewportOrientationMarkers({
        className={classNames(
          'overlay-text',
          `${m}-mid orientation-marker`,
-          'text-aqua-pale',
-          'text-[13px]',
+          'text-highlight/65',
+          'text-base',
          'leading-5'
        )}
        key={`${m}-mid orientation-marker`}
--- a/extensions/cornerstone/src/components/WindowLevelActionMenu/Colorbar.tsx
+++ b/extensions/cornerstone/src/components/WindowLevelActionMenu/Colorbar.tsx
@ -1,5 +1,5 @@
 import React, { ReactElement, useCallback, useEffect, useState } from 'react';
-import { SwitchButton } from '@ohif/ui';
+import { Switch } from '@ohif/ui-next';
 import { StackViewport, VolumeViewport } from '@cornerstonejs/core';
 import { ColorbarProps } from '../../types/Colorbar';
 import { utilities } from '@cornerstonejs/core';
@ -22,7 +22,7 @@ export function setViewportColorbar(
    colorbarOptions.ticks = {
      position: 'left',
      style: {
-        font: '12px Arial',
+        font: '13px Inter',
        color: '#000000',
        maxNumTicks: 8,
        tickSize: 5,
@ -101,12 +101,18 @@ export function Colorbar({
  }, [viewportId]);

  return (
-    <div className="all-in-one-menu-item flex w-full justify-center">
-      <div className="mr-2 w-[28px]"></div>
-      <SwitchButton
-        label="Display Color bar"
+    <div
+      className="hover:bg-accent flex h-8 w-full flex-shrink-0 cursor-pointer items-center px-2 text-base hover:rounded"
+      onClick={() => {
+        onSetColorbar();
+      }}
+    >
+      <div className="flex w-7 flex-shrink-0 items-center justify-center"></div>
+      <span className="flex-grow">Display Color bar</span>
+      <Switch
+        className="ml-2 flex-shrink-0"
        checked={showColorbar}
-        onChange={() => {
+        onCheckedChange={() => {
          onSetColorbar();
        }}
      />
--- a/extensions/cornerstone/src/components/WindowLevelActionMenu/Colormap.tsx
+++ b/extensions/cornerstone/src/components/WindowLevelActionMenu/Colormap.tsx
@ -1,5 +1,6 @@
-import React, { ReactElement, useCallback, useEffect, useRef, useState, useMemo } from 'react';
-import { AllInOneMenu, ButtonGroup, SwitchButton } from '@ohif/ui';
+import React, { ReactElement, useCallback, useEffect, useRef, useState } from 'react';
+import { AllInOneMenu, Switch, Tabs, TabsList, TabsTrigger } from '@ohif/ui-next';
+
 import { StackViewport, Types } from '@cornerstonejs/core';
 import { ColormapProps } from '../../types/Colormap';

@ -26,6 +27,7 @@ export function Colormap({

  const onSetColorLUT = useCallback(
    props => {
+      debugger;
      // TODO: Better way to check if it's a fusion
      const oneOpacityColormaps = ['Grayscale', 'X Ray'];
      const opacity =
@ -64,20 +66,9 @@ export function Colormap({
    return colormap;
  };

-  const buttons = useMemo(() => {
-    return displaySets.map((displaySet, index) => ({
-      children: displaySet.Modality,
-      key: index,
-      style: {
-        minWidth: `calc(100% / ${displaySets.length})`,
-        fontSize: '0.8rem',
-        textAlign: 'center',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-      },
-    }));
-  }, [displaySets]);
+  const activeIndex = displaySets.findIndex(
+    ds => ds.displaySetInstanceUID === activeDisplaySetRef.current.displaySetInstanceUID
+  );

  useEffect(() => {
    setActiveDisplaySet(displaySets[displaySets.length - 1]);
@ -85,46 +76,52 @@ export function Colormap({

  return (
    <>
-      {buttons.length > 1 && (
-        <div className="all-in-one-menu-item flex w-full justify-center">
-          <ButtonGroup
-            onActiveIndexChange={index => {
+      {displaySets.length > 1 && (
+        <div className="flex h-8 w-full flex-shrink-0 items-center justify-center px-2 text-base">
+          <Tabs
+            value={String(activeIndex)}
+            onValueChange={val => {
+              const index = parseInt(val, 10);
              setActiveDisplaySet(displaySets[index]);
              setPrePreviewColormap(null);
            }}
-            activeIndex={
-              displaySets.findIndex(
-                ds => ds.displaySetInstanceUID === activeDisplaySetRef.current.displaySetInstanceUID
-              ) || 1
-            }
-            className="w-[70%] text-[10px]"
          >
-            {buttons.map(({ children, key, style }) => (
-              <div
-                key={key}
-                style={style}
-              >
-                {children}
-              </div>
-            ))}
-          </ButtonGroup>
+            <TabsList>
+              {displaySets.map((ds, i) => (
+                <TabsTrigger
+                  key={i}
+                  value={String(i)}
+                >
+                  {ds.Modality}
+                </TabsTrigger>
+              ))}
+            </TabsList>
+          </Tabs>
        </div>
      )}
-      <div className="all-in-one-menu-item flex w-full justify-center">
-        <SwitchButton
-          label="Preview in viewport"
+      <div
+        className="hover:bg-accent flex h-8 w-full flex-shrink-0 cursor-pointer items-center px-2 text-base hover:rounded"
+        onClick={() => setShowPreview(!showPreview)}
+      >
+        <span className="flex-shrink-0">Preview in viewport</span>
+        <Switch
+          className="ml-auto flex-shrink-0"
          checked={showPreview}
-          onChange={checked => {
+          onCheckedChange={checked => {
            setShowPreview(checked);
          }}
        />
      </div>
      <AllInOneMenu.DividerItem />
-      <AllInOneMenu.ItemPanel>
+      <AllInOneMenu.ItemPanel
+        maxHeight="calc(100vh - 250px)"
+        className="min-h-[200px] flex-grow"
+      >
        {colormaps.map((colormap, index) => (
          <AllInOneMenu.Item
            key={index}
            label={colormap.description}
+            useIconSpace={false}
            onClick={() => {
              onSetColorLUT({
                viewportId,
--- a/extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeLighting.tsx
+++ b/extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeLighting.tsx
@ -1,5 +1,6 @@
 import React, { ReactElement, useState, useEffect, useCallback } from 'react';
 import { VolumeLightingProps } from '../../types/ViewportPresets';
+import { Numeric } from '@ohif/ui-next';

 export function VolumeLighting({
  servicesManager,
@ -8,135 +9,75 @@ export function VolumeLighting({
  hasShade,
 }: VolumeLightingProps): ReactElement {
  const { cornerstoneViewportService } = servicesManager.services;
-  const [ambient, setAmbient] = useState(null);
-  const [diffuse, setDiffuse] = useState(null);
-  const [specular, setSpecular] = useState(null);
+  const [lightingValues, setLightingValues] = useState({
+    ambient: null,
+    diffuse: null,
+    specular: null,
+  });

-  const onAmbientChange = useCallback(() => {
-    commandsManager.runCommand('setVolumeLighting', { viewportId, options: { ambient } });
-  }, [ambient, commandsManager, viewportId]);
-
-  const onDiffuseChange = useCallback(() => {
-    commandsManager.runCommand('setVolumeLighting', { viewportId, options: { diffuse } });
-  }, [diffuse, commandsManager, viewportId]);
-
-  const onSpecularChange = useCallback(() => {
-    commandsManager.runCommand('setVolumeLighting', { viewportId, options: { specular } });
-  }, [specular, commandsManager, viewportId]);
-
-  const calculateBackground = value => {
-    const percentage = ((value - 0) / (1 - 0)) * 100;
-    return `linear-gradient(to right, #5acce6 0%, #5acce6 ${percentage}%, #3a3f99 ${percentage}%, #3a3f99 100%)`;
-  };
+  // Single callback to handle all lighting property changes
+  const onLightingChange = useCallback(
+    (property, value) => {
+      commandsManager.runCommand('setVolumeLighting', {
+        viewportId,
+        options: { [property]: value },
+      });
+      setLightingValues(prev => ({
+        ...prev,
+        [property]: value,
+      }));
+    },
+    [commandsManager, viewportId]
+  );

  useEffect(() => {
    const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
    const { actor } = viewport.getActors()[0];
-    const ambient = actor.getProperty().getAmbient();
-    const diffuse = actor.getProperty().getDiffuse();
-    const specular = actor.getProperty().getSpecular();
-    setAmbient(ambient);
-    setDiffuse(diffuse);
-    setSpecular(specular);
-  }, [viewportId, cornerstoneViewportService]);
-  const disableOption = hasShade ? '' : 'ohif-disabled !opacity-40';
-  const disableSlider = !hasShade;
-  return (
-    <>
-      <div
-        className={`all-in-one-menu-item flex w-full flex-row !items-center justify-between gap-[10px] ${disableOption}`}
-      >
-        <label
-          className="block text-white"
-          htmlFor="ambient"
-        >
-          Ambient
-        </label>
-        {ambient !== null && (
-          <input
-            className="bg-inputfield-main h-2 w-[120px] cursor-pointer appearance-none rounded-lg"
-            value={ambient}
-            onChange={e => {
-              setAmbient(e.target.value);
-              onAmbientChange();
-            }}
-            id="ambient"
-            disabled={disableSlider}
-            max={1}
-            min={0}
-            type="range"
-            step={0.1}
-            style={{
-              background: calculateBackground(ambient),
-              '--thumb-inner-color': '#5acce6',
-              '--thumb-outer-color': '#090c29',
-            }}
-          />
-        )}
-      </div>
-      <div
-        className={`all-in-one-menu-item flex w-full flex-row !items-center justify-between gap-[10px] ${disableOption}`}
-      >
-        <label
-          className="block text-white"
-          htmlFor="diffuse"
-        >
-          Diffuse
-        </label>
-        {diffuse !== null && (
-          <input
-            className="bg-inputfield-main h-2 w-[120px] cursor-pointer appearance-none rounded-lg"
-            value={diffuse}
-            onChange={e => {
-              setDiffuse(e.target.value);
-              onDiffuseChange();
-            }}
-            disabled={disableSlider}
-            id="diffuse"
-            max={1}
-            min={0}
-            type="range"
-            step={0.1}
-            style={{
-              background: calculateBackground(diffuse),
-              '--thumb-inner-color': '#5acce6',
-              '--thumb-outer-color': '#090c29',
-            }}
-          />
-        )}
-      </div>
+    const property = actor.getProperty();

-      <div
-        className={`all-in-one-menu-item flex w-full flex-row !items-center justify-between gap-[10px] ${disableOption}`}
-      >
-        <label
-          className="block text-white"
-          htmlFor="specular"
-        >
-          Specular
-        </label>
-        {specular !== null && (
-          <input
-            className="bg-inputfield-main h-2 w-[120px] cursor-pointer appearance-none rounded-lg"
-            value={specular}
-            disabled={disableSlider}
-            onChange={e => {
-              setSpecular(e.target.value);
-              onSpecularChange();
-            }}
-            id="specular"
-            max={1}
-            min={0}
-            type="range"
-            step={0.1}
-            style={{
-              background: calculateBackground(specular),
-              '--thumb-inner-color': '#5acce6',
-              '--thumb-outer-color': '#090c29',
-            }}
-          />
-        )}
-      </div>
-    </>
+    const values = {
+      ambient: property.getAmbient(),
+      diffuse: property.getDiffuse(),
+      specular: property.getSpecular(),
+    };
+
+    setLightingValues(values);
+  }, [viewportId, cornerstoneViewportService]);
+
+  const disableOption = hasShade ? '' : 'ohif-disabled !opacity-40';
+
+  // Configuration for our lighting properties
+  const lightingProperties = [
+    { key: 'ambient', label: 'Ambient' },
+    { key: 'diffuse', label: 'Diffuse' },
+    { key: 'specular', label: 'Specular' },
+  ];
+
+  return (
+    <div className="my-1 mt-2 flex flex-col space-y-2">
+      {lightingProperties.map(
+        ({ key, label }) =>
+          lightingValues[key] !== null && (
+            <div
+              key={key}
+              className={`w-full pl-2 pr-1 ${disableOption}`}
+            >
+              <Numeric.Container
+                mode="singleRange"
+                min={0}
+                max={1}
+                step={0.1}
+                value={lightingValues[key]}
+                onChange={value => onLightingChange(key, value)}
+              >
+                <div className="flex flex-row items-center">
+                  <Numeric.Label className="w-16">{label}</Numeric.Label>
+                  <Numeric.SingleRange sliderClassName="mx-2 flex-grow" />
+                </div>
+              </Numeric.Container>
+            </div>
+          )
+      )}
+    </div>
  );
 }
--- a/extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeRenderingOptions.tsx
+++ b/extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeRenderingOptions.tsx
@ -1,5 +1,5 @@
 import React, { ReactElement, useState } from 'react';
-import { AllInOneMenu } from '@ohif/ui';
+import { AllInOneMenu } from '@ohif/ui-next';
 import { VolumeRenderingOptionsProps } from '../../types/ViewportPresets';
 import { VolumeRenderingQuality } from './VolumeRenderingQuality';
 import { VolumeShift } from './VolumeShift';
@ -26,11 +26,11 @@ export function VolumeRenderingOptions({
        commandsManager={commandsManager}
        servicesManager={servicesManager}
      />
-      <div className="all-in-one-menu-item mt-2 flex !h-[20px] w-full justify-start">
-        <div className="text-aqua-pale text-[13px]">LIGHTING</div>
+      <div className="mt-2 flex h-8 !h-[20px] w-full flex-shrink-0 items-center justify-start px-2 text-base">
+        <div className="text-muted-foreground text-sm">Lighting</div>
      </div>
-      <div className="bg-primary-dark mt-1 mb-1 h-[2px] w-full"></div>
-      <div className="all-in-one-menu-item flex w-full justify-center">
+      <div className="bg-background mt-1 mb-1 h-px w-full"></div>
+      <div className="hover:bg-accent flex h-8 w-full flex-shrink-0 items-center px-2 text-base hover:rounded">
        <VolumeShade
          commandsManager={commandsManager}
          servicesManager={servicesManager}
--- a/extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeRenderingPresets.tsx
+++ b/extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeRenderingPresets.tsx
@ -1,4 +1,4 @@
-import { AllInOneMenu } from '@ohif/ui';
+import { AllInOneMenu } from '@ohif/ui-next';
 import { Icons } from '@ohif/ui-next';
 import React, { ReactElement } from 'react';
 import { VolumeRenderingPresetsProps } from '../../types/ViewportPresets';
--- a/extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeRenderingQuality.tsx
+++ b/extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeRenderingQuality.tsx
@ -1,5 +1,6 @@
 import React, { ReactElement, useCallback, useState, useEffect } from 'react';
 import { VolumeRenderingQualityProps } from '../../types/ViewportPresets';
+import { Numeric } from '@ohif/ui-next';

 export function VolumeRenderingQuality({
  volumeRenderingQualityRange,
@ -22,11 +23,6 @@ export function VolumeRenderingQuality({
    [commandsManager, viewportId]
  );

-  const calculateBackground = value => {
-    const percentage = ((value - 0) / (1 - 0)) * 100;
-    return `linear-gradient(to right, #5acce6 0%, #5acce6 ${percentage}%, #3a3f99 ${percentage}%, #3a3f99 100%)`;
-  };
-
  useEffect(() => {
    const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
    const { actor } = viewport.getActors()[0];
@ -41,33 +37,26 @@ export function VolumeRenderingQuality({
      setQuality(Math.sqrt(averageSpacing / (sampleDistance * 0.5)));
    }
  }, [cornerstoneViewportService, viewportId]);
+
  return (
-    <>
-      <div className="all-in-one-menu-item flex  w-full flex-row !items-center justify-between gap-[10px]">
-        <label
-          className="block text-white"
-          htmlFor="volume"
-        >
-          Quality
-        </label>
-        {quality !== null && (
-          <input
-            className="bg-inputfield-main h-2 w-[120px] cursor-pointer appearance-none rounded-lg"
-            value={quality}
-            id="volume"
-            max={max}
+    <div className="my-1 mt-2 flex flex-col space-y-2">
+      {quality !== null && (
+        <div className="w-full pl-2 pr-1">
+          <Numeric.Container
+            mode="singleRange"
            min={min}
-            type="range"
+            max={max}
            step={step}
-            onChange={e => onChange(parseInt(e.target.value, 10))}
-            style={{
-              background: calculateBackground((quality - min) / (max - min)),
-              '--thumb-inner-color': '#5acce6',
-              '--thumb-outer-color': '#090c29',
-            }}
-          />
-        )}
-      </div>
-    </>
+            value={quality}
+            onChange={onChange}
+          >
+            <div className="flex flex-row items-center">
+              <Numeric.Label className="w-16">Quality</Numeric.Label>
+              <Numeric.SingleRange sliderClassName="mx-2 flex-grow" />
+            </div>
+          </Numeric.Container>
+        </div>
+      )}
+    </div>
  );
 }
--- a/extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeShade.tsx
+++ b/extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeShade.tsx
@ -1,5 +1,5 @@
 import React, { ReactElement, useCallback, useEffect, useState } from 'react';
-import { SwitchButton } from '@ohif/ui';
+import { Switch } from '@ohif/ui-next';
 import { VolumeShadeProps } from '../../types/ViewportPresets';

 export function VolumeShade({
@ -28,15 +28,18 @@ export function VolumeShade({
  }, [viewportId, cornerstoneViewportService]);

  return (
-    <SwitchButton
-      key={key}
-      label="Shade"
-      checked={shade}
-      onChange={() => {
-        setShade(!shade);
-        onClickShade(!shade);
-        onShadeChange(!shade);
-      }}
-    />
+    <>
+      <span className="flex-grow">Shade</span>
+      <Switch
+        className="ml-2 flex-shrink-0"
+        key={key}
+        checked={shade}
+        onCheckedChange={() => {
+          setShade(!shade);
+          onClickShade(!shade);
+          onShadeChange(!shade);
+        }}
+      />
+    </>
  );
 }
--- a/extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeShift.tsx
+++ b/extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeShift.tsx
@ -1,5 +1,6 @@
 import React, { ReactElement, useCallback, useEffect, useState, useRef } from 'react';
 import { VolumeShiftProps } from '../../types/ViewportPresets';
+import { Numeric } from '@ohif/ui-next';

 export function VolumeShift({
  viewportId,
@ -46,48 +47,32 @@ export function VolumeShift({
        viewportId,
        shift: shiftDifference,
      });
+      setShift(newShift);
    },
    [commandsManager, viewportId, viewport]
  );

-  const calculateBackground = value => {
-    const percentage = ((value - 0) / (1 - 0)) * 100;
-    return `linear-gradient(to right, #5acce6 0%, #5acce6 ${percentage}%, #3a3f99 ${percentage}%, #3a3f99 100%)`;
-  };
-
  return (
-    <>
-      <div className="all-in-one-menu-item flex  w-full flex-row !items-center justify-between gap-[10px]">
-        <label
-          className="block  text-white"
-          htmlFor="shift"
-        >
-          Shift
-        </label>
-        {step !== null && (
-          <input
-            className="bg-inputfield-main h-2 w-[120px] cursor-pointer appearance-none rounded-lg"
+    <div className="my-1 mt-2 flex flex-col space-y-2">
+      {step !== null && minShift !== null && maxShift !== null && (
+        <div className="w-full pl-2 pr-1">
+          <Numeric.Container
+            mode="singleRange"
+            min={minShift}
+            max={maxShift}
+            step={step}
            value={shift}
-            onChange={e => {
-              const shiftValue = parseInt(e.target.value, 10);
-              setShift(shiftValue);
-              onChangeRange(shiftValue);
-            }}
-            id="shift"
+            onChange={onChangeRange}
            onMouseDown={() => setIsBlocking(true)}
            onMouseUp={() => setIsBlocking(false)}
-            max={maxShift}
-            min={minShift}
-            type="range"
-            step={step}
-            style={{
-              background: calculateBackground((shift - minShift) / (maxShift - minShift)),
-              '--thumb-inner-color': '#5acce6',
-              '--thumb-outer-color': '#090c29',
-            }}
-          />
-        )}
-      </div>
-    </>
+          >
+            <div className="flex flex-row items-center">
+              <Numeric.Label className="w-16">Shift</Numeric.Label>
+              <Numeric.SingleRange sliderClassName="mx-2 flex-grow" />
+            </div>
+          </Numeric.Container>
+        </div>
+      )}
+    </div>
  );
 }
--- a/extensions/cornerstone/src/components/WindowLevelActionMenu/WindowLevel.tsx
+++ b/extensions/cornerstone/src/components/WindowLevelActionMenu/WindowLevel.tsx
@ -1,5 +1,5 @@
 import React, { ReactElement, useCallback } from 'react';
-import { AllInOneMenu } from '@ohif/ui';
+import { AllInOneMenu } from '@ohif/ui-next';
 import { WindowLevelPreset } from '../../types/WindowLevel';
 import { CommandsManager } from '@ohif/core';
 import { useTranslation } from 'react-i18next';
@ -45,6 +45,7 @@ export function WindowLevel({
                  key={`${modality}-${index}`}
                  label={preset.description}
                  secondaryLabel={`${preset.window} / ${preset.level}`}
+                  useIconSpace={false}
                  onClick={() => onSetWindowLevel(preset)}
                />
              ))}
--- a/extensions/cornerstone/src/components/WindowLevelActionMenu/WindowLevelActionMenu.tsx
+++ b/extensions/cornerstone/src/components/WindowLevelActionMenu/WindowLevelActionMenu.tsx
@ -1,7 +1,7 @@
 import React, { ReactElement, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import classNames from 'classnames';
-import { AllInOneMenu } from '@ohif/ui';
+import { AllInOneMenu } from '@ohif/ui-next';
 import { useViewportGrid } from '@ohif/ui-next';
 import { Colormap } from './Colormap';
 import { Colorbar } from './Colorbar';
@ -119,8 +119,8 @@ export function WindowLevelActionMenu({
      iconClassName={classNames(
        // Visible on hover and for the active viewport
        activeViewportId === viewportId ? 'visible' : 'invisible group-hover/pane:visible',
-        'flex shrink-0 cursor-pointer rounded active:text-white text-primary-light',
-        isLight ? ' hover:bg-secondary-dark' : 'hover:bg-secondary-light/60'
+        'flex shrink-0 cursor-pointer rounded active:text-foreground text-highlight',
+        isLight ? ' hover:bg-primary/30' : 'hover:bg-primary/30'
      )}
      menuStyle={{ maxHeight: vpHeight - 32, minWidth: 218 }}
      onVisibilityChange={() => {
@ -144,8 +144,10 @@ export function WindowLevelActionMenu({
            key="colorLUTPresets"
            itemLabel="Color LUT"
            itemIcon="icon-color-lut"
+            className="flex h-[calc(100%-32px)] flex-col"
          >
            <Colormap
+              className="flex h-full w-full flex-col"
              colormaps={colormaps}
              viewportId={viewportId}
              displaySets={displaySets.filter(ds => !nonWLModalities.includes(ds.Modality))}
--- a/extensions/cornerstone/src/contextProviders/ViewportActionCornersProvider.tsx
+++ b/extensions/cornerstone/src/contextProviders/ViewportActionCornersProvider.tsx
@ -8,7 +8,7 @@ import React, {
 } from 'react';
 import PropTypes from 'prop-types';

-import { Types, ViewportActionCornersLocations } from '@ohif/ui';
+import { Types, ViewportActionCornersLocations } from '@ohif/ui-next';
 import ViewportActionCornersService, {
  ActionComponentInfo,
 } from '../services/ViewportActionCornersService/ViewportActionCornersService';
--- a/extensions/cornerstone/src/services/ViewportActionCornersService/ViewportActionCornersService.ts
+++ b/extensions/cornerstone/src/services/ViewportActionCornersService/ViewportActionCornersService.ts
@ -1,5 +1,5 @@
 import { PubSubService } from '@ohif/core';
-import { ViewportActionCornersLocations } from '@ohif/ui';
+import { ViewportActionCornersLocations } from '@ohif/ui-next';
 import { ReactNode } from 'react';

 export type ActionComponentInfo = {
--- a/extensions/default/src/customizations/viewportActionCornersCustomization.ts
+++ b/extensions/default/src/customizations/viewportActionCornersCustomization.ts
@ -1,4 +1,4 @@
-import { ViewportActionCorners } from '@ohif/ui';
+import { ViewportActionCorners } from '@ohif/ui-next';

 export default {
  'ui.viewportActionCorner': ViewportActionCorners,
--- a/extensions/measurement-tracking/src/index.tsx
+++ b/extensions/measurement-tracking/src/index.tsx
@ -4,7 +4,7 @@ import getContextModule from './getContextModule';
 import getPanelModule from './getPanelModule';
 import getViewportModule from './getViewportModule';
 import { id } from './id.js';
-import { ViewportActionButton } from '@ohif/ui';
+import { ViewportActionButton } from '@ohif/ui-next';
 import i18n from '@ohif/i18n';
 import { measurementTrackingMode } from './contexts/TrackedMeasurementsContext/promptBeginTracking';
 import getCustomizationModule from './getCustomizationModule';
--- a/extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.tsx
+++ b/extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.tsx
@ -1,7 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';

-import { ViewportActionArrows } from '@ohif/ui';
+import { ViewportActionArrows } from '@ohif/ui-next';
 import { useViewportGrid, Icons, Tooltip, TooltipTrigger, TooltipContent } from '@ohif/ui-next';

 import { annotation } from '@cornerstonejs/tools';
@ -325,7 +325,7 @@ function _getStatusComponent(isTracked, t) {
    <Tooltip>
      <TooltipTrigger asChild>
        <span>
-          <Icons.StatusTracking className="text-muted-foreground" />
+          <Icons.StatusTracking className="text-muted-foreground mt-0.5 ml-0.5" />
        </span>
      </TooltipTrigger>
      <TooltipContent
--- a/platform/app/src/components/ViewportGrid.tsx
+++ b/platform/app/src/components/ViewportGrid.tsx
@ -376,11 +376,11 @@ function ViewerViewportGrid(props: withAppTypes) {
        const tolerance = 0.01;

        if (x + width < 1 - tolerance) {
-          style.borderRight = '1px solid #3a3f99';
+          style.borderRight = '1px solid hsl(var(--input))';
        }

        if (y + height < 1 - tolerance) {
-          style.borderBottom = '1px solid #3a3f99';
+          style.borderBottom = '1px solid hsl(var(--input))';
        }

        return style;
@ -446,7 +446,7 @@ function ViewerViewportGrid(props: withAppTypes) {
  return (
    <div
      ref={resizeRef}
-      className="border-secondary-light h-full w-full border"
+      className="border-input h-[calc(100%-0.25rem)] w-full border"
    >
      <ViewportGrid
        numRows={numRows}
--- a/platform/core/src/types/AppTypes.ts
+++ b/platform/core/src/types/AppTypes.ts
@ -56,7 +56,6 @@ declare global {
    export type UIViewportDialogService = UIViewportDialogServiceType;
    export type PanelService = PanelServiceType;
    export type StudyPrefetcherService = StudyPrefetcherServiceType;
-    export type MultiMonitorService;

    export interface Managers {
      servicesManager?: ServicesManager;
--- a/platform/docs/src/css/custom.css
+++ b/platform/docs/src/css/custom.css
@ -26,7 +26,7 @@
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
-    --input: 236 45% 21%;
+    --input: 236 52% 30%;
    --ring: 214 98% 60%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
@ -57,7 +57,7 @@
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
-    --input: 236 45% 21%;
+    --input: 236 52% 30%;
    --ring: 214 98% 60%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
--- a/platform/ui-next/src/components/AllInOneMenu/BackItem.tsx
+++ b/platform/ui-next/src/components/AllInOneMenu/BackItem.tsx
@ -0,0 +1,29 @@
+import React from 'react';
+
+import { Icons } from '@ohif/ui-next';
+import DividerItem from './DividerItem';
+
+type BackItemProps = {
+  backLabel?: string;
+  onBackClick: () => void;
+};
+
+const BackItem = ({ backLabel, onBackClick }: BackItemProps) => {
+  return (
+    <>
+      <div
+        className="hover:bg-accent flex h-8 w-full flex-shrink-0 cursor-pointer items-center pl-1 pr-2 text-base hover:rounded"
+        onClick={onBackClick}
+      >
+        <Icons.ByName
+          name="content-prev"
+          className="ml-2 mr-2"
+        />
+        <span>{backLabel || 'Back to Display Options'}</span>
+      </div>
+      <DividerItem></DividerItem>
+    </>
+  );
+};
+
+export default BackItem;
--- a/platform/ui-next/src/components/AllInOneMenu/DividerItem.tsx
+++ b/platform/ui-next/src/components/AllInOneMenu/DividerItem.tsx
@ -0,0 +1,11 @@
+import React from 'react';
+
+const DividerItem = () => {
+  return (
+    <div className="flex h-3.5 shrink-0 items-center px-2">
+      <div className="bg-primary-dark h-[2px] w-full"></div>
+    </div>
+  );
+};
+
+export default DividerItem;
--- a/platform/ui-next/src/components/AllInOneMenu/HeaderItem.tsx
+++ b/platform/ui-next/src/components/AllInOneMenu/HeaderItem.tsx
@ -0,0 +1,15 @@
+import React, { ReactNode } from 'react';
+
+type HeaderItemProps = {
+  children: ReactNode;
+};
+
+const HeaderItem = ({ children }: HeaderItemProps) => {
+  return (
+    <div className="text-muted-foreground mx-2 flex h-6 shrink-0 items-center text-sm">
+      {children}
+    </div>
+  );
+};
+
+export default HeaderItem;
--- a/platform/ui-next/src/components/AllInOneMenu/IconMenu.tsx
+++ b/platform/ui-next/src/components/AllInOneMenu/IconMenu.tsx
@ -0,0 +1,83 @@
+import React, { useCallback, useState } from 'react';
+import OutsideClickHandler from 'react-outside-click-handler';
+import { MenuProps } from './Menu';
+import classNames from 'classnames';
+import { AllInOneMenu } from '..';
+import { Icons } from '@ohif/ui-next';
+
+export interface IconMenuProps extends MenuProps {
+  icon: string;
+  iconClassName?: string;
+  horizontalDirection?: AllInOneMenu.HorizontalDirection;
+  verticalDirection?: AllInOneMenu.VerticalDirection;
+  menuKey?: number | string;
+}
+
+/**
+ * An IconMenu allows for a div wrapped icon to be clicked to show and hide
+ * an AllInOneMenu.Menu. Based on the direction(s) specified, the menu is
+ * positioned relative to the icon.
+ *
+ * HorizontalDirection.LeftToRight - the left edges of the icon and menu are aligned
+ * HorizontalDirection.RightRoLeft - the right edges of the icon and menu are aligned
+ * VerticalDirection.TopToBottom - the top edge of the menu appears directly below the bottom edge of the icon
+ * VerticalDirection.BottomToTop - the bottom edge of the menu appears directly above the top edge of the icon
+ *
+ * For example, if an IconMenu were situated in the bottom-left corner of a container,
+ * it would be best to use BottomToTop and LeftToRight directions for it.
+ */
+export default function IconMenu({
+  icon,
+  iconClassName,
+  horizontalDirection,
+  verticalDirection,
+  children,
+  backLabel,
+  menuClassName,
+  menuStyle,
+  onVisibilityChange,
+  menuKey,
+}: IconMenuProps) {
+  const [isMenuVisible, setIsMenuVisible] = useState(false);
+
+  const toggleMenuVisibility = useCallback(() => setIsMenuVisible(isVisible => !isVisible), []);
+
+  return (
+    <OutsideClickHandler
+      onOutsideClick={toggleMenuVisibility}
+      disabled={!isMenuVisible}
+    >
+      <div className="relative">
+        <div
+          className={iconClassName}
+          onClick={toggleMenuVisibility}
+        >
+          <Icons.ByName name={icon} />
+        </div>
+        <AllInOneMenu.Menu
+          key={menuKey}
+          isVisible={isMenuVisible}
+          backLabel={backLabel}
+          menuClassName={classNames(
+            menuClassName,
+            'absolute',
+            verticalDirection === AllInOneMenu.VerticalDirection.TopToBottom
+              ? 'top-[100%]'
+              : 'bottom-[100%]',
+            horizontalDirection === AllInOneMenu.HorizontalDirection.LeftToRight
+              ? 'left-0'
+              : 'right-0'
+          )}
+          menuStyle={menuStyle}
+          onVisibilityChange={isVis => {
+            setIsMenuVisible(isVis);
+            onVisibilityChange?.(isVis);
+          }}
+          horizontalDirection={horizontalDirection}
+        >
+          {children}
+        </AllInOneMenu.Menu>
+      </div>
+    </OutsideClickHandler>
+  );
+}
--- a/platform/ui-next/src/components/AllInOneMenu/Item.tsx
+++ b/platform/ui-next/src/components/AllInOneMenu/Item.tsx
@ -0,0 +1,51 @@
+import React, { ReactNode, useCallback, useContext } from 'react';
+import { MenuContext } from './Menu';
+
+type ItemProps = {
+  label: string;
+  secondaryLabel?: string;
+  icon?: ReactNode;
+  rightIcon?: ReactNode;
+  onClick?: () => void;
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
+  useIconSpace?: boolean;
+};
+
+const Item = ({
+  label,
+  secondaryLabel,
+  icon,
+  rightIcon,
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+  useIconSpace = false,
+}: ItemProps) => {
+  const { hideMenu } = useContext(MenuContext);
+
+  const onClickHandler = useCallback(() => {
+    hideMenu();
+    onClick?.();
+  }, [hideMenu, onClick]);
+
+  return (
+    <div
+      className="hover:bg-accent flex h-8 w-full flex-shrink-0 cursor-pointer items-center px-2 text-base leading-[18px] hover:rounded"
+      onClick={onClickHandler}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+    >
+      {(icon || useIconSpace) && (
+        <div className="flex w-7 flex-shrink-0 items-center justify-center">{icon}</div>
+      )}
+      <span className="flex-grow">{label}</span>
+      {secondaryLabel && (
+        <span className="text-muted-foreground ml-2 flex-shrink-0">{secondaryLabel}</span>
+      )}
+      {rightIcon && <div className="ml-2 flex-shrink-0">{rightIcon}</div>}
+    </div>
+  );
+};
+
+export default Item;
--- a/platform/ui-next/src/components/AllInOneMenu/ItemPanel.tsx
+++ b/platform/ui-next/src/components/AllInOneMenu/ItemPanel.tsx
@ -0,0 +1,38 @@
+import React, { ReactNode, useContext, useEffect } from 'react';
+import { MenuContext } from './Menu';
+import { ScrollArea } from '@ohif/ui-next';
+
+type ItemPanelProps = {
+  label?: string;
+  index?: number;
+  children: ReactNode;
+  maxHeight?: string;
+  className?: string;
+};
+
+const ItemPanel = ({
+  label,
+  index = 0,
+  children,
+  maxHeight = '250px',
+  className,
+}: ItemPanelProps) => {
+  const { addItemPanel, activePanelIndex } = useContext(MenuContext);
+
+  useEffect(() => {
+    addItemPanel(index, label);
+  }, [addItemPanel, index, label]);
+
+  return (
+    activePanelIndex === index && (
+      <ScrollArea
+        style={{ scrollbarGutter: 'auto', maxHeight, height: '100%' }}
+        className={`flex flex-col ${className || ''}`}
+      >
+        {children}
+      </ScrollArea>
+    )
+  );
+};
+
+export default ItemPanel;
--- a/platform/ui-next/src/components/AllInOneMenu/Menu.tsx
+++ b/platform/ui-next/src/components/AllInOneMenu/Menu.tsx
@ -0,0 +1,187 @@
+import React, { createContext, ReactNode, useCallback, useEffect, useState } from 'react';
+
+import DividerItem from './DividerItem';
+import PanelSelector from './PanelSelector';
+import classNames from 'classnames';
+import BackItem from './BackItem';
+
+/**
+ * The vertical direction that the menu will be opened/used with.
+ *
+ * A TopToBottom menu would be used for cases where the menu is opened "near"
+ * the top edge of its container. Likewise a BottomToTop menu would be used
+ * for cases where the menu is opened "near" the bottom edge of its container.
+ *
+ * See IconMenu for more information.
+ */
+export enum VerticalDirection {
+  TopToBottom,
+  BottomToTop,
+}
+
+/**
+ * The horizontal direction that the menu is opened/used with.
+ * This direction dictates the general direction sub-menus and
+ * back-to-menus are opened with. For example, a RightToLeft menu
+ * will have sub-menu items indicated with a left pointing chevron
+ * and aligned with the left edge of the menu. Similarly back-to items of a
+ * RightToLeft menu are indicated with a right pointing chevron and
+ * aligned with the right edge of the menu.
+ *
+ * It is also worth noting that a LeftToRight menu would be used for
+ * cases where a menu is opened "near" the left edge of its container.
+ * Likewise, a RightToLeft menu would be used for cases where a menu is opened
+ * "near" the right edge of its container.
+ *
+ * See IconMenu for more information.
+ */
+export enum HorizontalDirection {
+  LeftToRight,
+  RightToLeft,
+}
+
+export interface MenuProps {
+  menuStyle?: unknown;
+  menuClassName?: string;
+  isVisible?: boolean;
+  preventHideMenu?: boolean;
+  backLabel?: string;
+  headerComponent?: ReactNode;
+  showHeaderDivider?: boolean;
+  activePanelIndex?: number;
+  onVisibilityChange?: (isVisible: boolean) => void;
+  horizontalDirection?: HorizontalDirection;
+  children: ReactNode;
+}
+type MenuContextProps = {
+  showSubMenu: (subMenuProps: MenuProps) => void;
+  hideMenu: () => void;
+  addItemPanel: (index: number, label: string) => void;
+  horizontalDirection: HorizontalDirection;
+  activePanelIndex: number;
+};
+
+type MenuPathState = {
+  props: MenuProps;
+  activePanelIndex: number;
+};
+
+export const MenuContext = createContext<MenuContextProps>(null);
+
+const Menu = (props: MenuProps) => {
+  const {
+    isVisible,
+    onVisibilityChange,
+    activePanelIndex,
+    preventHideMenu,
+    menuClassName,
+    menuStyle,
+    horizontalDirection = HorizontalDirection.LeftToRight,
+  } = props;
+
+  const [isMenuVisible, setIsMenuVisible] = useState(isVisible);
+
+  // The menuPath is an array consisting of this top Menu and every SubMenu
+  // that has been traversed/opened by the user with the last item in the array
+  // being the current (sub)menu that is currently visible. This allows for the previously
+  // viewed menus to be returned to via the Back button at the top of the menu.
+  const [menuPath, setMenuPath] = useState<Array<MenuPathState>>([
+    { props, activePanelIndex: activePanelIndex || 0 },
+  ]);
+  const [itemPanelLabels, setItemPanelLabels] = useState<Array<string>>([]);
+
+  const hideMenu = useCallback(() => {
+    if (preventHideMenu) {
+      return;
+    }
+    setMenuPath(path => [path[0]]);
+    setItemPanelLabels([]);
+    setIsMenuVisible(false);
+    onVisibilityChange?.(false);
+  }, [preventHideMenu, onVisibilityChange]);
+
+  useEffect(() => {
+    if (isVisible) {
+      setIsMenuVisible(isVisible);
+      onVisibilityChange?.(isVisible);
+    } else {
+      hideMenu();
+    }
+  }, [hideMenu, isVisible, onVisibilityChange]);
+
+  const showSubMenu = useCallback((subMenuProps: MenuProps) => {
+    setMenuPath(path => {
+      return [
+        ...path,
+        { props: subMenuProps, activePanelIndex: subMenuProps.activePanelIndex || 0 },
+      ];
+    });
+    setItemPanelLabels([]);
+  }, []);
+
+  const addItemPanel = useCallback((index, label) => {
+    setItemPanelLabels(labels => {
+      return [...labels.slice(0, index), label, ...labels.slice(index + 1, labels.length)];
+    });
+  }, []);
+
+  const onActivePanelIndexChange = useCallback(index => {
+    setMenuPath(path => {
+      return [
+        ...path.slice(0, path.length - 1),
+        { ...path[path.length - 1], activePanelIndex: index },
+      ];
+    });
+  }, []);
+
+  const onBackClick = useCallback(() => {
+    setMenuPath(path => [...path.slice(0, path.length - 1)]);
+    setItemPanelLabels([]);
+  }, []);
+
+  const { props: currentMenuProps, activePanelIndex: currentMenuActivePanelIndex } =
+    menuPath[menuPath.length - 1];
+
+  return (
+    <>
+      <MenuContext.Provider
+        value={{
+          showSubMenu,
+          hideMenu,
+          addItemPanel,
+          activePanelIndex: currentMenuActivePanelIndex,
+          horizontalDirection,
+        }}
+      >
+        {isMenuVisible && (
+          <div
+            className={classNames(
+              'bg-popover/90 text-foreground flex select-none flex-col rounded px-1 py-1.5',
+              menuClassName
+            )}
+            style={menuStyle}
+          >
+            {menuPath.length > 1 && (
+              <BackItem
+                backLabel={menuPath[menuPath.length - 2].props.backLabel}
+                onBackClick={onBackClick}
+              />
+            )}
+            {itemPanelLabels.length > 1 && (
+              <PanelSelector
+                panelLabels={itemPanelLabels}
+                activeIndex={currentMenuActivePanelIndex}
+                onActiveIndexChange={onActivePanelIndexChange}
+              ></PanelSelector>
+            )}
+            {currentMenuProps.headerComponent}
+            {currentMenuProps.showHeaderDivider && <DividerItem />}
+            {currentMenuProps.children}
+          </div>
+        )}
+      </MenuContext.Provider>
+    </>
+  );
+};
+
+export default Menu;
--- a/platform/ui-next/src/components/AllInOneMenu/PanelSelector.tsx
+++ b/platform/ui-next/src/components/AllInOneMenu/PanelSelector.tsx
@ -0,0 +1,32 @@
+import React, { ReactNode } from 'react';
+import { Tabs, TabsList, TabsTrigger } from '../Tabs';
+
+type PanelSelectorProps = {
+  panelLabels: Array<ReactNode>;
+  onActiveIndexChange: (index: number) => void;
+  activeIndex: number;
+};
+
+const PanelSelector = ({ panelLabels, onActiveIndexChange, activeIndex }: PanelSelectorProps) => {
+  return (
+    <div className="mx-2 my-1 flex justify-center">
+      <Tabs
+        value={String(activeIndex)}
+        onValueChange={val => onActiveIndexChange(parseInt(val, 10))}
+      >
+        <TabsList>
+          {panelLabels.map((panelLabel, index) => (
+            <TabsTrigger
+              key={index}
+              value={String(index)}
+            >
+              {panelLabel}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+      </Tabs>
+    </div>
+  );
+};
+
+export default PanelSelector;
--- a/platform/ui-next/src/components/AllInOneMenu/SubMenu.tsx
+++ b/platform/ui-next/src/components/AllInOneMenu/SubMenu.tsx
@ -0,0 +1,36 @@
+import React, { useCallback, useContext } from 'react';
+import { MenuContext, MenuProps } from './Menu';
+import { Icons } from '@ohif/ui-next';
+export interface SubMenuProps extends MenuProps {
+  itemLabel: string;
+  onClick?: () => void;
+  itemIcon?: string;
+}
+
+const SubMenu = (props: SubMenuProps) => {
+  const { showSubMenu } = useContext(MenuContext);
+
+  const onClickHandler = useCallback(() => {
+    showSubMenu(props);
+    props.onClick?.();
+  }, [showSubMenu, props]);
+
+  return (
+    <div
+      className="hover:bg-accent flex h-8 w-full cursor-pointer items-center px-2 text-base hover:rounded"
+      onClick={onClickHandler}
+    >
+      {props.itemIcon && (
+        <div className="flex w-7 flex-shrink-0 items-center justify-center">
+          <Icons.ByName name={props.itemIcon}></Icons.ByName>
+        </div>
+      )}
+      <span className="flex-grow">{props.itemLabel}</span>
+      <div className="ml-2 flex-shrink-0">
+        <Icons.ByName name="content-next"></Icons.ByName>
+      </div>
+    </div>
+  );
+};
+
+export default SubMenu;
--- a/platform/ui-next/src/components/AllInOneMenu/index.ts
+++ b/platform/ui-next/src/components/AllInOneMenu/index.ts
@ -0,0 +1,42 @@
+import Menu, { VerticalDirection, HorizontalDirection } from './Menu';
+import SubMenu from './SubMenu';
+import BackItem from './BackItem';
+import HeaderItem from './HeaderItem';
+import DividerItem from './DividerItem';
+import IconMenu from './IconMenu';
+import ItemPanel from './ItemPanel';
+import PanelSelector from './PanelSelector';
+import Item from './Item';
+
+// Export enums
+export { VerticalDirection, HorizontalDirection };
+
+// Export components
+export {
+  Menu,
+  SubMenu,
+  BackItem,
+  HeaderItem,
+  DividerItem,
+  IconMenu,
+  ItemPanel,
+  PanelSelector,
+  Item,
+};
+
+// Namespace for components and enums
+const AllInOneMenu = {
+  Menu,
+  SubMenu,
+  BackItem,
+  HeaderItem,
+  DividerItem,
+  IconMenu,
+  ItemPanel,
+  PanelSelector,
+  Item,
+  VerticalDirection,
+  HorizontalDirection,
+};
+
+export default AllInOneMenu;
--- a/platform/ui-next/src/components/DropdownMenu/DropdownMenu.tsx
+++ b/platform/ui-next/src/components/DropdownMenu/DropdownMenu.tsx
@ -46,7 +46,7 @@ const DropdownMenuSubContent = React.forwardRef<
  <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',
+      '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/50 z-50 min-w-[8rem] overflow-hidden rounded border p-1 shadow-lg',
      className
    )}
    {...props}
@ -68,7 +68,7 @@ const DropdownMenuContent = React.forwardRef<
        props.onKeyDown?.(e);
      }}
      className={cn(
-        'bg-popover text-popover-foreground border-input z-50 min-w-[8rem] overflow-hidden rounded border p-1 shadow-md',
+        'bg-popover text-popover-foreground border-input/50 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
      )}
--- a/platform/ui-next/src/components/ScrollArea/ScrollArea.tsx
+++ b/platform/ui-next/src/components/ScrollArea/ScrollArea.tsx
@ -11,6 +11,7 @@ import { Icons } from '../Icons';
 interface ScrollAreaProps extends React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {
  /** Flag to show/hide scroll indicator arrows at top and bottom */
  showArrows?: boolean;
+  type?: 'auto' | 'always' | 'scroll';
 }

 /**
@ -56,6 +57,7 @@ const ScrollArea = React.forwardRef<
    <ScrollAreaPrimitive.Root
      ref={ref}
      className={cn('relative h-full overflow-hidden', className)}
+      type={props.type || 'auto'}
      {...props}
    >
      <ScrollAreaPrimitive.Viewport
--- a/platform/ui-next/src/components/Viewport/ImageScrollbar.module.css
+++ b/platform/ui-next/src/components/Viewport/ImageScrollbar.module.css
@ -0,0 +1,85 @@
+/* Scrollbar container */
+.scrollbarContainer {
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 100%;
+  padding: 5px 5px 0 5px;
+  z-index: 10;
+}
+
+.scrollbarInner {
+  position: relative;
+  height: 100%;
+  width: 11px;
+}
+
+/* Apply these styles to any range input inside our component */
+.scrollbarInput {
+  position: absolute;
+  left: 12px;
+  top: 0;
+  height: 12px;
+  transform: rotate(90deg);
+  transform-origin: top left;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-color: transparent;
+  padding: 0;
+}
+
+/* Thumb styles for WebKit browsers - more specific selector */
+input[type='range'].scrollbarInput::-webkit-slider-thumb {
+  -webkit-appearance: none !important;
+  background-color: hsl(var(--input));
+  border: none;
+  border-radius: 57px;
+  cursor: -webkit-grab;
+  height: 8px;
+  margin-top: -4px;
+  width: 32px;
+}
+
+input[type='range'].scrollbarInput::-webkit-slider-thumb:active,
+input[type='range'].scrollbarInput::-webkit-slider-thumb:hover {
+  background-color: hsl(var(--primary));
+  cursor: -webkit-grabbing;
+}
+
+/* Thumb styles for Firefox - more specific selector */
+input[type='range'].scrollbarInput::-moz-range-thumb {
+  background-color: hsl(var(--input));
+  border: none;
+  border-radius: 57px;
+  cursor: -moz-grab;
+  height: 12px;
+  width: 39px;
+}
+
+input[type='range'].scrollbarInput::-moz-range-thumb:active,
+input[type='range'].scrollbarInput::-moz-range-thumb:hover {
+  background-color: hsl(var(--primary));
+  cursor: -moz-grabbing;
+}
+
+/* Track styles for WebKit browsers - more specific selector */
+input[type='range'].scrollbarInput::-webkit-slider-runnable-track {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  height: 5px;
+}
+
+/* Track styles for Firefox - more specific selector */
+input[type='range'].scrollbarInput::-moz-range-track {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  height: 2px;
+}
+
+/* Ensure focus doesn't show an outline */
+.scrollbarInput:focus {
+  outline: none;
+}
--- a/platform/ui-next/src/components/Viewport/ImageScrollbar.tsx
+++ b/platform/ui-next/src/components/Viewport/ImageScrollbar.tsx
@ -0,0 +1,72 @@
+import React, { useCallback } from 'react';
+import { cn } from '../../lib/utils';
+import styles from './ImageScrollbar.module.css';
+
+export interface ImageScrollbarProps {
+  value: number;
+  max: number;
+  height: string;
+  onChange: (value: number) => void;
+  onContextMenu?: (e: React.MouseEvent) => void;
+  className?: string;
+}
+
+export const ImageScrollbar: React.FC<ImageScrollbarProps> = ({
+  value,
+  max,
+  height,
+  onChange,
+  onContextMenu = e => e.preventDefault(),
+  className = '',
+}) => {
+  if (max === 0) {
+    return null;
+  }
+
+  const style = {
+    width: height, // This is intentional for the rotation
+  };
+
+  const handleChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const intValue = parseInt(event.target.value, 10);
+      onChange(intValue);
+    },
+    [onChange]
+  );
+
+  const handleKeyDown = useCallback((event: React.KeyboardEvent) => {
+    // We don't allow direct keyboard navigation (arrow keys)
+    const keys = {
+      DOWN: 40,
+      UP: 38,
+    };
+
+    if (event.which === keys.DOWN || event.which === keys.UP) {
+      event.preventDefault();
+    }
+  }, []);
+
+  return (
+    <div
+      className={cn(styles.scrollbarContainer, className)}
+      onContextMenu={onContextMenu}
+    >
+      <div className={styles.scrollbarInner}>
+        <input
+          className={cn(styles.scrollbarInput, 'mousetrap')}
+          style={style}
+          type="range"
+          min="0"
+          max={max}
+          step="1"
+          value={value}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          aria-label="Image navigation scrollbar"
+          data-testid="image-scrollbar-input"
+        />
+      </div>
+    </div>
+  );
+};
--- a/platform/ui-next/src/components/Viewport/ViewportActionArrows.tsx
+++ b/platform/ui-next/src/components/Viewport/ViewportActionArrows.tsx
@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { Icons } from '@ohif/ui-next';

 const arrowClasses =
-  'cursor-pointer flex items-center justify-center shrink-0 text-primary-light active:text-white hover:bg-secondary-light/60 rounded';
+  'cursor-pointer flex items-center justify-center shrink-0 text-highlight active:text-foreground hover:bg-primary/30 rounded';

 /**
 * A small set of left/right arrow icons for stepping through slices or series.
--- a/platform/ui-next/src/components/Viewport/ViewportActionCorners.tsx
+++ b/platform/ui-next/src/components/Viewport/ViewportActionCorners.tsx
@ -13,7 +13,7 @@ export enum ViewportActionCornersLocations {
  bottomRight,
 }

-const commonClasses = 'pointer-events-auto flex items-center gap-1';
+const commonClasses = 'pointer-events-auto flex items-center';
 const locationClasses = {
  [ViewportActionCornersLocations.topLeft]: classNames(
    commonClasses,
@ -21,7 +21,7 @@ const locationClasses = {
  ),
  [ViewportActionCornersLocations.topRight]: classNames(
    commonClasses,
-    'absolute top-[4px] right-[4px] right-viewport-scrollbar'
+    'absolute top-[4px] right-[16px] right-viewport-scrollbar'
  ),
  [ViewportActionCornersLocations.bottomLeft]: classNames(
    commonClasses,
@ -64,4 +64,4 @@ ViewportActionCorners.propTypes = {
  cornerComponents: PropTypes.object.isRequired,
 };

-export { ViewportActionCorners };
+export { ViewportActionCorners };
--- a/platform/ui-next/src/components/Viewport/ViewportOverlay.css
+++ b/platform/ui-next/src/components/Viewport/ViewportOverlay.css
@ -2,7 +2,7 @@
  display: none;
 }
 .ViewportOverlay {
-  color: #9ccef9;
+  color: hsl(var(--highlight));
 }
 .ViewportOverlay .overlay-element {
  position: absolute;
@ -11,12 +11,12 @@
  pointer-events: none;
 }
 .overlay-top {
-  top: 28px;
+  top: 2.15rem;
 }
 .overlay-bottom {
-  bottom: 3px;
+  bottom: 1rem;
 }

 .overlay-text {
-  text-shadow: 0.8px 0.8px 0.5px rgba(0, 0, 0, 0.75);
+  text-shadow: 0.8px 0.8px 0.5px rgba(0, 0, 0, 0.65);
 }
--- a/platform/ui-next/src/components/Viewport/ViewportOverlay.tsx
+++ b/platform/ui-next/src/components/Viewport/ViewportOverlay.tsx
@ -17,17 +17,11 @@ const classes = {
  bottomLeft: 'overlay-bottom left-viewport',
 };

-function ViewportOverlay({
-  topLeft,
-  topRight,
-  bottomRight,
-  bottomLeft,
-  color = 'text-primary-light',
-}) {
+function ViewportOverlay({ topLeft, topRight, bottomRight, bottomLeft, color = 'text-highlight' }) {
  const overlay = 'absolute pointer-events-none viewport-overlay';

  return (
-    <div className={classNames(color, 'overlay-text text-[13px] leading-5')}>
+    <div className={classNames(color, 'overlay-text text-base leading-5')}>
      <div
        data-cy="viewport-overlay-top-left"
        className={classNames(overlay, classes.topLeft)}
@ -37,14 +31,14 @@ function ViewportOverlay({
      <div
        data-cy="viewport-overlay-top-right"
        className={classNames(overlay, classes.topRight)}
-        style={{ transform: 'translateX(-8px)' }}
+        style={{ transform: 'translateX(9px)' }}
      >
        {topRight}
      </div>
      <div
        data-cy="viewport-overlay-bottom-right"
        className={classNames(overlay, classes.bottomRight)}
-        style={{ transform: 'translateX(-8px)' }}
+        style={{ transform: 'translateX(6px)' }}
      >
        {bottomRight}
      </div>
--- a/platform/ui-next/src/components/Viewport/ViewportPane.tsx
+++ b/platform/ui-next/src/components/Viewport/ViewportPane.tsx
@ -68,8 +68,8 @@ function ViewportPane({
      {/* Border overlay */}
      <div
        className={classNames('pointer-events-none absolute inset-0', {
-          'border-primary-light border': isActive,
-          'group-hover:border-primary-light/70 border border-transparent': !isActive,
+          'border-highlight rounded-md border': isActive,
+          'group-hover:border-highlight/50 rounded-md border border-transparent': !isActive,
        })}
      />
    </div>
--- a/platform/ui-next/src/components/Viewport/index.ts
+++ b/platform/ui-next/src/components/Viewport/index.ts
@ -6,3 +6,4 @@ export { ViewportPane } from './ViewportPane';
 export { ViewportActionCorners, ViewportActionCornersLocations } from './ViewportActionCorners';
 export { ViewportOverlay } from './ViewportOverlay';
 export { ViewportGrid } from './ViewportGrid';
+export { ImageScrollbar } from './ImageScrollbar';
--- a/platform/ui-next/src/components/index.ts
+++ b/platform/ui-next/src/components/index.ts
@ -81,8 +81,6 @@ import {
 } from './DropdownMenu';
 import { Onboarding } from './Onboarding';
 import { DoubleSlider } from './DoubleSlider';
-export { DataRow } from './DataRow';
-export { MeasurementTable } from './MeasurementTable';
 import {
  SegmentationTable,
  useSegmentationTableContext,
@ -92,7 +90,6 @@ import {
 import { Toaster, toast } from './Sonner';
 import { StudySummary } from './StudySummary';
 import { ErrorBoundary } from './Errorboundary';
-export * from './ColorCircle';
 import { Header } from './Header';
 import { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } from './Card';
 import {
@ -105,6 +102,7 @@ import {
  ViewportActionCornersLocations,
  ViewportOverlay,
  ViewportGrid,
+  ImageScrollbar,
 } from './Viewport';
 import {
  ToolButton,
@ -115,6 +113,11 @@ import {
  ToolButtonListDivider,
 } from './ToolButton';
 import { ToolSettings } from './OHIFToolSettings';
+export { DataRow } from './DataRow';
+export { MeasurementTable } from './MeasurementTable';
+export * from './ColorCircle';
+export { default as AllInOneMenu } from './AllInOneMenu';
+export * from './AllInOneMenu';

 // Segmentation Context Exports
 export { useSegmentationTableContext, useSegmentationExpanded, useSegmentStatistics };
@ -232,6 +235,7 @@ export {
  ViewportActionCornersLocations,
  ViewportOverlay,
  ViewportGrid,
+  ImageScrollbar,
  Clipboard,
  ToolButton,
  ToolButtonList,
--- a/platform/ui-next/src/tailwind.css
+++ b/platform/ui-next/src/tailwind.css
@ -26,7 +26,7 @@
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
-    --input: 236 45% 21%;
+    --input: 236 52% 30%;
    --ring: 214 98% 60%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
@ -69,7 +69,7 @@
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
-    --input: 236 45% 21%;
+    --input: 236 52% 30%;
    --ring: 214 98% 60%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
@ -252,4 +252,4 @@ input[type='number']::-webkit-outer-spin-button {

 input[type='number'] {
  -moz-appearance: textfield; /* For Firefox */
-}
+}
--- a/platform/ui/src/components/AllInOneMenu/DividerItem.tsx
+++ b/platform/ui/src/components/AllInOneMenu/DividerItem.tsx
@ -2,8 +2,8 @@ import React from 'react';

 const DividerItem = () => {
  return (
-    <div className="flex h-3.5 shrink-0 items-center px-2">
-      <div className="bg-primary-dark h-[2px] w-full"></div>
+    <div className="flex h-3.5 shrink-0 items-center px-0">
+      <div className="bg-background h-px w-full"></div>
    </div>
  );
 };
--- a/platform/ui/src/tailwind.css
+++ b/platform/ui/src/tailwind.css
@ -11,6 +11,8 @@
  }
 }

+
+
 /* Truncate 2 lines utility */
 .truncate-2-lines {
  overflow: hidden;
@ -49,7 +51,7 @@
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
-    --input: 236 45% 21%;
+    --input: 236 52% 30%;
    --ring: 214 98% 60%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
@ -92,7 +94,7 @@
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
-    --input: 236 45% 21%;
+    --input: 236 52% 30%;
    --ring: 214 98% 60%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
@ -100,4 +102,4 @@
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
-}
+}