diff --git a/cadio-web/src/main/webapp/src/commons/hooks/useCadio.js b/cadio-web/src/main/webapp/src/commons/hooks/useCadio.js
index aab5e2db..3aade76b 100644
--- a/cadio-web/src/main/webapp/src/commons/hooks/useCadio.js
+++ b/cadio-web/src/main/webapp/src/commons/hooks/useCadio.js
@@ -1,6 +1,5 @@
 import axios from "axios";
 import {useCadioDispatch} from "../context/cadioContext";
-import {axiosCatch} from "../../utils/axiosUtils";
 
 
 export default function useCadio() {
@@ -23,8 +22,7 @@ export default function useCadio() {
             })
 
         }).catch((error) => {
-            //TODO : error catch
-            axiosCatch(error);
+            errorCatch(error);
         }).finally(() => {
             cadioDispatcher({
                 type: "SET_BOOTSTRAP_LOADING",
@@ -34,7 +32,6 @@ export default function useCadio() {
     }
 
     function openToast(message) {
-        console.log("message : ", message)
         if (!message) {
             return;
         }
@@ -45,8 +42,52 @@ export default function useCadio() {
         })
     }
 
+    function errorCatch(error) {
+        if (axios.isAxiosError(error)) {
+            const {message} = error;
+            const {method, url} = error.config;
+            const {status, statusText} = error.response;
+
+            console.error(
+                `[API] ${method?.toUpperCase()} ${url} | Error ${status} ${statusText} | ${message}`
+            );
+
+            switch (status) {
+                case 400:
+                    alert(`${status} 잘못된 요청입니다.`);
+                    break;
+                case 401: {
+                    alert(`${status} 인증 실패입니다.`);
+                    break;
+                }
+                case 403: {
+                    alert(`${status} 권한이 없습니다.`);
+                    break;
+                }
+                case 404: {
+                    alert(`${status} 찾을 수 없는 페이지입니다.`);
+                    break;
+                }
+                case 500: {
+                    openToast(`${status} 서버 오류입니다.`);
+                    break;
+                }
+                default: {
+                    alert(`${status} 에러가 발생했습니다. ${error.message}`);
+                }
+            }
+        } else if (error instanceof Error && error.name === "TimeoutError") {
+            console.error(`[API] | TimeError ${error.toString()}`);
+            alert(`${0} 요청 시간이 초과되었습니다.`);
+        } else {
+            console.error(`[API] | Error ${error.toString()}`);
+            alert(`${0} 에러가 발생했습니다. ${error.toString()}`);
+        }
+    }
+
     return {
         doBootstrap,
-        openToast
+        openToast,
+        errorCatch,
     }
 }
diff --git a/cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/keyspace-home.js b/cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/keyspace-home.js
index 0c04e69f..c4b658af 100644
--- a/cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/keyspace-home.js
+++ b/cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/keyspace-home.js
@@ -4,12 +4,12 @@ import {useEffect, useState} from "react";
 import axios from "axios";
 import Spinner from "../../../../components/spinner";
 import KeyspaceTableList from "./keyspace-table-list";
-import {axiosCatch} from "../../../../utils/axiosUtils";
+import useCadio from "../../../../commons/hooks/useCadio";
 
 const KeyspaceHome = () => {
 
     const routeParams = useParams();
-
+    const {errorCatch} = useCadio();
     //const {doGetKeyspaceList} = useCluster();
     const {
         keyspaceList,
@@ -47,7 +47,7 @@ const KeyspaceHome = () => {
             }
 
         }).catch((error) => {
-            axiosCatch(error)
+            errorCatch(error)
         }).finally(() => {
             setDetailLoading(false)
         });
diff --git a/cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-detail-modal.js b/cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-detail-modal.js
index 54d7b1e3..a42105dc 100644
--- a/cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-detail-modal.js
+++ b/cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-detail-modal.js
@@ -1,7 +1,7 @@
 import {useEffect, useState} from "react";
 import axios from "axios";
-import {axiosCatch} from "../../../../../utils/axiosUtils";
 import {Modal} from "react-bootstrap";
+import useCadio from "../../../../../commons/hooks/useCadio";
 
 const TableDetailModal = (props) => {
 
@@ -11,7 +11,7 @@ const TableDetailModal = (props) => {
     const clusterId = props.clusterId;
     const keyspaceName = props.keyspaceName;
     const tableName = props.tableName;
-
+    const {errorCatch} = useCadio();
     const [tableLoading, setTableLoading] = useState(false);
     const [tableInfo, setTableInfo] = useState({
         table: {},
@@ -53,8 +53,7 @@ const TableDetailModal = (props) => {
             })
 
         }).catch((error) => {
-            console.log(error)
-            axiosCatch(error)
+            errorCatch(error)
         }).finally(() => {
             setTableLoading(false)
         });
diff --git a/cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-home.js b/cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-home.js
index c449203b..cd8e68e3 100644
--- a/cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-home.js
+++ b/cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-home.js
@@ -2,10 +2,10 @@ import {Link, useParams} from "react-router-dom";
 import {useEffect, useState} from "react";
 import TableDetailModal from "./table-detail-modal";
 import axios from "axios";
-import {axiosCatch} from "../../../../../utils/axiosUtils";
 import TableDataManageModal from "./table-data-manage-modal";
 import TableExportModal from "./table-export-modal";
 import TableImportModal from "./table-import-modal";
+import useCadio from "../../../../../commons/hooks/useCadio";
 
 const TableHome = (props) => {
     const routeParams = useParams();
@@ -14,7 +14,7 @@ const TableHome = (props) => {
     const [showImport, setShowImport] = useState(false);
     const [showDataManage, setShowDataManage] = useState(false);
     const [tableName, setTableName] = useState('');
-
+    const {errorCatch} = useCadio();
     const initQueryResult = {
         wasApplied: null,
         rows: [],
@@ -53,7 +53,7 @@ const TableHome = (props) => {
                 columnNames: response.data.result.columnNames,
             })
         }).catch((error) => {
-            axiosCatch(error);
+            errorCatch(error);
         }).finally(() => {
             setQueryLoading(false);
         })
diff --git a/cadio-web/src/main/webapp/src/pages/cluster/components/nodes-home.js b/cadio-web/src/main/webapp/src/pages/cluster/components/nodes-home.js
index d8291013..bb23d7fe 100644
--- a/cadio-web/src/main/webapp/src/pages/cluster/components/nodes-home.js
+++ b/cadio-web/src/main/webapp/src/pages/cluster/components/nodes-home.js
@@ -3,11 +3,12 @@ import {useEffect, useState} from "react";
 import axios from "axios";
 import {DateUtils} from "../../../utils/timeUtils";
 import Spinner from "../../../components/spinner";
-import {axiosCatch} from "../../../utils/axiosUtils";
+import useCadio from "../../../commons/hooks/useCadio";
 
 const NodesHome = () => {
 
     const routeParams = useParams();
+    const {errorCatch} = useCadio();
 
     const [nodeLoading, setNodeLoading] = useState(false);
     const [nodeList, setNodeList] = useState([]);
@@ -48,7 +49,7 @@ const NodesHome = () => {
             setTotalNodeSize(nodes.length)
             setAvailableNodeSize(nodes.filter(node => node.nodeState === 'UP').length)
         }).catch((error) => {
-            axiosCatch(error)
+            errorCatch(error);
         }).finally(() => {
             setNodeLoading(false)
         });
diff --git a/cadio-web/src/main/webapp/src/pages/cluster/components/query-home.js b/cadio-web/src/main/webapp/src/pages/cluster/components/query-home.js
index cadbda2a..1f65e8e2 100644
--- a/cadio-web/src/main/webapp/src/pages/cluster/components/query-home.js
+++ b/cadio-web/src/main/webapp/src/pages/cluster/components/query-home.js
@@ -3,11 +3,13 @@ import axios from "axios";
 import {useEffect, useState} from "react";
 import {useParams} from "react-router-dom";
 import QueryResult from "./query/query-result";
-import {axiosCatch} from "../../../utils/axiosUtils";
+import useCadio from "../../../commons/hooks/useCadio";
 
 const QueryHome = () => {
     const routeParams = useParams();
 
+    const {errorCatch} = useCadio();
+
     const [queryParam, setQueryParam] = useState(
         {
             query: "",
@@ -15,6 +17,11 @@ const QueryHome = () => {
         }
     );
 
+    const [queryOptions, setQueryOptions] = useState({
+        limit: 10,
+        trace: false,
+    });
+
     const initQueryResult = {
         wasApplied: null,
         rows: [],
@@ -44,7 +51,8 @@ const QueryHome = () => {
             url: `/api/cassandra/cluster/${routeParams.clusterId}/query`,
             data: {
                 query: query,
-                pageSize: 50,
+                pageSize: queryOptions.limit,
+                trace: queryOptions.trace,
                 timeoutSeconds: 3,
                 cursor: cursor,
             },
@@ -61,7 +69,7 @@ const QueryHome = () => {
                 columnNames: response.data.result.columnNames,
             })
         }).catch((error) => {
-            axiosCatch(error);
+            errorCatch(error);
         }).finally(() => {
             setLoading(false);
         })
@@ -97,6 +105,8 @@ const QueryHome = () => {
 
             <QueryEditor
                 queryExecute={queryExecute}
+                queryOptions={queryOptions}
+                setQueryOptions={setQueryOptions}
             />
             <QueryResult
                 queryExecute={queryExecute}
diff --git a/cadio-web/src/main/webapp/src/pages/cluster/components/query/query-editor.js b/cadio-web/src/main/webapp/src/pages/cluster/components/query/query-editor.js
index b38a1465..a3832f3f 100644
--- a/cadio-web/src/main/webapp/src/pages/cluster/components/query/query-editor.js
+++ b/cadio-web/src/main/webapp/src/pages/cluster/components/query/query-editor.js
@@ -1,4 +1,4 @@
-import {useRef,useState} from "react";
+import {useRef, useState} from "react";
 
 import AceEditor from "react-ace";
 import "ace-builds/src-noconflict/ext-language_tools";
@@ -10,17 +10,30 @@ const QueryEditor = (props) => {
     const [queryLoading, setQueryLoading] = useState(false)
     const [query, setQuery] = useState("SELECT * FROM testdb.test_table_1;")
 
+    const queryOptions = props.queryOptions;
+    const setQueryOptions = props.setQueryOptions;
+
+    const [selectedQuery, setSelectedQuery] = useState('');
+
     const editorRef = useRef();
 
     const queryExecute = (cursor) => {
-        props.queryExecute(query, cursor, setQueryLoading);
+        if (selectedQuery) {
+            props.queryExecute(selectedQuery, cursor, setQueryLoading);
+        } else {
+            props.queryExecute(query, cursor, setQueryLoading);
+        }
+
+
     }
 
     function onSelectionChange(value, event) {
         const content = editorRef.current.editor.getSelectedText();
         console.log("content : ", content)
         // use content
+        setSelectedQuery(editorRef.current.editor.getSelectedText());
     }
+
     function onLoad(newValue) {
         console.log("load", newValue);
     }
@@ -84,39 +97,45 @@ const QueryEditor = (props) => {
                     <div className="row">
                         <div className="col">
                             <div className="form-floating">
-                                <select className="form-select form-select-sm" id="floatingSelect">
-                                    <option value="1">One</option>
-                                    <option value="2">Two</option>
-                                    <option value="3">Three</option>
+                                <select className="form-select form-select-sm" id="queryLimitSelect"
+                                        onChange={e => {
+                                            setQueryOptions(t => {
+                                                return {...t, limit: parseInt(e.target.value)}
+                                            })
+                                        }
+                                        } value={queryOptions.limit || "10"}>
+                                    <option value="10">10</option>
+                                    <option value="50">50</option>
+                                    <option value="100">100</option>
                                 </select>
-                                <label htmlFor="floatingSelect">Limit</label>
+                                <label htmlFor="queryLimitSelect">Limit</label>
                             </div>
                         </div>
                         <div className="col">
-                            <div className="form-floating">
-                                <select className="form-select form-select-sm" id="floatingSelect">
-                                    <option value="1">One</option>
-                                    <option value="2">Two</option>
-                                    <option value="3">Three</option>
-                                </select>
-                                <label htmlFor="floatingSelect">ConsistencyLevel</label>
-                            </div>
+                            {/*<div className="form-floating">*/}
+                            {/*    <select className="form-select form-select-sm" id="floatingSelect">*/}
+                            {/*        <option value="1">One</option>*/}
+                            {/*        <option value="2">Two</option>*/}
+                            {/*        <option value="3">Three</option>*/}
+                            {/*    </select>*/}
+                            {/*    <label htmlFor="floatingSelect">ConsistencyLevel</label>*/}
+                            {/*</div>*/}
                         </div>
                         <div className="col">
-                            <div className="form-floating mb-3">
-                                <input type="email" className="form-control form-control-sm" id="floatingInput"
-                                       placeholder="name@example.com"/>
-                                <label htmlFor="floatingInput">Query Timeout</label>
-                            </div>
+                            {/*<div className="form-floating mb-3">*/}
+                            {/*    <input type="number" className="form-control form-control-sm" id="floatingInput"*/}
+                            {/*           placeholder="name@example.com"/>*/}
+                            {/*    <label htmlFor="floatingInput">Query Timeout</label>*/}
+                            {/*</div>*/}
                         </div>
                     </div>
 
-                    <div className="row g-3">
+                    <div className="row g-3 mt-1">
                         <div className="col">
                             <div className="form-check form-switch">
                                 <input className="form-check-input" type="checkbox" role="switch"
-                                       id="flexSwitchCheckDefault"/>
-                                <label className="form-check-label" htmlFor="flexSwitchCheckDefault">
+                                       id="tracingOnSwitch"/>
+                                <label className="form-check-label" htmlFor="tracingOnSwitch">
                                     Tracing On
                                 </label>
                             </div>
diff --git a/cadio-web/src/main/webapp/src/pages/cluster/hooks/useCluster.js b/cadio-web/src/main/webapp/src/pages/cluster/hooks/useCluster.js
index 78fb17cf..5f82372e 100644
--- a/cadio-web/src/main/webapp/src/pages/cluster/hooks/useCluster.js
+++ b/cadio-web/src/main/webapp/src/pages/cluster/hooks/useCluster.js
@@ -1,11 +1,11 @@
 import axios from "axios";
 import {useClusterDispatch, useClusterState} from "../context/clusterContext";
 import {useParams} from "react-router-dom";
-import {axiosCatch} from "../../../utils/axiosUtils";
+import {useAxios} from "../../../utils/axiosUtils";
 
 export default function useCluster() {
     const routeParams = useParams();
-
+    const {errorCatch} = useAxios();
     const clusterDispatcher = useClusterDispatch();
     const {} = useClusterState();
 
@@ -31,7 +31,7 @@ export default function useCluster() {
                 keyspaceNames: response.data.result.keyspaceNameMap.SYSTEM,
             })
         }).catch((error) => {
-            axiosCatch(error)
+            errorCatch(error)
         }).finally(() => {
             clusterDispatcher({
                 type: "SET_KEYSPACE_NAMES_LOADING",
@@ -58,7 +58,7 @@ export default function useCluster() {
                 keyspaceList: response.data.result.keyspaceList,
             })
         }).catch((error) => {
-            axiosCatch(error)
+            errorCatch(error)
         }).finally(() => {
             clusterDispatcher({
                 type: "SET_KEYSPACE_LIST_LOADING",
diff --git a/cadio-web/src/main/webapp/src/pages/home-view.js b/cadio-web/src/main/webapp/src/pages/home-view.js
index 96f7b1b7..603e0c0b 100644
--- a/cadio-web/src/main/webapp/src/pages/home-view.js
+++ b/cadio-web/src/main/webapp/src/pages/home-view.js
@@ -6,7 +6,7 @@ import useCadio from "../commons/hooks/useCadio";
 
 const HomeView = () => {
 
-    const {openToast} = useCadio();
+    const {openToast, errorCatch} = useCadio();
 
     const [clustersLoading, setClustersLoading] = useState(false);
     const [clusters, setClusters] = useState([]);
@@ -25,7 +25,7 @@ const HomeView = () => {
         }).then((response) => {
             setClusters(response.data.result.clusters)
         }).catch((error) => {
-            //TODO : error catch
+            errorCatch(error)
         }).finally(() => {
             setClustersLoading(false)
         });
diff --git a/cadio-web/src/main/webapp/src/pages/initialize-view.js b/cadio-web/src/main/webapp/src/pages/initialize-view.js
index 4d7f39a2..91856108 100644
--- a/cadio-web/src/main/webapp/src/pages/initialize-view.js
+++ b/cadio-web/src/main/webapp/src/pages/initialize-view.js
@@ -3,7 +3,7 @@ import axios from "axios";
 import useCadio from "../commons/hooks/useCadio";
 
 const InitializeView = (props) => {
-    const {doBootstrap} = useCadio();
+    const {doBootstrap, errorCatch} = useCadio();
 
     const [clusterInfo, setClusterInfo] = useState(
         {
@@ -70,7 +70,7 @@ const InitializeView = (props) => {
             alert("등록되었습니다.");
             doBootstrap();
         }).catch((error) => {
-
+            errorCatch(error);
         }).finally(() => {
             setSaveLoading(false);
         })
diff --git a/cadio-web/src/main/webapp/src/utils/axiosUtils.ts b/cadio-web/src/main/webapp/src/utils/axiosUtils.ts
index 0f9c91fd..5b99d9fd 100644
--- a/cadio-web/src/main/webapp/src/utils/axiosUtils.ts
+++ b/cadio-web/src/main/webapp/src/utils/axiosUtils.ts
@@ -1,46 +1,8 @@
-import axios, {AxiosRequestConfig, AxiosResponse} from "axios";
+export function useAxios() {
 
-export function axiosCatch(error: any) {
-    console.log(error);
+    // const {openToast} = useCadio();
 
-    if (axios.isAxiosError(error)) {
-        const {message} = error;
-        const {method, url} = error.config as AxiosRequestConfig;
-        const {status, statusText} = error.response as AxiosResponse;
 
-        console.error(
-            `[API] ${method?.toUpperCase()} ${url} | Error ${status} ${statusText} | ${message}`
-        );
-
-        switch (status) {
-            case 400:
-                alert(`${status} 잘못된 요청입니다.`);
-                break;
-            case 401: {
-                alert(`${status} 인증 실패입니다.`);
-                break;
-            }
-            case 403: {
-                alert(`${status} 권한이 없습니다.`);
-                break;
-            }
-            case 404: {
-                alert(`${status} 찾을 수 없는 페이지입니다.`);
-                break;
-            }
-            case 500: {
-                alert(`${status} 서버 오류입니다.`);
-                break;
-            }
-            default: {
-                alert(`${status} 에러가 발생했습니다. ${error.message}`);
-            }
-        }
-    } else if (error instanceof Error && error.name === "TimeoutError") {
-        console.error(`[API] | TimeError ${error.toString()}`);
-        alert(`${0} 요청 시간이 초과되었습니다.`);
-    } else {
-        console.error(`[API] | Error ${error.toString()}`);
-        alert(`${0} 에러가 발생했습니다. ${error.toString()}`);
+    return {
     }
 }