diff --git a/web/ASC.Web.Storybook/stories/drop-down/drop-down-profile-item/README.md b/web/ASC.Web.Storybook/stories/drop-down/drop-down-profile-item/README.md
new file mode 100644
index 0000000000..3620c18c74
--- /dev/null
+++ b/web/ASC.Web.Storybook/stories/drop-down/drop-down-profile-item/README.md
@@ -0,0 +1,32 @@
+# DropDownProfileItem
+
+## Usage
+
+```js
+import { DropDownProfileItem } from 'asc-web-components';
+```
+
+#### Description
+
+To add preview of user profile, you must use DropDownProfileItem component inherited from DropDownItem and add isUserPreview parameter to DropDown.
+
+To add an avatar username and email when you turn on isUserPreview parameter, you need to add parameters of Avatar component: avatarSource - link to user's avatar, avatarRole - user's role, displayName - user name and email - user’s email address.
+
+#### Usage
+
+```js
+
+```
+
+#### Properties
+
+| Props | Type | Required | Values | Default | Description |
+| ------------------ | -------- | :------: | --------------------------- | -------------- | ----------------------------------------------------------------- |
+| `avatarRole` | `oneOf` | - |`owner`,`admin`,`guest`,`user`| `user` | Adds a user role table |
+| `avatarSource` | `string` | - | - | - | Avatar image source |
+| `displayName` | `string` | - | - | - | User name for display |
+| `email` | `string` | - | - | - | User email for display |
\ No newline at end of file
diff --git a/web/ASC.Web.Storybook/stories/drop-down/drop-down-profile-item/drop-down-profile-item.stories.js b/web/ASC.Web.Storybook/stories/drop-down/drop-down-profile-item/drop-down-profile-item.stories.js
new file mode 100644
index 0000000000..5df60cef5a
--- /dev/null
+++ b/web/ASC.Web.Storybook/stories/drop-down/drop-down-profile-item/drop-down-profile-item.stories.js
@@ -0,0 +1,37 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import withReadme from 'storybook-readme/with-readme'
+import Readme from './README.md'
+import { DropDown, DropDownItem, DropDownProfileItem } from 'asc-web-components'
+import Section from '../../../.storybook/decorators/section';
+
+storiesOf('Components | DropDown', module)
+ .addDecorator(withReadme(Readme))
+ .add('base profile item', () => {
+
+ return (
+
+
+
+ console.log('Profile clicked')} />
+ console.log('About clicked')} />
+ console.log('Log out clicked')} />
+
+
+ )
+ });
\ No newline at end of file