diff --git a/src/assets/avatar.png b/src/assets/avatar.png
new file mode 100644
index 0000000..8fcd888
Binary files /dev/null and b/src/assets/avatar.png differ
diff --git a/src/components/NeAvatar.vue b/src/components/NeAvatar.vue
new file mode 100644
index 0000000..070a071
--- /dev/null
+++ b/src/components/NeAvatar.vue
@@ -0,0 +1,100 @@
+<!--
+  Copyright (C) 2025 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+<script lang="ts" setup>
+import { faUser } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { computed, ref, useSlots } from 'vue'
+
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl'
+
+const slots = useSlots()
+
+const {
+  size = 'md',
+  img = '',
+  initials = '',
+  squared = false,
+  alt = 'Avatar'
+} = defineProps<{
+  size?: AvatarSize
+  img?: string
+  initials?: string
+  squared?: boolean
+  alt?: string
+}>()
+
+const avatarSizeClasses: Record<AvatarSize, string> = {
+  xs: 'size-6',
+  sm: 'size-8',
+  md: 'size-10',
+  lg: 'size-12',
+  xl: 'size-14',
+  '2xl': 'size-16',
+  '3xl': 'size-20',
+  '4xl': 'size-24'
+}
+
+const placeholderColorClasses = 'bg-gray-700 text-white dark:bg-gray-200 dark:text-gray-950'
+
+const placeholderIconSizeClasses: Record<AvatarSize, string> = {
+  xs: 'size-3',
+  sm: 'size-4',
+  md: 'size-5',
+  lg: 'size-6',
+  xl: 'size-7',
+  '2xl': 'size-8',
+  '3xl': 'size-10',
+  '4xl': 'size-12'
+}
+
+const initialsSizeClasses: Record<AvatarSize, string> = {
+  xs: 'text-xs',
+  sm: 'text-sm',
+  md: 'text-base',
+  lg: 'text-xl',
+  xl: 'text-2xl',
+  '2xl': 'text-3xl',
+  '3xl': 'text-4xl',
+  '4xl': 'text-5xl'
+}
+
+const imageError = ref(false)
+
+const hasPlaceholder = computed(() => slots.placeholder)
+
+const placeholderContainerClasses = computed(
+  () =>
+    `flex items-center justify-center ${placeholderColorClasses} ${squared ? 'rounded-sm' : 'rounded-full'} ${avatarSizeClasses[size]}`
+)
+
+function setImageError() {
+  imageError.value = true
+}
+</script>
+<template>
+  <div>
+    <img
+      v-if="img && !imageError"
+      :alt="alt"
+      :class="[avatarSizeClasses[size], squared ? 'rounded-sm' : 'rounded-full']"
+      :src="img"
+      @error="setImageError"
+    />
+    <div v-else-if="!initials && hasPlaceholder">
+      <slot name="placeholder" />
+    </div>
+    <div v-else-if="(imageError || !img) && !initials" :class="placeholderContainerClasses">
+      <FontAwesomeIcon
+        :icon="faUser"
+        :class="[placeholderColorClasses, placeholderIconSizeClasses[size]]"
+      />
+    </div>
+    <div v-else :class="[placeholderContainerClasses, 'font-medium']">
+      <div :class="initialsSizeClasses[size]">
+        {{ initials }}
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/NeCard.vue b/src/components/NeCard.vue
index be0f049..07f89f1 100644
--- a/src/components/NeCard.vue
+++ b/src/components/NeCard.vue
@@ -8,6 +8,7 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import NeSkeleton from './NeSkeleton.vue'
 import NeInlineNotification from './NeInlineNotification.vue'
 import NeDropdown, { type NeDropdownItem } from './NeDropdown.vue'
