diff --git a/x-pack/plugins/lens/public/app_plugin/shared/edit_on_the_fly/layer_configuration_section.tsx b/x-pack/plugins/lens/public/app_plugin/shared/edit_on_the_fly/layer_configuration_section.tsx
index 78efa6980102b2..d7c255b20a0afa 100644
--- a/x-pack/plugins/lens/public/app_plugin/shared/edit_on_the_fly/layer_configuration_section.tsx
+++ b/x-pack/plugins/lens/public/app_plugin/shared/edit_on_the_fly/layer_configuration_section.tsx
@@ -69,12 +69,7 @@ export function LayerConfiguration({
         framePublicAPI={framePublicAPI}
       />
       <EuiSpacer size="m" />
-      <ConfigPanelWrapper
-        {...layerPanelsProps}
-        css={css`
-          padding: ${euiTheme.size.s};
-        `}
-      />
+      <ConfigPanelWrapper {...layerPanelsProps} />
     </EuiFlexItem>
   );
 }
diff --git a/x-pack/plugins/lens/public/datasources/text_based/layerpanel.test.tsx b/x-pack/plugins/lens/public/datasources/text_based/layerpanel.test.tsx
deleted file mode 100644
index d6e4be8c993873..00000000000000
--- a/x-pack/plugins/lens/public/datasources/text_based/layerpanel.test.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React from 'react';
-import type { DatatableColumn } from '@kbn/expressions-plugin/public';
-import { TextBasedPrivateState } from './types';
-import type { DataViewsState } from '../../state_management/types';
-
-import { TextBasedLayerPanelProps, LayerPanel } from './layerpanel';
-import { shallowWithIntl as shallow } from '@kbn/test-jest-helpers';
-import { ChangeIndexPattern } from '../../shared_components/dataview_picker/dataview_picker';
-
-const fields = [
-  {
-    name: 'timestamp',
-    id: 'timestamp',
-    meta: {
-      type: 'date',
-    },
-  },
-  {
-    name: 'bytes',
-    id: 'bytes',
-    meta: {
-      type: 'number',
-    },
-  },
-  {
-    name: 'memory',
-    id: 'memory',
-    meta: {
-      type: 'number',
-    },
-  },
-] as DatatableColumn[];
-
-const initialState: TextBasedPrivateState = {
-  layers: {
-    first: {
-      index: '1',
-      columns: [],
-      allColumns: [],
-      query: { sql: 'SELECT * FROM foo' },
-    },
-  },
-  indexPatternRefs: [
-    { id: '1', title: 'my-fake-index-pattern' },
-    { id: '2', title: 'my-fake-restricted-pattern' },
-    { id: '3', title: 'my-compatible-pattern' },
-  ],
-  fieldList: fields,
-};
-describe('Layer Data Panel', () => {
-  let defaultProps: TextBasedLayerPanelProps;
-
-  beforeEach(() => {
-    defaultProps = {
-      layerId: 'first',
-      state: initialState,
-      onChangeIndexPattern: jest.fn(),
-      dataViews: {
-        indexPatternRefs: [
-          { id: '1', title: 'my-fake-index-pattern', name: 'My fake index pattern' },
-          { id: '2', title: 'my-fake-restricted-pattern', name: 'my-fake-restricted-pattern' },
-          { id: '3', title: 'my-compatible-pattern', name: 'my-compatible-pattern' },
-        ],
-        indexPatterns: {},
-      } as DataViewsState,
-    };
-  });
-
-  it('should display the selected dataview but disabled', () => {
-    const instance = shallow(<LayerPanel {...defaultProps} />);
-    expect(instance.find(ChangeIndexPattern).prop('trigger')).toStrictEqual({
-      fontWeight: 'normal',
-      isDisabled: true,
-      label: 'my-fake-index-pattern',
-      size: 's',
-      title: 'my-fake-index-pattern',
-    });
-  });
-});
diff --git a/x-pack/plugins/lens/public/datasources/text_based/layerpanel.tsx b/x-pack/plugins/lens/public/datasources/text_based/layerpanel.tsx
deleted file mode 100644
index 3ce8c333114ffa..00000000000000
--- a/x-pack/plugins/lens/public/datasources/text_based/layerpanel.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React from 'react';
-import { i18n } from '@kbn/i18n';
-import { DatasourceLayerPanelProps } from '../../types';
-import { TextBasedPrivateState } from './types';
-import { ChangeIndexPattern } from '../../shared_components/dataview_picker/dataview_picker';
-
-export interface TextBasedLayerPanelProps extends DatasourceLayerPanelProps<TextBasedPrivateState> {
-  state: TextBasedPrivateState;
-}
-
-export function LayerPanel({ state, layerId, dataViews }: TextBasedLayerPanelProps) {
-  const layer = state.layers[layerId];
-  const dataView = state.indexPatternRefs.find((ref) => ref.id === layer.index);
-
-  const notFoundTitleLabel = i18n.translate('xpack.lens.layerPanel.missingDataView', {
-    defaultMessage: 'Data view not found',
-  });
-  return (
-    <ChangeIndexPattern
-      data-test-subj="textBasedLanguages-switcher"
-      trigger={{
-        label: dataView?.name || dataView?.title || notFoundTitleLabel,
-        title: dataView?.title || notFoundTitleLabel,
-        size: 's',
-        fontWeight: 'normal',
-        isDisabled: true,
-      }}
-      indexPatternId={layer.index}
-      indexPatternRefs={dataViews.indexPatternRefs}
-      isMissingCurrent={!dataView}
-      onChangeIndexPattern={() => {}}
-    />
-  );
-}
diff --git a/x-pack/plugins/lens/public/datasources/text_based/text_based_languages.tsx b/x-pack/plugins/lens/public/datasources/text_based/text_based_languages.tsx
index 290f5e49213eed..a24c52b88d217c 100644
--- a/x-pack/plugins/lens/public/datasources/text_based/text_based_languages.tsx
+++ b/x-pack/plugins/lens/public/datasources/text_based/text_based_languages.tsx
@@ -42,7 +42,6 @@ import type {
 } from './types';
 import { FieldSelect } from './field_select';
 import type { Datasource } from '../../types';
