diff --git a/lib/components/Dialog/DialogListItem.stories.tsx b/lib/components/Dialog/DialogListItem.stories.tsx
index 1179b45..466452d 100644
--- a/lib/components/Dialog/DialogListItem.stories.tsx
+++ b/lib/components/Dialog/DialogListItem.stories.tsx
@@ -176,7 +176,6 @@ export const SelectableSelected = (args) => {
   });
 
   const onSelect = ({ id }) => {
-    console.log('XX', id);
     setItems((prevState) => {
       return {
         ...prevState,
@@ -196,6 +195,7 @@ export const SelectableSelected = (args) => {
             <DialogListItem
               {...args}
               title={item.title}
+              onClick={item.selected ? () => onSelect(item) : null}
               selected={item.selected}
               select={{ checked: item?.selected, onChange: () => onSelect(item) }}
             />
diff --git a/lib/components/Dialog/DialogSelect.tsx b/lib/components/Dialog/DialogSelect.tsx
index 5b23e3b..a091130 100644
--- a/lib/components/Dialog/DialogSelect.tsx
+++ b/lib/components/Dialog/DialogSelect.tsx
@@ -17,9 +17,7 @@ export const DialogSelect = ({ checked = false, onChange, className }: DialogSel
   return (
     <label className={cx(styles.label, className)}>
       <input type="checkbox" checked={checked} onChange={onChange} className={styles.input} />
-      <div className={styles.checkbox}>
-        <CheckboxIcon checked={checked} />
-      </div>
+      <CheckboxIcon hover={true} checked={checked} className={styles.icon} />
     </label>
   );
 };
diff --git a/lib/components/Dialog/dialogHeadings.module.css b/lib/components/Dialog/dialogHeadings.module.css
index e23ffc3..6b78264 100644
--- a/lib/components/Dialog/dialogHeadings.module.css
+++ b/lib/components/Dialog/dialogHeadings.module.css
@@ -22,8 +22,3 @@
   font-weight: 500;
   color: var(--neutral-text-default);
 }
-
-.headings[data-size="xs"] .avatar,
-.headings[data-size="sm"] .avatar {
-  display: none;
-}
diff --git a/lib/components/Dialog/dialogListItemBase.module.css b/lib/components/Dialog/dialogListItemBase.module.css
index a95bfd7..2103656 100644
--- a/lib/components/Dialog/dialogListItemBase.module.css
+++ b/lib/components/Dialog/dialogListItemBase.module.css
@@ -15,7 +15,7 @@
   padding: 1rem;
 }
 
-.link:hover {
+.item[aria-selected="false"] .link:hover {
   outline: 2px solid;
   outline-color: var(--global-base-default);
 }
@@ -24,5 +24,5 @@
   position: absolute;
   top: 0;
   right: 0;
-  margin: 10px;
+  margin: 0.375rem;
 }
diff --git a/lib/components/Dialog/dialogSelect.module.css b/lib/components/Dialog/dialogSelect.module.css
index 376bdb6..01635ba 100644
--- a/lib/components/Dialog/dialogSelect.module.css
+++ b/lib/components/Dialog/dialogSelect.module.css
@@ -3,7 +3,7 @@
   align-items: center;
   justify-content: center;
   background-color: transparent;
-  padding: 9px;
+  padding: .75rem;
   border-radius: 50%;
   border: 0;
 }
@@ -17,27 +17,18 @@
   opacity: 0;
 }
 
-.checkbox {
-  /*
-  border: 2px solid;
-  border-radius: 2px;
-  */
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.icon {
+  font-size: 1.25rem;
 }
 
-.label > input:checked + .checkbox {
-  border-color: var(--theme-base-default);
-  background-color: var(--theme-base-default);
-  color: var(--theme-background-subtle);
+.icon {
+  color: var(--theme-base-default);
 }
 
-.label > input:checked + .checkbox {
-  outline: 1px solid red;
+.icon [data-hover="true"] {
+  opacity: 0;
 }
 
-.icon {
-  width: 1.5rem;
-  height: 1.5rem;
+.label:hover [data-hover="true"] {
+  opacity: 1;
 }
diff --git a/lib/components/Icon/CheckboxCheckedIcon.tsx b/lib/components/Icon/CheckboxCheckedIcon.tsx
new file mode 100644
index 0000000..b12fe9e
--- /dev/null
+++ b/lib/components/Icon/CheckboxCheckedIcon.tsx
@@ -0,0 +1,28 @@
+export type CheckboxCheckedIconProps = {
+  title?: string;
+  className?: string;
+};
+
+/**
+ * Checkbox for lists and list items
+ */
+export const CheckboxCheckedIcon = ({ title = 'Checkbox', className }: CheckboxCheckedIconProps) => {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <title>{title}</title>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2.5 0C1.11929 0 0 1.11929 0 2.5V21.5C0 22.8807 1.11929 24 2.5 24H21.5C22.8807 24 24 22.8807 24 21.5V2.5C24 1.11929 22.8807 0 21.5 0H2.5ZM18.5547 5.76815C19.0142 6.07451 19.1384 6.69538 18.8321 7.1549L11.6321 17.9549C11.4659 18.2042 11.1967 18.3658 10.8985 18.3953C10.6004 18.4249 10.3047 18.3192 10.0929 18.1073L5.29289 13.3073C4.90237 12.9168 4.90237 12.2836 5.29289 11.8931C5.68342 11.5026 6.31658 11.5026 6.70711 11.8931L10.6446 15.8306L17.1679 6.0455C17.4743 5.58598 18.0952 5.4618 18.5547 5.76815Z"
+        fill="black"
+      />
+    </svg>
+  );
+};
diff --git a/lib/components/Icon/CheckboxIcon.stories.ts b/lib/components/Icon/CheckboxIcon.stories.ts
index a020d96..1211a72 100644
--- a/lib/components/Icon/CheckboxIcon.stories.ts
+++ b/lib/components/Icon/CheckboxIcon.stories.ts
@@ -18,6 +18,13 @@ export const Default: Story = {
   },
 };
 
+export const Hover: Story = {
+  args: {
+    checked: false,
+    hover: true,
+  },
+};
+
 export const Checked: Story = {
   args: {
     checked: true,
diff --git a/lib/components/Icon/CheckboxIcon.tsx b/lib/components/Icon/CheckboxIcon.tsx
index f0d8cbc..5ae6e8a 100644
--- a/lib/components/Icon/CheckboxIcon.tsx
+++ b/lib/components/Icon/CheckboxIcon.tsx
@@ -1,8 +1,9 @@
-import cx from 'classnames';
-import styles from './checkboxIcon.module.css';
+import { CheckboxCheckedIcon } from './CheckboxCheckedIcon';
+import { CheckboxUncheckedIcon } from './CheckboxUncheckedIcon';
 
 export type CheckboxIconProps = {
   checked: boolean;
+  hover?: boolean;
   title?: string;
   className?: string;
 };
@@ -10,20 +11,7 @@ export type CheckboxIconProps = {
 /**
  * Checkbox for lists and list items
  */
-export const CheckboxIcon = ({ checked, title, className }: CheckboxIconProps) => {
-  return (
-    <div data-checked={checked} className={cx(styles.checkbox, className)}>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        strokeWidth={2.5}
-        stroke="currentColor"
-        className={styles.icon}
-      >
-        <title>{title}</title>
-        <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
-      </svg>
-    </div>
-  );
+export const CheckboxIcon = ({ checked, title = 'checkbox', hover = false, className }: CheckboxIconProps) => {
+  const iconProps = { title, className };
+  return checked ? <CheckboxCheckedIcon {...iconProps} /> : <CheckboxUncheckedIcon {...iconProps} hover={hover} />;
 };
diff --git a/lib/components/Icon/CheckboxUncheckedIcon.tsx b/lib/components/Icon/CheckboxUncheckedIcon.tsx
new file mode 100644
index 0000000..24d3716
--- /dev/null
+++ b/lib/components/Icon/CheckboxUncheckedIcon.tsx
@@ -0,0 +1,38 @@
+export type CheckboxUncheckedIconProps = {
+  title?: string;
+  className?: string;
+  hover?: boolean;
+};
+
+/**
+ * Checkbox for lists and list items
+ */
+export const CheckboxUncheckedIcon = ({ title = 'Checkbox', className, hover = false }: CheckboxUncheckedIconProps) => {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <title>{title}</title>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M21.5 2.5H2.5V21.5H21.5V2.5ZM2.5 0C1.11929 0 0 1.11929 0 2.5V21.5C0 22.8807 1.11929 24 2.5 24H21.5C22.8807 24 24 22.8807 24 21.5V2.5C24 1.11929 22.8807 0 21.5 0H2.5Z"
+        fill="black"
+      />
+      {hover && (
+        <path
+          data-hover={true}
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M18.5547 5.76815C19.0142 6.07451 19.1384 6.69538 18.8321 7.1549L11.6321 17.9549C11.4659 18.2042 11.1967 18.3658 10.8985 18.3953C10.6004 18.4249 10.3047 18.3192 10.0929 18.1073L5.29289 13.3073C4.90237 12.9168 4.90237 12.2836 5.29289 11.8931C5.68342 11.5026 6.31658 11.5026 6.70711 11.8931L10.6446 15.8306L17.1679 6.0455C17.4743 5.58598 18.0952 5.4618 18.5547 5.76815Z"
+          fill="currentColor"
+        />
+      )}
+    </svg>
+  );
+};
diff --git a/lib/components/Icon/RadioCheckedIcon.tsx b/lib/components/Icon/RadioCheckedIcon.tsx
new file mode 100644
index 0000000..1e633a4
--- /dev/null
+++ b/lib/components/Icon/RadioCheckedIcon.tsx
@@ -0,0 +1,29 @@
+export type RadioCheckedIconProps = {
+  title?: string;
+  className?: string;
+};
+
+/**
+ * Radio for lists and list items
+ */
+export const RadioCheckedIcon = ({ title = 'Radio', className }: RadioCheckedIconProps) => {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <title>{title}</title>
+
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17Z"
+        fill="black"
+      />
+    </svg>
+  );
+};
diff --git a/lib/components/Icon/RadioIcon.stories.ts b/lib/components/Icon/RadioIcon.stories.ts
index b684631..073edd1 100644
--- a/lib/components/Icon/RadioIcon.stories.ts
+++ b/lib/components/Icon/RadioIcon.stories.ts
@@ -18,6 +18,13 @@ export const Default: Story = {
   },
 };
 
+export const Hover: Story = {
+  args: {
+    checked: false,
+    hover: true,
+  },
+};
+
 export const Checked: Story = {
   args: {
     checked: true,
diff --git a/lib/components/Icon/RadioIcon.tsx b/lib/components/Icon/RadioIcon.tsx
index 0bcf1c8..bbbca3d 100644
--- a/lib/components/Icon/RadioIcon.tsx
+++ b/lib/components/Icon/RadioIcon.tsx
@@ -1,29 +1,17 @@
-import cx from 'classnames';
-import styles from './radioIcon.module.css';
+import { RadioCheckedIcon } from './RadioCheckedIcon';
+import { RadioUncheckedIcon } from './RadioUncheckedIcon';
 
 export type RadioIconProps = {
   checked: boolean;
+  hover?: boolean;
   title?: string;
   className?: string;
 };
 
 /**
- * Radio icon for lists and list items
+ * Radio for lists and list items
  */
-export const RadioIcon = ({ checked, title, className }: RadioIconProps) => {
-  return (
-    <div data-checked={checked} className={cx(styles.radio, className)}>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        strokeWidth={2.5}
-        stroke="currentColor"
-        className={styles.icon}
-      >
-        <title>{title}</title>
-        <circle cx="12" cy="12" r="6" fill="currentColor" />
-      </svg>
-    </div>
-  );
+export const RadioIcon = ({ checked, title = 'Radio', hover = false, className }: RadioIconProps) => {
+  const iconProps = { title, className };
+  return checked ? <RadioCheckedIcon {...iconProps} /> : <RadioUncheckedIcon {...iconProps} hover={hover} />;
 };
diff --git a/lib/components/Icon/RadioUncheckedIcon.tsx b/lib/components/Icon/RadioUncheckedIcon.tsx
new file mode 100644
index 0000000..fde434c
--- /dev/null
+++ b/lib/components/Icon/RadioUncheckedIcon.tsx
@@ -0,0 +1,30 @@
+export type RadioUncheckedIconProps = {
+  title?: string;
+  className?: string;
+  hover?: boolean;
+};
+
+/**
+ * Radio for lists and list items
+ */
+export const RadioUncheckedIcon = ({ title = 'Radio', className, hover = false }: RadioUncheckedIconProps) => {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <title>{title}</title>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 21.5C17.2467 21.5 21.5 17.2467 21.5 12C21.5 6.75329 17.2467 2.5 12 2.5C6.75329 2.5 2.5 6.75329 2.5 12C2.5 17.2467 6.75329 21.5 12 21.5ZM12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z"
+        fill="black"
+      />
+      {hover && <circle data-hover={true} cx="12" cy="12" r="5" fill="black" />}
+    </svg>
+  );
+};
diff --git a/lib/components/Icon/checkboxIcon.module.css b/lib/components/Icon/checkboxIcon.module.css
index b0d021d..2b89357 100644
--- a/lib/components/Icon/checkboxIcon.module.css
+++ b/lib/components/Icon/checkboxIcon.module.css
@@ -1,3 +1,4 @@
+/*
 .checkbox {
   font-size: 1rem;
   border: 2px solid;
@@ -19,3 +20,4 @@
 .checkbox > svg {
   stroke: currentColor;
 }
+  */
diff --git a/lib/components/Menu/MenuOption.tsx b/lib/components/Menu/MenuOption.tsx
index 4774032..cf45fb6 100644
--- a/lib/components/Menu/MenuOption.tsx
+++ b/lib/components/Menu/MenuOption.tsx
@@ -35,8 +35,8 @@ export const MenuOption = ({
   return (
     <MenuItemBase className={styles.label} disabled={disabled} selected={checked} size={size} as="label">
       <input className={styles.input} name={name} value={value} type={type} checked={checked} onChange={onChange} />
-      {type === 'checkbox' && <CheckboxIcon checked={checked} className={styles.icon} />}
-      {type === 'radio' && <RadioIcon checked={checked} className={styles.icon} />}
+      {type === 'checkbox' && <CheckboxIcon checked={checked} hover={true} className={styles.icon} />}
+      {type === 'radio' && <RadioIcon checked={checked} hover={true} className={styles.icon} />}
       <MenuItemLabel title={title} description={description} size={size}>
         {label}
       </MenuItemLabel>
diff --git a/lib/components/Menu/menuOption.module.css b/lib/components/Menu/menuOption.module.css
index 86de82c..2245931 100644
--- a/lib/components/Menu/menuOption.module.css
+++ b/lib/components/Menu/menuOption.module.css
@@ -9,21 +9,19 @@
 
 .icon {
   font-size: 1rem;
-  border: 2px solid;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.icon > svg {
-  color: transparent;
+.icon {
+  color: var(--theme-base-default);
 }
 
-.label:hover .icon > svg {
-  color: var(--theme-base-default);
+.icon [data-hover="true"] {
+  opacity: 0;
 }
 
-.icon[data-checked="true"] > svg,
-.label:hover .icon[data-checked="true"] > svg {
-  color: var(--theme-background-subtle);
+.label:hover [data-hover="true"] {
+  opacity: 1;
 }