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 29afaf373d6..c152f0fea9b 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
@@ -188,19 +188,12 @@ const ActivityFeedCard: FC<ActivityFeedCardProp> = ({
             />
           }
           destroyTooltipOnHide={{ keepParent: false }}
-          getPopupContainer={() =>
-            /**
-             * This check is required for feed panels,
-             * because in feed panels the popup container will have less space and popover will autoadjust the placement
-             */
-            isEntityFeed ? document.body : containerRef.current || document.body
-          }
+          getPopupContainer={() => containerRef.current || document.body}
           key="reaction-options-popover"
           open={visible && !isEditPost}
           overlayClassName="ant-popover-feed"
           placement="topRight"
           trigger="hover"
-          zIndex={100}
           onOpenChange={handleVisibleChange}>
           <Space align="start" className="w-full">
             <UserPopOverCard userName={feedDetail.from}>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedPanel/ActivityFeedPanel.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedPanel/ActivityFeedPanel.test.tsx
index 24d5cd6dfc8..c5a91f2a5b9 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedPanel/ActivityFeedPanel.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedPanel/ActivityFeedPanel.test.tsx
@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { findByText, render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import ActivityFeedPanel from './ActivityFeedPanel';
@@ -71,9 +71,6 @@ jest.mock('./FeedPanelBody', () => {
 jest.mock('./FeedPanelHeader', () => {
   return jest.fn().mockReturnValue(<p>FeedPanelHeader</p>);
 });
-jest.mock('./FeedPanelOverlay', () => {
-  return jest.fn().mockReturnValue(<p>FeedPanelOverlay</p>);
-});
 
 jest.mock('rest/feedsAPI', () => ({
   getFeedById: jest.fn().mockImplementation(() => Promise.resolve()),
@@ -86,21 +83,15 @@ jest.mock('../../../utils/ToastUtils', () => ({
 }));
 
 describe('Test FeedPanel Component', () => {
-  it('Check if Feedpanel has all child elements', async () => {
-    const { container, queryByTestId } = render(
-      <ActivityFeedPanel {...mockFeedPanelProp} />,
-      {
-        wrapper: MemoryRouter,
-      }
-    );
+  it('Check if FeedPanel has all child elements', async () => {
+    render(<ActivityFeedPanel {...mockFeedPanelProp} />, {
+      wrapper: MemoryRouter,
+    });
+    const FeedPanelHeader = await screen.findByText(/FeedPanelHeader/i);
+    const FeedPanelBody = await screen.findByText(/FeedPanelBody/i);
+    const FeedPanelEditor = await screen.findByText(/ActivityFeedEditor/i);
+    const DeleteConfirmationModal = screen.queryByTestId('confirmation-modal');
 
-    const FeedPanelOverlay = await findByText(container, /FeedPanelOverlay/i);
-    const FeedPanelHeader = await findByText(container, /FeedPanelHeader/i);
-    const FeedPanelBody = await findByText(container, /FeedPanelBody/i);
-    const FeedPanelEditor = await findByText(container, /ActivityFeedEditor/i);
-    const DeleteConfirmationModal = queryByTestId('confirmation-modal');
-
-    expect(FeedPanelOverlay).toBeInTheDocument();
     expect(FeedPanelHeader).toBeInTheDocument();
     expect(FeedPanelBody).toBeInTheDocument();
     expect(FeedPanelEditor).toBeInTheDocument();
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedPanel/ActivityFeedPanel.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedPanel/ActivityFeedPanel.tsx
index f016d03d3ba..92ba01ab0ea 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedPanel/ActivityFeedPanel.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedPanel/ActivityFeedPanel.tsx
@@ -11,6 +11,7 @@
  *  limitations under the License.
  */
 
+import { Drawer } from 'antd';
 import { AxiosError } from 'axios';
 import classNames from 'classnames';
 import React, { FC, useEffect, useState } from 'react';
@@ -26,7 +27,6 @@ import DeleteConfirmationModal from '../DeleteConfirmationModal/DeleteConfirmati
 import { ActivityFeedPanelProp } from './ActivityFeedPanel.interface';
 import FeedPanelBody from './FeedPanelBody';
 import FeedPanelHeader from './FeedPanelHeader';
-import FeedPanelOverlay from './FeedPanelOverlay';
 
 const ActivityFeedPanel: FC<ActivityFeedPanelProp> = ({
   open,
@@ -83,20 +83,11 @@ const ActivityFeedPanel: FC<ActivityFeedPanelProp> = ({
   }, [selectedThread]);
 
   return (
-    <div className={classNames('tw-h-full', className)}>
-      <FeedPanelOverlay
-        className="tw-fixed tw-inset-0 tw-top-16 tw-h-full tw-w-3/5 tw-bg-black tw-opacity-40 z-10"
-        onCancel={onCancel}
-      />
-      <div
-        className={classNames(
-          'tw-top-16 tw-right-0 tw-bottom-0 tw-w-2/5 tw-bg-white tw-fixed tw-shadow-md tw-transform tw-ease-in-out tw-duration-1000 tw-overflow-y-auto z-10',
-          {
-            'tw-translate-x-0': open,
-            'tw-translate-x-full': !open,
-          }
-        )}
-        id="feed-panel">
+    <Drawer
+      className={classNames('feed-drawer', className)}
+      closable={false}
+      open={open}
+      title={
         <FeedPanelHeader
           className="tw-px-4 tw-shadow-sm"
           entityFQN={entityFQN}
@@ -104,7 +95,10 @@ const ActivityFeedPanel: FC<ActivityFeedPanelProp> = ({
           threadType={selectedThread.type}
           onCancel={onCancel}
         />
-
+      }
+      width={576}
+      onClose={onCancel}>
+      <div id="feed-panel">
         <FeedPanelBody
           className="tw-p-4 tw-pl-8 tw-mb-3"
           deletePostHandler={deletePostHandler}
@@ -124,7 +118,7 @@ const ActivityFeedPanel: FC<ActivityFeedPanelProp> = ({
         onDelete={onPostDelete}
         onDiscard={onDiscard}
       />
-    </div>
+    </Drawer>
   );
 };
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedPanel/FeedPanelOverlay.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedPanel/FeedPanelOverlay.test.tsx
deleted file mode 100644
index 10fae3c5b0b..00000000000
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedPanel/FeedPanelOverlay.test.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-/*
- *  Copyright 2022 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 { findByTestId, render } from '@testing-library/react';
-import React from 'react';
-import { MemoryRouter } from 'react-router-dom';
-import FeedPanelOverlay from './FeedPanelOverlay';
-
-describe('Test FeedPanelOverlay Component', () => {
-  it('Check if FeedPanelOverlay has all child elements', async () => {
-    const { container } = render(<FeedPanelOverlay onCancel={jest.fn()} />, {
-      wrapper: MemoryRouter,
-    });
-
-    const overlayButton = await findByTestId(container, 'overlay-button');
-
-    expect(overlayButton).toBeInTheDocument();
-  });
-});
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityThreadPanel/ActivityThreadPanel.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityThreadPanel/ActivityThreadPanel.test.tsx
index 5a82ccbb649..cecbecb0944 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityThreadPanel/ActivityThreadPanel.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityThreadPanel/ActivityThreadPanel.test.tsx
@@ -11,13 +11,7 @@
  *  limitations under the License.
  */
 
-import {
-  act,
-  findAllByText,
-  findByText,
-  render,
-  screen,
-} from '@testing-library/react';
+import { act, findAllByText, render, screen } from '@testing-library/react';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { MemoryRouter } from 'react-router-dom';
@@ -43,9 +37,7 @@ jest.mock('../ActivityFeedEditor/ActivityFeedEditor', () => {
 jest.mock('../ActivityFeedPanel/FeedPanelHeader', () => {
   return jest.fn().mockReturnValue(<p>FeedPanelHeader</p>);
 });
-jest.mock('../ActivityFeedPanel/FeedPanelOverlay', () => {
-  return jest.fn().mockReturnValue(<p>FeedPanelOverlay</p>);
-});
+
 jest.mock('../DeleteConfirmationModal/DeleteConfirmationModal', () => {
   return jest.fn().mockReturnValue(<p>DeleteConfirmationModal</p>);
 });
@@ -70,14 +62,12 @@ describe('Test ActivityThreadPanel Component', () => {
         <ActivityThreadPanel {...mockActivityThreadPanelProp} />,
         { wrapper: MemoryRouter }
       );
-      const panelOverlay = await findByText(container, /FeedPanelOverlay/i);
 
       const panelThreadList = await findAllByText(
         container,
         /ActivityThreadList/i
       );
 
-      expect(panelOverlay).toBeInTheDocument();
       expect(panelThreadList).toHaveLength(1);
     });
   });
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 fa6e1ae29de..1c93848812b 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
@@ -11,15 +11,13 @@
  *  limitations under the License.
  */
 
-import { Tabs } from 'antd';
+import { Drawer, Tabs } from 'antd';
 import classNames from 'classnames';
 import { isEqual } from 'lodash';
 import React, { FC, useEffect, useState } from 'react';
-import ReactDOM from 'react-dom';
 import { useTranslation } from 'react-i18next';
 import { PanelTab } from '../../../constants/Feeds.constants';
 import { ThreadType } from '../../../generated/entity/feed/thread';
-import FeedPanelOverlay from '../ActivityFeedPanel/FeedPanelOverlay';
 import { ActivityThreadPanelProp } from './ActivityThreadPanel.interface';
 import ActivityThreadPanelBody from './ActivityThreadPanelBody';
 
@@ -52,21 +50,14 @@ const ActivityThreadPanel: FC<ActivityThreadPanelProp> = ({
     document.body.style.overflow = 'hidden';
   }, []);
 
-  return ReactDOM.createPortal(
-    <div className={classNames('tw-h-full', className)}>
-      <FeedPanelOverlay
-        className="tw-z-9997 tw-fixed tw-inset-0 tw-top-16 tw-h-full tw-w-3/5 tw-bg-black tw-opacity-40"
-        onCancel={() => onCancel && onCancel()}
-      />
-      <div
-        className={classNames(
-          'tw-top-16 tw-right-0 tw-bottom-0 tw-w-2/5 tw-bg-white tw-fixed tw-shadow-md tw-transform tw-ease-in-out tw-duration-1000 tw-overflow-y-auto tw-z-9997',
-          {
-            'tw-translate-x-0': open,
-            'tw-translate-x-full': !open,
-          }
-        )}
-        id="thread-panel">
+  return (
+    <Drawer
+      className={classNames('feed-drawer', className)}
+      closable={false}
+      open={open}
+      width={576}
+      onClose={onCancel}>
+      <div id="thread-panel">
         <Tabs
           activeKey={activeTab}
           className="ant-tabs-custom-line ant-tabs-custom-threadpanel"
@@ -97,8 +88,7 @@ const ActivityThreadPanel: FC<ActivityThreadPanelProp> = ({
           </TabPane>
         </Tabs>
       </div>
-    </div>,
-    document.body
+    </Drawer>
   );
 };
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityThreadPanel/ActivityThreadPanelBody.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityThreadPanel/ActivityThreadPanelBody.test.tsx
index 8983b8e33de..81b4ec1820d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityThreadPanel/ActivityThreadPanelBody.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityThreadPanel/ActivityThreadPanelBody.test.tsx
@@ -38,9 +38,7 @@ jest.mock('../ActivityFeedEditor/ActivityFeedEditor', () => {
 jest.mock('../ActivityFeedPanel/FeedPanelHeader', () => {
   return jest.fn().mockReturnValue(<p>FeedPanelHeader</p>);
 });
-jest.mock('../ActivityFeedPanel/FeedPanelOverlay', () => {
-  return jest.fn().mockReturnValue(<p>FeedPanelOverlay</p>);
-});
+
 jest.mock('../DeleteConfirmationModal/DeleteConfirmationModal', () => {
   return jest.fn().mockReturnValue(<p>DeleteConfirmationModal</p>);
 });
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedPanel/FeedPanelOverlay.tsx b/openmetadata-ui/src/main/resources/ui/src/styles/components/drawer.less
similarity index 59%
rename from openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedPanel/FeedPanelOverlay.tsx
rename to openmetadata-ui/src/main/resources/ui/src/styles/components/drawer.less
index e3a5141aabb..ab85745736a 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedPanel/FeedPanelOverlay.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/components/drawer.less
@@ -1,5 +1,5 @@
 /*
- *  Copyright 2022 Collate.
+ *  Copyright 2023 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
@@ -10,21 +10,17 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
+@import url('../variables.less');
 
-import React, { FC } from 'react';
-import { FeedPanelOverlayProp } from './ActivityFeedPanel.interface';
-
-const FeedPanelOverlay: FC<FeedPanelOverlayProp> = ({
-  className,
-  onCancel,
-}) => {
-  return (
-    <button
-      className={className}
-      data-testid="overlay-button"
-      onClick={onCancel}
-    />
-  );
-};
-
-export default FeedPanelOverlay;
+.feed-drawer {
+  margin-top: 64px;
+  .ant-drawer-header,
+  .ant-drawer-body {
+    padding: 0px;
+  }
+  .ant-drawer-title {
+    color: @text-color;
+    font-weight: 400;
+    font-size: 14px;
+  }
+}
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/index.js b/openmetadata-ui/src/main/resources/ui/src/styles/index.js
index 3935b911dce..f2731688d17 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/index.js
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/index.js
@@ -19,6 +19,7 @@ import '../fonts/Inter/Inter-VariableFont_slnt,wght.ttf';
 import './antd-master.less';
 import './app.less';
 import './components/code-mirror.less';
+import './components/drawer.less';
 import './components/glossary.less';
 import './components/menu.less';
 import './components/profiler.less';