diff --git a/docs/docs/twemoji-picker-api/index.md b/docs/docs/twemoji-picker-api/index.md
index 5f229e73..d814959a 100644
--- a/docs/docs/twemoji-picker-api/index.md
+++ b/docs/docs/twemoji-picker-api/index.md
@@ -49,6 +49,13 @@ Define the picker will attempt to flip to the opposite side if it does not fit a
 
 Define the picker will close itself when clicking outside its boundaries.
 
+### pickerPaddingOffset
+- Version: 5.6.1 onwards
+- Type: ``boolean``
+- Default: ``false``
+
+Defines if the picker should have an extra padding top/bottom. Useful when the picker is combined with a textarea.
+
 ### triggerType
 - Type: ``string``
 - Default: ``'click'``
diff --git a/package.json b/package.json
index f43eb80f..e75c5d33 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kevinfaguiar/vue-twemoji-picker",
-  "version": "5.6.0",
+  "version": "5.6.1",
   "main": "dist/vue-twemoji-picker.umd.min.js",
   "module": "dist/vue-twemoji-picker.esm.min.js",
   "unpkg": "dist/vue-twemoji-picker.min.js",
diff --git a/src/components/PopupEmoji.vue b/src/components/PopupEmoji.vue
index 96c6e141..e875184f 100644
--- a/src/components/PopupEmoji.vue
+++ b/src/components/PopupEmoji.vue
@@ -14,14 +14,14 @@
         <slot name="container" v-if="containerRef" />
       </div>
     </div>
-    <span
+    <div
       ref="button"
       id="popper-button"
       @click="clickTriggerPopper"
       @mouseenter="hoverTriggerPopper"
     >
       <slot name="button" v-if="buttonRef" />
-    </span>
+    </div>
   </div>
 </template>
 
@@ -51,6 +51,10 @@
   }
 }
 
+#popper-button {
+  display: inline-block;
+}
+
 #arrow {
   position: absolute;
   z-index: -1;
@@ -71,32 +75,53 @@
   padding-right: 32px;
 }
 
+#popper-container[data-popper-placement^='top-start'] > #arrow {
+  bottom: 12px;
+  padding-right: 20px;
+}
+
 #popper-container[data-popper-placement^='bottom'] > #arrow {
   top: -12px;
   padding-right: 32px;
 }
 
+#popper-container[data-popper-placement^='bottom-start'] > #arrow {
+  top: -12px;
+  padding-right: 20px;
+}
+
 #popper-container[data-popper-placement^='left'] > #arrow {
   right: 12px;
   padding-bottom: 32px;
 }
 
+#popper-container[data-popper-placement^='left-start'] > #arrow {
+  right: 12px;
+  padding-bottom: 5px;
+}
+
 #popper-container[data-popper-placement^='right'] > #arrow {
   left: -12px;
   padding-bottom: 32px;
 }
+
+#popper-container[data-popper-placement^='right-start'] > #arrow {
+  left: -12px;
+  padding-bottom: 5px;
+}
 </style>
 
 <script lang="ts">
 import Vue from 'vue';
 import {
   popperGenerator,
-  defaultModifiers
+  defaultModifiers,
 } from '@popperjs/core/lib/popper-lite';
 import flip from '@popperjs/core/lib/modifiers/flip';
 import offset from '@popperjs/core/lib/modifiers/offset';
 import arrow from '@popperjs/core/lib/modifiers/arrow';
 import preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow';
+import PopperObject from '../interfaces/PopperObject';
 
 import VueClickaway from 'vue-clickaway';
 
