diff --git a/components/webui/client/src/components/InputLabel/index.module.css b/components/webui/client/src/components/InputLabel/index.module.css
new file mode 100644
index 0000000000..0df437c7ed
--- /dev/null
+++ b/components/webui/client/src/components/InputLabel/index.module.css
@@ -0,0 +1,11 @@
+.label {
+    height: 100%;
+    display: flex;
+    padding-left: 10px;
+    padding-right: 10px;
+    align-items: center;
+    justify-content: center;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    white-space: nowrap;
+}
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Dataset/DatasetLabel/index.tsx b/components/webui/client/src/components/InputLabel/index.tsx
similarity index 53%
rename from components/webui/client/src/pages/SearchPage/SearchControls/Dataset/DatasetLabel/index.tsx
rename to components/webui/client/src/components/InputLabel/index.tsx
index 0893fe5265..3c65678ef5 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/Dataset/DatasetLabel/index.tsx
+++ b/components/webui/client/src/components/InputLabel/index.tsx
@@ -9,27 +9,28 @@ import styles from "./index.module.css";
 const {Text} = Typography;
 
 /**
- * Renders a label for the dataset selector.
+ * Renders a label for an input field.
  *
+ * @param props
+ * @param props.children The label text to display.
  * @return
  */
-const DatasetLabel = () => {
+const InputLabel = ({children}: {children: React.ReactNode}) => {
     const {token} = theme.useToken();
 
     return (
         <Text
-            className={styles["datasetLabel"] || ""}
+            className={styles["label"] || ""}
             style={{
-                backgroundColor: token.colorFillTertiary,
+                backgroundColor: token.colorBorder,
                 borderBottomLeftRadius: `${token.borderRadius}px`,
-                borderColor: token.colorBorder,
                 borderTopLeftRadius: `${token.borderRadius}px`,
-                fontSize: token.fontSizeLG,
+                fontSize: token.fontSize,
             }}
         >
-            Dataset
+            {children}
         </Text>
     );
 };
 
-export default DatasetLabel;
+export default InputLabel;
diff --git a/components/webui/client/src/components/QueryBox/InputWithCaseSensitive/CaseSenstiveToggle.tsx b/components/webui/client/src/components/QueryBox/InputWithCaseSensitive/CaseSenstiveToggle.tsx
index 12fe4266d6..07f42664ea 100644
--- a/components/webui/client/src/components/QueryBox/InputWithCaseSensitive/CaseSenstiveToggle.tsx
+++ b/components/webui/client/src/components/QueryBox/InputWithCaseSensitive/CaseSenstiveToggle.tsx
@@ -6,6 +6,8 @@ import {
     Tooltip,
 } from "antd";
 
+import styles from "./index.module.css";
+
 
 interface CaseSensitiveToggleProps {
     disabled: boolean;
@@ -51,6 +53,7 @@ const CaseSensitiveToggle = ({
             title={"Match case"}
         >
             <Button
+                className={styles["customButton"] || ""}
                 disabled={disabled}
                 size={"small"}
                 variant={buttonVariant}
diff --git a/components/webui/client/src/components/QueryBox/InputWithCaseSensitive/index.module.css b/components/webui/client/src/components/QueryBox/InputWithCaseSensitive/index.module.css
new file mode 100644
index 0000000000..a4d446abd3
--- /dev/null
+++ b/components/webui/client/src/components/QueryBox/InputWithCaseSensitive/index.module.css
@@ -0,0 +1,3 @@
+.customButton {
+  height: 22px;
+}
diff --git a/components/webui/client/src/components/SqlEditor/index.module.css b/components/webui/client/src/components/SqlEditor/index.module.css
new file mode 100644
index 0000000000..1e50b79db4
--- /dev/null
+++ b/components/webui/client/src/components/SqlEditor/index.module.css
@@ -0,0 +1,6 @@
+.editor {
+    height: 100%;
+    min-height: 0;
+    min-width: 0;
+    width: 100%;
+}
diff --git a/components/webui/client/src/components/SqlEditor/index.tsx b/components/webui/client/src/components/SqlEditor/index.tsx
index df43a211b6..d0a39dd3a9 100644
--- a/components/webui/client/src/components/SqlEditor/index.tsx
+++ b/components/webui/client/src/components/SqlEditor/index.tsx
@@ -12,6 +12,8 @@ import {theme} from "antd";
 import color from "color";
 import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
 
+import styles from "./index.module.css";
+
 import "./monaco-loader";
 
 
@@ -19,6 +21,7 @@ type SqlEditorType = monaco.editor.IStandaloneCodeEditor;
 
 type SqlEditorProps = Omit<EditorProps, "language"> & {
     disabled: boolean;
+    className?: string;
 
     /** Callback when the editor is mounted and ref is ready to use. */
     onEditorReady?: (editor: SqlEditorType) => void;
@@ -31,7 +34,7 @@ type SqlEditorProps = Omit<EditorProps, "language"> & {
  * @return
  */
 const SqlEditor = (props: SqlEditorProps) => {
-    const {disabled, onEditorReady, ...editorProps} = props;
+    const {disabled, onEditorReady, className, ...editorProps} = props;
     const monacoEditor = useMonaco();
     const {token} = theme.useToken();
 
@@ -75,6 +78,8 @@ const SqlEditor = (props: SqlEditorProps) => {
 
     return (
         <div
+            className={[styles["editor"],
+                className].filter(Boolean).join(" ")}
             style={{
                 border: `1px solid ${token.colorBorder}`,
                 borderRadius: token.borderRadius,
diff --git a/components/webui/client/src/components/SqlInput/index.tsx b/components/webui/client/src/components/SqlInput/index.tsx
index 7ed5e7596d..4709d7e892 100644
--- a/components/webui/client/src/components/SqlInput/index.tsx
+++ b/components/webui/client/src/components/SqlInput/index.tsx
@@ -30,8 +30,8 @@ const SqlInput = (props: SqlEditorProps) => {
 
     return (
         <SqlEditor
-            height={30}
             options={{
+                automaticLayout: true,
                 find: {
                     addExtraSpaceOnTop: false,
                     autoFindInSelection: "never",
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Dataset/DatasetLabel/index.module.css b/components/webui/client/src/pages/SearchPage/SearchControls/Dataset/DatasetLabel/index.module.css
deleted file mode 100644
index 3c494a3fa6..0000000000
--- a/components/webui/client/src/pages/SearchPage/SearchControls/Dataset/DatasetLabel/index.module.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.datasetLabel {
-    min-width: 80px;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-top-right-radius: 0px;
-    border-bottom-right-radius: 0px;
-}
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Dataset/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Dataset/index.tsx
index 54c7e5a36c..c1906826fb 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/Dataset/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/Dataset/index.tsx
@@ -6,9 +6,9 @@ import {
     Select,
 } from "antd";
 
+import InputLabel from "../../../../components/InputLabel";
 import useSearchStore from "../../SearchState/index";
 import {SEARCH_UI_STATE} from "../../SearchState/typings";
-import DatasetLabel from "./DatasetLabel";
 import styles from "./index.module.css";
 import {fetchDatasetNames} from "./sql";
 
@@ -79,14 +79,14 @@ const Dataset = () => {
     return (
         <div className={styles["datasetContainer"]}>
             {contextHolder}
-            <DatasetLabel/>
+            <InputLabel>Dataset</InputLabel>
             <Select
                 className={styles["select"] || ""}
                 loading={isPending}
                 options={(data || []).map((option) => ({label: option, value: option}))}
                 placeholder={"None"}
                 showSearch={true}
-                size={"large"}
+                size={"middle"}
                 value={dataset}
                 disabled={
                     searchUiState === SEARCH_UI_STATE.QUERY_ID_PENDING ||
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls.tsx
deleted file mode 100644
index b069a18cec..0000000000
--- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import SqlInput from "../../../../components/SqlInput";
-import styles from "../index.module.css";
-import QueryStatus from "../QueryStatus";
-import SqlInterfaceButton from "./SqlInterfaceButton";
-import SqlSearchButton from "./SqlSearchButton";
-
-
-/**
- * Renders controls and status for guided sql.
- *
- * @return
- */
-const GuidedControls = () => (
-    <div className={styles["searchControlsContainer"]}>
-        <SqlInput disabled={false}/>
-        <div className={styles["statusAndButtonsRow"]}>
-            <div className={styles["status"]}>
-                <QueryStatus/>
-            </div>
-            <div className={styles["buttons"]}>
-                <SqlInterfaceButton/>
-                <SqlSearchButton/>
-            </div>
-        </div>
-    </div>
-);
-
-export default GuidedControls;
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/From.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/From.tsx
new file mode 100644
index 0000000000..d1e0eb7be6
--- /dev/null
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/From.tsx
@@ -0,0 +1,20 @@
+import InputLabel from "../../../../../components/InputLabel";
+import SqlInput from "../../../../../components/SqlInput";
+import guidedGrid from "./index.module.css";
+
+
+/**
+ * Renders the FROM SQL input field.
+ *
+ * @return
+ */
+const From = () => (
+    <div className={guidedGrid["from"]}>
+        <InputLabel>FROM</InputLabel>
+        <SqlInput
+            className={guidedGrid["noLeftBorderRadius"] || ""}
+            disabled={false}/>
+    </div>
+);
+
+export default From;
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Limit.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Limit.tsx
new file mode 100644
index 0000000000..5194119590
--- /dev/null
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Limit.tsx
@@ -0,0 +1,33 @@
+import {Select} from "antd";
+
+import InputLabel from "../../../../../components/InputLabel";
+import guidedGrid from "./index.module.css";
+
+
+const LIMIT_OPTIONS = [
+    {value: 10, label: "10"},
+    {value: 50, label: "50"},
+    {value: 100, label: "100"},
+    {value: 500, label: "500"},
+    {value: 1000, label: "1000"},
+];
+
+/**
+ * Renders the LIMIT SQL input field.
+ *
+ * @return
+ */
+const Limit = () => (
+    <div className={guidedGrid["limit"]}>
+        <InputLabel>LIMIT</InputLabel>
+        <Select
+            defaultValue={LIMIT_OPTIONS[0]?.value}
+            options={LIMIT_OPTIONS}
+            className={
+                `${guidedGrid["noLeftBorderRadiusSelect"]} ${
+                    guidedGrid["widthSelect"]}`
+            }/>
+    </div>
+);
+
+export default Limit;
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/OrderBy.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/OrderBy.tsx
new file mode 100644
index 0000000000..607cc488d1
--- /dev/null
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/OrderBy.tsx
@@ -0,0 +1,20 @@
+import InputLabel from "../../../../../components/InputLabel";
+import SqlInput from "../../../../../components/SqlInput";
+import guidedGrid from "./index.module.css";
+
+
+/**
+ * Renders the ORDER BY SQL input field.
+ *
+ * @return
+ */
+const OrderBy = () => (
+    <div className={guidedGrid["order"]}>
+        <InputLabel>ORDER BY</InputLabel>
+        <SqlInput
+            className={guidedGrid["noLeftBorderRadius"] || ""}
+            disabled={false}/>
+    </div>
+);
+
+export default OrderBy;
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Select.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Select.tsx
new file mode 100644
index 0000000000..2856ea1d4c
--- /dev/null
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Select.tsx
@@ -0,0 +1,20 @@
+import InputLabel from "../../../../../components/InputLabel";
+import SqlInput from "../../../../../components/SqlInput";
+import guidedGrid from "./index.module.css";
+
+
+/**
+ * Renders the SELECT SQL input field.
+ *
+ * @return
+ */
+const Select = () => (
+    <div className={guidedGrid["select"]}>
+        <InputLabel>SELECT</InputLabel>
+        <SqlInput
+            className={guidedGrid["noLeftBorderRadius"] || ""}
+            disabled={false}/>
+    </div>
+);
+
+export default Select;
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Where.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Where.tsx
new file mode 100644
index 0000000000..4279afff66
--- /dev/null
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Where.tsx
@@ -0,0 +1,20 @@
+import InputLabel from "../../../../../components/InputLabel";
+import SqlInput from "../../../../../components/SqlInput";
+import guidedGrid from "./index.module.css";
+
+
+/**
+ * Renders the WHERE SQL input field.
+ *
+ * @return
+ */
+const Where = () => (
+    <div className={guidedGrid["where"]}>
+        <InputLabel>WHERE</InputLabel>
+        <SqlInput
+            className={guidedGrid["noLeftBorderRadius"] || ""}
+            disabled={false}/>
+    </div>
+);
+
+export default Where;
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/index.module.css b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/index.module.css
new file mode 100644
index 0000000000..c113b67464
--- /dev/null
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/index.module.css
@@ -0,0 +1,45 @@
+.gridContainer {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    grid-template-rows: 32px;
+    gap: 5px;
+}
+
+.select {
+    grid-column: span 3;
+    display: flex;
+}
+
+.from {
+    grid-column: span 1;
+    display: flex;
+}
+
+.where {
+    grid-column: span 2;
+    display: flex;
+}
+
+.order {
+    grid-column: span 1;
+    display: flex;
+}
+
+.limit {
+    grid-column: span 1;
+    display: flex;
+}
+
+.widthSelect {
+    width: 100%;
+}
+
+.noLeftBorderRadiusSelect :global(.ant-select-selector) {
+    border-top-left-radius: 0!important;
+    border-bottom-left-radius: 0!important;
+}
+
+.noLeftBorderRadius {
+    border-top-left-radius: 0!important;
+    border-bottom-left-radius: 0!important;
+}
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/index.tsx
new file mode 100644
index 0000000000..d8d322eeb3
--- /dev/null
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/index.tsx
@@ -0,0 +1,39 @@
+import searchStyles from "../../index.module.css";
+import QueryStatus from "../../QueryStatus";
+import SqlInterfaceButton from "../SqlInterfaceButton";
+import SqlSearchButton from "../SqlSearchButton";
+import From from "./From";
+import guidedGrid from "./index.module.css";
+import Limit from "./Limit";
+import OrderBy from "./OrderBy";
+import Select from "./Select";
+import Where from "./Where";
+
+
+/**
+ * Renders controls and status for guided sql.
+ *
+ * @return
+ */
+const GuidedControls = () => (
+    <div className={searchStyles["searchControlsContainer"]}>
+        <div className={guidedGrid["gridContainer"]}>
+            <Select/>
+            <From/>
+            <Where/>
+            <OrderBy/>
+            <Limit/>
+        </div>
+        <div className={searchStyles["statusAndButtonsRow"]}>
+            <div className={searchStyles["status"]}>
+                <QueryStatus/>
+            </div>
+            <div className={searchStyles["buttons"]}>
+                <SqlInterfaceButton/>
+                <SqlSearchButton/>
+            </div>
+        </div>
+    </div>
+);
+
+export default GuidedControls;
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/QueryInput/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/QueryInput/index.tsx
index f54885ec59..e4b777e102 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/QueryInput/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/QueryInput/index.tsx
@@ -64,7 +64,7 @@ const QueryInput = () => {
             placeholder={"Enter your query"}
             progress={pseudoProgress}
             ref={inputRef}
-            size={"large"}
+            size={"middle"}
             value={queryString}
             disabled={
                 searchUiState === SEARCH_UI_STATE.QUERY_ID_PENDING ||
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/SearchButton/CancelButton.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/SearchButton/CancelButton.tsx
index 6416e2be04..dee14e6cbe 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/SearchButton/CancelButton.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/SearchButton/CancelButton.tsx
@@ -45,7 +45,7 @@ const CancelButton = () => {
             danger={true}
             htmlType={"button"}
             icon={<CloseOutlined/>}
-            size={"large"}
+            size={"middle"}
             type={"primary"}
             onClick={handleCancelButtonClick}
         >
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/SearchButton/SubmitButton/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/SearchButton/SubmitButton/index.tsx
index b325c28301..e321067f61 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/SearchButton/SubmitButton/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/SearchButton/SubmitButton/index.tsx
@@ -83,7 +83,7 @@ const SubmitButton = () => {
                 className={styles["gradientButton"] || ""}
                 htmlType={"submit"}
                 icon={<SearchOutlined/>}
-                size={"large"}
+                size={"middle"}
                 type={"primary"}
                 disabled={isQueryStringEmpty || isNoDatasetsAndClpS ||
                           searchUiState === SEARCH_UI_STATE.QUERY_ID_PENDING}
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/index.tsx
index 4da54e1af9..b377d23d3e 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/index.tsx
@@ -61,7 +61,7 @@ const TimeRangeInput = () => {
                 listHeight={400}
                 options={TIME_RANGE_OPTION_NAMES.map((option) => ({label: option, value: option}))}
                 popupMatchSelectWidth={false}
-                size={"large"}
+                size={"middle"}
                 value={timeRangeOption}
                 variant={"filled"}
                 className={timeRangeOption === TIME_RANGE_OPTION.CUSTOM ?
@@ -75,7 +75,7 @@ const TimeRangeInput = () => {
                     allowClear={true}
                     className={styles["rangePicker"] || ""}
                     showTime={true}
-                    size={"large"}
+                    size={"middle"}
                     value={timeRange}
                     disabled={searchUiState === SEARCH_UI_STATE.QUERY_ID_PENDING ||
                                 searchUiState === SEARCH_UI_STATE.QUERYING}