diff --git a/components/webui/client/src/components/SqlEditor/index.tsx b/components/webui/client/src/components/SqlEditor/index.tsx
index b1e687d4a9..98a9c3259a 100644
--- a/components/webui/client/src/components/SqlEditor/index.tsx
+++ b/components/webui/client/src/components/SqlEditor/index.tsx
@@ -53,11 +53,23 @@ const SqlEditor = (props: SqlEditorProps) => {
         onEditorReady?.();
     }, [onEditorReady]);
 
-    // Define disabled theme for monaco editor
+    // Define default and disabled themes for monaco editor
     useEffect(() => {
         if (null === monacoEditor) {
             return;
         }
+
+        monacoEditor.editor.defineTheme("default-theme", {
+            base: "vs",
+            inherit: true,
+            rules: [],
+            colors: {
+                "editor.background": color(token.colorBgContainer).hexa(),
+                "editor.foreground": color(token.colorText).hexa(),
+                "focusBorder": "#0000",
+            },
+        });
+
         monacoEditor.editor.defineTheme("disabled-theme", {
             base: "vs",
             inherit: true,
@@ -65,9 +77,7 @@ const SqlEditor = (props: SqlEditorProps) => {
             colors: {
                 "editor.background": color(token.colorBgContainerDisabled).hexa(),
                 "editor.foreground": color(token.colorTextDisabled).hexa(),
-
-                // transparent
-                "focusBorder": "#00000000",
+                "focusBorder": "#0000",
             },
         });
     }, [
@@ -77,18 +87,20 @@ const SqlEditor = (props: SqlEditorProps) => {
 
     return (
         <div
-            style={
-                disabled ?
-                    {pointerEvents: "none"} :
-                    {}
-            }
+            style={{
+                border: `1px solid ${token.colorBorder}`,
+                borderRadius: token.borderRadius,
+                pointerEvents: disabled ?
+                    "none" :
+                    "auto",
+            }}
         >
             <Editor
                 language={"sql"}
                 loading={
                     <div
                         style={{
-                            backgroundColor: "white",
+                            backgroundColor: token.colorBgContainer,
                             height: "100%",
                             width: "100%",
                         }}/>
@@ -96,18 +108,21 @@ const SqlEditor = (props: SqlEditorProps) => {
                 options={{
                     automaticLayout: true,
                     folding: false,
-                    fontSize: 16,
                     lineNumbers: "off",
                     minimap: {enabled: false},
                     overviewRulerBorder: false,
+                    padding: {
+                        top: token.paddingXS,
+                        bottom: token.paddingXS,
+                    },
                     placeholder: "Enter your SQL query",
-                    renderLineHighlightOnlyWhenFocus: true,
+                    renderLineHighlight: "none",
                     scrollBeyondLastLine: false,
                     wordWrap: "on",
                 }}
                 theme={disabled ?
                     "disabled-theme" :
-                    "light"}
+                    "default-theme"}
                 onMount={handleEditorDidMount}
                 {...editorProps}/>
         </div>
diff --git a/components/webui/client/src/components/SqlEditor/monaco-loader.ts b/components/webui/client/src/components/SqlEditor/monaco-loader.ts
index 05c58be25e..5623d7d94d 100644
--- a/components/webui/client/src/components/SqlEditor/monaco-loader.ts
+++ b/components/webui/client/src/components/SqlEditor/monaco-loader.ts
@@ -1,11 +1,12 @@
-/* eslint-disable import/default, @stylistic/max-len */
+/* eslint-disable import/default */
 import {loader} from "@monaco-editor/react";
 import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
 import EditorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
+
 import "monaco-editor/esm/vs/basic-languages/sql/sql.contribution.js";
 
 
-/* eslint-enable import/default, @stylistic/max-len */
+/* eslint-enable import/default */
 
 
 self.MonacoEnvironment = {
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlSearchButton/CancelButton/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlSearchButton/CancelButton/index.tsx
index fb56f153eb..102580c602 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlSearchButton/CancelButton/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlSearchButton/CancelButton/index.tsx
@@ -34,7 +34,7 @@ const CancelButton = () => {
                 className={styles["cancelButton"] || ""}
                 color={"red"}
                 icon={<CloseOutlined/>}
-                size={"large"}
+                size={"middle"}
                 variant={"solid"}
                 onClick={handleClick}
             >
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlSearchButton/RunButton/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlSearchButton/RunButton/index.tsx
index bcd6ad9b0c..de6b6dc4c8 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlSearchButton/RunButton/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlSearchButton/RunButton/index.tsx
@@ -36,7 +36,7 @@ const RunButton = () => {
                 className={styles["runButton"] || ""}
                 color={"green"}
                 icon={<CaretRightOutlined/>}
-                size={"large"}
+                size={"middle"}
                 variant={"solid"}
                 disabled={isQueryStringEmpty ||
                     searchUiState === SEARCH_UI_STATE.QUERY_ID_PENDING}
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlSearchButton/index.module.css b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlSearchButton/index.module.css
index 3552bb49c9..f7ce0b59e3 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlSearchButton/index.module.css
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlSearchButton/index.module.css
@@ -1,3 +1,3 @@
 .runButtonContainer {
-    width: 130px;
+    width: 100px;
 }
diff --git a/components/webui/client/src/pages/SearchPage/SearchQueryStatus/Results.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/QueryStatus/Results.tsx
similarity index 94%
rename from components/webui/client/src/pages/SearchPage/SearchQueryStatus/Results.tsx
rename to components/webui/client/src/pages/SearchPage/SearchControls/QueryStatus/Results.tsx
index 4e810c4982..df03b09010 100644
--- a/components/webui/client/src/pages/SearchPage/SearchQueryStatus/Results.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/QueryStatus/Results.tsx
@@ -5,8 +5,8 @@ import {
     Typography,
 } from "antd";
 
-import useSearchStore from "../SearchState/index";
-import {SEARCH_UI_STATE} from "../SearchState/typings";
+import useSearchStore from "../../SearchState/index";
+import {SEARCH_UI_STATE} from "../../SearchState/typings";
 
 
 const {Text} = Typography;
diff --git a/components/webui/client/src/pages/SearchPage/SearchQueryStatus/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/QueryStatus/index.tsx
similarity index 74%
rename from components/webui/client/src/pages/SearchPage/SearchQueryStatus/index.tsx
rename to components/webui/client/src/pages/SearchPage/SearchControls/QueryStatus/index.tsx
index f65bb13f43..597a3bf176 100644
--- a/components/webui/client/src/pages/SearchPage/SearchQueryStatus/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/QueryStatus/index.tsx
@@ -1,8 +1,7 @@
 import {Typography} from "antd";
 
-import useSearchStore from "../SearchState/index";
-import {SEARCH_UI_STATE} from "../SearchState/typings";
-import styles from "./index.module.css";
+import useSearchStore from "../../SearchState/index";
+import {SEARCH_UI_STATE} from "../../SearchState/typings";
 import Results from "./Results";
 
 
@@ -13,14 +12,14 @@ const {Text} = Typography;
  *
  * @return
  */
-const SearchQueryStatus = () => {
+const QueryStatus = () => {
     const {
         searchJobId,
         searchUiState,
     } = useSearchStore();
 
     return (
-        <div className={styles["status"]}>
+        <div>
             {(searchUiState === SEARCH_UI_STATE.QUERYING ||
                 searchUiState === SEARCH_UI_STATE.DONE) && (
                 <Text type={"secondary"}>
@@ -39,4 +38,4 @@ const SearchQueryStatus = () => {
 };
 
 
-export default SearchQueryStatus;
+export default QueryStatus;
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/index.module.css b/components/webui/client/src/pages/SearchPage/SearchControls/index.module.css
index 3f31660f7b..b476cc99cf 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/index.module.css
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/index.module.css
@@ -1,4 +1,21 @@
 .searchControlsContainer {
     display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+
+.inputsAndButtonRow {
+    display: flex;
+    gap: 10px;
+}
+
+.buttonAndStatusRow {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
     gap: 10px;
 }
+
+.status {
+    margin-left: 2px;
+}
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx
index d44deed61b..557511175d 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx
@@ -9,6 +9,7 @@ import styles from "./index.module.css";
 import SqlQueryInput from "./Presto/SqlQueryInput";
 import SqlSearchButton from "./Presto/SqlSearchButton";
 import QueryInput from "./QueryInput";
+import QueryStatus from "./QueryStatus";
 import SearchButton from "./SearchButton";
 import TimeRangeInput from "./TimeRangeInput";
 
@@ -23,30 +24,38 @@ const handleSubmit = (ev: React.FormEvent<HTMLFormElement>) => {
 };
 
 /**
- * Renders controls for submitting queries.
+ * Renders controls for submitting queries and the query status.
  *
  * @return
  */
 const SearchControls = () => {
     return (
         <form onSubmit={handleSubmit}>
-            <div className={styles["searchControlsContainer"]}>
-                {SETTINGS_QUERY_ENGINE !== CLP_QUERY_ENGINES.PRESTO ?
-                    (
-                        <>
+            {SETTINGS_QUERY_ENGINE !== CLP_QUERY_ENGINES.PRESTO ?
+                (
+                    <div className={styles["searchControlsContainer"]}>
+                        <div className={styles["inputsAndButtonRow"]}>
                             {CLP_STORAGE_ENGINES.CLP_S === SETTINGS_STORAGE_ENGINE && <Dataset/>}
                             <QueryInput/>
                             <TimeRangeInput/>
                             <SearchButton/>
-                        </>
-                    ) :
-                    (
-                        <>
-                            <SqlQueryInput/>
+                        </div>
+                        <div className={styles["status"]}>
+                            <QueryStatus/>
+                        </div>
+                    </div>
+                ) :
+                (
+                    <div className={styles["searchControlsContainer"]}>
+                        <SqlQueryInput/>
+                        <div className={styles["buttonAndStatusRow"]}>
+                            <div className={styles["status"]}>
+                                <QueryStatus/>
+                            </div>
                             <SqlSearchButton/>
-                        </>
-                    )}
-            </div>
+                        </div>
+                    </div>
+                )}
         </form>
     );
 };
diff --git a/components/webui/client/src/pages/SearchPage/SearchQueryStatus/index.module.css b/components/webui/client/src/pages/SearchPage/SearchQueryStatus/index.module.css
deleted file mode 100644
index 29f1e3b1ab..0000000000
--- a/components/webui/client/src/pages/SearchPage/SearchQueryStatus/index.module.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.status {
-  margin-left: 2px;
-  margin-top: 4px;
-}
-
-.badge {
-    padding-bottom: 4px;
-}
diff --git a/components/webui/client/src/pages/SearchPage/index.module.css b/components/webui/client/src/pages/SearchPage/index.module.css
index b62e697498..389eb3e29b 100644
--- a/components/webui/client/src/pages/SearchPage/index.module.css
+++ b/components/webui/client/src/pages/SearchPage/index.module.css
@@ -1,6 +1,6 @@
 .searchPageContainer {
     display: flex;
     flex-direction: column;
-    gap: 16px; 
-    padding: 24px 16px 16px;
+    gap: 16px;
+    padding: 16px 16px 16px;
 }
diff --git a/components/webui/client/src/pages/SearchPage/index.tsx b/components/webui/client/src/pages/SearchPage/index.tsx
index 4c5996556a..9345164175 100644
--- a/components/webui/client/src/pages/SearchPage/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/index.tsx
@@ -5,7 +5,6 @@ import {
 import styles from "./index.module.css";
 import {ProgressBar} from "./Presto/ProgressBar";
 import SearchControls from "./SearchControls";
-import SearchQueryStatus from "./SearchQueryStatus";
 import SearchResultsTable from "./SearchResults/SearchResultsTable";
 import SearchResultsTimeline from "./SearchResults/SearchResultsTimeline";
 import {useUpdateStateWithMetadata} from "./SearchState/useUpdateStateWithMetadata";
@@ -23,10 +22,7 @@ const SearchPage = () => {
         <>
             {SETTINGS_QUERY_ENGINE === CLP_QUERY_ENGINES.PRESTO && <ProgressBar/>}
             <div className={styles["searchPageContainer"]}>
-                <div>
-                    <SearchControls/>
-                    <SearchQueryStatus/>
-                </div>
+                <SearchControls/>
                 {SETTINGS_QUERY_ENGINE !== CLP_QUERY_ENGINES.PRESTO && <SearchResultsTimeline/>}
                 <SearchResultsTable/>
             </div>