@@ -110,34 +135,30 @@ export default Vue.extend({
       buttonRef: null as HTMLElement | null,
       popperOpen: false as boolean,
       debouncedPopperOpen: false as boolean,
-      popperInstance: null as any | null
+      popperInstance: null as any | null,
     };
   },
   props: {
     disabled: {
       default: false,
-      type: Boolean as () => boolean
+      type: Boolean as () => boolean,
     },
     placement: {
       default: 'top-start',
-      type: String as () => string
+      type: String as () => string,
     },
     autoflip: {
       default: false,
-      type: Boolean as () => boolean
-    },
-    offset: {
-      default: () => [0, 30],
-      type: Array as () => Array<number>
+      type: Boolean as () => boolean,
     },
     arrowEnabled: {
       default: false,
-      type: Boolean as () => boolean
+      type: Boolean as () => boolean,
     },
     triggerType: {
       default: 'click',
       type: String as () => string,
-      validator: function(value) {
+      validator: function (value) {
         if (value !== 'click' && value !== 'hover') {
           console.error(
             'The value entered for the prop "triggerType" is invalid. ' +
@@ -145,20 +166,28 @@ export default Vue.extend({
           );
         }
         return true;
-      }
+      },
+    },
+    extraPaddingOffset: {
+      default: false,
+      type: Boolean as () => boolean,
     },
     closeOnClickaway: {
       default: true,
-      type: Boolean as () => boolean
-    }
+      type: Boolean as () => boolean,
+    },
   },
   mounted(): void {
-    const defaultModifiersObj = [...defaultModifiers, offset, preventOverflow];
+    const defaultModifiersObj: any = [
+      ...defaultModifiers,
+      offset,
+      preventOverflow,
+    ];
     if (this.autoflip) defaultModifiersObj.push(flip);
     if (this.arrowEnabled) defaultModifiersObj.push(arrow);
 
     const createPopper = popperGenerator({
-      defaultModifiers: defaultModifiersObj
+      defaultModifiers: defaultModifiersObj,
     });
 
     this.containerRef = this.$refs.container;
@@ -170,20 +199,39 @@ export default Vue.extend({
         {
           name: 'offset',
           options: {
-            offset: this.offset
-          }
+            offset: ({ placement }: PopperObject) => {
+              if (placement.includes('bottom')) {
+                return this.arrowEnabled
+                  ? [0, 3]
+                  : [0, this.extraPaddingOffset ? 10 : -10];
+              }
+              if (placement.includes('top')) {
+                return this.arrowEnabled
+                  ? [0, 5]
+                  : [0, this.extraPaddingOffset ? 0 : -10];
+              }
+              if (placement.includes('left')) {
+                return this.arrowEnabled ? [0, 5] : [0, -10];
+              }
+              if (placement.includes('right')) {
+                return this.arrowEnabled ? [0, 5] : [0, -10];
+              } else {
+                return [0, 0];
+              }
+            },
+          },
         },
         {
           name: 'arrow',
           options: {
-            element: '#arrow'
-          }
-        }
-      ]
+            element: '#arrow',
+          },
+        },
+      ],
     });
   },
   watch: {
-    popperOpen: function(val): void {
+    popperOpen: function (val): void {
       if (val) {
         this.$refs.container.setAttribute('data-show', '');
       } else {
@@ -193,7 +241,7 @@ export default Vue.extend({
       setTimeout(() => {
         this.debouncedPopperOpen = val;
       }, 300);
-    }
+    },
   },
   methods: {
     clickTriggerPopper(): void {
@@ -228,7 +276,7 @@ export default Vue.extend({
         this.popperOpen = true;
         setTimeout(ctxPopperInstance.forceUpdate, 1);
       }
-    }
-  }
+    },
+  },
 });
 </script>
diff --git a/src/components/Sandbox.vue b/src/components/Sandbox.vue
index ccf40ff2..d881aa45 100644
--- a/src/components/Sandbox.vue
+++ b/src/components/Sandbox.vue
@@ -1,13 +1,13 @@
 <template>
   <div id="app">
-    <div>
+    <div id="test-picker">
       <twemoji-picker
         :emojiData="emojiDataAll"
         :emojiGroups="emojiGroups"
-        pickerPlacement="top-start"
+        pickerPlacement="left"
         ref="picker"
         :emojiPickerDisabled="emojiPickerDisabled"
-        :pickerArrowEnabled="true"
+        :pickerArrowEnabled="false"
       >
       </twemoji-picker>
       <button @click="onClickTest">Working Test</button>
@@ -46,6 +46,7 @@
         :recentEmojisFeat="true"
         :searchEmojisFeat="true"
         :maxlength="100"
+        :pickerArrowEnabled="false"
         idTextarea="idTextarea"
         pickerWidth="#idTextarea"
       >
@@ -76,6 +77,10 @@ a:hover {
 #app > div {
   margin: 100vh 0;
 }
+
+#test-picker {
+  padding-left: 500px;
+}
 </style>
 <script lang="ts">
 // const TwemojiPicker = (window as any).VueTwemojiPicker.TwemojiPicker;
diff --git a/src/components/TwemojiPicker/TwemojiPicker.vue b/src/components/TwemojiPicker/TwemojiPicker.vue
index fbb91a75..6feb617a 100644
--- a/src/components/TwemojiPicker/TwemojiPicker.vue
+++ b/src/components/TwemojiPicker/TwemojiPicker.vue
@@ -3,12 +3,12 @@
     <popup-emoji
       v-if="emojiData && emojiData.length > 0"
       :disabled="emojiPickerDisabled"
-      :offset="pickerArrowEnabled ? [0, 35] : [0, 30]"
       :triggerType="triggerType"
       :placement="pickerPlacement"
       :autoflip="pickerAutoflip"
       :arrowEnabled="pickerArrowEnabled"
       :closeOnClickaway="pickerCloseOnClickaway"
+      :extraPaddingOffset="pickerPaddingOffset"
       @popperOpenChanged="popperOpenChanged"
       ref="popupEmoji"
     >
