diff --git a/ingestion/src/metadata_server/static/css/style.css b/ingestion/src/metadata_server/static/css/style.css
index 400f9ba7cf3..25c02a4b9ab 100644
--- a/ingestion/src/metadata_server/static/css/style.css
+++ b/ingestion/src/metadata_server/static/css/style.css
@@ -12446,7 +12446,7 @@ body .editor-wrapper ul,body #description ul,body .content-container ul{
 }
 .tw-bg-body-main{
     --tw-bg-opacity: 1;
-    background-color:rgba(252, 251, 254, var(--tw-bg-opacity))
+    background-color:rgba(248, 249, 251, var(--tw-bg-opacity))
 }
 .tw-bg-tag{
     --tw-bg-opacity: 1;
diff --git a/openmetadata-ui/src/main/resources/ui/package.json b/openmetadata-ui/src/main/resources/ui/package.json
index 243c006a27e..d7f3df8596b 100644
--- a/openmetadata-ui/src/main/resources/ui/package.json
+++ b/openmetadata-ui/src/main/resources/ui/package.json
@@ -26,6 +26,7 @@
     "@okta/okta-react": "^6.4.3",
     "@rjsf/core": "^4.1.1",
     "@toast-ui/react-editor": "^3.1.3",
+    "antd": "^4.20.6",
     "antlr4": "4.9.2",
     "autoprefixer": "^9.8.6",
     "axios": "^0.21.1",
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/ActivityFeedCard.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/ActivityFeedCard.tsx
index 703678cb2ec..fc477587e0d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/ActivityFeedCard.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/ActivityFeedCard.tsx
@@ -56,13 +56,14 @@ const ActivityFeedCard: FC<ActivityFeedCardProp> = ({
         timeStamp={feed.postTs}
       />
       <FeedCardBody
-        className="tw-mx-7 tw-ml-9 tw-bg-white tw-p-3 tw-border tw-border-main tw-rounded-md tw-break-all tw-flex tw-justify-between "
+        className="tw-ml-8 tw-bg-white tw-border-main tw-rounded-md tw-break-all tw-flex tw-justify-between "
         isAuthor={Boolean(feed.from === currentUser || isAdminUser)}
         message={feed.message}
         postId={feed.id}
         threadId={threadId as string}
         onConfirmation={onConfirmation}
       />
+      <div className="tw-filter-seperator" />
       <FeedCardFooter
         className="tw-ml-9 tw-mt-3"
         isFooterVisible={isFooterVisible}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/FeedListBody.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/FeedListBody.tsx
index e40c1e8837b..7bb303cfffe 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/FeedListBody.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/FeedListBody.tsx
@@ -11,6 +11,7 @@
  *  limitations under the License.
  */
 
+import { Card } from 'antd';
 import { Post } from 'Models';
 import React, { FC, Fragment } from 'react';
 import ActivityFeedCard from '../ActivityFeedCard/ActivityFeedCard';
@@ -52,11 +53,10 @@ const FeedListBody: FC<FeedListBodyProp> = ({
     threadId: string
   ) => {
     return postLength > 1 ? (
-      <div className="tw-mb-6">
-        <div className="tw-ml-9 tw-flex tw-mb-6">
+      <div className="tw-mb-2">
+        <div className="tw-ml-9 tw-flex">
           <FeedCardFooter
             isFooterVisible
-            className="tw--mt-4"
             lastReplyTimeStamp={lastPost?.postTs}
             repliedUsers={repliedUsers}
             replies={replies}
@@ -91,53 +91,63 @@ const FeedListBody: FC<FeedListBodyProp> = ({
           const lastPost = feed.posts[postLength - 1];
 
           return (
-            <div data-testid="message-container" key={index}>
-              <ActivityFeedCard
-                className="tw-mb-6"
-                data-testid="main-message"
-                entityLink={feed.about}
-                feed={mainFeed}
-                isEntityFeed={isEntityFeed}
-              />
-              {postLength > 0 ? (
-                <Fragment>
-                  {getThreadFooter(
-                    postLength,
-                    lastPost,
-                    repliedUsers,
-                    replies,
-                    feed.id
-                  )}
-                  <ActivityFeedCard
-                    className="tw-mb-6 tw-ml-9"
-                    data-testid="latest-message"
-                    feed={lastPost}
-                    isEntityFeed={isEntityFeed}
-                    threadId={feed.id}
-                    onConfirmation={onConfirmation}
-                  />
+            <Card
+              key={`${index} - card`}
+              style={{
+                border: '1px rgb(221, 227, 234) solid',
+                borderRadius: '8px',
+                marginBottom: '20px',
+                boxShadow: '1px 1px 6px rgb(0 0 0 / 12%)',
+                marginRight: '4px',
+                marginLeft: '4px',
+              }}>
+              <div data-testid="message-container" key={index}>
+                <ActivityFeedCard
+                  data-testid="main-message"
+                  entityLink={feed.about}
+                  feed={mainFeed}
+                  isEntityFeed={isEntityFeed}
+                />
+                {postLength > 0 ? (
+                  <Fragment>
+                    {getThreadFooter(
+                      postLength,
+                      lastPost,
+                      repliedUsers,
+                      replies,
+                      feed.id
+                    )}
+                    <ActivityFeedCard
+                      className="tw-mb-6 tw-ml-9"
+                      data-testid="latest-message"
+                      feed={lastPost}
+                      isEntityFeed={isEntityFeed}
+                      threadId={feed.id}
+                      onConfirmation={onConfirmation}
+                    />
+                    <p
+                      className="link-text tw-text-xs tw-underline tw-ml-9 tw-mt-4 tw-mb-2"
+                      data-testid="quick-reply"
+                      onClick={() => {
+                        toggleReplyEditor(feed.id);
+                      }}>
+                      Reply
+                    </p>
+                    {getFeedEditor(feed.id)}
+                  </Fragment>
+                ) : (
                   <p
-                    className="link-text tw-text-xs tw-underline tw-ml-9 tw-pl-9 tw--mt-4 tw-mb-6"
-                    data-testid="quick-reply"
+                    className="link-text tw-text-xs tw-underline tw-ml-9 tw-mt-4 tw-mb-2"
+                    data-testid="replyInSidePanel"
                     onClick={() => {
-                      toggleReplyEditor(feed.id);
+                      onThreadSelect(feed.id);
+                      onViewMore();
                     }}>
                     Reply
                   </p>
-                  {getFeedEditor(feed.id)}
-                </Fragment>
-              ) : (
-                <p
-                  className="link-text tw-text-xs tw-underline tw-ml-9 tw--mt-4 tw-mb-6"
-                  data-testid="replyInSidePanel"
-                  onClick={() => {
-                    onThreadSelect(feed.id);
-                    onViewMore();
-                  }}>
-                  Reply
-                </p>
-              )}
-            </div>
+                )}
+              </div>
+            </Card>
           );
         })}
     </Fragment>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/FeedListSeparator.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/FeedListSeparator.tsx
index 8a0a501d53e..5b6f1118e71 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/FeedListSeparator.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/FeedListSeparator.tsx
@@ -28,7 +28,7 @@ const FeedListSeparator: FC<FeedListSeparatorProp> = ({
         />
         {relativeDay ? (
           <span
-            className="tw-bg-white tw-px-4 tw-py-px tw-border tw-border-grey-muted tw-rounded tw-z-10 tw-text-grey-muted tw-font-medium"
+            className="tw-bg-separator tw-px-4 tw-py-px tw-rounded tw-z-10 tw-text-grey-muted tw-font-medium"
             data-testid="relativeday">
             {relativeDay}
           </span>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityThreadPanel/ActivityThreadList.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityThreadPanel/ActivityThreadList.tsx
index b9ede1c77ab..8896f9b2179 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityThreadPanel/ActivityThreadList.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityThreadPanel/ActivityThreadList.tsx
@@ -10,6 +10,7 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
+import { Card } from 'antd';
 import React, { FC, Fragment } from 'react';
 import { getFeedListWithRelativeDays } from '../../../utils/FeedUtils';
 import ActivityFeedCard from '../ActivityFeedCard/ActivityFeedCard';
@@ -61,67 +62,80 @@ const ActivityThreadList: FC<ActivityThreadListProp> = ({
 
                 return (
                   <Fragment key={index}>
-                    <div data-testid="main-message">
-                      <ActivityFeedCard
-                        isEntityFeed
-                        className="tw-mb-6"
-                        entityLink={thread.about}
-                        feed={mainFeed}
-                      />
-                    </div>
-                    {postLength > 0 ? (
-                      <div data-testid="replies-container">
-                        {postLength > 1 ? (
-                          <div className="tw-mb-6">
-                            <div className="tw-ml-9 tw-flex tw-mb-6">
-                              <FeedCardFooter
-                                isFooterVisible
-                                className="tw--mt-4"
-                                lastReplyTimeStamp={lastPost?.postTs}
-                                repliedUsers={repliedUsers}
-                                replies={replies}
-                                threadId={thread.id}
-                                onThreadSelect={() => onThreadSelect(thread.id)}
-                              />
-                            </div>
-                          </div>
-                        ) : null}
-                        <div data-testid="latest-reply">
-                          <ActivityFeedCard
-                            isEntityFeed
-                            className="tw-mb-6 tw-ml-9"
-                            feed={lastPost}
-                            threadId={thread.id}
-                            onConfirmation={onConfirmation}
-                          />
-                        </div>
-
-                        <p
-                          className="link-text tw-text-xs tw-underline tw-ml-9 tw-pl-9 tw--mt-4 tw-mb-6"
-                          data-testid="quick-reply-button"
-                          onClick={() => {
-                            toggleReplyEditor(thread.id);
-                          }}>
-                          Reply
-                        </p>
-                      </div>
-                    ) : (
-                      <p
-                        className="link-text tw-text-xs tw-underline tw-ml-9 tw--mt-4 tw-mb-6"
-                        data-testid="main-message-reply-button"
-                        onClick={() => onThreadSelect(thread.id)}>
-                        Reply
-                      </p>
-                    )}
-                    {selectedThreadId === thread.id ? (
-                      <div data-testid="quick-reply-editor">
-                        <ActivityFeedEditor
-                          buttonClass="tw-mr-4"
-                          className="tw-ml-5 tw-mr-2 tw-mb-6"
-                          onSave={postFeed}
+                    <Card
+                      key={`${index} - card`}
+                      style={{
+                        border: '1px rgb(221, 227, 234) solid',
+                        borderRadius: '8px',
+                        marginBottom: '20px',
+                        boxShadow: '1px 1px 6px rgb(0 0 0 / 12%)',
+                        marginRight: '4px',
+                        marginLeft: '4px',
+                      }}>
+                      <div data-testid="main-message">
+                        <ActivityFeedCard
+                          isEntityFeed
+                          className="tw-mb-6"
+                          entityLink={thread.about}
+                          feed={mainFeed}
                         />
                       </div>
-                    ) : null}
+                      {postLength > 0 ? (
+                        <div data-testid="replies-container">
+                          {postLength > 1 ? (
+                            <div className="tw-mb-6">
+                              <div className="tw-ml-9 tw-flex tw-mb-6">
+                                <FeedCardFooter
+                                  isFooterVisible
+                                  className="tw--mt-4"
+                                  lastReplyTimeStamp={lastPost?.postTs}
+                                  repliedUsers={repliedUsers}
+                                  replies={replies}
+                                  threadId={thread.id}
+                                  onThreadSelect={() =>
+                                    onThreadSelect(thread.id)
+                                  }
+                                />
+                              </div>
+                            </div>
+                          ) : null}
+                          <div data-testid="latest-reply">
+                            <ActivityFeedCard
+                              isEntityFeed
+                              className="tw-mb-6 tw-ml-9"
+                              feed={lastPost}
+                              threadId={thread.id}
+                              onConfirmation={onConfirmation}
+                            />
+                          </div>
+
+                          <p
+                            className="link-text tw-text-xs tw-underline tw-ml-9 tw-pl-9 tw-mt-4 tw-mb-2"
+                            data-testid="quick-reply-button"
+                            onClick={() => {
+                              toggleReplyEditor(thread.id);
+                            }}>
+                            Reply
+                          </p>
+                        </div>
+                      ) : (
+                        <p
+                          className="link-text tw-text-xs tw-underline tw-ml-9 tw-mt-4 tw-mb-2"
+                          data-testid="main-message-reply-button"
+                          onClick={() => onThreadSelect(thread.id)}>
+                          Reply
+                        </p>
+                      )}
+                      {selectedThreadId === thread.id ? (
+                        <div data-testid="quick-reply-editor">
+                          <ActivityFeedEditor
+                            buttonClass="tw-mr-4"
+                            className="tw-ml-5 tw-mr-2 tw-mb-6"
+                            onSave={postFeed}
+                          />
+                        </div>
+                      ) : null}
+                    </Card>
                   </Fragment>
                 );
               })}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityThreadPanel/ActivityThreadPanel.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityThreadPanel/ActivityThreadPanel.tsx
index fada8098cb8..646db759fb7 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityThreadPanel/ActivityThreadPanel.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityThreadPanel/ActivityThreadPanel.tsx
@@ -240,7 +240,7 @@ const ActivityThreadPanel: FC<ActivityThreadPanelProp> = ({
               </div>
             ) : null}
             <ActivityThreadList
-              className="tw-py-6 tw-pl-5"
+              className="tw-py-6 tw-px-5"
               postFeed={postFeed}
               selectedThreadId={selectedThreadId}
               threads={threads}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/FeedCardFooter/FeedCardFooter.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/FeedCardFooter/FeedCardFooter.test.tsx
index 34324788858..79b331f0e0f 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/FeedCardFooter/FeedCardFooter.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/FeedCardFooter/FeedCardFooter.test.tsx
@@ -12,7 +12,6 @@
  */
 
 import {
-  findAllByTestId,
   findByTestId,
   queryAllByTestId,
   queryByTestId,
@@ -54,13 +53,9 @@ describe('Test FeedCardFooter component', () => {
       }
     );
 
-    const repliedUsers = await findAllByTestId(container, 'replied-user');
     const replyCount = await findByTestId(container, 'reply-count');
-    const lastReply = await findByTestId(container, 'last-reply');
 
-    expect(repliedUsers).toHaveLength(2);
     expect(replyCount).toBeInTheDocument();
-    expect(lastReply).toBeInTheDocument();
   });
 
   it('Check if FeedCardFooter has isFooterVisible as false', async () => {
@@ -126,11 +121,9 @@ describe('Test FeedCardFooter component', () => {
       }
     );
 
-    const repliedUsers = queryAllByTestId(container, 'replied-user');
     const replyCount = queryByTestId(container, 'reply-count');
     const lastReply = queryByTestId(container, 'last-reply');
 
-    expect(repliedUsers).toHaveLength(2);
     expect(replyCount).toBeInTheDocument();
     expect(lastReply).not.toBeInTheDocument();
   });
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/FeedCardFooter/FeedCardFooter.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/FeedCardFooter/FeedCardFooter.tsx
index bcda58216a4..84eeb846c8b 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/FeedCardFooter/FeedCardFooter.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/FeedCardFooter/FeedCardFooter.tsx
@@ -11,11 +11,9 @@
  *  limitations under the License.
  */
 
-import { isUndefined, toLower } from 'lodash';
+import { isUndefined } from 'lodash';
 import React, { FC } from 'react';
 import { getReplyText } from '../../../utils/FeedUtils';
-import { getDayTimeByTimeStamp } from '../../../utils/TimeUtils';
-import ProfilePicture from '../../common/ProfilePicture/ProfilePicture';
 import { FeedFooterProp } from '../ActivityFeedCard/ActivityFeedCard.interface';
 
 const FeedCardFooter: FC<FeedFooterProp> = ({
@@ -24,7 +22,6 @@ const FeedCardFooter: FC<FeedFooterProp> = ({
   className,
   threadId,
   onThreadSelect,
-  lastReplyTimeStamp,
   isFooterVisible,
 }) => {
   const repliesCount = isUndefined(replies) ? 0 : replies;
@@ -35,7 +32,7 @@ const FeedCardFooter: FC<FeedFooterProp> = ({
       !isUndefined(replies) &&
       isFooterVisible ? (
         <div className="tw-flex tw-group">
-          {repliedUsers?.map((u, i) => (
+          {/* {repliedUsers?.map((u, i) => (
             <ProfilePicture
               className="tw-mt-0.5 tw-mx-0.5"
               data-testid="replied-user"
@@ -44,21 +41,21 @@ const FeedCardFooter: FC<FeedFooterProp> = ({
               name={u}
               width="22"
             />
-          ))}
+          ))} */}
           <p
-            className="tw-ml-1 link-text tw-text-xs tw-mt-1.5 tw-underline"
+            className="tw-ml-1 tw-text-info tw-text-xs tw-mt-1.5 tw-underline"
             data-testid="reply-count"
             onClick={() => onThreadSelect?.(threadId as string)}>
-            {getReplyText(repliesCount)}
+            {`View ${getReplyText(repliesCount)}`}
           </p>
-          {lastReplyTimeStamp && repliesCount > 0 ? (
+          {/* {lastReplyTimeStamp && repliesCount > 0 ? (
             <span
               className="tw-text-grey-muted tw-pl-2 tw-text-xs tw-font-medium tw-mt-1.5"
               data-testid="last-reply">
               Last reply{' '}
               {toLower(getDayTimeByTimeStamp(lastReplyTimeStamp as number))}
             </span>
-          ) : null}
+          ) : null} */}
         </div>
       ) : null}
     </div>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/FeedCardHeader/FeedCardHeader.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/FeedCardHeader/FeedCardHeader.tsx
index 71aaabd7979..2690b58e8ed 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/FeedCardHeader/FeedCardHeader.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/FeedCardHeader/FeedCardHeader.tsx
@@ -92,7 +92,7 @@ const FeedCardHeader: FC<FeedHeaderProp> = ({
               <div>
                 <div className="tw-flex">
                   <div className="tw-mr-2">
-                    <ProfilePicture id="" name={createdBy} width="30" />
+                    <ProfilePicture id="" name={createdBy} width="24" />
                   </div>
                   <div className="tw-self-center">
                     <Button
@@ -237,7 +237,7 @@ const FeedCardHeader: FC<FeedHeaderProp> = ({
             <Fragment>
               <span data-testid="entityType">{entityType} </span>
               <Link data-testid="entitylink" to={prepareFeedLink()}>
-                <button className="link-text" disabled={AppState.isTourOpen}>
+                <button className="tw-text-info" disabled={AppState.isTourOpen}>
                   {entityDisplayName()}
                 </button>
               </Link>
@@ -251,7 +251,7 @@ const FeedCardHeader: FC<FeedHeaderProp> = ({
   };
 
   return (
-    <div className={classNames('tw-flex tw-mb-1.5', className)}>
+    <div className={classNames('tw-flex tw-mb-4', className)}>
       <PopOver
         hideDelay={500}
         html={getUserData()}
@@ -262,7 +262,7 @@ const FeedCardHeader: FC<FeedHeaderProp> = ({
           className="tw-cursor-pointer"
           data-testid="authorAvatar"
           onClick={onClickHandler}>
-          <ProfilePicture id="" name={createdBy} width="30" />
+          <ProfilePicture id="" name={createdBy} width="24" />
         </span>
       </PopOver>
       <h6 className="tw-flex tw-items-center tw-m-0 tw-heading tw-pl-2">
@@ -282,7 +282,7 @@ const FeedCardHeader: FC<FeedHeaderProp> = ({
         <span
           className="tw-text-grey-muted tw-pl-2 tw-text-xs tw--mb-0.5"
           data-testid="timestamp">
-          {getDayTimeByTimeStamp(timeStamp)}
+          {' - ' + getDayTimeByTimeStamp(timeStamp)}
         </span>
       </h6>
     </div>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/EntityList/EntityList.tsx b/openmetadata-ui/src/main/resources/ui/src/components/EntityList/EntityList.tsx
index 563e64777c3..ae6d9dfc3fd 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/EntityList/EntityList.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/EntityList/EntityList.tsx
@@ -11,13 +11,13 @@
  *  limitations under the License.
  */
 
+import { Button, Card, Typography } from 'antd';
 import { FormatedTableData } from 'Models';
 import React, { Fragment, FunctionComponent } from 'react';
 import { Link } from 'react-router-dom';
 import { EntityReference } from '../../generated/type/entityReference';
 import { getEntityName } from '../../utils/CommonUtils';
 import { getEntityIcon, getEntityLink } from '../../utils/TableUtils';
-
 interface Prop {
   entityList: Array<FormatedTableData>;
   headerText: string | JSX.Element;
@@ -25,6 +25,16 @@ interface Prop {
   testIDText: string;
 }
 
+interface AntdEntityListProp {
+  entityList: Array<FormatedTableData>;
+  headerText?: string | JSX.Element;
+  headerTextLabel: string;
+  noDataPlaceholder: JSX.Element;
+  testIDText: string;
+}
+
+const { Text } = Typography;
+
 const EntityList: FunctionComponent<Prop> = ({
   entityList = [],
   headerText,
@@ -33,9 +43,9 @@ const EntityList: FunctionComponent<Prop> = ({
 }: Prop) => {
   return (
     <Fragment>
-      <h6 className="tw-heading tw-mb-3" data-testid="filter-heading">
+      <Text className="tw-font-semibold" type="secondary">
         {headerText}
-      </h6>
+      </Text>
       {entityList.length
         ? entityList.map((item, index) => {
             return (
@@ -48,16 +58,17 @@ const EntityList: FunctionComponent<Prop> = ({
                 <div className="tw-flex">
                   {getEntityIcon(item.index || item.type || '')}
                   <Link
-                    className="tw-font-medium tw-pl-2"
+                    className="tw-font-medium"
                     to={getEntityLink(
                       item.index || item.type || '',
                       item.fullyQualifiedName
                     )}>
-                    <button
-                      className="tw-text-grey-body hover:tw-text-primary-hover hover:tw-underline tw-w-52 tw-truncate tw-text-left"
-                      title={getEntityName(item as unknown as EntityReference)}>
+                    <Button
+                      className="tw-text-grey-body hover:tw-text-primary-hover hover:tw-underline"
+                      title={getEntityName(item as unknown as EntityReference)}
+                      type="text">
                       {getEntityName(item as unknown as EntityReference)}
-                    </button>
+                    </Button>
                   </Link>
                 </div>
               </div>
@@ -68,4 +79,55 @@ const EntityList: FunctionComponent<Prop> = ({
   );
 };
 
+export const EntityListWithAntd: FunctionComponent<AntdEntityListProp> = ({
+  entityList = [],
+  headerText,
+  headerTextLabel,
+  noDataPlaceholder,
+  testIDText,
+}: AntdEntityListProp) => {
+  return (
+    <Card
+      extra={headerText}
+      style={{
+        border: '1px rgb(221, 227, 234) solid',
+        borderRadius: '8px',
+        boxShadow: '1px 1px 6px rgb(0 0 0 / 12%)',
+        marginRight: '4px',
+        marginLeft: '4px',
+      }}
+      title={headerTextLabel}>
+      {entityList.length
+        ? entityList.map((item, index) => {
+            return (
+              <div
+                className="tw-flex tw-items-center tw-justify-between tw-mb-2"
+                data-testid={`${testIDText}-${getEntityName(
+                  item as unknown as EntityReference
+                )}`}
+                key={index}>
+                <div className="tw-flex">
+                  {getEntityIcon(item.index || item.type || '')}
+                  <Link
+                    className="tw-font-medium"
+                    to={getEntityLink(
+                      item.index || item.type || '',
+                      item.fullyQualifiedName
+                    )}>
+                    <Button
+                      className="tw-text-grey-body hover:tw-text-primary-hover hover:tw-underline"
+                      title={getEntityName(item as unknown as EntityReference)}
+                      type="text">
+                      {getEntityName(item as unknown as EntityReference)}
+                    </Button>
+                  </Link>
+                </div>
+              </div>
+            );
+          })
+        : noDataPlaceholder}
+    </Card>
+  );
+};
+
 export default EntityList;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/FeedEditor/FeedEditor.css b/openmetadata-ui/src/main/resources/ui/src/components/FeedEditor/FeedEditor.css
index 8705005cd9b..75f5426137e 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/FeedEditor/FeedEditor.css
+++ b/openmetadata-ui/src/main/resources/ui/src/components/FeedEditor/FeedEditor.css
@@ -993,12 +993,12 @@
   background: white;
 }
 .ql-toolbar.ql-snow {
-  border-color: rgb(220, 227, 236);
+  border-color: rgb(221, 227, 234);
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
 }
 .ql-container.ql-snow {
-  border-color: rgb(220, 227, 236);
+  border-color: rgb(221, 227, 234);
   border-bottom-left-radius: 6px;
   border-bottom-right-radius: 6px;
 }
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/MyAssetStats/MyAssetStats.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/MyAssetStats/MyAssetStats.component.tsx
index 5b98baec770..2cca2be8d00 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/MyAssetStats/MyAssetStats.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/MyAssetStats/MyAssetStats.component.tsx
@@ -11,6 +11,7 @@
  *  limitations under the License.
  */
 
+import { Button, Card } from 'antd';
 import { isNil } from 'lodash';
 import React, { FunctionComponent, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
@@ -114,10 +115,15 @@ const MyAssetStats: FunctionComponent<Props> = ({
   }, []);
 
   return (
-    <div
-      className="tw-mb-3"
+    <Card
       data-testid="data-summary-container"
-      id="assetStatsCount">
+      style={{
+        border: '1px rgb(221, 227, 234) solid',
+        borderRadius: '8px',
+        boxShadow: '1px 1px 6px rgb(0 0 0 / 12%)',
+        marginRight: '4px',
+        marginLeft: '4px',
+      }}>
       {Object.values(dataSummary).map((data, index) => (
         <div
           className="tw-flex tw-items-center tw-justify-between tw-mb-2"
@@ -135,22 +141,26 @@ const MyAssetStats: FunctionComponent<Props> = ({
                   position="bottom"
                   title={TITLE_FOR_NON_ADMIN_ACTION}>
                   <Link
-                    className="tw-font-medium tw-pl-2"
+                    className="tw-font-medium"
                     data-testid={data.dataTestId}
                     to={data.link}>
-                    <button className="tw-text-grey-body hover:tw-text-primary-hover hover:tw-underline">
+                    <Button
+                      className="tw-text-grey-body hover:tw-text-primary-hover hover:tw-underline"
+                      type="text">
                       {data.data}
-                    </button>
+                    </Button>
                   </Link>
                 </NonAdminAction>
               ) : (
                 <Link
-                  className="tw-font-medium tw-pl-2"
+                  className="tw-font-medium"
                   data-testid={data.dataTestId}
                   to={data.link}>
-                  <button className="tw-text-grey-body hover:tw-text-primary-hover hover:tw-underline">
+                  <Button
+                    className="tw-text-grey-body hover:tw-text-primary-hover hover:tw-underline"
+                    type="text">
                     {data.data}
-                  </button>
+                  </Button>
                 </Link>
               )
             ) : (
@@ -160,7 +170,7 @@ const MyAssetStats: FunctionComponent<Props> = ({
           {!isNil(data.count) && getCountBadge(data.count, '', false)}
         </div>
       ))}
-    </div>
+    </Card>
   );
 };
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/MyAssetStats/MyAssetStats.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/MyAssetStats/MyAssetStats.test.tsx
index 569ef588ceb..838e073e050 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/MyAssetStats/MyAssetStats.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/MyAssetStats/MyAssetStats.test.tsx
@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { getByTestId, render } from '@testing-library/react';
+import { getAllByTestId, getByTestId, render } from '@testing-library/react';
 import React from 'react';
 import { MemoryRouter } from 'react-router';
 import { getTeamAndUserDetailsPath } from '../../constants/constants';
@@ -56,9 +56,9 @@ describe('Test MyDataHeader Component', () => {
       wrapper: MemoryRouter,
     });
 
-    const dataSummary = getByTestId(container, 'data-summary-container');
+    const dataSummary = getAllByTestId(container, /-summary$/);
 
-    expect(dataSummary.childElementCount).toBe(7);
+    expect(dataSummary.length).toBe(7);
   });
 
   it('OnClick it should redirect to respective page', () => {
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.component.tsx
index 899f68aa8ba..81b96eff1e0 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.component.tsx
@@ -33,12 +33,12 @@ import { Button } from '../buttons/Button/Button';
 import ErrorPlaceHolderES from '../common/error-with-placeholder/ErrorPlaceHolderES';
 import PageLayout from '../containers/PageLayout';
 import DropDownList from '../dropdown/DropDownList';
-import EntityList from '../EntityList/EntityList';
+import { EntityListWithAntd } from '../EntityList/EntityList';
 import Loader from '../Loader/Loader';
 import MyAssetStats from '../MyAssetStats/MyAssetStats.component';
 import Onboarding from '../onboarding/Onboarding';
 import RecentlyViewed from '../recently-viewed/RecentlyViewed';
-import RecentSearchedTerms from '../RecentSearchedTerms/RecentSearchedTerms';
+import RecentSearchedTermsAntd from '../RecentSearchedTerms/RecentSearchedTermsAntd';
 import { MyDataProps } from './MyData.interface';
 
 const MyData: React.FC<MyDataProps> = ({
@@ -83,10 +83,9 @@ const MyData: React.FC<MyDataProps> = ({
             data-testid="feeds"
             size="custom"
             tag="button"
-            theme="primary"
             variant="link"
             onClick={() => setFieldListVisible((visible) => !visible)}>
-            <span className="tw-font-medium">
+            <span className="tw-font-medium tw-text-grey">
               {filterList.find((f) => f.value === feedFilter)?.name}
             </span>
             <DropDownIcon />
@@ -105,7 +104,7 @@ const MyData: React.FC<MyDataProps> = ({
 
   const getLeftPanel = () => {
     return (
-      <div className="tw-mt-12">
+      <div className="tw-mt-4">
         <MyAssetStats
           countDashboards={countDashboards}
           countPipelines={countPipelines}
@@ -115,24 +114,22 @@ const MyData: React.FC<MyDataProps> = ({
           countTopics={countTopics}
           countUsers={countUsers}
         />
-        <div className="tw-filter-seperator" />
+        <div className="tw-mb-5" />
         <RecentlyViewed />
-        <div className="tw-filter-seperator tw-mt-3" />
-        <RecentSearchedTerms />
-        <div className="tw-filter-seperator tw-mt-3" />
+        <div className="tw-mb-5" />
+        <RecentSearchedTermsAntd />
       </div>
     );
   };
 
   const getRightPanel = useCallback(() => {
     return (
-      <div className="tw-mt-12">
+      <div className="tw-mt-4">
         <div data-testid="my-data-container">
-          <EntityList
+          <EntityListWithAntd
             entityList={ownedData}
             headerText={
-              <div className="tw-flex tw-justify-between">
-                My Data
+              <>
                 {ownedData.length ? (
                   <Link
                     data-testid="my-data"
@@ -141,7 +138,7 @@ const MyData: React.FC<MyDataProps> = ({
                       AppState.userDetails,
                       AppState.nonSecureUserDetails
                     )}>
-                    <span className="link-text tw-font-normal tw-text-xs">
+                    <span className="tw-text-info tw-font-normal tw-text-xs">
                       View All{' '}
                       <span data-testid="my-data-total-count">
                         ({ownedDataCount})
@@ -149,19 +146,19 @@ const MyData: React.FC<MyDataProps> = ({
                     </span>
                   </Link>
                 ) : null}
-              </div>
+              </>
             }
+            headerTextLabel="My Data"
             noDataPlaceholder={<>You have not owned anything yet.</>}
             testIDText="My data"
           />
         </div>
-        <div className="tw-filter-seperator tw-mt-3" />
+        <div className="tw-mt-5" />
         <div data-testid="following-data-container">
-          <EntityList
+          <EntityListWithAntd
             entityList={followedData}
             headerText={
-              <div className="tw-flex tw-justify-between">
-                Following
+              <>
                 {followedData.length ? (
                   <Link
                     data-testid="following-data"
@@ -170,7 +167,7 @@ const MyData: React.FC<MyDataProps> = ({
                       AppState.userDetails,
                       AppState.nonSecureUserDetails
                     )}>
-                    <span className="link-text tw-font-normal tw-text-xs">
+                    <span className="tw-text-info tw-font-normal tw-text-xs">
                       View All{' '}
                       <span data-testid="following-data-total-count">
                         ({followedDataCount})
@@ -178,13 +175,14 @@ const MyData: React.FC<MyDataProps> = ({
                     </span>
                   </Link>
                 ) : null}
-              </div>
+              </>
             }
+            headerTextLabel="Following"
             noDataPlaceholder={<>You have not followed anything yet.</>}
             testIDText="Following data"
           />
         </div>
-        <div className="tw-filter-seperator tw-mt-3" />
+        <div className="tw-mt-5" />
       </div>
     );
   }, [ownedData, followedData]);
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.test.tsx
index 671ef09ec21..9d27b451cd9 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.test.tsx
@@ -24,7 +24,8 @@ import { MemoryRouter } from 'react-router-dom';
 import { FeedFilter } from '../../enums/mydata.enum';
 import { User } from '../../generated/entity/teams/user';
 import { formatDataResponse } from '../../utils/APIUtils';
-import MyDataPage from './MyData.component';
+import MyData from './MyData.component';
+import { MyDataProps } from './MyData.interface';
 
 jest.mock('../../authentication/auth-provider/AuthProvider', () => {
   return {
@@ -249,7 +250,7 @@ jest.mock('../../components/searched-data/SearchedData', () => {
     ));
 });
 
-jest.mock('../../components/recently-viewed/RecentlyViewed', () => {
+jest.mock('../recently-viewed/RecentlyViewed', () => {
   return jest.fn().mockReturnValue(<p>RecentlyViewed</p>);
 });
 
@@ -265,9 +266,9 @@ jest.mock('../MyAssetStats/MyAssetStats.component', () => {
   return jest.fn().mockReturnValue(<p>MyAssetStats</p>);
 });
 
-jest.mock('../EntityList/EntityList', () => {
-  return jest.fn().mockReturnValue(<p>EntityList</p>);
-});
+jest.mock('../EntityList/EntityList', () => ({
+  EntityListWithAntd: jest.fn().mockReturnValue(<p>EntityList.component</p>),
+}));
 
 jest.mock('../RecentSearchedTerms/RecentSearchedTerms', () => {
   return jest.fn().mockReturnValue(<p>RecentSearchedTerms</p>);
@@ -308,12 +309,18 @@ jest.mock('../../utils/ServiceUtils', () => ({
   getTotalEntityCountByService: jest.fn().mockReturnValue(2),
 }));
 
+jest.mock('../RecentSearchedTerms/RecentSearchedTermsAntd', () => {
+  return jest
+    .fn()
+    .mockReturnValue(<div>RecentSearchedTermsAntd.component</div>);
+});
+
 const feedFilterHandler = jest.fn();
 
 const fetchData = jest.fn();
 const postFeed = jest.fn();
 
-const mockProp = {
+const mockProp: MyDataProps = {
   countDashboards: 8,
   countPipelines: 1,
   countServices: 0,
@@ -347,7 +354,7 @@ window.IntersectionObserver = jest.fn().mockImplementation(() => ({
 
 describe('Test MyData page', () => {
   it('Check if there is an element in the page', async () => {
-    const { container } = render(<MyDataPage {...mockProp} />, {
+    const { container } = render(<MyData {...mockProp} />, {
       wrapper: MemoryRouter,
     });
     const pageLayout = await findByTestId(container, 'PageLayout');
@@ -367,7 +374,7 @@ describe('Test MyData page', () => {
   });
 
   it('Should create an observer if IntersectionObserver is available', async () => {
-    const { container } = render(<MyDataPage {...mockProp} />, {
+    const { container } = render(<MyData {...mockProp} />, {
       wrapper: MemoryRouter,
     });
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/RecentSearchedTerms/RecentSearchedTerms.tsx b/openmetadata-ui/src/main/resources/ui/src/components/RecentSearchedTerms/RecentSearchedTerms.tsx
index df7fd388373..042fe955714 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/RecentSearchedTerms/RecentSearchedTerms.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/RecentSearchedTerms/RecentSearchedTerms.tsx
@@ -11,6 +11,7 @@
  *  limitations under the License.
  */
 
+import { Button, Typography } from 'antd';
 import { RecentlySearchedData } from 'Models';
 import React, { FunctionComponent, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
@@ -22,6 +23,8 @@ import {
 import SVGIcons, { Icons } from '../../utils/SvgUtils';
 import PopOver from '../common/popover/PopOver';
 
+const { Text } = Typography;
+
 const RecentSearchedTerms: FunctionComponent = () => {
   const [recentlySearchedTerms, setRecentlySearchTerms] = useState<
     RecentlySearchedData[]
@@ -38,29 +41,30 @@ const RecentSearchedTerms: FunctionComponent = () => {
 
   return (
     <>
-      <h6 className="tw-heading tw-mb-3" data-testid="filter-heading">
+      <Text className="tw-font-semibold" type="secondary">
         Recent Search Terms
-      </h6>
+      </Text>
       {recentlySearchedTerms.length ? (
         recentlySearchedTerms.map((item, index) => {
           return (
             <div
-              className="tw-flex tw-items-center tw-justify-between tw-mb-2 tw-group"
+              className="tw-flex tw-items-center tw-justify-between tw-my-2 tw-group"
               data-testid={`Recently-Search-${item.term}`}
               key={index}>
               <div className="tw-flex">
                 <SVGIcons
                   alt="search"
-                  className="tw-h-4 tw-w-4 tw-mr-2 tw-self-center"
+                  className="tw-h-4 tw-w-4 tw-self-center"
                   icon={Icons.SEARCHV1}
                 />
                 <div className="tw-flex tw-justify-between">
                   <Link
                     className="tw-font-medium"
                     to={getExplorePathWithSearch(item.term)}>
-                    <button
+                    <Button
                       className="tw-text-grey-body hover:tw-text-primary-hover hover:tw-underline"
-                      data-testid={`search-term-${item.term}`}>
+                      data-testid={`search-term-${item.term}`}
+                      type="text">
                       {item.term.length > 20 ? (
                         <PopOver
                           html={
@@ -76,17 +80,18 @@ const RecentSearchedTerms: FunctionComponent = () => {
                       ) : (
                         item.term
                       )}
-                    </button>
+                    </Button>
                   </Link>
-                  <button
+                  <Button
                     className="tw-opacity-0 group-hover:tw-opacity-100 tw-ml-2"
+                    type="text"
                     onClick={() => onRemove(item.term)}>
                     <SVGIcons
                       alt="delete"
                       icon="icon-times-circle"
                       width="12"
                     />
-                  </button>
+                  </Button>
                 </div>
               </div>
             </div>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/RecentSearchedTerms/RecentSearchedTermsAntd.tsx b/openmetadata-ui/src/main/resources/ui/src/components/RecentSearchedTerms/RecentSearchedTermsAntd.tsx
new file mode 100644
index 00000000000..e6496ccd406
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/RecentSearchedTerms/RecentSearchedTermsAntd.tsx
@@ -0,0 +1,112 @@
+/*
+ *  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 { Button, Card } from 'antd';
+import { RecentlySearchedData } from 'Models';
+import React, { FunctionComponent, useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { getExplorePathWithSearch } from '../../constants/constants';
+import {
+  getRecentlySearchedData,
+  removeRecentSearchTerm,
+} from '../../utils/CommonUtils';
+import SVGIcons, { Icons } from '../../utils/SvgUtils';
+import PopOver from '../common/popover/PopOver';
+
+const RecentSearchedTermsAntd: FunctionComponent = () => {
+  const [recentlySearchedTerms, setRecentlySearchTerms] = useState<
+    RecentlySearchedData[]
+  >([]);
+
+  const onRemove = (term: string) => {
+    removeRecentSearchTerm(term);
+    setRecentlySearchTerms(getRecentlySearchedData());
+  };
+
+  useEffect(() => {
+    setRecentlySearchTerms(getRecentlySearchedData());
+  }, []);
+
+  return (
+    <>
+      <Card
+        style={{
+          border: '1px rgb(221, 227, 234) solid',
+          borderRadius: '8px',
+          boxShadow: '1px 1px 6px rgb(0 0 0 / 12%)',
+          marginRight: '4px',
+          marginLeft: '4px',
+        }}
+        title="Recent Search Terms">
+        {recentlySearchedTerms.length ? (
+          recentlySearchedTerms.map((item, index) => {
+            return (
+              <div
+                className="tw-flex tw-items-center tw-justify-between tw-my-2 tw-group"
+                data-testid={`Recently-Search-${item.term}`}
+                key={index}>
+                <div className="tw-flex">
+                  <SVGIcons
+                    alt="search"
+                    className="tw-h-4 tw-w-4 tw-self-center"
+                    icon={Icons.SEARCHV1}
+                  />
+                  <div className="tw-flex tw-justify-between">
+                    <Link
+                      className="tw-font-medium"
+                      to={getExplorePathWithSearch(item.term)}>
+                      <Button
+                        className="tw-text-grey-body hover:tw-text-primary-hover hover:tw-underline"
+                        data-testid={`search-term-${item.term}`}
+                        type="text">
+                        {item.term.length > 20 ? (
+                          <PopOver
+                            html={
+                              <div className="tw-flex tw-flex-nowrap">
+                                {item.term}
+                              </div>
+                            }
+                            position="top"
+                            size="regular"
+                            trigger="mouseenter">
+                            <span>{item.term.slice(0, 20)}...</span>
+                          </PopOver>
+                        ) : (
+                          item.term
+                        )}
+                      </Button>
+                    </Link>
+                    <Button
+                      className="tw-opacity-0 group-hover:tw-opacity-100 tw-ml-2"
+                      type="text"
+                      onClick={() => onRemove(item.term)}>
+                      <SVGIcons
+                        alt="delete"
+                        icon="icon-times-circle"
+                        width="12"
+                      />
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            );
+          })
+        ) : (
+          <>No searched terms.</>
+        )}
+      </Card>
+    </>
+  );
+};
+
+export default RecentSearchedTermsAntd;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.test.tsx
index f20cdec430d..bfd160054c4 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.test.tsx
@@ -17,7 +17,7 @@ import {
   queryByTestId,
   render,
 } from '@testing-library/react';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { FeedFilter } from '../../enums/mydata.enum';
 import Users from './Users.component';
@@ -135,13 +135,35 @@ jest.mock('../../axiosAPIs/teamsAPI', () => ({
   ),
 }));
 
+jest.mock('../containers/PageLayout', () =>
+  jest
+    .fn()
+    .mockImplementation(
+      ({
+        children,
+        leftPanel,
+        rightPanel,
+      }: {
+        children: ReactNode;
+        rightPanel: ReactNode;
+        leftPanel: ReactNode;
+      }) => (
+        <div data-testid="PageLayout">
+          <div>{leftPanel}</div>
+          <div>{rightPanel}</div>
+          {children}
+        </div>
+      )
+    )
+);
+
 jest.mock('../common/description/Description', () => {
   return jest.fn().mockReturnValue(<p>Description</p>);
 });
 
-jest.mock('../EntityList/EntityList', () => {
-  return jest.fn().mockReturnValue(<p>EntityList.component</p>);
-});
+jest.mock('../EntityList/EntityList', () => ({
+  EntityListWithAntd: jest.fn().mockReturnValue(<p>EntityList.component</p>),
+}));
 
 const mockObserve = jest.fn();
 const mockunObserve = jest.fn();
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx
index 68aa9c8a5ad..ce230bebd11 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx
@@ -51,7 +51,7 @@ import ProfilePicture from '../common/ProfilePicture/ProfilePicture';
 import { reactSingleSelectCustomStyle } from '../common/react-select-component/reactSelectCustomStyle';
 import TabsPane from '../common/TabsPane/TabsPane';
 import PageLayout from '../containers/PageLayout';
-import EntityList from '../EntityList/EntityList';
+import { EntityListWithAntd } from '../EntityList/EntityList';
 import Loader from '../Loader/Loader';
 import { Option, Props } from './Users.interface';
 
@@ -633,11 +633,10 @@ const Users = ({
 
     return (
       <div className="tw-mt-4" data-testid="right-pannel">
-        <EntityList
+        <EntityListWithAntd
           entityList={ownData as unknown as FormatedTableData[]}
           headerText={
-            <div className="tw-flex tw-justify-between tw-items-center">
-              My Data
+            <>
               {ownData.length ? (
                 <Link
                   className="tw-ml-1"
@@ -652,16 +651,17 @@ const Users = ({
                   </span>
                 </Link>
               ) : null}
-            </div>
+            </>
           }
+          headerTextLabel="My Data"
           noDataPlaceholder={<>You have not owned anything yet.</>}
           testIDText="My data"
         />
         <div className="tw-filter-seperator tw-mt-3" />
-        <EntityList
+        <EntityListWithAntd
           entityList={userData?.follows as unknown as FormatedTableData[]}
           headerText={
-            <div className="tw-flex tw-justify-between">
+            <>
               Following
               {userData?.follows?.length ? (
                 <Link
@@ -677,8 +677,9 @@ const Users = ({
                   </span>
                 </Link>
               ) : null}
-            </div>
+            </>
           }
+          headerTextLabel="Following"
           noDataPlaceholder={<>You have not followed anything yet.</>}
           testIDText="Following data"
         />
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/buttons/Button/Button.styles.ts b/openmetadata-ui/src/main/resources/ui/src/components/buttons/Button/Button.styles.ts
index 81f491147b9..fe9a3340582 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/buttons/Button/Button.styles.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/buttons/Button/Button.styles.ts
@@ -52,7 +52,7 @@ export const button = {
   },
   link: {
     default: {
-      base: 'tw-text-grey-muted dark:tw-text-gray-400 focus:tw-outline-none',
+      base: 'tw-text-grey dark:tw-text-gray-400 focus:tw-outline-none',
       active: `active:tw-bg-transparent hover:tw-underline focus:tw-underline 
         hover:tw-text-gray-600 active:tw-text-gray-600`,
       disabled: 'tw-opacity-50 tw-cursor-not-allowed',
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/avatar/Avatar.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/avatar/Avatar.tsx
index d0ca217542c..983abe9d114 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/avatar/Avatar.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/avatar/Avatar.tsx
@@ -46,9 +46,7 @@ const Avatar = ({
         fontSize: `${Number(width) / 2}px`,
         fontWeight: 'normal',
       }}>
-      <p className={classNames('tw-self-center tw-capitalize', textClass)}>
-        {character}
-      </p>
+      <span className={classNames(textClass)}>{character}</span>
     </div>
   );
 };
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FacetFilter.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FacetFilter.tsx
index 967aa2bec23..2705ccef7e2 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FacetFilter.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FacetFilter.tsx
@@ -11,6 +11,7 @@
  *  limitations under the License.
  */
 
+import { Card } from 'antd';
 import classNames from 'classnames';
 import { toLower } from 'lodash';
 import { AggregationType, Bucket, FilterObject } from 'Models';
@@ -22,6 +23,7 @@ import {
 } from '../../../constants/constants';
 import { FacetProp } from './FacetTypes';
 import FilterContainer from './FilterContainer';
+
 const FacetFilter: FunctionComponent<FacetProp> = ({
   aggregations,
   filters,
@@ -173,90 +175,103 @@ const FacetFilter: FunctionComponent<FacetProp> = ({
 
   return (
     <>
-      <div
-        className="sidebar-my-data-holder mt-2 mb-3"
-        data-testid="show-deleted-cntnr">
+      <Card
+        style={{
+          border: '1px rgb(221, 227, 234) solid',
+          borderRadius: '8px',
+          boxShadow: '1px 1px 6px rgb(0 0 0 / 12%)',
+          marginRight: '4px',
+          marginLeft: '4px',
+        }}>
         <div
-          className="filter-group tw-justify-between tw-mb-2"
-          data-testid="filter-container-deleted">
-          <div className="tw-flex">
-            <div className="filters-title tw-w-40 tw-truncate custom-checkbox-label">
-              Show Deleted
+          className="sidebar-my-data-holder mt-2 mb-3"
+          data-testid="show-deleted-cntnr">
+          <div
+            className="filter-group tw-justify-between tw-mb-2"
+            data-testid="filter-container-deleted">
+            <div className="tw-flex">
+              <div className="filters-title tw-w-40 tw-truncate custom-checkbox-label">
+                Show Deleted
+              </div>
+            </div>
+            <div
+              className={classNames(
+                'toggle-switch tw-mr-0',
+                showDeletedOnly ? 'open' : null
+              )}
+              data-testid="show-deleted"
+              onClick={() => {
+                onSelectDeleted?.(!showDeletedOnly);
+              }}>
+              <div className="switch" />
             </div>
           </div>
-          <div
-            className={classNames(
-              'toggle-switch tw-mr-0',
-              showDeletedOnly ? 'open' : null
-            )}
-            data-testid="show-deleted"
-            onClick={() => {
-              onSelectDeleted?.(!showDeletedOnly);
-            }}>
-            <div className="switch" />
-          </div>
         </div>
-      </div>
-      {getSeparator(aggregations.length, 0)}
-      {aggregations.map((aggregation: AggregationType, index: number) => {
-        return (
-          <Fragment key={index}>
-            {aggregation.buckets.length > 0 ? (
-              <div data-testid={aggregation.title}>
-                <div className="tw-flex tw-justify-between tw-flex-col">
-                  <h6
-                    className="tw-heading tw-mb-0"
-                    data-testid="filter-heading">
-                    {
-                      facetFilterPlaceholder.find(
-                        (filter) => filter.name === aggregation.title
-                      )?.value
-                    }
-                  </h6>
-                  <div className="tw-flex tw-mt-1.5">
-                    {onSelectAllFilter && (
-                      <span
-                        className="link-text tw-text-xs"
-                        onClick={() => {
-                          if (isSelectAllFilter(aggregation)) {
-                            onSelectAllFilter(
-                              toLower(aggregation.title) as keyof FilterObject,
-                              aggregation.buckets.map((b) => b.key)
-                            );
-                          }
-                        }}>
-                        Select All
-                      </span>
-                    )}
-                    {onClearFilter && (
-                      <>
-                        <span className="tw-text-xs tw-px-2">|</span>
+        {getSeparator(aggregations.length, 0)}
+        {aggregations.map((aggregation: AggregationType, index: number) => {
+          return (
+            <Fragment key={index}>
+              {aggregation.buckets.length > 0 ? (
+                <div data-testid={aggregation.title}>
+                  <div className="tw-flex tw-justify-between tw-flex-col">
+                    <h6
+                      className="tw-heading tw-mb-0"
+                      data-testid="filter-heading">
+                      {
+                        facetFilterPlaceholder.find(
+                          (filter) => filter.name === aggregation.title
+                        )?.value
+                      }
+                    </h6>
+                    <div className="tw-flex tw-mt-1.5">
+                      {onSelectAllFilter && (
                         <span
-                          className="link-text tw-text-xs tw-text-grey-muted"
+                          className="link-text tw-text-xs"
                           onClick={() => {
-                            if (isClearFilter(aggregation)) {
-                              onClearFilter(
-                                toLower(aggregation.title) as keyof FilterObject
+                            if (isSelectAllFilter(aggregation)) {
+                              onSelectAllFilter(
+                                toLower(
+                                  aggregation.title
+                                ) as keyof FilterObject,
+                                aggregation.buckets.map((b) => b.key)
                               );
                             }
                           }}>
-                          Deselect All
+                          Select All
                         </span>
-                      </>
-                    )}
+                      )}
+                      {onClearFilter && (
+                        <>
+                          <span className="tw-text-xs tw-px-2">|</span>
+                          <span
+                            className="link-text tw-text-xs tw-text-grey-muted"
+                            onClick={() => {
+                              if (isClearFilter(aggregation)) {
+                                onClearFilter(
+                                  toLower(
+                                    aggregation.title
+                                  ) as keyof FilterObject
+                                );
+                              }
+                            }}>
+                            Deselect All
+                          </span>
+                        </>
+                      )}
+                    </div>
                   </div>
+                  <div
+                    className="sidebar-my-data-holder mt-2 mb-3"
+                    data-testid={`filter-containers-${index}`}>
+                    {getFilterItems(aggregation)}
+                  </div>
+                  {getSeparator(aggregations.length, index)}
                 </div>
-                <div
-                  className="sidebar-my-data-holder mt-2 mb-3"
-                  data-testid={`filter-containers-${index}`}>
-                  {getFilterItems(aggregation)}
-                </div>
-                {getSeparator(aggregations.length, index)}
-              </div>
-            ) : null}
-          </Fragment>
-        );
-      })}
+              ) : null}
+            </Fragment>
+          );
+        })}
+      </Card>
     </>
   );
 };
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayout.tsx b/openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayout.tsx
index 6209cfc4764..517c409ed68 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayout.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayout.tsx
@@ -36,7 +36,7 @@ const PageLayout: FC<PageLayoutProp> = ({
     return (
       leftPanel && (
         <div>
-          <div className="tw-pr-4 tw-py-1" id="left-panel">
+          <div className="tw-py-1" id="left-panel">
             {leftPanel}
           </div>
           <div />
@@ -49,7 +49,7 @@ const PageLayout: FC<PageLayoutProp> = ({
     return (
       rightPanel && (
         <div>
-          <div className="tw-px-2 tw-py-1" id="right-panel">
+          <div className="tw-py-1" id="right-panel">
             {rightPanel}
           </div>
           <div />
@@ -81,19 +81,7 @@ const PageLayout: FC<PageLayoutProp> = ({
             }
           )}>
           {getLeftPanel()}
-          <div
-            className={classNames(
-              'tw-py-1',
-              {
-                'tw-pl-2': leftPanel,
-              },
-              {
-                'tw-pr-4': rightPanel,
-              }
-            )}
-            id="center">
-            {children}
-          </div>
+          <div id="center">{children}</div>
           {getRightPanel()}
         </div>
       </Fragment>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDown.tsx b/openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDown.tsx
index 42af1cb13e0..4060fa937df 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDown.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDown.tsx
@@ -124,11 +124,11 @@ const DropDown: React.FC<DropDownProp> = ({
               <>
                 {Icon && Icon}
                 {label && isLableVisible && (
-                  <p
+                  <span
                     className="hover:tw-underline"
                     style={{ color: `${isOpen ? activeLink : normalLink}` }}>
                     {label}
-                  </p>
+                  </span>
                 )}
 
                 {isDropDownIconVisible ? (
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/recently-viewed/RecentlyViewed.tsx b/openmetadata-ui/src/main/resources/ui/src/components/recently-viewed/RecentlyViewed.tsx
index 18e5ea27b27..341be06639a 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/recently-viewed/RecentlyViewed.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/recently-viewed/RecentlyViewed.tsx
@@ -14,7 +14,7 @@
 import { FormatedTableData } from 'Models';
 import React, { Fragment, FunctionComponent, useEffect, useState } from 'react';
 import { getRecentlyViewedData, prepareLabel } from '../../utils/CommonUtils';
-import EntityList from '../EntityList/EntityList';
+import { EntityListWithAntd } from '../EntityList/EntityList';
 import Loader from '../Loader/Loader';
 
 const RecentlyViewed: FunctionComponent = () => {
@@ -49,9 +49,9 @@ const RecentlyViewed: FunctionComponent = () => {
       {isLoading ? (
         <Loader />
       ) : (
-        <EntityList
+        <EntityListWithAntd
           entityList={data}
-          headerText="Recent Views"
+          headerTextLabel="Recent Views"
           noDataPlaceholder={<>No recently viewed data.</>}
           testIDText="Recently Viewed"
         />
diff --git a/openmetadata-ui/src/main/resources/ui/src/constants/Mydata.constants.ts b/openmetadata-ui/src/main/resources/ui/src/constants/Mydata.constants.ts
index 7fd15178ff3..8a59cd9e1b0 100644
--- a/openmetadata-ui/src/main/resources/ui/src/constants/Mydata.constants.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/constants/Mydata.constants.ts
@@ -52,7 +52,7 @@ export const getFilters = (
 };
 
 export const filterList = [
-  { name: 'All Activity', value: 'ALL' },
+  { name: 'All Activity Feeds', value: 'ALL' },
   { name: 'My Data', value: 'OWNER' },
   { name: 'Mentions', value: 'MENTIONS' },
   { name: 'Following', value: 'FOLLOWS' },
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/temp.css b/openmetadata-ui/src/main/resources/ui/src/styles/temp.css
index 59568768532..ed0528429d0 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/temp.css
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/temp.css
@@ -722,6 +722,7 @@ body .list-option.rdw-option-active {
 }
 .diff-removed {
   color: #008376;
+  color: grey;
   text-decoration: line-through;
   width: fit-content;
 }
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/x-master.css b/openmetadata-ui/src/main/resources/ui/src/styles/x-master.css
index c789119b4e8..5c2e2159300 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/x-master.css
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/x-master.css
@@ -12,6 +12,8 @@
  */
 
 /* Generic */
+
+@import '~antd/dist/antd.css';
 body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -818,13 +820,13 @@ body .profiler-graph .recharts-active-dot circle {
   position: relative;
 }
 .page-layout-container.l3-col {
-  grid-template-columns: 256px auto 256px;
+  grid-template-columns: 300px auto 300px;
 }
 .page-layout-container.l2-ltr-col {
-  grid-template-columns: 300px auto auto;
+  grid-template-columns: 350px auto auto;
 }
 .page-layout-container.l2-rtl-col {
-  grid-template-columns: auto auto 300px;
+  grid-template-columns: auto auto 350px;
 }
 
 .page-layout-container-left-center-right {
@@ -966,6 +968,19 @@ code {
   -webkit-box-orient: vertical;
 }
 
+.ant-card-body {
+  padding: 18px;
+}
+
+.ant-card-head-title {
+  padding: 8px 0px;
+}
+
+.ant-card-head {
+  border-bottom: 1px solid #dce3ec;
+  padding: 0 18px;
+}
+
 .custom-entity-schema > .CodeMirror {
   height: 70vh;
 }
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/CommonUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/CommonUtils.tsx
index ad306b5d9d0..aa0112f2edd 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/CommonUtils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/CommonUtils.tsx
@@ -193,7 +193,7 @@ export const getCountBadge = (
   return (
     <span
       className={classNames(
-        'tw-py-px tw-px-1 tw-ml-1 tw-border tw-rounded tw-text-xs tw-min-w-badgeCount tw-text-center',
+        'tw-py-px tw-px-1 tw-mx-1 tw-border tw-rounded tw-text-xs tw-min-w-badgeCount tw-text-center',
         clsBG,
         className
       )}>
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx
index 0ba4282932a..0349cecb964 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx
@@ -435,8 +435,7 @@ export const getInfoElements = (data: ExtraInfo) => {
                     {
                       'tw-w-52': (displayVal as string).length > 32,
                     }
-                  )}
-                  title={displayVal as string}>
+                  )}>
                   {displayVal}
                 </span>
                 {data.openInNewTab && (
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx
index 6a0aac25fdf..39b1328139a 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx
@@ -322,10 +322,10 @@ export const getTableTestsValue = (tableTestCase: TableTest[]) => {
                       icon="check-square"
                     />
                   </div>
-                  <p>{`${passingTests.length} tests`}</p>
+                  <>{`${passingTests.length} tests`}</>
                 </div>
               ) : (
-                <p>{`${tableTestLength} tests`}</p>
+                <>{`${tableTestLength} tests`}</>
               )}
             </Fragment>
           )}
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/svgconstant.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/svgconstant.tsx
index abb12a8ff42..e4ec5a9bb8d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/svgconstant.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/svgconstant.tsx
@@ -17,17 +17,14 @@ export const dropdownIcon = ({ style }: { style?: CSSProperties }) => {
   return (
     <svg
       aria-hidden="true"
-      className="tw-inline-block tw-h-4 tw-w-4 tw-ml-0.5"
+      className="tw-inline-block tw-h-2.5 tw-w-2.5 tw-ml-1.5"
       fill="currentColor"
       style={style}
-      viewBox="0 0 16 16"
+      viewBox="0 0 11 6"
       xmlns="http://www.w3.org/2000/svg">
       <path
-        d="M8.00003 11C7.87216 11 7.74416 10.9511 7.64653 10.8535L2.64653 5.8535C2.45116 5.65813 
-        2.45116 5.34175 2.64653 5.1465C2.84191 4.95125 3.15828 4.95113 3.35353 5.1465L8.00003 
-        9.793L12.6465 5.1465C12.8419 4.95113 13.1583 4.95113 13.3535 5.1465C13.5488 5.34188 
-        13.5489 5.65825 13.3535 5.8535L8.35354 10.8535C8.25591 10.9511 8.12791 11 8.00003 11Z"
-        strokeWidth="0.2"
+        d="M0.740147 0H10.2599C10.9184 0 11.2477 0.764898 10.7815 1.21316L6.02353 5.79188C5.73494 6.06937 5.26506 6.06937 4.97647 5.79188L0.218469 1.21316C-0.247712 0.764898 0.0815744 0 0.740147 0Z"
+        fill="#485056"
       />
     </svg>
   );
diff --git a/openmetadata-ui/src/main/resources/ui/tailwind.config.js b/openmetadata-ui/src/main/resources/ui/tailwind.config.js
index b5fb1d91626..db844231131 100644
--- a/openmetadata-ui/src/main/resources/ui/tailwind.config.js
+++ b/openmetadata-ui/src/main/resources/ui/tailwind.config.js
@@ -46,7 +46,7 @@ const statusQueued = '#777777';
 const bodyBG = '#F8F9FA';
 const bodyHoverBG = '#F5F6F8';
 const tagBG = '#EEEAF8';
-const badgeBG = '#E3E5E8';
+const badgeBG = '#D5D8DC';
 const primaryBG = '#7147E840'; // 'rgba(113, 71, 232, 0.25)';
 const backdropBG = '#302E36';
 const lightBG = '#F4F0FD';
@@ -75,7 +75,7 @@ module.exports = {
       md: '768px',
       lg: '992px',
       xl: '1200px',
-      xxl: '1440px',
+      xxl: '2160px',
     },
     extend: {
       borderColor: {
@@ -162,7 +162,7 @@ module.exports = {
         'screen-md': '768px',
         'screen-lg': '992px',
         'screen-xl': '1200px',
-        'screen-xxl': '1440px',
+        'screen-xxl': '2160px',
         'full-hd': '1080px',
         600: '600px',
       },
diff --git a/openmetadata-ui/src/main/resources/ui/yarn.lock b/openmetadata-ui/src/main/resources/ui/yarn.lock
index f820aee4bac..a0b435b1cd0 100644
--- a/openmetadata-ui/src/main/resources/ui/yarn.lock
+++ b/openmetadata-ui/src/main/resources/ui/yarn.lock
@@ -2,6 +2,40 @@
 # yarn lockfile v1
 
 
+"@ant-design/colors@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@ant-design/colors/-/colors-6.0.0.tgz#9b9366257cffcc47db42b9d0203bb592c13c0298"
+  integrity sha512-qAZRvPzfdWHtfameEGP2Qvuf838NhergR35o+EuVyB5XvSA98xod5r4utvi4TJ3ywmevm290g9nsCG5MryrdWQ==
+  dependencies:
+    "@ctrl/tinycolor" "^3.4.0"
+
+"@ant-design/icons-svg@^4.2.1":
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/@ant-design/icons-svg/-/icons-svg-4.2.1.tgz#8630da8eb4471a4aabdaed7d1ff6a97dcb2cf05a"
+  integrity sha512-EB0iwlKDGpG93hW8f85CTJTs4SvMX7tt5ceupvhALp1IF44SeUFOMhKUOYqpsoYWQKAOuTRDMqn75rEaKDp0Xw==
+
+"@ant-design/icons@^4.7.0":
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/@ant-design/icons/-/icons-4.7.0.tgz#8c3cbe0a556ba92af5dc7d1e70c0b25b5179af0f"
+  integrity sha512-aoB4Z7JA431rt6d4u+8xcNPPCrdufSRMUOpxa1ab6mz1JCQZOEVolj2WVs/tDFmN62zzK30mNelEsprLYsSF3g==
+  dependencies:
+    "@ant-design/colors" "^6.0.0"
+    "@ant-design/icons-svg" "^4.2.1"
+    "@babel/runtime" "^7.11.2"
+    classnames "^2.2.6"
+    rc-util "^5.9.4"
+
+"@ant-design/react-slick@~0.28.1":
+  version "0.28.4"
+  resolved "https://registry.yarnpkg.com/@ant-design/react-slick/-/react-slick-0.28.4.tgz#8b296b87ad7c7ae877f2a527b81b7eebd9dd29a9"
+  integrity sha512-j9eAHTn7GxbXUFNknJoHS2ceAsqrQi2j8XykjZE1IXCD8kJF+t28EvhBLniDpbOsBk/3kjalnhriTfZcjBHNqg==
+  dependencies:
+    "@babel/runtime" "^7.10.4"
+    classnames "^2.2.5"
+    json2mq "^0.2.0"
+    lodash "^4.17.21"
+    resize-observer-polyfill "^1.5.0"
+
 "@apidevtools/json-schema-ref-parser@^9.0.9":
   version "9.0.9"
   resolved "https://registry.yarnpkg.com/@apidevtools/json-schema-ref-parser/-/json-schema-ref-parser-9.0.9.tgz#d720f9256e3609621280584f2b47ae165359268b"
@@ -1013,6 +1047,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.10.4", "@babel/runtime@^7.18.0", "@babel/runtime@^7.18.3":
+  version "7.18.3"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.3.tgz#c7b654b57f6f63cf7f8b418ac9ca04408c4579f4"
+  integrity sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@^7.12.0", "@babel/runtime@^7.13.10", "@babel/runtime@^7.16.0", "@babel/runtime@^7.6.2":
   version "7.17.9"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.9.tgz#d19fbf802d01a8cb6cf053a64e472d42c434ba72"
@@ -1084,6 +1125,11 @@
   resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
   integrity sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==
 
+"@ctrl/tinycolor@^3.4.0":
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/@ctrl/tinycolor/-/tinycolor-3.4.1.tgz#75b4c27948c81e88ccd3a8902047bcd797f38d32"
+  integrity sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw==
+
 "@cypress/request@^2.88.10":
   version "2.88.10"
   resolved "https://registry.yarnpkg.com/@cypress/request/-/request-2.88.10.tgz#b66d76b07f860d3a4b8d7a0604d020c662752cce"
@@ -2392,6 +2438,11 @@
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.5.tgz#75a2a8e7d8ab4b230414505d92335d1dcb53a6df"
   integrity sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ==
 
+"@types/qs@^6.9.7":
+  version "6.9.7"
+  resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb"
+  integrity sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==
+
 "@types/quill@1.3.10":
   version "1.3.10"
   resolved "https://registry.yarnpkg.com/@types/quill/-/quill-1.3.10.tgz#dc1f7b6587f7ee94bdf5291bc92289f6f0497613"
@@ -3078,6 +3129,57 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0:
   dependencies:
     color-convert "^2.0.1"
 
+antd@^4.20.6:
+  version "4.20.6"
+  resolved "https://registry.yarnpkg.com/antd/-/antd-4.20.6.tgz#0d46a4b6128a717b4cad7ac6902311a0210f1d6f"
+  integrity sha512-JHEwCDjWTAJ1yxlC5QPb7LhRMvdhccN5lzMYDs72sp6VOiaXVGAlwols+F8nQQRaF9h/eA6yQyZ622y8b9vaoQ==
+  dependencies:
+    "@ant-design/colors" "^6.0.0"
+    "@ant-design/icons" "^4.7.0"
+    "@ant-design/react-slick" "~0.28.1"
+    "@babel/runtime" "^7.12.5"
+    "@ctrl/tinycolor" "^3.4.0"
+    "@types/qs" "^6.9.7"
+    classnames "^2.2.6"
+    copy-to-clipboard "^3.2.0"
+    lodash "^4.17.21"
+    memoize-one "^6.0.0"
+    moment "^2.29.2"
+    rc-cascader "~3.5.0"
+    rc-checkbox "~2.3.0"
+    rc-collapse "~3.1.0"
+    rc-dialog "~8.8.1"
+    rc-drawer "~4.4.2"
+    rc-dropdown "~3.5.0"
+    rc-field-form "~1.26.1"
+    rc-image "~5.6.0"
+    rc-input "~0.0.1-alpha.5"
+    rc-input-number "~7.3.0"
+    rc-mentions "~1.7.0"
+    rc-menu "~9.5.5"
+    rc-motion "^2.5.1"
+    rc-notification "~4.6.0"
+    rc-pagination "~3.1.9"
+    rc-picker "~2.6.4"
+    rc-progress "~3.2.1"
+    rc-rate "~2.9.0"
+    rc-resize-observer "^1.2.0"
+    rc-segmented "~2.1.0 "
+    rc-select "~14.1.1"
+    rc-slider "~10.0.0"
+    rc-steps "~4.1.0"
+    rc-switch "~3.2.0"
+    rc-table "~7.24.0"
+    rc-tabs "~11.13.0"
+    rc-textarea "~0.3.0"
+    rc-tooltip "~5.1.1"
+    rc-tree "~5.5.0"
+    rc-tree-select "~5.3.0"
+    rc-trigger "^5.2.10"
+    rc-upload "~4.3.0"
+    rc-util "^5.20.0"
+    scroll-into-view-if-needed "^2.2.25"
+
 antlr4@4.9.2:
   version "4.9.2"
   resolved "https://registry.yarnpkg.com/antlr4/-/antlr4-4.9.2.tgz#abbc53d275954b1b6f4d8b3468b4a2cb258121fc"
@@ -3180,6 +3282,11 @@ array-includes@^3.1.3, array-includes@^3.1.4:
     get-intrinsic "^1.1.1"
     is-string "^1.0.7"
 
+array-tree-filter@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/array-tree-filter/-/array-tree-filter-2.1.0.tgz#873ac00fec83749f255ac8dd083814b4f6329190"
+  integrity sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw==
+
 array-union@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
@@ -3286,6 +3393,11 @@ async-limiter@~1.0.0:
   resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
   integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==
 
+async-validator@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/async-validator/-/async-validator-4.1.1.tgz#3cd1437faa2de64743f7d56649dd904c946a18fe"
+  integrity sha512-p4DO/JXwjs8klJyJL8Q2oM4ks5fUTze/h5k10oPPKMiLe1fj3G1QMzPHNmN1Py4ycOk7WlO2DcGXv1qiESJCZA==
+
 async@^2.6.2:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
@@ -4071,7 +4183,7 @@ classcat@^5.0.3:
   resolved "https://registry.yarnpkg.com/classcat/-/classcat-5.0.3.tgz#38eaa0ec6eb1b10faf101bbcef2afb319c23c17b"
   integrity sha512-6dK2ke4VEJZOFx2ZfdDAl5OhEL8lvkl6EHF92IfRePfHxQTqir5NlcNVUv+2idjDqCX2NDc8m8YSAI5NI975ZQ==
 
-classnames@*, classnames@2.x, classnames@^2.2.1, classnames@^2.2.3, classnames@^2.2.5, classnames@^2.2.6:
+classnames@*, classnames@2.x, classnames@^2.2.1, classnames@^2.2.3, classnames@^2.2.5, classnames@^2.2.6, classnames@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
   integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
@@ -4395,6 +4507,11 @@ compute-lcm@^1.1.0:
     validate.io-function "^1.0.2"
     validate.io-integer-array "^1.0.0"
 
+compute-scroll-into-view@^1.0.17:
+  version "1.0.17"
+  resolved "https://registry.yarnpkg.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.17.tgz#6a88f18acd9d42e9cf4baa6bec7e0522607ab7ab"
+  integrity sha512-j4dx+Fb0URmzbwwMUrhqWM2BEWHdFGx+qZ9qqASHRPqvTYdqvWnHg0H1hIbcyLnvgnoNAVMlwkepyqM3DaIFUg==
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -4486,7 +4603,7 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
-copy-to-clipboard@^3:
+copy-to-clipboard@^3, copy-to-clipboard@^3.2.0:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
   integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==
@@ -4988,7 +5105,12 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
-dayjs@^1.10.4:
+date-fns@2.x:
+  version "2.28.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.28.0.tgz#9570d656f5fc13143e50c975a3b6bbeb46cd08b2"
+  integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==
+
+dayjs@1.x, dayjs@^1.10.4:
   version "1.11.2"
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.2.tgz#fa0f5223ef0d6724b3d8327134890cfe3d72fbe5"
   integrity sha512-F4LXf1OeU9hrSYRPTTj/6FbO4HTjPKXvEIC1P2kcnFurViINCVk3ZV0xAS3XVx9MkMsXbbqlK6hjseaYbgKEHw==
@@ -5250,6 +5372,11 @@ dom-accessibility-api@^0.5.6:
   resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.7.tgz#8c2aa6325968f2933160a0b7dbb380893ddf3e7d"
   integrity sha512-ml3lJIq9YjUfM9TUnEPvEYWFSwivwIGBPKpewX7tii7fwCazA8yCioGdqQcNsItPpfFvSJ3VIdMQPj60LJhcQA==
 
+dom-align@^1.7.0:
+  version "1.12.3"
+  resolved "https://registry.yarnpkg.com/dom-align/-/dom-align-1.12.3.tgz#a36d02531dae0eefa2abb0c4db6595250526f103"
+  integrity sha512-Gj9hZN3a07cbR6zviMUBOMPdWxYhbMI+x+WS0NAIu2zFZmbK8ys9R79g+iG9qLnlCwpFoaB+fKy8Pdv470GsPA==
+
 dom-converter@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
@@ -9355,6 +9482,11 @@ memoize-one@^5.0.0:
   resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
   integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
 
+memoize-one@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045"
+  integrity sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==
+
 memoize-one@~5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0"
@@ -9918,6 +10050,11 @@ modern-normalize@^1.1.0:
   resolved "https://registry.yarnpkg.com/modern-normalize/-/modern-normalize-1.1.0.tgz#da8e80140d9221426bd4f725c6e11283d34f90b7"
   integrity sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==
 
+moment@^2.24.0, moment@^2.29.2:
+  version "2.29.3"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.3.tgz#edd47411c322413999f7a5940d526de183c031f3"
+  integrity sha512-c6YRvhEo//6T2Jz/vVtYzqBzwvPT95JBQ+smCytzf7c50oMZRsR/a4w88aD34I+/QVSfnoAnSBFPJHItlOMJVw==
+
 moment@^2.29.1:
   version "2.29.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
@@ -11404,6 +11541,149 @@ raw-body@2.4.3:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
+rc-align@^4.0.0:
+  version "4.0.12"
+  resolved "https://registry.yarnpkg.com/rc-align/-/rc-align-4.0.12.tgz#065b5c68a1cc92a00800c9239320d9fdf5f16207"
+  integrity sha512-3DuwSJp8iC/dgHzwreOQl52soj40LchlfUHtgACOUtwGuoFIOVh6n/sCpfqCU8kO5+iz6qR0YKvjgB8iPdE3aQ==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "2.x"
+    dom-align "^1.7.0"
+    lodash "^4.17.21"
+    rc-util "^5.3.0"
+    resize-observer-polyfill "^1.5.1"
+
+rc-cascader@~3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/rc-cascader/-/rc-cascader-3.5.0.tgz#a49b632bc2d0c8ef31b212c8ddd0bea346e64877"
+  integrity sha512-rpXnWCfvk7Frh2dBzMoA0c7i0nn6aJU7L2NZo8R8pNkrT0sKgytQSpdtPWP+Pq8IkvwbEd8BU8Z8OnOljcqgZg==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    array-tree-filter "^2.1.0"
+    classnames "^2.3.1"
+    rc-select "~14.1.0"
+    rc-tree "~5.5.0"
+    rc-util "^5.6.1"
+
+rc-checkbox@~2.3.0:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/rc-checkbox/-/rc-checkbox-2.3.2.tgz#f91b3678c7edb2baa8121c9483c664fa6f0aefc1"
+  integrity sha512-afVi1FYiGv1U0JlpNH/UaEXdh6WUJjcWokj/nUN2TgG80bfG+MDdbfHKlLcNNba94mbjy2/SXJ1HDgrOkXGAjg==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "^2.2.1"
+
+rc-collapse@~3.1.0:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/rc-collapse/-/rc-collapse-3.1.4.tgz#063e33fcc427a378e63da757898cd1fba6269679"
+  integrity sha512-WayrhswKMwuJab9xbqFxXTgV0m6X8uOPEO6zm/GJ5YJiJ/wIh/Dd2VtWeI06HYUEnTFv0HNcYv+zWbB+p6OD2A==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "2.x"
+    rc-motion "^2.3.4"
+    rc-util "^5.2.1"
+    shallowequal "^1.1.0"
+
+rc-dialog@~8.8.0, rc-dialog@~8.8.1:
+  version "8.8.1"
+  resolved "https://registry.yarnpkg.com/rc-dialog/-/rc-dialog-8.8.1.tgz#cd8897fbee1de0eab6d237a6abe1e4db8d09dd72"
+  integrity sha512-7M1WKZCjfIABKEaJVskdYvb80z+RX7I11PeSjPVfLOOaJAmIepvDEd0alBtOZvOL3fZFWlMs4JVZtp9LZgONxA==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "^2.2.6"
+    rc-motion "^2.3.0"
+    rc-util "^5.21.0"
+
+rc-drawer@~4.4.2:
+  version "4.4.3"
+  resolved "https://registry.yarnpkg.com/rc-drawer/-/rc-drawer-4.4.3.tgz#2094937a844e55dc9644236a2d9fba79c344e321"
+  integrity sha512-FYztwRs3uXnFOIf1hLvFxIQP9MiZJA+0w+Os8dfDh/90X7z/HqP/Yg+noLCIeHEbKln1Tqelv8ymCAN24zPcfQ==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "^2.2.6"
+    rc-util "^5.7.0"
+
+rc-dropdown@~3.5.0:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/rc-dropdown/-/rc-dropdown-3.5.2.tgz#2f1f4eeb36c07fb67cd599c0cb8e861da3de5527"
+  integrity sha512-Ty4LsXjkspZuFJSRx3blCLLCDicXM5qds6F1odgEa+jcjC+OJKHQGnvE4FqtoljPaqWm4wG78pbgXH6Ddh2DkA==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "^2.2.6"
+    rc-trigger "^5.0.4"
+    rc-util "^5.17.0"
+
+rc-field-form@~1.26.1:
+  version "1.26.6"
+  resolved "https://registry.yarnpkg.com/rc-field-form/-/rc-field-form-1.26.6.tgz#00c526831db287421ae761a6fae079b68e9f3229"
+  integrity sha512-N7nx/9Zk3innxZWTa4GPUV3j78OCgXacl2Lgi6agmP7ziz6BHoZYZ1djOt5UW50kK7UoVMAPtue5I1XgQO24MA==
+  dependencies:
+    "@babel/runtime" "^7.18.0"
+    async-validator "^4.1.0"
+    rc-util "^5.8.0"
+
+rc-image@~5.6.0:
+  version "5.6.2"
+  resolved "https://registry.yarnpkg.com/rc-image/-/rc-image-5.6.2.tgz#31892b0b22aa5122fd9b1a067e9a4ba627004214"
+  integrity sha512-qhKOVvivCZkd6CrzS/4ST2+Auu16mtPSFVqVzwE7sELWfuvzcLGTzGv8UsVvm6qRNIz6SeaueUetqi4Ii16XQA==
+  dependencies:
+    "@babel/runtime" "^7.11.2"
+    classnames "^2.2.6"
+    rc-dialog "~8.8.0"
+    rc-util "^5.0.6"
+
+rc-input-number@~7.3.0:
+  version "7.3.4"
+  resolved "https://registry.yarnpkg.com/rc-input-number/-/rc-input-number-7.3.4.tgz#674aea98260250287d36e330a7e065b174486e9d"
+  integrity sha512-W9uqSzuvJUnz8H8vsVY4kx+yK51SsAxNTwr8SNH4G3XqQNocLVmKIibKFRjocnYX1RDHMND9FFbgj2h7E7nvGA==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "^2.2.5"
+    rc-util "^5.9.8"
+
+rc-input@~0.0.1-alpha.5:
+  version "0.0.1-alpha.7"
+  resolved "https://registry.yarnpkg.com/rc-input/-/rc-input-0.0.1-alpha.7.tgz#53e3f13871275c21d92b51f80b698f389ad45dd3"
+  integrity sha512-eozaqpCYWSY5LBMwlHgC01GArkVEP+XlJ84OMvdkwUnJBSv83Yxa15pZpn7vACAj84uDC4xOA2CoFdbLuqB08Q==
+  dependencies:
+    "@babel/runtime" "^7.11.1"
+    classnames "^2.2.1"
+    rc-util "^5.18.1"
+
+rc-mentions@~1.7.0:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/rc-mentions/-/rc-mentions-1.7.1.tgz#480ad04af4460ee01b6ccd9137fcea23067aa9be"
+  integrity sha512-JbCS9bTqt6BYN2vfTPythlScLuc42rIlX85n7975RnkfawXlJjskHOlR3o8EpD4asl4KuA2jKTy0dj39DtSVqg==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "^2.2.6"
+    rc-menu "~9.5.1"
+    rc-textarea "^0.3.0"
+    rc-trigger "^5.0.4"
+    rc-util "^5.0.1"
+
+rc-menu@~9.5.1, rc-menu@~9.5.5:
+  version "9.5.5"
+  resolved "https://registry.yarnpkg.com/rc-menu/-/rc-menu-9.5.5.tgz#aa2f151d4191ed089dc1a8141fe365c9b77d61a9"
+  integrity sha512-wj2y2BAKwSMyWXO3RBf9sNN5V+DFWxFl45Ma6qQEHA5nwwh7p07bNgc6AAJc+L1+LAz+rWz3AU8PYyT17hMHCw==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "2.x"
+    rc-motion "^2.4.3"
+    rc-overflow "^1.2.0"
+    rc-trigger "^5.1.2"
+    rc-util "^5.12.0"
+    shallowequal "^1.1.0"
+
+rc-motion@^2.0.0, rc-motion@^2.2.0, rc-motion@^2.3.0, rc-motion@^2.3.4, rc-motion@^2.4.3, rc-motion@^2.4.4, rc-motion@^2.5.1:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/rc-motion/-/rc-motion-2.6.0.tgz#c60c3e7f15257f55a8cd7794a539f0e2cc751399"
+  integrity sha512-1MDWA9+i174CZ0SIDenSYm2Wb9YbRkrexjZWR0CUFu7D6f23E8Y0KsTgk9NGOLJsGak5ELZK/Y5lOlf5wQdzbw==
+  dependencies:
+    "@babel/runtime" "^7.11.1"
+    classnames "^2.2.1"
+    rc-util "^5.21.0"
+
 rc-motion@^2.0.1:
   version "2.4.5"
   resolved "https://registry.yarnpkg.com/rc-motion/-/rc-motion-2.4.5.tgz#b061c50bb29ecd3d735d5f4c40924a3c78226cbd"
@@ -11413,7 +11693,67 @@ rc-motion@^2.0.1:
     classnames "^2.2.1"
     rc-util "^5.18.1"
 
-rc-resize-observer@^1.0.0:
+rc-notification@~4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/rc-notification/-/rc-notification-4.6.0.tgz#4e76fc2d0568f03cc93ac18c9e20763ebe29fa46"
+  integrity sha512-xF3MKgIoynzjQAO4lqsoraiFo3UXNYlBfpHs0VWvwF+4pimen9/H1DYLN2mfRWhHovW6gRpla73m2nmyIqAMZQ==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "2.x"
+    rc-motion "^2.2.0"
+    rc-util "^5.20.1"
+
+rc-overflow@^1.0.0, rc-overflow@^1.2.0:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/rc-overflow/-/rc-overflow-1.2.6.tgz#e99fabea04ce4fb13f0dd8835aef4e4cdd4c15a2"
+  integrity sha512-YqbocgzuQxfq2wZy72vdAgrgzzEuM/5d4gF9TBEodCpXPbUeXGrUXNm1J6G1MSkCU2N0ePIgCEu5qD/0Ldi63Q==
+  dependencies:
+    "@babel/runtime" "^7.11.1"
+    classnames "^2.2.1"
+    rc-resize-observer "^1.0.0"
+    rc-util "^5.19.2"
+
+rc-pagination@~3.1.9:
+  version "3.1.16"
+  resolved "https://registry.yarnpkg.com/rc-pagination/-/rc-pagination-3.1.16.tgz#b0082108cf027eded18ed61d818d31897c343e81"
+  integrity sha512-GFcHXJ7XxeJDf9B+ndP4PRDt46maSSgYhiwofBMiIGKIlBhJ0wfu8DMCEvaWJJLpI2u4Gb6zF1dHpiqPFrosPg==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "^2.2.1"
+
+rc-picker@~2.6.4:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/rc-picker/-/rc-picker-2.6.9.tgz#2f2f82c5340adbe3b30875a25e015c120eb88c9c"
+  integrity sha512-yH3UYXCADf7REtOAB5cwe1cyFKtB0p204RCN8JdZGG4uuSOZ1IPTkk/GJS6HOpxspZeJCLGzzajuQMDwck9dsw==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "^2.2.1"
+    date-fns "2.x"
+    dayjs "1.x"
+    moment "^2.24.0"
+    rc-trigger "^5.0.4"
+    rc-util "^5.4.0"
+    shallowequal "^1.1.0"
+
+rc-progress@~3.2.1:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/rc-progress/-/rc-progress-3.2.4.tgz#4036acdae2566438545bc4df2203248babaf7549"
+  integrity sha512-M9WWutRaoVkPUPIrTpRIDpX0SPSrVHzxHdCRCbeoBFrd9UFWTYNWRlHsruJM5FH1AZI+BwB4wOJUNNylg/uFSw==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "^2.2.6"
+    rc-util "^5.16.1"
+
+rc-rate@~2.9.0:
+  version "2.9.2"
+  resolved "https://registry.yarnpkg.com/rc-rate/-/rc-rate-2.9.2.tgz#4a58965d1ecf91896ebae01d458b59056df0b4ea"
+  integrity sha512-SaiZFyN8pe0Fgphv8t3+kidlej+cq/EALkAJAc3A0w0XcPaH2L1aggM8bhe1u6GAGuQNAoFvTLjw4qLPGRKV5g==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "^2.2.5"
+    rc-util "^5.0.1"
+
+rc-resize-observer@^1.0.0, rc-resize-observer@^1.1.0, rc-resize-observer@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/rc-resize-observer/-/rc-resize-observer-1.2.0.tgz#9f46052f81cdf03498be35144cb7c53fd282c4c7"
   integrity sha512-6W+UzT3PyDM0wVCEHfoW3qTHPTvbdSgiA43buiy8PzmeMnfgnDeb9NjdimMXMl3/TcrvvWl5RRVdp+NqcR47pQ==
@@ -11423,6 +11763,111 @@ rc-resize-observer@^1.0.0:
     rc-util "^5.15.0"
     resize-observer-polyfill "^1.5.1"
 
+"rc-segmented@~2.1.0 ":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/rc-segmented/-/rc-segmented-2.1.0.tgz#0e0afe646c1a0e44a0e18785f518c42633ec8efc"
+  integrity sha512-hUlonro+pYoZcwrH6Vm56B2ftLfQh046hrwif/VwLIw1j3zGt52p5mREBwmeVzXnSwgnagpOpfafspzs1asjGw==
+  dependencies:
+    "@babel/runtime" "^7.11.1"
+    classnames "^2.2.1"
+    rc-motion "^2.4.4"
+    rc-util "^5.17.0"
+
+rc-select@~14.1.0, rc-select@~14.1.1:
+  version "14.1.4"
+  resolved "https://registry.yarnpkg.com/rc-select/-/rc-select-14.1.4.tgz#486b632dfcaee36a3f0ba6a214e2d546f9d3666b"
+  integrity sha512-vU2DlROjv33nbYxcPrT/3yk1m53qsxVXhLv1u9lD7H2G5XkUR1p75KMiHU/5l/1VSw9I2IfMsFJoHkpUGNAkdQ==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "2.x"
+    rc-motion "^2.0.1"
+    rc-overflow "^1.0.0"
+    rc-trigger "^5.0.4"
+    rc-util "^5.16.1"
+    rc-virtual-list "^3.2.0"
+
+rc-slider@~10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/rc-slider/-/rc-slider-10.0.0.tgz#8ffe1dd3c8799c9d1f81ac808976f18af3dca206"
+  integrity sha512-Bk54UIKWW4wyhHcL8ehAxt+wX+n69dscnHTX6Uv0FMxSke/TGrlkZz1LSIWblCpfE2zr/dwR2Ca8nZGk3U+Tbg==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "^2.2.5"
+    rc-tooltip "^5.0.1"
+    rc-util "^5.18.1"
+    shallowequal "^1.1.0"
+
+rc-steps@~4.1.0:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/rc-steps/-/rc-steps-4.1.4.tgz#0ba82db202d59ca52d0693dc9880dd145b19dc23"
+  integrity sha512-qoCqKZWSpkh/b03ASGx1WhpKnuZcRWmvuW+ZUu4mvMdfvFzVxblTwUM+9aBd0mlEUFmt6GW8FXhMpHkK3Uzp3w==
+  dependencies:
+    "@babel/runtime" "^7.10.2"
+    classnames "^2.2.3"
+    rc-util "^5.0.1"
+
+rc-switch@~3.2.0:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/rc-switch/-/rc-switch-3.2.2.tgz#d001f77f12664d52595b4f6fb425dd9e66fba8e8"
+  integrity sha512-+gUJClsZZzvAHGy1vZfnwySxj+MjLlGRyXKXScrtCTcmiYNPzxDFOxdQ/3pK1Kt/0POvwJ/6ALOR8gwdXGhs+A==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "^2.2.1"
+    rc-util "^5.0.1"
+
+rc-table@~7.24.0:
+  version "7.24.2"
+  resolved "https://registry.yarnpkg.com/rc-table/-/rc-table-7.24.2.tgz#fbccf5ef4b84cdb38c8a0b416365de157483bf51"
+  integrity sha512-yefqhtc4V3BeWG2bnDhWYxWX1MOckvW2KU1J55pntZmIGrov5Hx8tQn2gcs6OM0fJ6NgEwUvVEknsCsWI24zUg==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "^2.2.5"
+    rc-resize-observer "^1.1.0"
+    rc-util "^5.14.0"
+    shallowequal "^1.1.0"
+
+rc-tabs@~11.13.0:
+  version "11.13.0"
+  resolved "https://registry.yarnpkg.com/rc-tabs/-/rc-tabs-11.13.0.tgz#083eed578f8ad02dc0d462d73da487fe32e3a573"
+  integrity sha512-aUw1Pq0B1a2zGX4o/m3yrQycZcCLgDp6gKwn8IAU07q148RRONsVGxi0oLVVe5SE51kOB+j0bk1RX43ZBdZNgA==
+  dependencies:
+    "@babel/runtime" "^7.11.2"
+    classnames "2.x"
+    rc-dropdown "~3.5.0"
+    rc-menu "~9.5.1"
+    rc-resize-observer "^1.0.0"
+    rc-util "^5.5.0"
+
+rc-textarea@^0.3.0, rc-textarea@~0.3.0:
+  version "0.3.7"
+  resolved "https://registry.yarnpkg.com/rc-textarea/-/rc-textarea-0.3.7.tgz#987142891efdedb774883c07e2f51b318fde5a11"
+  integrity sha512-yCdZ6binKmAQB13hc/oehh0E/QRwoPP1pjF21aHBxlgXO3RzPF6dUu4LG2R4FZ1zx/fQd2L1faktulrXOM/2rw==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "^2.2.1"
+    rc-resize-observer "^1.0.0"
+    rc-util "^5.7.0"
+    shallowequal "^1.1.0"
+
+rc-tooltip@^5.0.1, rc-tooltip@~5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/rc-tooltip/-/rc-tooltip-5.1.1.tgz#94178ed162d0252bc4993b725f5dc2ac0fccf154"
+  integrity sha512-alt8eGMJulio6+4/uDm7nvV+rJq9bsfxFDCI0ljPdbuoygUscbsMYb6EQgwib/uqsXQUvzk+S7A59uYHmEgmDA==
+  dependencies:
+    "@babel/runtime" "^7.11.2"
+    rc-trigger "^5.0.0"
+
+rc-tree-select@~5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/rc-tree-select/-/rc-tree-select-5.3.0.tgz#6edd19d1066ad2bfa212f043c3ff701b93828026"
+  integrity sha512-UN6CUBulmch+CsihnJ73+DtWijEB1hVTC8sdVxq6E0teVAkHQZUvDj+cwZShtShAKvWwXy73PZ1hIHEUrmVcKw==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "2.x"
+    rc-select "~14.1.0"
+    rc-tree "~5.5.0"
+    rc-util "^5.16.1"
+
 rc-tree@^5.4.3:
   version "5.4.3"
   resolved "https://registry.yarnpkg.com/rc-tree/-/rc-tree-5.4.3.tgz#8674644964e17e5ab9b111c5aa18676f673e7bd0"
@@ -11434,6 +11879,46 @@ rc-tree@^5.4.3:
     rc-util "^5.16.1"
     rc-virtual-list "^3.4.1"
 
+rc-tree@~5.5.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/rc-tree/-/rc-tree-5.5.0.tgz#ba7c8aea2ad29f40a9c7168e490300f7a50c0f22"
+  integrity sha512-vpKeFsDyj7weik8UPseCTaSNAPt939qn1dQd8goSbRDajbjJEja0v/WFXyRhOiF1HLemNTfqMz4MYc9qlqyNXg==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "2.x"
+    rc-motion "^2.0.1"
+    rc-util "^5.16.1"
+    rc-virtual-list "^3.4.2"
+
+rc-trigger@^5.0.0, rc-trigger@^5.0.4, rc-trigger@^5.1.2, rc-trigger@^5.2.10:
+  version "5.2.19"
+  resolved "https://registry.yarnpkg.com/rc-trigger/-/rc-trigger-5.2.19.tgz#67be65f424c9a461bd00627b4383ca1a7d184f64"
+  integrity sha512-RrHvNNiFR66IAl0Rh1s/5Pmfci7cNQ9WnNDLu+RHBkmaqwxJapX0CZssEXMmiOwbUta8l8YN+Hx7DOL47TOJQg==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    classnames "^2.2.6"
+    rc-align "^4.0.0"
+    rc-motion "^2.0.0"
+    rc-util "^5.19.2"
+
+rc-upload@~4.3.0:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/rc-upload/-/rc-upload-4.3.4.tgz#83ff7d3867631c37adbfd72ea3d1fd7e97ca84af"
+  integrity sha512-uVbtHFGNjHG/RyAfm9fluXB6pvArAGyAx8z7XzXXyorEgVIWj6mOlriuDm0XowDHYz4ycNK0nE0oP3cbFnzxiQ==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    classnames "^2.2.5"
+    rc-util "^5.2.0"
+
+rc-util@^5.0.1, rc-util@^5.0.6, rc-util@^5.12.0, rc-util@^5.14.0, rc-util@^5.17.0, rc-util@^5.19.2, rc-util@^5.2.0, rc-util@^5.2.1, rc-util@^5.20.0, rc-util@^5.20.1, rc-util@^5.21.0, rc-util@^5.3.0, rc-util@^5.4.0, rc-util@^5.5.0, rc-util@^5.6.1, rc-util@^5.7.0, rc-util@^5.8.0, rc-util@^5.9.4, rc-util@^5.9.8:
+  version "5.21.5"
+  resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-5.21.5.tgz#6e2a5699f820ba915f43f11a4b7dfb0b0672d0fa"
+  integrity sha512-ip7HqX37Cy/RDl9MlrFp+FbcKnsWZ22sF5MS5eSpYLtg5MpC0TMqGb5ukBatoOhgjnLL+eJGR6e7YAJ/dhK09A==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    react-is "^16.12.0"
+    shallowequal "^1.1.0"
+
 rc-util@^5.0.7, rc-util@^5.15.0, rc-util@^5.16.1, rc-util@^5.18.1:
   version "5.18.1"
   resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-5.18.1.tgz#80bd1450b5254655d2fbea63e3d34f6871e9be79"
@@ -11443,6 +11928,15 @@ rc-util@^5.0.7, rc-util@^5.15.0, rc-util@^5.16.1, rc-util@^5.18.1:
     react-is "^16.12.0"
     shallowequal "^1.1.0"
 
+rc-virtual-list@^3.2.0, rc-virtual-list@^3.4.2:
+  version "3.4.8"
+  resolved "https://registry.yarnpkg.com/rc-virtual-list/-/rc-virtual-list-3.4.8.tgz#c24c10c6940546b7e2a5e9809402c6716adfd26c"
+  integrity sha512-qSN+Rv4i/E7RCTvTMr1uZo7f3crJJg/5DekoCagydo9zsXrxj07zsFSxqizqW+ldGA16lwa8So/bIbV9Ofjddg==
+  dependencies:
+    classnames "^2.2.6"
+    rc-resize-observer "^1.0.0"
+    rc-util "^5.15.0"
+
 rc-virtual-list@^3.4.1:
   version "3.4.2"
   resolved "https://registry.yarnpkg.com/rc-virtual-list/-/rc-virtual-list-3.4.2.tgz#1078327aa7230b5e456d679ed2ce99f3c036ebd1"
@@ -12491,6 +12985,13 @@ schema-utils@^3.0.0, schema-utils@^3.1.0:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
+scroll-into-view-if-needed@^2.2.25:
+  version "2.2.29"
+  resolved "https://registry.yarnpkg.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.29.tgz#551791a84b7e2287706511f8c68161e4990ab885"
+  integrity sha512-hxpAR6AN+Gh53AdAimHM6C8oTN1ppwVZITihix+WqalywBeFcQ6LdQP5ABNl26nX8GTEL7VT+b8lKpdqq65wXg==
+  dependencies:
+    compute-scroll-into-view "^1.0.17"
+
 scroll-smooth@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/scroll-smooth/-/scroll-smooth-1.1.0.tgz#467994d5bb57ffe7407e9a85bd0303b3d4524ded"