-import { LayerPanel } from './layerpanel';
 import { getUniqueLabelGenerator, nonNullable } from '../../utils';
 import { onDrop, getDropProps } from './dnd';
 import { removeColumn } from './remove_column';
@@ -513,7 +512,7 @@ export function getTextBasedDatasource({
     },
 
     LayerPanelComponent: (props: DatasourceLayerPanelProps<TextBasedPrivateState>) => {
-      return <LayerPanel {...props} />;
+      return null;
     },
 
     uniqueLabels(state: TextBasedPrivateState) {
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.scss
index 022cf307822343..cd2ee706c1e18e 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.scss
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.scss
@@ -1,6 +1,10 @@
 @import '../../mixins';
 @import '../../variables';
 
+.lnsSuggestionPanel .euiAccordion__buttonContent {
+  width: 100%;
+}
+
 .lnsSuggestionPanel__suggestions {
   @include euiScrollBar;
   @include lnsOverflowShadowHorizontal;
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.tsx
index 52b72822a9e8e1..ea2df2a4775de7 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.tsx
@@ -21,6 +21,8 @@ import {
   EuiButtonEmpty,
   EuiAccordion,
   EuiText,
+  EuiFlexGroup,
+  EuiFlexItem,
 } from '@elastic/eui';
 import { euiThemeVars } from '@kbn/ui-theme';
 import { IconType } from '@elastic/eui/src/components/icon/icon';
@@ -195,8 +197,9 @@ const SuggestionPreview = ({
               css: css`
                 display: flex;
                 flex-direction: column;
-                flex-basis: calc(50% - 8px);
-                margin-right: 8px;
+                flex-basis: calc(50% - ${euiThemeVars.euiSize});
+                margin-right: ${euiThemeVars.euiSize};
+                margin-bottom: ${euiThemeVars.euiSize};
               `,
             }
           : undefined
@@ -518,6 +521,35 @@ export function SuggestionPanel({
       </>
     );
   };
+  const title = (
+    <EuiTitle size="xxs">
+      <h3>
+        <FormattedMessage
+          id="xpack.lens.editorFrame.suggestionPanelTitle"
+          defaultMessage="Suggestions"
+        />
+      </h3>
+    </EuiTitle>
+  );
+  const accordionWithSuggestionsCount = (
+    <EuiFlexGroup gutterSize="none" alignItems="center" justifyContent="spaceBetween">
+      <EuiFlexItem grow={false}>{title}</EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <div
+          css={css`
+            background-color: ${euiThemeVars.euiColorLightShade};
+            height: ${euiThemeVars.euiSizeL};
+            width: ${euiThemeVars.euiSizeL};
+            text-align: center;
+            border-radius: ${euiThemeVars.euiSizeXS};
+          `}
+        >
+          {suggestions.length + 1}
+        </div>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+  const buttonContent = wrapSuggestions ? accordionWithSuggestionsCount : title;
   return (
     <EuiAccordion
       id="lensSuggestionsPanel"
@@ -529,16 +561,7 @@ export function SuggestionPanel({
       css={css`
         padding-bottom: ${wrapSuggestions ? 0 : euiThemeVars.euiSizeS};
       `}
-      buttonContent={
-        <EuiTitle size="xxs">
-          <h3>
-            <FormattedMessage
-              id="xpack.lens.editorFrame.suggestionPanelTitle"
-              defaultMessage="Suggestions"
-            />
-          </h3>
-        </EuiTitle>
-      }
+      buttonContent={buttonContent}
       forceState={hideSuggestions ? 'closed' : 'open'}
       onToggle={toggleSuggestions}
       extraAction={
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.scss
index 391361570d04bb..2c0d374a7d07f6 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.scss
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.scss
@@ -149,3 +149,10 @@
   75% { transform: translateY(15%); }
   100% { transform: translateY(10%); }
 }
+
+.lnsVisualizationToolbar--fixed {
+  position: fixed;
+  width: 100%;
+  z-index: 1;
+  background-color: $euiColorLightestShade;
+}
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx
index ea2c8d27086fbc..f5ee47cbcd2942 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx
@@ -53,10 +53,11 @@ export interface WorkspacePanelWrapperProps {
 export function VisualizationToolbar(props: {
   activeVisualization: Visualization | null;
   framePublicAPI: FramePublicAPI;
+  isFixedPosition?: boolean;
 }) {
   const dispatchLens = useLensDispatch();
   const visualization = useLensSelector(selectVisualizationState);
-  const { activeVisualization } = props;
+  const { activeVisualization, isFixedPosition } = props;
   const setVisualizationState = useCallback(
     (newState: unknown) => {
       if (!activeVisualization) {
@@ -77,7 +78,12 @@ export function VisualizationToolbar(props: {
   return (
     <>
       {ToolbarComponent && (
-        <EuiFlexItem grow={false}>
+        <EuiFlexItem
+          grow={false}
+          className={classNames({
+            'lnsVisualizationToolbar--fixed': isFixedPosition,
+          })}
+        >
           {ToolbarComponent({
             frame: props.framePublicAPI,
             state: visualization.state,