diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/UserTag/UserTag.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/UserTag/UserTag.component.tsx
new file mode 100644
index 00000000000..ac76481a3f3
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/UserTag/UserTag.component.tsx
@@ -0,0 +1,31 @@
+/*
+ *  Copyright 2021 Collate
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+import { Space } from 'antd';
+import { isUndefined } from 'lodash';
+import React from 'react';
+import ProfilePicture from '../ProfilePicture/ProfilePicture';
+import { UserTags } from './UserTag.interface';
+
+export const UserTag = ({ id, name }: UserTags) => {
+  if (isUndefined(id) && isUndefined(name)) {
+    return null;
+  }
+
+  return (
+    <Space data-testid="user-tag">
+      <ProfilePicture id={id} name={name} width="22" />
+      <span>{name}</span>
+    </Space>
+  );
+};
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/UserTag/UserTag.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/common/UserTag/UserTag.interface.ts
new file mode 100644
index 00000000000..10b6d63706c
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/UserTag/UserTag.interface.ts
@@ -0,0 +1,16 @@
+/*
+ *  Copyright 2021 Collate
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+export interface UserTags {
+  id: string;
+  name: string;
+}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/UserTag/UserTag.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/UserTag/UserTag.test.tsx
new file mode 100644
index 00000000000..c364afd7a7e
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/UserTag/UserTag.test.tsx
@@ -0,0 +1,45 @@
+/*
+ *  Copyright 2021 Collate
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+import { render } from '@testing-library/react';
+import React from 'react';
+import { UserTag } from './UserTag.component';
+
+jest.mock('../ProfilePicture/ProfilePicture', () => {
+  return jest.fn().mockReturnValue(<div>ProfilePicture</div>);
+});
+
+describe('UserTag Component', () => {
+  it('If valid props being passed to UserTag it should show tag', () => {
+    const { getByTestId, container } = render(
+      <UserTag id="test-2176e73" name="test-tag" />
+    );
+
+    const userTag = getByTestId('user-tag');
+
+    expect(userTag).toBeInTheDocument();
+    expect(container).toHaveTextContent('test-tag');
+  });
+
+  it('If inValid props being passed to UserTag it should not show tag', () => {
+    const { queryByTestId, container } = render(
+      <UserTag
+        id={undefined as unknown as string}
+        name={undefined as unknown as string}
+      />
+    );
+
+    expect(queryByTestId('user-tag')).not.toBeInTheDocument();
+    expect(container).toHaveTextContent('');
+  });
+});
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDownList.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDownList.test.tsx
index 583993cad17..063655c3140 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDownList.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDownList.test.tsx
@@ -21,6 +21,10 @@ import {
 import React from 'react';
 import DropDownList from './DropDownList';
 
+jest.mock('../common/UserTag/UserTag.component', () => ({
+  UserTag: jest.fn().mockReturnValue(<div>ProfilePicture</div>),
+}));
+
 const dropDownList = [
   {
     name: 'test 1',
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDownList.tsx b/openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDownList.tsx
index ea71c63b3ba..db162165e32 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDownList.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDownList.tsx
@@ -17,6 +17,7 @@ import React, { FunctionComponent, useEffect, useRef, useState } from 'react';
 import { useWindowDimensions } from '../../hooks/useWindowDimensions';
 import { getCountBadge } from '../../utils/CommonUtils';
 import { getTopPosition } from '../../utils/DropDownUtils';
+import { UserTag } from '../common/UserTag/UserTag.component';
 import Loader from '../Loader/Loader';
 import { DropDownListItem, DropDownListProp } from './types';
 
@@ -117,14 +118,15 @@ const DropDownList: FunctionComponent<DropDownListProp> = ({
         key={index}
         role="menuitem"
         onClick={(e) => !item.disabled && onSelect?.(e, item.value)}>
-        {item.icon}
-        {/* Spacer if icon is there */}
-        {item.icon && <span className="tw-p-1" />}
-        <p
-          className={classNames('tw-truncate', widthClass)}
-          title={item.name as string}>
-          {item.name}
-        </p>
+        {item.type === 'user' ? (
+          <UserTag id={item.value as string} name={item.name as string} />
+        ) : (
+          <p
+            className={classNames('tw-truncate', widthClass)}
+            title={item.name as string}>
+            {item.name}
+          </p>
+        )}
       </div>
     );
   };
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignee.less b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignee.less
new file mode 100644
index 00000000000..c39585e1391
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignee.less
@@ -0,0 +1,6 @@
+.assignee-tag {
+  display: flex;
+  align-items: center;
+  padding: 2px 3px;
+  margin: 1px 2px;
+}
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignees.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignees.test.tsx
index 4663d1738ca..fbc6d908999 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignees.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignees.test.tsx
@@ -50,6 +50,10 @@ const mockProps = {
   onChange: jest.fn(),
 };
 
+jest.mock('../../../components/common/UserTag/UserTag.component', () => ({
+  UserTag: jest.fn().mockReturnValue(<div>UserTag</div>),
+}));
+
 describe('Test assignees component', () => {
   it('Should render the component', async () => {
     render(<Assignees {...mockProps} />);
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignees.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignees.tsx
index adf4db95ec1..93d56ebd335 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignees.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignees.tsx
@@ -13,7 +13,9 @@
 
 import { Select } from 'antd';
 import React, { FC } from 'react';
+import { UserTag } from '../../../components/common/UserTag/UserTag.component';
 import { Option } from '../TasksPage.interface';
+import './Assignee.less';
 
 interface Props {
   options: Option[];
@@ -55,7 +57,7 @@ const Assignees: FC<Props> = ({ assignees, onSearch, onChange, options }) => {
           data-testid="assignee-option"
           data-usertype={option.type}
           key={option.value}>
-          {option.label}
+          <UserTag id={option.value} name={option.label} />
         </Option>
       ))}
     </Select>
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TagsTabs.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TagsTabs.test.tsx
index 815f5c42201..d81baa1ca97 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TagsTabs.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TagsTabs.test.tsx
@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { TagsTabs } from './TagsTabs';
 
@@ -55,16 +55,10 @@ describe('Test Description Tabs Component', () => {
 
     expect(tabs).toHaveLength(tabList.length);
 
-    fireEvent.click(tabs[0]);
+    expect(await screen.findByText('Current')).toBeInTheDocument();
 
-    expect(await screen.findByTestId('tags')).toBeInTheDocument();
+    expect(await screen.findByText('Diff')).toBeInTheDocument();
 
-    fireEvent.click(tabs[1]);
-
-    expect(await screen.findByTestId('DiffView')).toBeInTheDocument();
-
-    fireEvent.click(tabs[2]);
-
-    expect(await screen.findByTestId('tagSuggestion')).toBeInTheDocument();
+    expect(await screen.findByText('New')).toBeInTheDocument();
   });
 });