diff --git a/src/plugins/data_source_management/public/components/no_data_source/__snapshots__/no_data_source.test.tsx.snap b/src/plugins/data_source_management/public/components/no_data_source/__snapshots__/no_data_source.test.tsx.snap
index 28c48cd26ffb..6807943e0897 100644
--- a/src/plugins/data_source_management/public/components/no_data_source/__snapshots__/no_data_source.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/no_data_source/__snapshots__/no_data_source.test.tsx.snap
@@ -26,51 +26,56 @@ exports[`NoDataSource should render correctly with the provided totalDataSourceC
   ownFocus={true}
   panelPaddingSize="none"
 >
-  <EuiContextMenuPanel
-    hasFocus={true}
-    items={Array []}
+  <DataSourceDropDownHeader
+    totalDataSourceCount={0}
+  />
+  <EuiPanel
+    borderRadius="none"
+    className="dataSourceSelectableOuiPanel"
+    color="transparent"
+    hasBorder={false}
+    paddingSize="none"
   >
     <EuiPanel
-      className="dataSourceSelectableOuiPanel"
-      color="transparent"
-      paddingSize="s"
+      className="dataSourceEmptyStatePanel"
+      data-test-subj="datasourceTableEmptyState"
+      hasBorder={false}
+      hasShadow={false}
     >
-      <DataSourceDropDownHeader
-        totalDataSourceCount={0}
-      />
-      <EuiHorizontalRule
-        margin="none"
-      />
-      <EuiSpacer
+      <EuiText
         size="s"
-      />
-      <EuiPanel
-        className="dataSourceEmptyStatePanel"
-        data-test-subj="datasourceTableEmptyState"
-        hasBorder={false}
-        hasShadow={false}
+        textAlign="center"
       >
-        <EuiText>
-          <FormattedMessage
-            defaultMessage="There is no data sources to display."
-            id="dataSourcesManagement.dataSourceMenu.noData"
-            values={Object {}}
-          />
-        </EuiText>
-        <EuiText>
-          <FormattedMessage
-            defaultMessage="Connect data source to get started"
-            id="dataSourcesManagement.dataSourceMenu.connect"
-            values={Object {}}
-          />
-        </EuiText>
-        <EuiSpacer />
+        <FormattedMessage
+          defaultMessage="There is no data sources to display."
+          id="dataSourcesManagement.dataSourceMenu.noData"
+          values={Object {}}
+        />
+      </EuiText>
+      <EuiText
+        size="s"
+        textAlign="center"
+      >
+        <FormattedMessage
+          defaultMessage="Connect data source to get started"
+          id="dataSourcesManagement.dataSourceMenu.connect"
+          values={Object {}}
+        />
+      </EuiText>
+    </EuiPanel>
+  </EuiPanel>
+  <EuiPopoverFooter>
+    <EuiFlexGroup
+      justifyContent="spaceAround"
+    >
+      <EuiFlexItem>
         <EuiButton
           data-test-subj="dataSourceEmptyStateManageDataSourceButton"
           fill={false}
           iconSide="right"
           iconType="popout"
           onClick={[Function]}
+          size="s"
         >
           <FormattedMessage
             defaultMessage="Manage data sources"
@@ -78,9 +83,9 @@ exports[`NoDataSource should render correctly with the provided totalDataSourceC
             values={Object {}}
           />
         </EuiButton>
-      </EuiPanel>
-    </EuiPanel>
-  </EuiContextMenuPanel>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </EuiPopoverFooter>
 </EuiPopover>
 `;
 
@@ -110,51 +115,56 @@ exports[`NoDataSource should render normally 1`] = `
   ownFocus={true}
   panelPaddingSize="none"
 >
-  <EuiContextMenuPanel
-    hasFocus={true}
-    items={Array []}
+  <DataSourceDropDownHeader
+    totalDataSourceCount={0}
+  />
+  <EuiPanel
+    borderRadius="none"
+    className="dataSourceSelectableOuiPanel"
+    color="transparent"
+    hasBorder={false}
+    paddingSize="none"
   >
     <EuiPanel
-      className="dataSourceSelectableOuiPanel"
-      color="transparent"
-      paddingSize="s"
+      className="dataSourceEmptyStatePanel"
+      data-test-subj="datasourceTableEmptyState"
+      hasBorder={false}
+      hasShadow={false}
     >
-      <DataSourceDropDownHeader
-        totalDataSourceCount={0}
-      />
-      <EuiHorizontalRule
-        margin="none"
-      />
-      <EuiSpacer
+      <EuiText
         size="s"
-      />
-      <EuiPanel
-        className="dataSourceEmptyStatePanel"
-        data-test-subj="datasourceTableEmptyState"
-        hasBorder={false}
-        hasShadow={false}
+        textAlign="center"
       >
-        <EuiText>
-          <FormattedMessage
-            defaultMessage="There is no data sources to display."
-            id="dataSourcesManagement.dataSourceMenu.noData"
-            values={Object {}}
-          />
-        </EuiText>
-        <EuiText>
-          <FormattedMessage
-            defaultMessage="Connect data source to get started"
-            id="dataSourcesManagement.dataSourceMenu.connect"
-            values={Object {}}
-          />
-        </EuiText>
-        <EuiSpacer />
+        <FormattedMessage
+          defaultMessage="There is no data sources to display."
+          id="dataSourcesManagement.dataSourceMenu.noData"
+          values={Object {}}
+        />
+      </EuiText>
+      <EuiText
+        size="s"
+        textAlign="center"
+      >
+        <FormattedMessage
+          defaultMessage="Connect data source to get started"
+          id="dataSourcesManagement.dataSourceMenu.connect"
+          values={Object {}}
+        />
+      </EuiText>
+    </EuiPanel>
+  </EuiPanel>
+  <EuiPopoverFooter>
+    <EuiFlexGroup
+      justifyContent="spaceAround"
+    >
+      <EuiFlexItem>
         <EuiButton
           data-test-subj="dataSourceEmptyStateManageDataSourceButton"
           fill={false}
           iconSide="right"
           iconType="popout"
           onClick={[Function]}
+          size="s"
         >
           <FormattedMessage
             defaultMessage="Manage data sources"
@@ -162,8 +172,8 @@ exports[`NoDataSource should render normally 1`] = `
             values={Object {}}
           />
         </EuiButton>
-      </EuiPanel>
-    </EuiPanel>
-  </EuiContextMenuPanel>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </EuiPopoverFooter>
 </EuiPopover>
 `;
diff --git a/src/plugins/data_source_management/public/components/no_data_source/no_data_source.tsx b/src/plugins/data_source_management/public/components/no_data_source/no_data_source.tsx
index 36d5b5befcab..7d2142a31765 100644
--- a/src/plugins/data_source_management/public/components/no_data_source/no_data_source.tsx
+++ b/src/plugins/data_source_management/public/components/no_data_source/no_data_source.tsx
@@ -8,12 +8,12 @@ import React, { useState } from 'react';
 import {
   EuiButton,
   EuiButtonEmpty,
-  EuiContextMenuPanel,
-  EuiHorizontalRule,
   EuiPanel,
   EuiPopover,
-  EuiSpacer,
   EuiText,
+  EuiPopoverFooter,
+  EuiFlexGroup,
+  EuiFlexItem,
 } from '@elastic/eui';
 import { ApplicationStart } from 'opensearch-dashboards/public';
 import { FormattedMessage } from 'react-intl';
@@ -55,6 +55,7 @@ export const NoDataSource: React.FC<DataSourceDropDownHeaderProps> = ({
       iconSide="right"
       data-test-subj="dataSourceEmptyStateManageDataSourceButton"
       fill={false}
+      size="s"
       onClick={() =>
         application?.navigateToApp('management', {
           path: `opensearch-dashboards/${DSM_APP_ID}`,
@@ -69,7 +70,7 @@ export const NoDataSource: React.FC<DataSourceDropDownHeaderProps> = ({
   );
   const text = (
     <>
-      <EuiText>
+      <EuiText size="s" textAlign="center">
         {
           <FormattedMessage
             id="dataSourcesManagement.dataSourceMenu.noData"
@@ -78,7 +79,7 @@ export const NoDataSource: React.FC<DataSourceDropDownHeaderProps> = ({
         }
       </EuiText>
 
-      <EuiText>
+      <EuiText size="s" textAlign="center">
         {
           <FormattedMessage
             id="dataSourcesManagement.dataSourceMenu.connect"
@@ -100,27 +101,32 @@ export const NoDataSource: React.FC<DataSourceDropDownHeaderProps> = ({
       anchorPosition="downLeft"
       data-test-subj={'dataSourceEmptyStatePopover'}
     >
-      <EuiContextMenuPanel>
-        <EuiPanel className={'dataSourceSelectableOuiPanel'} color="transparent" paddingSize="s">
-          <DataSourceDropDownHeader
-            activeDataSourceCount={activeDataSourceCount}
-            totalDataSourceCount={totalDataSourceCount}
-            application={application}
-          />
-          <EuiHorizontalRule margin="none" />
-          <EuiSpacer size="s" />
-          <EuiPanel
-            hasBorder={false}
-            hasShadow={false}
-            className="dataSourceEmptyStatePanel"
-            data-test-subj="datasourceTableEmptyState"
-          >
-            {text}
-            <EuiSpacer />
-            {redirectButton}
-          </EuiPanel>
+      <DataSourceDropDownHeader
+        activeDataSourceCount={activeDataSourceCount}
+        totalDataSourceCount={totalDataSourceCount}
+        application={application}
+      />
+      <EuiPanel
+        className={'dataSourceSelectableOuiPanel'}
+        hasBorder={false}
+        color="transparent"
+        paddingSize="none"
+        borderRadius="none"
+      >
+        <EuiPanel
+          hasBorder={false}
+          hasShadow={false}
+          className="dataSourceEmptyStatePanel"
+          data-test-subj="datasourceTableEmptyState"
+        >
+          {text}
         </EuiPanel>
-      </EuiContextMenuPanel>
+      </EuiPanel>
+      <EuiPopoverFooter>
+        <EuiFlexGroup justifyContent="spaceAround">
+          <EuiFlexItem>{redirectButton}</EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPopoverFooter>
     </EuiPopover>
   );
 };