diff --git a/components/avatars/avatar.vue b/components/avatars/avatar.vue
index ff7c4b0..39f9cc5 100644
--- a/components/avatars/avatar.vue
+++ b/components/avatars/avatar.vue
@@ -1,7 +1,7 @@
 <template>
     <div v-bind="$attrs" class="bg-dark-700 overflow-hidden flex items-center justify-center">
         <Skeleton :enabled="!imageLoaded" class="!h-full !w-full !rounded-none">
-            <img class="cursor-pointer bg-dark-700 ring-1 w-full h-full object-cover" :src="src" :alt="alt" />
+            <img class="cursor-pointer ring-1 w-full h-full object-cover" :src="src" :alt="alt" />
         </Skeleton>
     </div>
 </template>
diff --git a/components/composer/autocomplete-suggestbox.vue b/components/composer/autocomplete-suggestbox.vue
index 9a5a108..eed296c 100644
--- a/components/composer/autocomplete-suggestbox.vue
+++ b/components/composer/autocomplete-suggestbox.vue
@@ -1,18 +1,22 @@
 <template>
-    <div class="max-h-40 max-w-full rounded ring-1 ring-dark-300 bg-dark-800 fixed z-20" :style="{
-        left: `${x}px`,
-        top: `${y}px`,
-        width: `${width}px`,
-    }" v-show="topSuggestions && topSuggestions.length > 0">
-        <OverlayScrollbarsComponent class="w-full [&>div]:flex">
-            <div v-for="(suggestion, index) in topSuggestions" :key="suggestion.key"
-                @click="emit('autocomplete', suggestion.key)"
-                :ref="el => { if (el) suggestionRefs[index] = el as Element }" :title="suggestion.key"
-                :class="['flex justify-center shrink-0 items-center size-12 p-2 hover:bg-dark-900/70', index === selectedSuggestionIndex && 'bg-primary-500']">
-                <slot :suggestion="suggestion"></slot>
-            </div>
-        </OverlayScrollbarsComponent>
-    </div>
+    <Transition enter-active-class="transition duration-300 ease-in-out" enter-from-class="opacity-0 scale-95"
+        enter-to-class="opacity-100 scale-100" leave-active-class="duration-200 ease-in-out"
+        leave-from-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-95">
+        <div class="max-h-40 max-w-full rounded ring-1 ring-dark-300 bg-dark-800 fixed z-20" :style="{
+            left: `${x}px`,
+            top: `${y}px`,
+            width: `${width}px`,
+        }" v-show="topSuggestions && topSuggestions.length > 0">
+            <OverlayScrollbarsComponent class="w-full [&>div]:flex">
+                <div v-for="(suggestion, index) in topSuggestions" :key="suggestion.key"
+                    @click="emit('autocomplete', suggestion.key)"
+                    :ref="el => { if (el) suggestionRefs[index] = el as Element }" :title="suggestion.key"
+                    :class="['flex justify-center shrink-0 items-center size-12 p-2 hover:bg-dark-900/70', index === selectedSuggestionIndex && 'bg-primary-500']">
+                    <slot :suggestion="suggestion"></slot>
+                </div>
+            </OverlayScrollbarsComponent>
+        </div>
+    </Transition>
 </template>
 
 <script lang="ts" setup>
diff --git a/components/composer/emoji-suggestbox.vue b/components/composer/emoji-suggestbox.vue
index d739de8..6ef9f3a 100644
--- a/components/composer/emoji-suggestbox.vue
+++ b/components/composer/emoji-suggestbox.vue
@@ -2,7 +2,8 @@
     <AutocompleteSuggestbox :currently-typing="currentlyTypingEmoji" :textarea="textarea" :suggestions="emojis"
         :distance-function="distance">
         <template #default="{ suggestion }">
-            <Avatar :src="(suggestion.value as Emoji).url" class="w-full h-full [&>img]:object-contain rounded"
+            <Avatar :src="(suggestion.value as Emoji).url"
+                class="w-full h-full [&>img]:object-contain !bg-transparent rounded"
                 :alt="`Emoji with shortcode ${(suggestion.value as Emoji).shortcode}`" />
         </template>
     </AutocompleteSuggestbox>