diff --git a/packages/koenig-lexical/src/components/ui/EmojiPickerPortal.jsx b/packages/koenig-lexical/src/components/ui/EmojiPickerPortal.jsx
index abfa7f9c34..21ca9f8676 100644
--- a/packages/koenig-lexical/src/components/ui/EmojiPickerPortal.jsx
+++ b/packages/koenig-lexical/src/components/ui/EmojiPickerPortal.jsx
@@ -4,9 +4,11 @@ import Portal from './Portal';
 import PropTypes from 'prop-types';
 import React from 'react';
 import defaultData from '@emoji-mart/data';
+import {useClickOutside} from '../../hooks/useClickOutside';
 
 const EmojiPickerPortal = ({
     onEmojiClick,
+    onClickOutside,
     positionRef,
     data = defaultData,
     autoFocus = true,
@@ -30,6 +32,7 @@ const EmojiPickerPortal = ({
     ...props
 }) => {
     const [position, setPosition] = React.useState(null);
+    const pickerRef = React.useRef(null);
     const {darkMode} = React.useContext(KoenigComposerContext);
 
     const shiftPixels = 35; // how many pixels we want to move it up when it's at the bottom of the screen
@@ -59,6 +62,8 @@ const EmojiPickerPortal = ({
         };
     }, [handleScroll]);
 
+    useClickOutside(!!onClickOutside, pickerRef, onClickOutside);
+
     if (!position) {
         return null;
     }
@@ -101,7 +106,7 @@ const EmojiPickerPortal = ({
 
     return (
         <Portal>
-            <div className='z-20 mr-9 mt-10 rounded-md bg-white' data-testid="emoji-picker-container" style={style} onClick={handleClick}>
+            <div ref={pickerRef} className='z-20 mr-9 mt-10 rounded-md bg-white' data-testid="emoji-picker-container" style={style} onClick={handleClick}>
                 <div className=''>
                     <Picker // https://github.com/missive/emoji-mart#-picker
                         data={data}
@@ -118,6 +123,7 @@ export default EmojiPickerPortal;
 
 EmojiPickerPortal.propTypes = {
     onEmojiClick: PropTypes.func.isRequired,
+    onClickOutside: PropTypes.func,
     positionRef: PropTypes.object,
     data: PropTypes.array,
     autoFocus: PropTypes.bool,
diff --git a/packages/koenig-lexical/src/components/ui/cards/CalloutCard.jsx b/packages/koenig-lexical/src/components/ui/cards/CalloutCard.jsx
index e00576b1ce..b41c4e787f 100644
--- a/packages/koenig-lexical/src/components/ui/cards/CalloutCard.jsx
+++ b/packages/koenig-lexical/src/components/ui/cards/CalloutCard.jsx
@@ -125,7 +125,7 @@ export function CalloutCard({
                             isEditing && showEmojiPicker && (
                                 <EmojiPickerPortal
                                     positionRef={emojiButtonRef}
-                                    togglePortal={toggleEmojiPicker}
+                                    onClickOutside={() => setShowEmojiPicker(false)}
                                     onEmojiClick={changeEmoji} />
                             )
                         }
diff --git a/packages/koenig-lexical/src/styles/components/koenig-lexical.css b/packages/koenig-lexical/src/styles/components/koenig-lexical.css
index d687b5a35a..edce32fa9c 100644
--- a/packages/koenig-lexical/src/styles/components/koenig-lexical.css
+++ b/packages/koenig-lexical/src/styles/components/koenig-lexical.css
@@ -63,7 +63,7 @@
         /* --grey-950 */
         --rgb-background: 35, 41, 47;
         /* --grey-300 */
-        --rgb-color: 221, 225, 229;
+        --rgb-color: 255, 255, 255;
         /* --grey-900 */
         --rgb-input: 57, 64, 71;
       }
@@ -92,7 +92,7 @@ em-emoji-picker {
     /* --background-rgb: 85, 170, 255; */
     --font-size: 13px;
     --rgb-accent: 57, 64, 71;
-    --rgb-color: 174, 183, 193;
+    --rgb-color: 57, 64, 71;
     --em-rgb-accent: (255,0,0)
     /* --rgb-input: 255, 235, 235; */;
     --shadow: 0 0 1px rgba(0,0,0,.05), 0 5px 18px rgba(0,0,0,.08);