diff --git a/src/components/WebexAvatar/README.md b/src/components/WebexAvatar/README.md
index 8fc83b6dc..11940bd4c 100644
--- a/src/components/WebexAvatar/README.md
+++ b/src/components/WebexAvatar/README.md
@@ -1,9 +1,26 @@
 # Webex Avatar Component
+Webex avatar component displays the avatar and status of a _Webex Teams_ user.
 
-Webex avatar component displays the avatar of a _Webex Teams_ user with a given `personID` and `adapter` object.
+<p align="center">
+  <img src="./WebexAvatar.png" alt="Default Webex Avatar" />
+</p>
 
-## How to use
-
-```js
-<WebexAvatar personID="PersonID" adapter={peopleJSONAdapter} />
+## Preview
+To see all the different possible states of the Webex Avatar component, you can run our Storybook:
+```shell
+  npm start
 ```
+
+## Embed
+1. Create a component adapter from which the data will be retrieved (See [adapters](../../adapters)). For instance:
+
+    ```js
+      const jsonAdapter = new PeopleJSONAdapter();
+    ```
+2. Create a component instance by passing the person ID as a string and the [component data adapter](../../adapters/PeopleAdapter.js) that we created previously
+
+    ```js
+      <WebexAvatar personID="personID" adapter={jsonAdapter} />
+    ```
+
+The component knows how to manage its data. If anything changes in the data source that the adapter manages, the component will also update on its own.
diff --git a/src/components/WebexAvatar/WebexAvatar.png b/src/components/WebexAvatar/WebexAvatar.png
new file mode 100644
index 000000000..e22eb6daf
Binary files /dev/null and b/src/components/WebexAvatar/WebexAvatar.png differ