diff --git a/CHANGELOG.md b/CHANGELOG.md
index 200a8e653248..7f1fe53fea1c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -133,6 +133,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Dynamic Configurations] Fix dynamic config API calls to pass correct input ([#6474](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6474))
 - [BUG][Multiple Datasource] Modify the button of selectable component to fix the title overflow issue ([#6465](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6465))
 - [BUG][Multiple Datasource] Validation succeed as long as status code in response is 200 ([#6399](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6399))
+- [BUG][Multiple Datasource] Fix on data source selectable and readonly component are not consistent ([#6545]https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6545)
 - [BUG][Multiple Datasource] Add validation for title length to be no longer than 32 characters [#6452](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6452))
 
 ### 🚞 Infrastructure
diff --git a/src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap
index 79d158ee3be5..6f75df193276 100644
--- a/src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap
@@ -36,17 +36,11 @@ exports[`DataSourceSelectable should filter options if configured 1`] = `
     <EuiPanel
       className="dataSourceSelectableOuiPanel"
       color="transparent"
-      paddingSize="s"
+      paddingSize="none"
     >
       <DataSourceDropDownHeader
         totalDataSourceCount={3}
       />
-      <EuiHorizontalRule
-        margin="none"
-      />
-      <EuiSpacer
-        size="s"
-      />
       <EuiSelectable
         aria-label="Search"
         data-test-subj="dataSourceSelectable"
@@ -120,17 +114,11 @@ exports[`DataSourceSelectable should render normally with local cluster is hidde
     <EuiPanel
       className="dataSourceSelectableOuiPanel"
       color="transparent"
-      paddingSize="s"
+      paddingSize="none"
     >
       <DataSourceDropDownHeader
         totalDataSourceCount={0}
       />
-      <EuiHorizontalRule
-        margin="none"
-      />
-      <EuiSpacer
-        size="s"
-      />
       <EuiSelectable
         aria-label="Search"
         data-test-subj="dataSourceSelectable"
@@ -188,17 +176,11 @@ exports[`DataSourceSelectable should render normally with local cluster not hidd
     <EuiPanel
       className="dataSourceSelectableOuiPanel"
       color="transparent"
-      paddingSize="s"
+      paddingSize="none"
     >
       <DataSourceDropDownHeader
         totalDataSourceCount={0}
       />
-      <EuiHorizontalRule
-        margin="none"
-      />
-      <EuiSpacer
-        size="s"
-      />
       <EuiSelectable
         aria-label="Search"
         data-test-subj="dataSourceSelectable"
@@ -290,77 +272,79 @@ Object {
               <div>
                 <div>
                   <div
-                    class="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--transparent euiPanel--noShadow dataSourceSelectableOuiPanel"
+                    class="euiPanel euiPanel--borderRadiusMedium euiPanel--transparent euiPanel--noShadow dataSourceSelectableOuiPanel"
                   >
                     <div
-                      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiTitle euiTitle--xxxsmall"
+                      class="euiPopoverTitle euiPopoverTitle--paddingSmall"
                     >
                       <div
-                        class="euiFlexItem"
-                      >
-                        DATA SOURCES
-                         (
-                        3
-                        )
-                      </div>
-                      <div
-                        class="dataSourceDropDownHeaderInvisibleFocusable"
-                        tabindex="0"
-                      />
-                      <div
-                        class="euiFlexItem euiFlexItem--flexGrowZero"
+                        class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow"
                       >
-                        <button
-                          class="euiLink euiLink--primary"
-                          type="button"
+                        <div
+                          class="euiFlexItem"
+                        >
+                          DATA SOURCES
+                           (
+                          3
+                          )
+                        </div>
+                        <div
+                          class="dataSourceDropDownHeaderInvisibleFocusable"
+                          tabindex="0"
+                        />
+                        <div
+                          class="euiFlexItem euiFlexItem--flexGrowZero"
                         >
-                          Manage
-                        </button>
+                          <button
+                            class="euiLink euiLink--primary"
+                            type="button"
+                          >
+                            Manage
+                          </button>
+                        </div>
                       </div>
                     </div>
-                    <hr
-                      class="euiHorizontalRule euiHorizontalRule--full"
-                    />
-                    <div
-                      class="euiSpacer euiSpacer--s"
-                    />
                     <div
                       class="euiSelectable"
                       data-test-subj="dataSourceSelectable"
                     >
                       <div
-                        class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
+                        class="euiPopoverTitle euiPopoverTitle--paddingSmall"
                       >
                         <div
-                          class="euiFormControlLayout__childrenWrapper"
+                          class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
                         >
-                          <input
-                            aria-activedescendant=""
-                            aria-autocomplete="list"
-                            aria-controls="generated-id_listbox"
-                            aria-expanded="true"
-                            aria-haspopup="listbox"
-                            aria-label="Search"
-                            aria-owns="generated-id_listbox"
-                            autocomplete="off"
-                            class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed euiSelectableSearch"
-                            placeholder="Search"
-                            role="combobox"
-                            type="search"
-                            value=""
-                          />
                           <div
-                            class="euiFormControlLayoutIcons"
+                            class="euiFormControlLayout__childrenWrapper"
                           >
-                            <span
-                              class="euiFormControlLayoutCustomIcon"
+                            <input
+                              aria-activedescendant=""
+                              aria-autocomplete="list"
+                              aria-controls="generated-id_listbox"
+                              aria-expanded="true"
+                              aria-haspopup="listbox"
+                              aria-label="Search"
+                              aria-owns="generated-id_listbox"
+                              autocomplete="off"
+                              class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed euiSelectableSearch"
+                              placeholder="Search"
+                              role="combobox"
+                              type="search"
+                              value=""
+                            />
+                            <div
+                              class="euiFormControlLayoutIcons"
                             >
                               <span
-                                aria-hidden="true"
-                                class="euiFormControlLayoutCustomIcon__icon"
-                                data-euiicon-type="search"
-                              />
-                            </span>
+                                class="euiFormControlLayoutCustomIcon"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiFormControlLayoutCustomIcon__icon"
+                                  data-euiicon-type="search"
+                                />
+                              </span>
+                            </div>
                           </div>
                         </div>
                       </div>
diff --git a/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx b/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx
index 2259f93fbbec..c43e08bac593 100644
--- a/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx
@@ -11,8 +11,7 @@ import {
   EuiPanel,
   EuiButtonEmpty,
   EuiSelectable,
-  EuiSpacer,
-  EuiHorizontalRule,
+  EuiPopoverTitle,
 } from '@elastic/eui';
 import {
   ApplicationStart,
@@ -271,13 +270,15 @@ export class DataSourceSelectable extends React.Component<
         data-test-subj={'dataSourceSelectableContextMenuPopover'}
       >
         <EuiContextMenuPanel>
-          <EuiPanel className={'dataSourceSelectableOuiPanel'} color="transparent" paddingSize="s">
+          <EuiPanel
+            className={'dataSourceSelectableOuiPanel'}
+            color="transparent"
+            paddingSize="none"
+          >
             <DataSourceDropDownHeader
               totalDataSourceCount={this.state.dataSourceOptions.length}
               application={this.props.application}
             />
-            <EuiHorizontalRule margin="none" />
-            <EuiSpacer size="s" />
             <EuiSelectable
               aria-label="Search"
               searchable
@@ -299,7 +300,7 @@ export class DataSourceSelectable extends React.Component<
             >
               {(list, search) => (
                 <>
-                  {search}
+                  <EuiPopoverTitle paddingSize="s">{search}</EuiPopoverTitle>
                   {list}
                 </>
               )}
diff --git a/src/plugins/data_source_management/public/components/data_source_view/__snapshots__/data_source_view.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_view/__snapshots__/data_source_view.test.tsx.snap
index 954e49247957..efe373e7d825 100644
--- a/src/plugins/data_source_management/public/components/data_source_view/__snapshots__/data_source_view.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/data_source_view/__snapshots__/data_source_view.test.tsx.snap
@@ -24,24 +24,18 @@ exports[`DataSourceView Should render successfully when provided datasource has
   ownFocus={true}
   panelPaddingSize="none"
 >
+  <DataSourceDropDownHeader
+    totalDataSourceCount={1}
+  />
   <EuiContextMenuPanel
+    className="dataSourceViewOuiPanel"
     hasFocus={true}
     items={Array []}
   >
-    <EuiPanel
-      borderRadius="none"
-      className="dataSourceViewOuiPanel"
-      color="transparent"
-      paddingSize="s"
-    >
-      <DataSourceDropDownHeader
-        totalDataSourceCount={1}
-      />
-    </EuiPanel>
     <EuiPanel
       borderRadius="none"
       color="subdued"
-      paddingSize="xs"
+      paddingSize="none"
     >
       <EuiSelectable
         compressed={true}
@@ -103,24 +97,18 @@ exports[`DataSourceView should call getDataSourceById when only pass id with no
   ownFocus={true}
   panelPaddingSize="none"
 >
+  <DataSourceDropDownHeader
+    totalDataSourceCount={1}
+  />
   <EuiContextMenuPanel
+    className="dataSourceViewOuiPanel"
     hasFocus={true}
     items={Array []}
   >
-    <EuiPanel
-      borderRadius="none"
-      className="dataSourceViewOuiPanel"
-      color="transparent"
-      paddingSize="s"
-    >
-      <DataSourceDropDownHeader
-        totalDataSourceCount={1}
-      />
-    </EuiPanel>
     <EuiPanel
       borderRadius="none"
       color="subdued"
-      paddingSize="xs"
+      paddingSize="none"
     >
       <EuiSelectable
         compressed={true}
@@ -174,24 +162,18 @@ exports[`DataSourceView should render normally with local cluster not hidden 1`]
   ownFocus={true}
   panelPaddingSize="none"
 >
+  <DataSourceDropDownHeader
+    totalDataSourceCount={1}
+  />
   <EuiContextMenuPanel
+    className="dataSourceViewOuiPanel"
     hasFocus={true}
     items={Array []}
   >
-    <EuiPanel
-      borderRadius="none"
-      className="dataSourceViewOuiPanel"
-      color="transparent"
-      paddingSize="s"
-    >
-      <DataSourceDropDownHeader
-        totalDataSourceCount={1}
-      />
-    </EuiPanel>
     <EuiPanel
       borderRadius="none"
       color="subdued"
-      paddingSize="xs"
+      paddingSize="none"
     >
       <EuiSelectable
         compressed={true}
@@ -277,41 +259,41 @@ Object {
           </p>
           <div>
             <div
-              class="euiContextMenuPanel"
+              class="euiPopoverTitle euiPopoverTitle--paddingSmall"
+            >
+              <div
+                class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow"
+              >
+                <div
+                  class="euiFlexItem"
+                >
+                  DATA SOURCE
+                   (
+                  1
+                  )
+                </div>
+                <div
+                  class="dataSourceDropDownHeaderInvisibleFocusable"
+                  tabindex="0"
+                />
+                <div
+                  class="euiFlexItem euiFlexItem--flexGrowZero"
+                >
+                  <button
+                    class="euiLink euiLink--primary"
+                    type="button"
+                  >
+                    Manage
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiContextMenuPanel dataSourceViewOuiPanel"
               tabindex="-1"
             >
               <div>
                 <div>
-                  <div
-                    class="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusNone euiPanel--transparent euiPanel--noShadow dataSourceViewOuiPanel"
-                  >
-                    <div
-                      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiTitle euiTitle--xxxsmall"
-                    >
-                      <div
-                        class="euiFlexItem"
-                      >
-                        DATA SOURCE
-                         (
-                        1
-                        )
-                      </div>
-                      <div
-                        class="dataSourceDropDownHeaderInvisibleFocusable"
-                        tabindex="0"
-                      />
-                      <div
-                        class="euiFlexItem euiFlexItem--flexGrowZero"
-                      >
-                        <button
-                          class="euiLink euiLink--primary"
-                          type="button"
-                        >
-                          Manage
-                        </button>
-                      </div>
-                    </div>
-                  </div>
                   <div
                     class="euiPanel euiPanel--borderRadiusNone euiPanel--subdued euiPanel--noShadow euiPanel--noBorder"
                   >
diff --git a/src/plugins/data_source_management/public/components/data_source_view/data_source_view.tsx b/src/plugins/data_source_management/public/components/data_source_view/data_source_view.tsx
index 3c816bdb9770..75596b215b08 100644
--- a/src/plugins/data_source_management/public/components/data_source_view/data_source_view.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_view/data_source_view.tsx
@@ -193,21 +193,9 @@ export class DataSourceView extends React.Component<DataSourceViewProps, DataSou
         panelPaddingSize="none"
         anchorPosition="downLeft"
       >
-        <EuiContextMenuPanel>
-          <EuiPanel
-            className={'dataSourceViewOuiPanel'}
-            borderRadius="none"
-            color="transparent"
-            paddingSize="s"
-          >
-            {
-              <DataSourceDropDownHeader
-                totalDataSourceCount={1}
-                application={this.props.application}
-              />
-            }
-          </EuiPanel>
-          <EuiPanel color="subdued" paddingSize="xs" borderRadius="none">
+        <DataSourceDropDownHeader totalDataSourceCount={1} application={this.props.application} />
+        <EuiContextMenuPanel className={'dataSourceViewOuiPanel'}>
+          <EuiPanel color="subdued" paddingSize="none" borderRadius="none">
             <EuiSelectable
               options={options}
               singleSelection={true}
diff --git a/src/plugins/data_source_management/public/components/drop_down_header/drop_down_header.tsx b/src/plugins/data_source_management/public/components/drop_down_header/drop_down_header.tsx
index 2eb457c47511..790f5d40696f 100644
--- a/src/plugins/data_source_management/public/components/drop_down_header/drop_down_header.tsx
+++ b/src/plugins/data_source_management/public/components/drop_down_header/drop_down_header.tsx
@@ -4,7 +4,7 @@
  */
 
 import './drop_down_header.scss';
-import { EuiTitle, EuiFlexGroup, EuiFlexItem, EuiLink } from '@elastic/eui';
+import { EuiTitle, EuiFlexGroup, EuiFlexItem, EuiLink, EuiPopoverTitle } from '@elastic/eui';
 import React from 'react';
 import { ApplicationStart } from 'opensearch-dashboards/public';
 import { DSM_APP_ID } from '../../plugin';
@@ -27,7 +27,7 @@ export const DataSourceDropDownHeader: React.FC<DataSourceOptionItemProps> = ({
       : totalDataSourceCount;
 
   return (
-    <EuiTitle size="xxxs">
+    <EuiPopoverTitle paddingSize="s">
       <EuiFlexGroup responsive={false}>
         <EuiFlexItem>
           {dataSourceCounterPrefix} ({dataSourceCounter})
@@ -45,6 +45,6 @@ export const DataSourceDropDownHeader: React.FC<DataSourceOptionItemProps> = ({
           </EuiLink>
         </EuiFlexItem>
       </EuiFlexGroup>
-    </EuiTitle>
+    </EuiPopoverTitle>
   );
 };