diff --git a/src/lib/holocene/combobox/combobox-option.svelte b/src/lib/holocene/combobox/combobox-option.svelte
index d48e349495..423b5fd491 100644
--- a/src/lib/holocene/combobox/combobox-option.svelte
+++ b/src/lib/holocene/combobox/combobox-option.svelte
@@ -1,16 +1,20 @@
 <script lang="ts">
+  import { twMerge as merge } from 'tailwind-merge';
+
   import MenuItem from '$lib/holocene/menu/menu-item.svelte';
 
   interface Props {
     selected?: boolean;
     disabled?: boolean;
     label: string;
+    class?: string;
   }
 
   interface DisabledProps {
     label: string;
     disabled: true;
     selected?: never;
+    class?: string;
   }
 
   type $$Props = Props | DisabledProps;
@@ -18,12 +22,14 @@
   export let selected = false;
   export let disabled = false;
   export let label: string;
+  let className = '';
+  export { className as class };
 </script>
 
 <MenuItem
   on:click
   role="option"
-  class="break-all"
+  class={merge('break-all', className)}
   aria-selected={selected}
   aria-disabled={disabled}
   {selected}
diff --git a/src/lib/holocene/combobox/combobox.svelte b/src/lib/holocene/combobox/combobox.svelte
index 8f58c11d8a..094ea39b15 100644
--- a/src/lib/holocene/combobox/combobox.svelte
+++ b/src/lib/holocene/combobox/combobox.svelte
@@ -93,6 +93,7 @@
     maxMenuHeight?: string;
     variant?: ComboboxStyles['variant'];
     class?: string;
+    optionClass?: string;
   }
 
   type MultiSelectProps = {
@@ -163,6 +164,7 @@
   export let loading = false;
   export let loadingText = 'Loading more results';
   export let variant: ComboboxStyles['variant'] = 'default';
+  export let optionClass = '';
 
   export let numberOfItemsSelectedLabel = (count: number) =>
     `${count} option${count > 1 ? 's' : ''} selected`;
@@ -577,6 +579,7 @@
         on:click={() => handleSelectOption(option)}
         selected={isSelected(option, value)}
         label={getDisplayValue(option)}
+        class={optionClass}
       />
     {:else}
       {#if loading === false}
diff --git a/src/lib/holocene/menu/menu.svelte b/src/lib/holocene/menu/menu.svelte
index 247a36f969..3a414a682c 100644
--- a/src/lib/holocene/menu/menu.svelte
+++ b/src/lib/holocene/menu/menu.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   import type { HTMLAttributes } from 'svelte/elements';
-  import { fly } from 'svelte/transition';
 
   import { getContext } from 'svelte';
   import { twMerge as merge } from 'tailwind-merge';
@@ -45,10 +44,16 @@
 </script>
 
 <ul
-  in:fly={{ duration: 100 }}
   role="menu"
-  class={merge('menu', maxHeight, position, className)}
-  class:hidden={!$open}
+  class={merge(
+    'menu',
+    'transition-all duration-100 ease-out',
+    !$open && 'invisible scale-95 opacity-0',
+    $open && 'visible scale-100 opacity-100',
+    maxHeight,
+    position,
+    className,
+  )}
   aria-labelledby={id}
   tabindex={-1}
   style={position === 'top-right' || position === 'top-left'
diff --git a/src/lib/holocene/modal.svelte b/src/lib/holocene/modal.svelte
index 922062b42b..9ed321c110 100644
--- a/src/lib/holocene/modal.svelte
+++ b/src/lib/holocene/modal.svelte
@@ -88,7 +88,13 @@
   {id}
   on:close={handleCancel}
   bind:this={modalElement}
-  class={merge('body', className)}
+  class={merge(
+    'body',
+    'transition-all duration-200 ease-out',
+    open && 'scale-100 opacity-100',
+    !open && 'scale-95 opacity-0',
+    className,
+  )}
   class:large
   class:hightlightNav
   aria-modal="true"
@@ -142,7 +148,7 @@
   }
 
   .body::backdrop {
-    @apply cursor-pointer;
+    @apply cursor-pointer transition-opacity duration-200;
   }
 
   .body.hightlightNav::backdrop {