diff --git a/src/components/AccessibilitySettings/index.tsx b/src/components/AccessibilitySettings/index.tsx
index 80064c7e0d..dc8957e599 100644
--- a/src/components/AccessibilitySettings/index.tsx
+++ b/src/components/AccessibilitySettings/index.tsx
@@ -56,8 +56,8 @@ export const AccessibilitySettings = ({
       dropdownLabel={dropdownLabel}
       onChange={(option) => toggleSetting(option.value as PossibleA11ySettings)}
       iconKind="settings"
-      variant="radio"
+      variant="checkbox"
       initialSelected={selectedSettings}
     />
   );
-};
+};
\ No newline at end of file
diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx
index 9b16804ffc..4b170cd764 100644
--- a/src/components/Dropdown/index.tsx
+++ b/src/components/Dropdown/index.tsx
@@ -13,7 +13,7 @@ type DropdownProps = {
   initialSelected: string | string[];
   onChange: (option: DropdownOption) => void;
   iconKind: IconKind;
-  variant?: "dropdown" | "radio";
+  variant?: "dropdown" | "radio" | "checkbox";
   dropdownLabel?: string;
 };
 
@@ -62,8 +62,11 @@ export const Dropdown = ({
       setIsOpen(false);
     }
 
-    // With a radio variant, multiple options can be selected
-    if (variant === "radio" && Array.isArray(selected)) {
+    // With a radio or checkbox variant, multiple options can be selected
+    if (
+      (variant === "radio" || variant === "checkbox") &&
+      Array.isArray(selected)
+    ) {
       const newSelected = selected.includes(option.value)
         ? selected.filter((value) => value !== option.value)
         : [...selected, option.value];
@@ -143,25 +146,25 @@ export const Dropdown = ({
           role="option"
           aria-selected={isSelected(option)}
         >
-          <div className={styles.icon}>
-            <Icon
-              kind={
-                isSelected(option) ? "option-selected" : "option-unselected"
-              }
-            />
-          </div>
           <button
             onClick={() => handleOptionClick(option)}
-            ref={el => {
-              optionRefs.current[index] = el as HTMLButtonElement
+            ref={(el) => {
+              optionRefs.current[index] = el as HTMLButtonElement;
             }}
             onBlur={handleBlur}
           >
+            <div className={styles.icon}>
+              <Icon
+                kind={
+                  isSelected(option) ? "option-selected" : "option-unselected"
+                }
+              />
+            </div>
             <span>{option.label}</span>
           </button>
         </li>
       ))}
-      {variant === "radio" ? (
+      {variant === "radio" || variant === "checkbox" ? (
         <button onClick={() => setIsOpen(false)} className={styles.chevron}>
           <Icon kind="chevron-up" />
         </button>
@@ -182,4 +185,4 @@ export const Dropdown = ({
       {isOpen ? renderExpandedDropdown() : renderCollapsedDropdown()}
     </div>
   );
-};
+};
\ No newline at end of file
diff --git a/src/components/Dropdown/styles.module.scss b/src/components/Dropdown/styles.module.scss
index 60bd666887..42f8f3f446 100644
--- a/src/components/Dropdown/styles.module.scss
+++ b/src/components/Dropdown/styles.module.scss
@@ -51,24 +51,26 @@
 
 .option {
   cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  padding: var(--spacing-xs);
+  padding: 0;
 
   .icon {
     position: static;
+    display: flex;
+    align-items: center;
   }
 
   button {
-    flex: 1;
+    width: 100%;
     display: flex;
     align-items: center;
+    gap: var(--spacing-xs);
+    padding: var(--spacing-xs);
     text-align: left;
     background: none;
     border: none;
     cursor: pointer;
-    padding: 0;
+    color: inherit;
+    font: inherit;
   }
 }