diff --git a/superset-frontend/cypress-base/cypress/e2e/sqllab/tabs.test.ts b/superset-frontend/cypress-base/cypress/e2e/sqllab/tabs.test.ts
index 56724e6e9edf..f4b37bb5545e 100644
--- a/superset-frontend/cypress-base/cypress/e2e/sqllab/tabs.test.ts
+++ b/superset-frontend/cypress-base/cypress/e2e/sqllab/tabs.test.ts
@@ -80,11 +80,7 @@ describe('SqlLab query tabs', () => {
       // configure some editor settings
       cy.get(editorInput).type('some random query string', { force: true });
       cy.get(queryLimitSelector).parent().click({ force: true });
-      cy.get('.ant-dropdown-menu')
-        .last()
-        .find('.ant-dropdown-menu-item')
-        .first()
-        .click({ force: true });
+      cy.get('.selectLimitDropdown').click({ force: true });
 
       // open a new tab by a button
       cy.get('[data-test="add-tab-icon"]:visible:last').click({ force: true });
diff --git a/superset-frontend/src/SqlLab/components/QueryLimitSelect/QueryLimitSelect.test.tsx b/superset-frontend/src/SqlLab/components/QueryLimitSelect/QueryLimitSelect.test.tsx
index bbaa76720b00..6ae3a8d70951 100644
--- a/superset-frontend/src/SqlLab/components/QueryLimitSelect/QueryLimitSelect.test.tsx
+++ b/superset-frontend/src/SqlLab/components/QueryLimitSelect/QueryLimitSelect.test.tsx
@@ -20,12 +20,7 @@ import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { Store } from 'redux';
 
-import {
-  fireEvent,
-  render,
-  userEvent,
-  waitFor,
-} from 'spec/helpers/testing-library';
+import { render, screen } from 'spec/helpers/testing-library';
 import { initialState, defaultQueryEditor } from 'src/SqlLab/fixtures';
 import QueryLimitSelect, {
   QueryLimitSelectProps,
@@ -104,94 +99,46 @@ describe('QueryLimitSelect', () => {
     expect(getByText(convertToNumWithSpaces(queryLimit))).toBeInTheDocument();
   });
 
-  it('renders dropdown select', async () => {
-    const { baseElement, getAllByRole, getByRole } = setup(
-      { maxRow: 50000 },
-      mockStore(initialState),
-    );
-    const dropdown = baseElement.getElementsByClassName(
-      'ant-dropdown-trigger',
-    )[0];
-
-    userEvent.click(dropdown);
-    await waitFor(() => expect(getByRole('menu')).toBeInTheDocument());
-
-    const expectedLabels = [10, 100, 1000, 10000, 50000].map(i =>
-      convertToNumWithSpaces(i),
-    );
-    const actualLabels = getAllByRole('menuitem').map(elem =>
-      elem.textContent?.trim(),
-    );
+  it('renders the Select component', () => {
+    setup({ maxRow: 50000 }, mockStore(initialState));
 
-    expect(actualLabels).toEqual(expectedLabels);
+    expect(screen.getByRole('button', { name: /LIMIT:/i })).toBeInTheDocument();
+    expect(screen.getByText(/100/i)).toBeInTheDocument();
   });
 
   it('renders dropdown select correctly when maxRow is less than 10', async () => {
-    const { baseElement, getAllByRole, getByRole } = setup(
+    const queryLimit = 5;
+    const { getByText } = setup(
       { maxRow: 5 },
-      mockStore(initialState),
-    );
-    const dropdown = baseElement.getElementsByClassName(
-      'ant-dropdown-trigger',
-    )[0];
-
-    userEvent.click(dropdown);
-    await waitFor(() => expect(getByRole('menu')).toBeInTheDocument());
-
-    const expectedLabels = [5].map(i => convertToNumWithSpaces(i));
-    const actualLabels = getAllByRole('menuitem').map(elem =>
-      elem.textContent?.trim(),
+      mockStore({
+        ...initialState,
+        sqlLab: {
+          ...initialState.sqlLab,
+          unsavedQueryEditor: {
+            id: defaultQueryEditor.id,
+            queryLimit,
+          },
+        },
+      }),
     );
-
-    expect(actualLabels).toEqual(expectedLabels);
+    expect(getByText(convertToNumWithSpaces(queryLimit))).toBeInTheDocument();
   });
 
   it('renders dropdown select correctly when maxRow is a multiple of 10', async () => {
-    const { baseElement, getAllByRole, getByRole } = setup(
+    const queryLimit = 10000;
+    const { getByText } = setup(
       { maxRow: 10000 },
-      mockStore(initialState),
-    );
-    const dropdown = baseElement.getElementsByClassName(
-      'ant-dropdown-trigger',
-    )[0];
-
-    userEvent.click(dropdown);
-    await waitFor(() => expect(getByRole('menu')).toBeInTheDocument());
-
-    const expectedLabels = [10, 100, 1000, 10000].map(i =>
-      convertToNumWithSpaces(i),
-    );
-    const actualLabels = getAllByRole('menuitem').map(elem =>
-      elem.textContent?.trim(),
-    );
-
-    expect(actualLabels).toEqual(expectedLabels);
-  });
-
-  it('dispatches QUERY_EDITOR_SET_QUERY_LIMIT action on dropdown menu click', async () => {
-    const store = mockStore(initialState);
-    const expectedIndex = 1;
-    const { baseElement, getAllByRole, getByRole } = setup({}, store);
-    const dropdown = baseElement.getElementsByClassName(
-      'ant-dropdown-trigger',
-    )[0];
-
-    userEvent.click(dropdown);
-    await waitFor(() => expect(getByRole('menu')).toBeInTheDocument());
-
-    const menu = getAllByRole('menuitem')[expectedIndex];
-    expect(store.getActions()).toEqual([]);
-    fireEvent.click(menu);
-    await waitFor(() =>
-      expect(store.getActions()).toEqual([
-        {
-          type: 'QUERY_EDITOR_SET_QUERY_LIMIT',
-          queryLimit: 100,
-          queryEditor: {
+      mockStore({
+        ...initialState,
+        sqlLab: {
+          ...initialState.sqlLab,
+          unsavedQueryEditor: {
             id: defaultQueryEditor.id,
+            queryLimit,
           },
         },
-      ]),
+      }),
     );
+    expect(getByText(convertToNumWithSpaces(queryLimit))).toBeInTheDocument();
   });
 });
diff --git a/superset-frontend/src/SqlLab/components/QueryLimitSelect/index.tsx b/superset-frontend/src/SqlLab/components/QueryLimitSelect/index.tsx
index 802862cb6b32..44fad2bfb9b9 100644
--- a/superset-frontend/src/SqlLab/components/QueryLimitSelect/index.tsx
+++ b/superset-frontend/src/SqlLab/components/QueryLimitSelect/index.tsx
@@ -18,8 +18,7 @@
  */
 import { useDispatch } from 'react-redux';
 import { t } from '@superset-ui/core';
-import { Dropdown, Button } from '@superset-ui/core/components';
-import { Menu } from '@superset-ui/core/components/Menu';
+import { Dropdown, Button, Select } from '@superset-ui/core/components';
 import { Icons } from '@superset-ui/core/components/Icons';
 import { queryEditorSetQueryLimit } from 'src/SqlLab/actions/sqlLab';
 import useQueryEditor from 'src/SqlLab/hooks/useQueryEditor';
@@ -42,17 +41,28 @@ function renderQueryLimit(
 
   // Construct limit dropdown as increasing powers of ten until we reach SQL_MAX_ROW
   for (let i = 10; i < maxRow; i *= 10) {
-    limitDropdown.push(i);
+    limitDropdown.push({
+      value: i,
+    });
   }
-  limitDropdown.push(maxRow);
+  limitDropdown.push({
+    value: maxRow,
+  });
 
   return (
-    <Menu
-      items={[...new Set(limitDropdown)].map(limit => ({
-        key: `${limit}`,
-        onClick: () => setQueryLimit(limit),
-        label: `${convertToNumWithSpaces(limit)} `,
-      }))}
+    <Select
+      options={limitDropdown}
+      className="selectLimitDropdown"
+      allowNewOptions
+      onChange={value => {
+        let limit_val = value;
+        if (limit_val === undefined) limit_val = 10;
+        limit_val = parseInt(limit_val.toString(), 10);
+        if (limit_val < 1) limit_val = 1;
+        if (limit_val > maxRow) limit_val = maxRow;
+        setQueryLimit(limit_val);
+        convertToNumWithSpaces(limit_val);
+      }}
     />
   );
 }
diff --git a/superset-frontend/src/SqlLab/components/SqlEditor/SqlEditor.test.tsx b/superset-frontend/src/SqlLab/components/SqlEditor/SqlEditor.test.tsx
index 119021f722b2..8ec972b1e0de 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditor/SqlEditor.test.tsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditor/SqlEditor.test.tsx
@@ -28,6 +28,7 @@ import {
   fireEvent,
   render,
   waitFor,
+  screen,
 } from 'spec/helpers/testing-library';
 import fetchMock from 'fetch-mock';
 import reducers from 'spec/helpers/reducerIndex';
@@ -329,11 +330,11 @@ describe('SqlEditor', () => {
   });
 
   it('render a Limit Dropdown', async () => {
-    const defaultQueryLimit = 101;
+    const defaultQueryLimit = 100;
     const updatedProps = { ...mockedProps, defaultQueryLimit };
-    const { findByText } = setup(updatedProps, store);
-    fireEvent.click(await findByText('LIMIT:'));
-    expect(await findByText('10 000')).toBeInTheDocument();
+    setup(updatedProps, store);
+    expect(screen.getByRole('button', { name: /LIMIT:/i })).toBeInTheDocument();
+    expect(screen.getByText(/100/i)).toBeInTheDocument();
   });
 
   it('renders an Extension if provided', async () => {