+import { computed, useSlots } from 'vue'
 
 const props = defineProps({
   title: {
@@ -46,7 +47,13 @@ const props = defineProps({
   }
 })
 
-defineEmits(['titleClick'])
+const slots = useSlots()
+
+const isHeaderShown = computed(() => {
+  return (
+    props.title || slots.title || props.icon?.length || slots.topRight || props.menuItems?.length
+  )
+})
 </script>
 
 <template>
@@ -57,12 +64,12 @@ defineEmits(['titleClick'])
     ]"
   >
     <!-- header -->
-    <div class="flex justify-between">
+    <div v-if="isHeaderShown" class="flex justify-between">
       <!-- title -->
       <div class="mb-3 flex items-center gap-1">
         <h3
           v-if="title || $slots.title"
-          class="leading-6 font-semibold text-gray-900 dark:text-gray-50"
+          class="leading-6 font-medium text-gray-900 dark:text-gray-50"
         >
           <span v-if="title">
             {{ title }}
@@ -94,8 +101,8 @@ defineEmits(['titleClick'])
       </div>
     </div>
     <!-- description and content -->
-    <div class="flex flex-row items-center justify-between">
-      <div class="grow">
+    <div class="flex h-full flex-row items-center justify-between">
+      <div class="h-full grow">
         <NeSkeleton v-if="loading" :lines="skeletonLines"></NeSkeleton>
         <NeInlineNotification
           v-else-if="errorTitle"
diff --git a/src/components/NeDropdown.vue b/src/components/NeDropdown.vue
index 5495d5f..9595398 100644
--- a/src/components/NeDropdown.vue
+++ b/src/components/NeDropdown.vue
@@ -101,6 +101,7 @@ watch(
           ]"
           :class="`absolute z-50 mt-2.5 min-w-40 rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-200 focus:outline-hidden dark:bg-gray-950 dark:ring-gray-700 ${menuClasses}`"
         >
+          <slot name="menuHeader"></slot>
           <template v-for="item in items" :key="item.id">
             <!-- divider -->
             <hr
diff --git a/src/components/NeModal.vue b/src/components/NeModal.vue
index d00f2a1..3a7127d 100644
--- a/src/components/NeModal.vue
+++ b/src/components/NeModal.vue
@@ -5,80 +5,48 @@
 
 <script lang="ts" setup>
 import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
-import { faXmark as fasXmark } from '@fortawesome/free-solid-svg-icons'
-import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import NeButton, { type ButtonKind } from './NeButton.vue'
 import NeRoundedIcon from './NeRoundedIcon.vue'
-import type { PropType } from 'vue'
+import { watch } from 'vue'
+import { faXmark } from '@fortawesome/free-solid-svg-icons'
 
 export type ModalKind = 'neutral' | 'info' | 'warning' | 'error' | 'success'
 export type PrimaryButtonKind = 'primary' | 'danger'
 export type ModalSize = 'md' | 'lg' | 'xl' | 'xxl'
 
-defineProps({
-  visible: {
-    type: Boolean,
-    required: true
-  },
-  title: {
-    type: String,
-    default: ''
-  },
-  kind: {
-    type: String as PropType<ModalKind>,
-    default: 'neutral'
-  },
-  size: {
-    type: String as PropType<ModalSize>,
-    default: 'md'
-  },
-  primaryLabel: {
-    type: String,
-    default: ''
-  },
-  secondaryLabel: {
-    type: String,
-    default: ''
-  },
-  cancelLabel: {
-    type: String,
-    default: ''
-  },
-  primaryButtonKind: {
-    type: String as PropType<PrimaryButtonKind>,
-    default: 'primary'
-  },
-  primaryButtonDisabled: {
-    type: Boolean,
-    default: false
-  },
-  primaryButtonLoading: {
-    type: Boolean,
-    default: false
-  },
-  secondaryButtonKind: {
-    type: String as PropType<ButtonKind>,
-    default: 'secondary'
-  },
-  secondaryButtonDisabled: {
-    type: Boolean,
-    default: false
-  },
-  secondaryButtonLoading: {
-    type: Boolean,
-    default: false
-  },
-  closeAriaLabel: {
-    type: String,
-    required: true
-  }
-})
-
-const emit = defineEmits(['close', 'primaryClick', 'secondaryClick'])
+const {
+  visible = true,
+  title = '',
+  kind = 'neutral',
+  size = 'md',
+  primaryLabel = '',
+  secondaryLabel = '',
+  cancelLabel = '',
+  primaryButtonKind = 'primary',
+  primaryButtonDisabled = false,
+  primaryButtonLoading = false,
+  secondaryButtonKind = 'secondary',
+  secondaryButtonDisabled = false,
+  secondaryButtonLoading = false
+} = defineProps<{
+  visible?: boolean
+  title?: string
+  kind?: ModalKind
+  size?: ModalSize
+  primaryLabel?: string
+  secondaryLabel?: string
+  cancelLabel?: string
+  primaryButtonKind?: ButtonKind
+  primaryButtonDisabled?: boolean
+  primaryButtonLoading?: boolean
+  secondaryButtonKind?: ButtonKind
+  secondaryButtonDisabled?: boolean
+  secondaryButtonLoading?: boolean
+  closeAriaLabel: string
+}>()
 
-// add fontawesome icons
-library.add(fasXmark)
+const emit = defineEmits(['close', 'primaryClick', 'secondaryClick', 'show'])
 
 const sizeStyle: Record<ModalSize, string> = {
   md: 'sm:max-w-lg',
@@ -87,6 +55,15 @@ const sizeStyle: Record<ModalSize, string> = {
   xxl: 'sm:max-w-6xl'
 }
 
+watch(
+  () => visible,
+  () => {
+    if (visible) {
+      emit('show')
+    }
+  }
+)
+
 function onClose() {
   emit('close')
 }
@@ -139,7 +116,7 @@ function onSecondaryClick() {
                     @click="onClose"
                   >
                     <span class="sr-only">{{ closeAriaLabel }}</span>
-                    <FontAwesomeIcon :icon="['fas', 'xmark']" class="h-5 w-5" aria-hidden="true" />
+                    <FontAwesomeIcon :icon="faXmark" class="h-5 w-5" aria-hidden="true" />
                   </button>
                 </div>
                 <div class="sm:flex sm:items-start">
@@ -153,7 +130,7 @@ function onSecondaryClick() {
                     <DialogTitle
                       v-if="title"
                       as="h3"
-                      class="mb-4 text-base leading-6 font-semibold text-gray-900 dark:text-gray-50"
+                      class="mb-4 text-base leading-6 font-medium text-gray-900 dark:text-gray-50"
                       >{{ title }}</DialogTitle
                     >
                     <div>
diff --git a/src/main.ts b/src/main.ts
index d3428ca..47c7f89 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -38,6 +38,7 @@ export { default as NeHeading } from './components/NeHeading.vue'
 export { default as NeListbox } from './components/NeListbox.vue'
 export { default as NeDropdownFilter } from './components/NeDropdownFilter.vue'
 export { default as NeSortDropdown } from './components/NeSortDropdown.vue'
+export { default as NeAvatar } from './components/NeAvatar.vue'
 
 // types export
 export type { NeComboboxOption } from './components/NeCombobox.vue'
@@ -49,6 +50,7 @@ export type { FilterOption, FilterKind } from './components/NeDropdownFilter.vue
 export type { RadioOption } from './components/NeRadioSelection.vue'
 export type { SortEvent } from './components/NeTableHeadCell.vue'
 export type { ModalKind, PrimaryButtonKind, ModalSize } from './components/NeModal.vue'
+export type { AvatarSize } from './components/NeAvatar.vue'
 
 // library functions export
 export {
diff --git a/stories/NeAvatar.stories.ts b/stories/NeAvatar.stories.ts
new file mode 100644
index 0000000..9a4917f
--- /dev/null
+++ b/stories/NeAvatar.stories.ts
@@ -0,0 +1,92 @@
+//  Copyright (C) 2025 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { NeAvatar } from '../src/main'
+import AvatarImage from '../src/assets/avatar.png'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
+
+const meta = {
+  title: 'NeAvatar',
+  component: NeAvatar,
+  tags: ['autodocs'],
+  argTypes: {
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'] }
+  },
+  args: {
+    size: 'md',
+    img: '',
+    initials: '',
+    squared: false,
+    alt: 'Avatar'
+  } // default values
+} satisfies Meta<typeof NeAvatar>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const defaultTemplate = `<NeAvatar v-bind="args" />`
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { NeAvatar },
+    setup() {
+      return { args }
+    },
+    template: defaultTemplate
+  }),
+  args: {}
+}
+
+export const Squared: Story = {
+  render: (args) => ({
+    components: { NeAvatar },
+    setup() {
+      return { args }
+    },
+    template: defaultTemplate
+  }),
+  args: { squared: true }
+}
+
+export const Image: Story = {
+  render: (args) => ({
+    components: { NeAvatar },
+    setup() {
+      return { args }
+    },
+    template: defaultTemplate
+  }),
+  args: { img: AvatarImage, alt: 'User avatar' }
+}
+
+export const Initials: Story = {
+  render: (args) => ({
+    components: { NeAvatar },
+    setup() {
+      return { args }
+    },
+    template: defaultTemplate
+  }),
+  args: { initials: 'JD' }
+}
+
+const placeholderSlotTemplate = `<NeAvatar v-bind="args">
+  <template #placeholder>
+    <div class="flex items-center justify-center size-16 rounded-full bg-emerald-500 text-emerald-950 dark:bg-emerald-200 dark:text-emerald-950">
+      <FontAwesomeIcon :icon="faUserSecret" class="size-8" />
+    </div>
+  </template>
+</NeAvatar>`
+
+export const PlaceholderSlot: Story = {
+  render: (args) => ({
+    components: { NeAvatar, FontAwesomeIcon },
+    setup() {
+      return { args, faUserSecret }
+    },
+    template: placeholderSlotTemplate
+  }),
+  args: {}
+}
diff --git a/stories/NeCard.stories.ts b/stories/NeCard.stories.ts
index e7923d2..bf6b371 100644
--- a/stories/NeCard.stories.ts
+++ b/stories/NeCard.stories.ts
@@ -220,3 +220,17 @@ export const AlternateBackground: Story = {
     alternateBackground: true
   }
 }
+
+const withoutTitleTemplate =
+  '<NeCard v-bind="args">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</NeCard>'
+
+export const WithoutTitle: Story = {
+  render: (args) => ({
+    components: { NeCard },
+    setup() {
+      return { args }
+    },
+    template: withoutTitleTemplate
+  }),
+  args: { title: '' }
+}
diff --git a/stories/NeDropdown.stories.ts b/stories/NeDropdown.stories.ts
index 9b3f07e..9630c95 100644
--- a/stories/NeDropdown.stories.ts
+++ b/stories/NeDropdown.stories.ts
@@ -82,7 +82,7 @@ export const AlignToRight: Story = {
   args: { alignToRight: true }
 }
 
-const withSlotTemplate =
+const buttonSlotTemplate =
   '<NeDropdown v-bind="args">\
     <template #button>\
       <NeButton>\
@@ -94,13 +94,13 @@ const withSlotTemplate =
     </template>\
   </NeDropdown>'
 
-export const WithSlot: Story = {
+export const ButtonSlot: Story = {
   render: (args) => ({
     components: { NeDropdown, NeButton, FontAwesomeIcon },
     setup() {
       return { args, faChevronDown }
     },
-    template: withSlotTemplate
+    template: buttonSlotTemplate
   }),
   args: {}
 }
@@ -117,3 +117,29 @@ export const MenuClasses: Story = {
     menuClasses: 'bg-fuchsia-200! dark:bg-fuchsia-900!'
   }
 }
+
+const menuHeaderSlotTemplate = `<NeDropdown v-bind="args">
+  <template #menuHeader>
+    <div class="space-y-1 px-4 py-2 text-sm">
+      <div class="font-medium text-gray-900 dark:text-gray-100">
+        Adam Reynolds
+      </div>
+      <div class="text-gray-500 dark:text-gray-400">
+        adamreynolds@example.com
+      </div>
+    </div>
+    <hr class="my-1 border-gray-200 dark:border-gray-700"
+    />
+  </template>
+</NeDropdown>`
+
+export const MenuHeaderSlot: Story = {
+  render: (args) => ({
+    components: { NeDropdown },
+    setup() {
+      return { args }
+    },
+    template: menuHeaderSlotTemplate
+  }),
+  args: {}
+}