@@ -57,14 +57,14 @@
                 width: calculatedPickerWidth + 'px',
                 height: hideSearch
                   ? pickerHeight + 45 + 'px'
-                  : pickerHeight + 'px'
+                  : pickerHeight + 'px',
               }"
               @scroll.passive="onScrollEmojiList"
             >
               <div v-if="isSearchingEmoji">
                 <strong
                   :style="{
-                    padding: '3px'
+                    padding: '3px',
                   }"
                   id="loading-label"
                   >{{ isLoadingLabel }}</strong
@@ -74,13 +74,13 @@
               <div
                 v-if="
                   searchTerm.length !== 0 &&
-                    searchEmojis.length === 0 &&
-                    isSearchingEmoji === false
+                  searchEmojis.length === 0 &&
+                  isSearchingEmoji === false
                 "
               >
                 <strong
                   :style="{
-                    padding: '3px'
+                    padding: '3px',
                   }"
                   >{{ searchEmojiNotFound }}</strong
                 >
@@ -313,11 +313,11 @@ export default Vue.extend({
 
   components: {
     'popup-emoji': PopupEmoji,
-    'popup-skins': PopupSkins
+    'popup-skins': PopupSkins,
   },
 
   props: {
-    ...Props
+    ...Props,
   },
 
   data() {
@@ -347,7 +347,7 @@ export default Vue.extend({
       isSearchingEmoji: false as boolean,
       calculatedPickerWidth: null as number | null,
       hideSearch: false as boolean,
-      isPickerOpen: false as boolean
+      isPickerOpen: false as boolean,
     };
   },
 
@@ -365,7 +365,7 @@ export default Vue.extend({
         this.randomEmoji,
         this.twemojiOptions
       );
-    }
+    },
   },
 
   created(): void {
@@ -375,7 +375,7 @@ export default Vue.extend({
     this.twemojiOptions = {
       base: this.twemojiPath,
       ext: this.twemojiExtension,
-      size: this.twemojiFolder
+      size: this.twemojiFolder,
     };
     if (this.recentEmojisFeat) {
       this.setRecentEmojis();
@@ -394,7 +394,7 @@ export default Vue.extend({
     },
     randomEmoji() {
       setTimeout(() => this.$refs.popupEmoji.popperInstance.forceUpdate(), 100);
-    }
+    },
   },
 
   methods: {
@@ -467,7 +467,7 @@ export default Vue.extend({
             this.skinsListActive = Array.from(emoji.skins);
             this.skinsListActive.unshift({
               unicode: emoji.unicode,
-              img: emoji.img
+              img: emoji.img,
             });
             this.$refs.popupSkins.instantiatePopper(
               `twemoji-picker-click-emoji-${emoji.unicode}`
@@ -542,7 +542,7 @@ export default Vue.extend({
             this.twemojiOptions
           ),
           skins: [],
-          tags: []
+          tags: [],
         });
       } else {
         this.recentEmojis.unshift({
@@ -552,7 +552,7 @@ export default Vue.extend({
             this.twemojiOptions
           ),
           skins: [],
-          tags: []
+          tags: [],
         });
       }
 
@@ -617,7 +617,7 @@ export default Vue.extend({
           this.hideSearch = false;
         }
       }
-    }
-  }
+    },
+  },
 });
 </script>
diff --git a/src/components/TwemojiPicker/props.ts b/src/components/TwemojiPicker/props.ts
index 374febce..c6b48a5c 100644
--- a/src/components/TwemojiPicker/props.ts
+++ b/src/components/TwemojiPicker/props.ts
@@ -207,5 +207,9 @@ export default {
       }
       return true;
     },
-  }
+  },
+  pickerPaddingOffset: {
+    default: false,
+    type: Boolean as () => boolean,
+  },
 }
\ No newline at end of file
diff --git a/src/components/TwemojiTextarea.vue b/src/components/TwemojiTextarea.vue
index 44c55298..02c709ee 100644
--- a/src/components/TwemojiTextarea.vue
+++ b/src/components/TwemojiTextarea.vue
@@ -13,6 +13,7 @@
       @addTextBlur="addTextBlur"
       @emojiUnicodeAdded="emojiUnicodeAdded"
       @emojiImgAdded="emojiImgAdded"
+      :pickerPaddingOffset="pickerAutoflip && typeof pickerWidth === 'string'"
     ></twemoji-picker>
 
     <div
diff --git a/src/interfaces/PopperObject.ts b/src/interfaces/PopperObject.ts
new file mode 100644
index 00000000..447824f8
--- /dev/null
+++ b/src/interfaces/PopperObject.ts
@@ -0,0 +1,5 @@
+export default interface PopperObject {
+  placement: string;
+  reference: any;
+  popper: any;
+}