diff --git a/README.md b/README.md
index 329e25ea..8e2e2e34 100644
--- a/README.md
+++ b/README.md
@@ -89,6 +89,8 @@ function App() {
 | **data** | `{}` | | Data to use for the picker |
 | **i18n** | `{}` | | Localization data to use for the picker |
 | **categories** | `[]` | `frequent`, `people`, `nature`, `foods`, `activity`, `places`, `objects`, `symbols`, `flags` | Categories to show in the picker. Order is respected.  |
+| **categoryGapStatus** | `normal` | `normal`, `none` | Whether to hide the category middle space.  |
+| **customerCategoryGap** | `` | `` | custom category gap html.  |
 | **custom** | `[]` | | [Custom emojis](#custom-emojis) |
 | **onEmojiSelect** | `null` | | Callback when an emoji is selected |
 | **onClickOutside** | `null` | | Callback when a click outside of the picker happens |
diff --git a/packages/emoji-mart-website/index.html b/packages/emoji-mart-website/index.html
index a4f24067..bc1e475a 100644
--- a/packages/emoji-mart-website/index.html
+++ b/packages/emoji-mart-website/index.html
@@ -88,6 +88,25 @@
         ></span>
       </div>
 
+      <div class="flex flex-middle">
+        Category Gap:&nbsp;<span class="select flex flex-grow"
+          ><select id="categoryGapStatus" class="flex-grow">
+            <option value="normal">Normal</option>
+            <option value="none">None</option></select
+          ><em-emoji id="arrow_down_small"></em-emoji
+        ></span>
+      </div>
+
+      <div class="flex flex-middle">
+        Customer Category Gap:&nbsp;<span class="select flex flex-grow"></span>
+        <input
+          id="customerCategoryGap"
+          type="text"
+          placeholder="enter html string,blur will work"
+          style="min-width: 240px"
+        />
+      </div>
+
       <div class="flex flex-middle">
         Auto focus:&nbsp;<span class="select flex flex-grow"
           ><select id="autoFocus" class="flex-grow">
@@ -211,6 +230,15 @@
         })
       }
 
+      const customerCategoryGapInputDom = document.getElementById(
+        'customerCategoryGap',
+      )
+      customerCategoryGapInputDom.addEventListener('blur', (e) => {
+        const { value } = e.target
+        localStorage['customerCategoryGap'] = value
+        window.location.reload(true)
+      })
+
       const custom = JSON.parse(localStorage.custom || '[]')
       const dialog = document.querySelector('dialog')
       const form = dialog.querySelector('form')
@@ -297,6 +325,8 @@
         locale: localStorage.locale,
         navPosition: localStorage.navPosition,
         previewPosition: localStorage.previewPosition,
+        categoryGapStatus: localStorage.categoryGapStatus,
+        customerCategoryGap: localStorage.customerCategoryGap,
         searchPosition: localStorage.searchPosition,
         skinTonePosition: localStorage.skinTonePosition,
         onEmojiSelect: console.log,
diff --git a/packages/emoji-mart/README.md b/packages/emoji-mart/README.md
index 329e25ea..8e2e2e34 100644
--- a/packages/emoji-mart/README.md
+++ b/packages/emoji-mart/README.md
@@ -89,6 +89,8 @@ function App() {
 | **data** | `{}` | | Data to use for the picker |
 | **i18n** | `{}` | | Localization data to use for the picker |
 | **categories** | `[]` | `frequent`, `people`, `nature`, `foods`, `activity`, `places`, `objects`, `symbols`, `flags` | Categories to show in the picker. Order is respected.  |
+| **categoryGapStatus** | `normal` | `normal`, `none` | Whether to hide the category middle space.  |
+| **customerCategoryGap** | `` | `` | custom category gap html.  |
 | **custom** | `[]` | | [Custom emojis](#custom-emojis) |
 | **onEmojiSelect** | `null` | | Callback when an emoji is selected |
 | **onClickOutside** | `null` | | Callback when a click outside of the picker happens |
diff --git a/packages/emoji-mart/src/components/Picker/Picker.tsx b/packages/emoji-mart/src/components/Picker/Picker.tsx
index cced465b..16154a27 100644
--- a/packages/emoji-mart/src/components/Picker/Picker.tsx
+++ b/packages/emoji-mart/src/components/Picker/Picker.tsx
@@ -880,7 +880,7 @@ export default class Picker extends Component {
     const { categories } = Data
     const hidden = !!this.state.searchResults
     const perLine = this.getPerLine()
-
+    const { categoryGapStatus, customerCategoryGap } = this.props
     return (
       <div
         style={{
@@ -898,9 +898,19 @@ export default class Picker extends Component {
               class="category"
               ref={root}
             >
-              <div class={`sticky padding-small align-${this.dir[0]}`}>
-                {category.name || I18n.categories[category.id]}
-              </div>
+              {categoryGapStatus === 'normal' ? (
+                customerCategoryGap ? (
+                  <div
+                    dangerouslySetInnerHTML={{ __html: customerCategoryGap }}
+                  />
+                ) : (
+                  <div class={`sticky padding-small align-${this.dir[0]}`}>
+                    {category.name || I18n.categories[category.id]}
+                  </div>
+                )
+              ) : (
+                <></>
+              )}
               <div
                 class="relative"
                 style={{
diff --git a/packages/emoji-mart/src/components/Picker/PickerProps.ts b/packages/emoji-mart/src/components/Picker/PickerProps.ts
index 5f1a9af7..eade9dce 100644
--- a/packages/emoji-mart/src/components/Picker/PickerProps.ts
+++ b/packages/emoji-mart/src/components/Picker/PickerProps.ts
@@ -2,6 +2,13 @@ export default {
   autoFocus: {
     value: false,
   },
+  categoryGapStatus: {
+    value: 'normal',
+    choices: ['normal', 'none'],
+  },
+  customerCategoryGap: {
+    value: '',
+  },
   dynamicWidth: {
     value: false,
   },