diff --git a/extensions/cornerstone/src/components/ViewportOrientationMenu/ViewportOrientationMenu.tsx b/extensions/cornerstone/src/components/ViewportOrientationMenu/ViewportOrientationMenu.tsx
index 6c1e4f8f6..56dac15b5 100644
--- a/extensions/cornerstone/src/components/ViewportOrientationMenu/ViewportOrientationMenu.tsx
+++ b/extensions/cornerstone/src/components/ViewportOrientationMenu/ViewportOrientationMenu.tsx
@@ -156,65 +156,65 @@ function ViewportOrientationMenu({
       >
         <Button
           variant="ghost"
-          className="flex h-[28px] flex-shrink-0 items-center justify-start self-stretch"
+          className="flex h-7 w-full flex-shrink-0 items-center justify-start self-stretch px-1 py-0"
           onClick={() => handleOrientationChange('axial')}
         >
-          <span className="mr-0 flex w-4 items-center justify-center">
+          <div className="mr-1 flex w-6 items-center justify-start">
             {currentOrientation === 'axial' ? (
-              <Icons.Checked className="text-primary h-5 w-5" />
+              <Icons.Checked className="text-primary h-6 w-6" />
             ) : null}
-          </span>
-          <span className="flex-1 text-left">Axial</span>
+          </div>
+          <div className="flex-1 text-left">Axial</div>
         </Button>
         <Button
           variant="ghost"
-          className="flex h-[28px] flex-shrink-0 items-center justify-start self-stretch"
+          className="flex h-7 w-full flex-shrink-0 items-center justify-start self-stretch px-1 py-0"
           onClick={() => handleOrientationChange('sagittal')}
         >
-          <span className="mr-0 flex w-4 items-center justify-center">
+          <div className="mr-1 flex w-6 items-center justify-start">
             {currentOrientation === 'sagittal' ? (
-              <Icons.Checked className="text-primary h-5 w-5" />
+              <Icons.Checked className="text-primary h-6 w-6" />
             ) : null}
-          </span>
-          <span className="flex-1 text-left">Sagittal</span>
+          </div>
+          <div className="flex-1 text-left">Sagittal</div>
         </Button>
         <Button
           variant="ghost"
-          className="flex h-[28px] flex-shrink-0 items-center justify-start self-stretch"
+          className="flex h-7 w-full flex-shrink-0 items-center justify-start self-stretch px-1 py-0"
           onClick={() => handleOrientationChange('coronal')}
         >
-          <span className="mr-0 flex w-4 items-center justify-center">
+          <div className="mr-1 flex w-6 items-center justify-start">
             {currentOrientation === 'coronal' ? (
-              <Icons.Checked className="text-primary h-5 w-5" />
+              <Icons.Checked className="text-primary h-6 w-6" />
             ) : null}
-          </span>
-          <span className="flex-1 text-left">Coronal</span>
+          </div>
+          <div className="flex-1 text-left">Coronal</div>
         </Button>
         <Button
           variant="ghost"
-          className="flex h-[28px] flex-shrink-0 items-center justify-start self-stretch"
+          className="flex h-7 w-full flex-shrink-0 items-center justify-start self-stretch px-1 py-0"
           onClick={() => handleOrientationChange('acquisition')}
         >
-          <span className="mr-0 flex w-4 items-center justify-center">
+          <div className="mr-1 flex w-6 items-center justify-start">
             {currentOrientation === 'acquisition' ? (
-              <Icons.Checked className="text-primary h-5 w-5" />
+              <Icons.Checked className="text-primary h-6 w-6" />
             ) : null}
-          </span>
-          <span className="flex-1 text-left">Acquisition</span>
+          </div>
+          <div className="flex-1 text-left">Acquisition</div>
         </Button>
         {/* Divider */}
-        <div className="my-2 border-t border-white/20" />
+        <div className="mx-1 my-2 border-t border-white/20" />
         <Button
           variant="ghost"
-          className="flex h-[28px] flex-shrink-0 items-center justify-start self-stretch"
+          className="flex h-7 w-full flex-shrink-0 items-center justify-start self-stretch px-1 py-0"
           onClick={() => handleOrientationChange('reformat')}
         >
-          <span className="mr-0 flex w-4 items-center justify-center">
+          <div className="mr-1 flex w-6 items-center justify-start">
             {currentOrientation === 'reformat' ? (
-              <Icons.Checked className="text-primary h-5 w-5" />
+              <Icons.Checked className="text-primary h-6 w-6" />
             ) : null}
-          </span>
-          <span className="flex-1 text-left">Reformat</span>
+          </div>
+          <div className="flex-1 text-left">Reformat</div>
         </Button>
       </PopoverContent>
     </Popover>
diff --git a/platform/ui-next/src/components/Icons/Sources/Checked.tsx b/platform/ui-next/src/components/Icons/Sources/Checked.tsx
index 83c8fc57e..c88b75e0d 100644
--- a/platform/ui-next/src/components/Icons/Sources/Checked.tsx
+++ b/platform/ui-next/src/components/Icons/Sources/Checked.tsx
@@ -4,14 +4,14 @@ import type { IconProps } from '../types';
 export const Checked = (props: IconProps) => (
   <svg
     {...props}
-    width="24"
+    width="20"
     height="24"
-    viewBox="0 0 24 24"
+    viewBox="0 0 20 24"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M16 9L11.3333 15L8 12.4737"
+      d="M14 9L9.3333 15L6 12.4737"
       stroke="currentColor"
       strokeWidth="1.5"
       strokeLinecap="round"