diff --git a/changelogs/fragments/8222.yml b/changelogs/fragments/8222.yml
new file mode 100644
index 00000000000..e617e598355
--- /dev/null
+++ b/changelogs/fragments/8222.yml
@@ -0,0 +1,2 @@
+fix:
+- Update data explorer ui to use compressed components ([#8222](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8222))
\ No newline at end of file
diff --git a/src/plugins/data/public/data_sources/datasource_selector/data_selector_refresher.tsx b/src/plugins/data/public/data_sources/datasource_selector/data_selector_refresher.tsx
index bab5f152458..e066d65bd8a 100644
--- a/src/plugins/data/public/data_sources/datasource_selector/data_selector_refresher.tsx
+++ b/src/plugins/data/public/data_sources/datasource_selector/data_selector_refresher.tsx
@@ -3,15 +3,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from 'react';
+import { EuiButtonIconProps, EuiSmallButtonIcon, EuiToolTip, EuiToolTipProps } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
-import {
-  EuiSmallButtonIcon,
-  EuiButtonIconProps,
-  EuiText,
-  EuiToolTip,
-  EuiToolTipProps,
-} from '@elastic/eui';
+import React from 'react';
 
 interface IDataSelectorRefresherProps {
   tooltipText: string;
@@ -23,26 +17,24 @@ interface IDataSelectorRefresherProps {
 export const DataSelectorRefresher: React.FC<IDataSelectorRefresherProps> = React.memo(
   ({ tooltipText, onRefresh, buttonProps, toolTipProps }) => {
     return (
-      <EuiText size="s" className="sourceRefreshText">
-        <EuiToolTip
-          position="right"
-          content={i18n.translate('data.datasource.selector.refreshDataSources', {
-            defaultMessage: tooltipText,
-          })}
-          display="block"
-          data-test-subj="sourceRefreshButtonToolTip"
-          {...toolTipProps}
-        >
-          <EuiSmallButtonIcon
-            onClick={onRefresh}
-            iconType="refresh"
-            aria-label="sourceRefresh"
-            className="sourceRefreshButton"
-            data-test-subj="sourceRefreshButton"
-            {...buttonProps}
-          />
-        </EuiToolTip>
-      </EuiText>
+      <EuiToolTip
+        position="right"
+        content={i18n.translate('data.datasource.selector.refreshDataSources', {
+          defaultMessage: tooltipText,
+        })}
+        display="block"
+        data-test-subj="sourceRefreshButtonToolTip"
+        {...toolTipProps}
+      >
+        <EuiSmallButtonIcon
+          onClick={onRefresh}
+          iconType="refresh"
+          aria-label="sourceRefresh"
+          className="sourceRefreshButton"
+          data-test-subj="sourceRefreshButton"
+          {...buttonProps}
+        />
+      </EuiToolTip>
     );
   }
 );
diff --git a/src/plugins/data/public/data_sources/datasource_selector/datasource_selectable.tsx b/src/plugins/data/public/data_sources/datasource_selector/datasource_selectable.tsx
index e826cbe18af..8e59ac91009 100644
--- a/src/plugins/data/public/data_sources/datasource_selector/datasource_selectable.tsx
+++ b/src/plugins/data/public/data_sources/datasource_selector/datasource_selectable.tsx
@@ -3,17 +3,17 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useEffect, useCallback, useMemo } from 'react';
 import { EuiCompressedComboBox } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
-import { DataSource, DataSetWithDataSource, IndexPatternOption } from '../datasource';
-import { DataSourceGroup, DataSourceOption, DataSourceSelectableProps } from './types';
-import { DataSelectorRefresher } from './data_selector_refresher';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import {
   DATA_SELECTOR_DEFAULT_PLACEHOLDER,
   DATA_SELECTOR_REFRESHER_POPOVER_TEXT,
   DATA_SELECTOR_S3_DATA_SOURCE_GROUP_HINT_LABEL,
 } from '../constants';
+import { DataSetWithDataSource, DataSource, IndexPatternOption } from '../datasource';
+import { DataSelectorRefresher } from './data_selector_refresher';
+import { DataSourceGroup, DataSourceOption, DataSourceSelectableProps } from './types';
 
 // Asynchronously retrieves and formats dataset from a given data source.
 const getAndFormatDataSetFromDataSource = async (
diff --git a/src/plugins/data/public/ui/dataset_selector/dataset_selector.tsx b/src/plugins/data/public/ui/dataset_selector/dataset_selector.tsx
index d442360e4d5..817d0734c4d 100644
--- a/src/plugins/data/public/ui/dataset_selector/dataset_selector.tsx
+++ b/src/plugins/data/public/ui/dataset_selector/dataset_selector.tsx
@@ -3,23 +3,23 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useEffect, useMemo, useState, useCallback, useRef } from 'react';
 import {
   EuiButton,
-  EuiButtonEmpty,
   EuiIcon,
   EuiPopover,
   EuiPopoverFooter,
   EuiSelectable,
   EuiSelectableOption,
+  EuiSmallButtonEmpty,
   EuiToolTip,
 } from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { toMountPoint } from '../../../../opensearch_dashboards_react/public';
 import { Dataset, DEFAULT_DATA } from '../../../common';
+import { getQueryService } from '../../services';
 import { IDataPluginServices } from '../../types';
 import { AdvancedSelector } from './advanced_selector';
-import { getQueryService } from '../../services';
 
 interface DatasetSelectorProps {
   selectedDataset?: Dataset;
@@ -133,7 +133,7 @@ export const DatasetSelector = ({
     <EuiPopover
       button={
         <EuiToolTip content={`${selectedDataset?.title ?? 'Select data'}`}>
-          <EuiButtonEmpty
+          <EuiSmallButtonEmpty
             className="datasetSelector__button"
             iconType="arrowDown"
             iconSide="right"
@@ -141,7 +141,7 @@ export const DatasetSelector = ({
           >
             <EuiIcon type={datasetIcon} className="datasetSelector__icon" />
             {datasetTitle}
-          </EuiButtonEmpty>
+          </EuiSmallButtonEmpty>
         </EuiToolTip>
       }
       isOpen={isOpen}
diff --git a/src/plugins/data/public/ui/query_editor/__snapshots__/language_selector.test.tsx.snap b/src/plugins/data/public/ui/query_editor/__snapshots__/language_selector.test.tsx.snap
index fd8aa75f734..a677567d113 100644
--- a/src/plugins/data/public/ui/query_editor/__snapshots__/language_selector.test.tsx.snap
+++ b/src/plugins/data/public/ui/query_editor/__snapshots__/language_selector.test.tsx.snap
@@ -492,7 +492,7 @@ exports[`LanguageSelector should select DQL if language is kuery 1`] = `
     <EuiPopover
       anchorPosition="downLeft"
       button={
-        <EuiButtonEmpty
+        <EuiSmallButtonEmpty
           className="languageSelector__button"
           iconSide="right"
           iconSize="s"
@@ -500,7 +500,7 @@ exports[`LanguageSelector should select DQL if language is kuery 1`] = `
           onClick={[Function]}
         >
           DQL
-        </EuiButtonEmpty>
+        </EuiSmallButtonEmpty>
       }
       className="languageSelector"
       closePopover={[Function]}
@@ -516,57 +516,66 @@ exports[`LanguageSelector should select DQL if language is kuery 1`] = `
         <div
           className="euiPopover__anchor"
         >
-          <EuiButtonEmpty
+          <EuiSmallButtonEmpty
             className="languageSelector__button"
             iconSide="right"
             iconSize="s"
             iconType="arrowDown"
             onClick={[Function]}
           >
-            <button
-              className="euiButtonEmpty euiButtonEmpty--primary languageSelector__button"
-              disabled={false}
+            <EuiButtonEmpty
+              className="languageSelector__button"
+              iconSide="right"
               iconSize="s"
+              iconType="arrowDown"
               onClick={[Function]}
-              type="button"
+              size="s"
             >
-              <EuiButtonContent
-                className="euiButtonEmpty__content"
-                iconGap="m"
-                iconSide="right"
-                iconSize="m"
-                iconType="arrowDown"
-                textProps={
-                  Object {
-                    "className": "euiButtonEmpty__text",
-                  }
-                }
+              <button
+                className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small languageSelector__button"
+                disabled={false}
+                iconSize="s"
+                onClick={[Function]}
+                type="button"
               >
-                <span
-                  className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                <EuiButtonContent
+                  className="euiButtonEmpty__content"
+                  iconGap="m"
+                  iconSide="right"
+                  iconSize="m"
+                  iconType="arrowDown"
+                  textProps={
+                    Object {
+                      "className": "euiButtonEmpty__text",
+                    }
+                  }
                 >
-                  <EuiIcon
-                    className="euiButtonContent__icon"
-                    color="inherit"
-                    size="m"
-                    type="arrowDown"
+                  <span
+                    className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                   >
-                    <span
+                    <EuiIcon
                       className="euiButtonContent__icon"
                       color="inherit"
-                      data-euiicon-type="arrowDown"
                       size="m"
-                    />
-                  </EuiIcon>
-                  <span
-                    className="euiButtonEmpty__text"
-                  >
-                    DQL
+                      type="arrowDown"
+                    >
+                      <span
+                        className="euiButtonContent__icon"
+                        color="inherit"
+                        data-euiicon-type="arrowDown"
+                        size="m"
+                      />
+                    </EuiIcon>
+                    <span
+                      className="euiButtonEmpty__text"
+                    >
+                      DQL
+                    </span>
                   </span>
-                </span>
-              </EuiButtonContent>
-            </button>
-          </EuiButtonEmpty>
+                </EuiButtonContent>
+              </button>
+            </EuiButtonEmpty>
+          </EuiSmallButtonEmpty>
         </div>
       </div>
     </EuiPopover>
@@ -1066,7 +1075,7 @@ exports[`LanguageSelector should select lucene if language is lucene 1`] = `
     <EuiPopover
       anchorPosition="downLeft"
       button={
-        <EuiButtonEmpty
+        <EuiSmallButtonEmpty
           className="languageSelector__button"
           iconSide="right"
           iconSize="s"
@@ -1074,7 +1083,7 @@ exports[`LanguageSelector should select lucene if language is lucene 1`] = `
           onClick={[Function]}
         >
           Lucene
-        </EuiButtonEmpty>
+        </EuiSmallButtonEmpty>
       }
       className="languageSelector"
       closePopover={[Function]}
@@ -1090,57 +1099,66 @@ exports[`LanguageSelector should select lucene if language is lucene 1`] = `
         <div
           className="euiPopover__anchor"
         >
-          <EuiButtonEmpty
+          <EuiSmallButtonEmpty
             className="languageSelector__button"
             iconSide="right"
             iconSize="s"
             iconType="arrowDown"
             onClick={[Function]}
           >
-            <button
-              className="euiButtonEmpty euiButtonEmpty--primary languageSelector__button"
-              disabled={false}
+            <EuiButtonEmpty
+              className="languageSelector__button"
+              iconSide="right"
               iconSize="s"
+              iconType="arrowDown"
               onClick={[Function]}
-              type="button"
+              size="s"
             >
-              <EuiButtonContent
-                className="euiButtonEmpty__content"
-                iconGap="m"
-                iconSide="right"
-                iconSize="m"
-                iconType="arrowDown"
-                textProps={
-                  Object {
-                    "className": "euiButtonEmpty__text",
-                  }
-                }
+              <button
+                className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small languageSelector__button"
+                disabled={false}
+                iconSize="s"
+                onClick={[Function]}
+                type="button"
               >
-                <span
-                  className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                <EuiButtonContent
+                  className="euiButtonEmpty__content"
+                  iconGap="m"
+                  iconSide="right"
+                  iconSize="m"
+                  iconType="arrowDown"
+                  textProps={
+                    Object {
+                      "className": "euiButtonEmpty__text",
+                    }
+                  }
                 >
-                  <EuiIcon
-                    className="euiButtonContent__icon"
-                    color="inherit"
-                    size="m"
-                    type="arrowDown"
+                  <span
+                    className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                   >
-                    <span
+                    <EuiIcon
                       className="euiButtonContent__icon"
                       color="inherit"
-                      data-euiicon-type="arrowDown"
                       size="m"
-                    />
-                  </EuiIcon>
-                  <span
-                    className="euiButtonEmpty__text"
-                  >
-                    Lucene
+                      type="arrowDown"
+                    >
+                      <span
+                        className="euiButtonContent__icon"
+                        color="inherit"
+                        data-euiicon-type="arrowDown"
+                        size="m"
+                      />
+                    </EuiIcon>
+                    <span
+                      className="euiButtonEmpty__text"
+                    >
+                      Lucene
+                    </span>
                   </span>
-                </span>
-              </EuiButtonContent>
-            </button>
-          </EuiButtonEmpty>
+                </EuiButtonContent>
+              </button>
+            </EuiButtonEmpty>
+          </EuiSmallButtonEmpty>
         </div>
       </div>
     </EuiPopover>
diff --git a/src/plugins/data/public/ui/query_editor/_query_editor.scss b/src/plugins/data/public/ui/query_editor/_query_editor.scss
index 6cf42e88e42..a970a970853 100644
--- a/src/plugins/data/public/ui/query_editor/_query_editor.scss
+++ b/src/plugins/data/public/ui/query_editor/_query_editor.scss
@@ -64,26 +64,10 @@
   }
 }
 
-.osdQueryEditor__dataSetWrapper {
-  max-width: 350px;
-
-  .dataExplorerDSSelect {
-    border-bottom: $euiBorderThin !important;
-    min-width: 300px;
-
-    span:is([class$="__text"]) {
-      width: 350px;
-      text-align: left;
-    }
-
-    div:is([class$="--group"]) {
-      padding: 0 !important;
-    }
-
-    .sourceRefreshText {
-      max-height: 40px;
-    }
-  }
+// TODO: ths is a temporary fix to make sure the height is set to auto
+// Can remove this once, height issue is fixed for combo box append in Oui
+.dataExplorerDSSelect .euiFormControlLayout.euiFormControlLayout--group > .euiToolTipAnchor {
+  height: auto;
 }
 
 .osdQueryEditor__prependWrapper {
@@ -159,7 +143,6 @@
 .osdQueryEditor__topBar {
   display: flex;
   align-items: center;
-  padding: $euiSizeXS;
 
   > * {
     flex: 0 1 auto;
@@ -203,7 +186,7 @@
 }
 
 .osdQuerEditor__singleLine {
-  padding: $euiSizeS;
+  padding: calc($euiSizeXS + 1px);
   background-color: $euiColorEmptyShade;
   overflow: initial !important; // needed for suggestion window, otherwise will be hidden in child
   min-width: 0;
diff --git a/src/plugins/data/public/ui/query_editor/editors/shared.tsx b/src/plugins/data/public/ui/query_editor/editors/shared.tsx
index 32cb0aa18a5..ab7ad44bbf7 100644
--- a/src/plugins/data/public/ui/query_editor/editors/shared.tsx
+++ b/src/plugins/data/public/ui/query_editor/editors/shared.tsx
@@ -3,9 +3,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from 'react';
 import { EuiCompressedFieldText } from '@elastic/eui';
 import { monaco } from '@osd/monaco';
+import React from 'react';
 import { CodeEditor } from '../../../../../opensearch_dashboards_react/public';
 
 interface SingleLineInputProps extends React.JSX.IntrinsicAttributes {
@@ -62,7 +62,7 @@ export const SingleLineInput: React.FC<SingleLineInputProps> = ({
   provideCompletionItems,
   prepend,
 }) => (
-  <div className="euiFormControlLayout euiFormControlLayout--group osdQueryBar__wrap">
+  <div className="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group osdQueryBar__wrap">
     {prepend}
     <div className="osdQuerEditor__singleLine euiFormControlLayout__childrenWrapper">
       <CodeEditor
diff --git a/src/plugins/data/public/ui/query_editor/language_selector.tsx b/src/plugins/data/public/ui/query_editor/language_selector.tsx
index 2cdac637bc0..ed7598fea56 100644
--- a/src/plugins/data/public/ui/query_editor/language_selector.tsx
+++ b/src/plugins/data/public/ui/query_editor/language_selector.tsx
@@ -3,17 +3,17 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useState, useEffect } from 'react';
 import {
-  PopoverAnchorPosition,
+  EuiContextMenuItem,
   EuiContextMenuPanel,
   EuiPopover,
-  EuiButtonEmpty,
-  EuiContextMenuItem,
+  EuiSmallButtonEmpty,
+  PopoverAnchorPosition,
 } from '@elastic/eui';
-import { getQueryService } from '../../services';
-import { LanguageConfig } from '../../query';
+import React, { useEffect, useState } from 'react';
 import { Query } from '../..';
+import { LanguageConfig } from '../../query';
+import { getQueryService } from '../../services';
 
 export interface QueryLanguageSelectorProps {
   query: Query;
@@ -109,7 +109,7 @@ export const QueryLanguageSelector = (props: QueryLanguageSelectorProps) => {
     <EuiPopover
       className="languageSelector"
       button={
-        <EuiButtonEmpty
+        <EuiSmallButtonEmpty
           iconSide="right"
           iconSize="s"
           onClick={onButtonClick}
@@ -117,7 +117,7 @@ export const QueryLanguageSelector = (props: QueryLanguageSelectorProps) => {
           iconType="arrowDown"
         >
           {selectedLanguage.label}
-        </EuiButtonEmpty>
+        </EuiSmallButtonEmpty>
       }
       isOpen={isPopoverOpen}
       closePopover={() => setPopover(false)}
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field_search.tsx b/src/plugins/discover/public/application/components/sidebar/discover_field_search.tsx
index 2e726eb0e96..3469fd1d34d 100644
--- a/src/plugins/discover/public/application/components/sidebar/discover_field_search.tsx
+++ b/src/plugins/discover/public/application/components/sidebar/discover_field_search.tsx
@@ -28,29 +28,27 @@
  * under the License.
  */
 
-import React, { OptionHTMLAttributes, ReactNode, useState } from 'react';
-import { i18n } from '@osd/i18n';
 import {
+  EuiButtonGroup,
   EuiCompressedFieldSearch,
+  EuiCompressedSwitch,
+  EuiFilterGroup,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiPopover,
-  EuiPopoverFooter,
-  EuiPopoverTitle,
-  EuiSelect,
-  EuiCompressedSwitch,
-  EuiSwitchEvent,
   EuiForm,
   EuiFormRow,
-  EuiButtonGroup,
   EuiOutsideClickDetector,
   EuiPanel,
+  EuiPopover,
+  EuiPopoverFooter,
+  EuiPopoverTitle,
+  EuiSelect,
   EuiSmallFilterButton,
-  EuiFilterGroup,
-  EuiFieldSearch,
+  EuiSwitchEvent,
 } from '@elastic/eui';
+import { i18n } from '@osd/i18n';
 import { FormattedMessage } from '@osd/i18n/react';
-import { UI_SETTINGS } from 'src/plugins/data/common';
+import React, { OptionHTMLAttributes, ReactNode, useState } from 'react';
 
 export const NUM_FILTERS = 3;
 
@@ -257,19 +255,6 @@ export function DiscoverFieldSearch({
         onChange={(event) => onChange('name', event.currentTarget.value)}
         placeholder={searchPlaceholder}
         value={value}
-      />
-    </EuiOutsideClickDetector>
-  );
-
-  const fieldSearch = (
-    <EuiOutsideClickDetector onOutsideClick={() => {}} isDisabled={!isPopoverOpen}>
-      <EuiFieldSearch
-        aria-label={searchPlaceholder}
-        data-test-subj="fieldFilterSearchInput"
-        fullWidth
-        onChange={(event) => onChange('name', event.currentTarget.value)}
-        placeholder={searchPlaceholder}
-        value={value}
         className="dscSideBar_searchInput"
       />
     </EuiOutsideClickDetector>
@@ -329,8 +314,8 @@ export function DiscoverFieldSearch({
 
   if (isEnhancementsEnabledOverride) {
     return (
-      <div className="euiFormControlLayout euiFormControlLayout--group osdDiscoverSideBar__wrap">
-        {fieldSearch}
+      <div className="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group osdDiscoverSideBar__wrap">
+        {compressedFieldSearch}
         {fieldPopover}
       </div>
     );
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss
index 201debc9553..aaba1c5a42a 100644
--- a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss
+++ b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss
@@ -1,3 +1,8 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
 .deSidebar_panel {
   border-left: 0;