diff --git a/client/VERSION b/client/VERSION
index d5724cd41..bd4053bfb 100644
--- a/client/VERSION
+++ b/client/VERSION
@@ -1 +1 @@
-2.6.2
\ No newline at end of file
+2.6.3
\ No newline at end of file
diff --git a/client/package.json b/client/package.json
index 027d703dd..e84c1dbea 100644
--- a/client/package.json
+++ b/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-frontend",
-  "version": "2.6.2",
+  "version": "2.6.3",
   "type": "module",
   "private": true,
   "workspaces": [
diff --git a/client/packages/lowcoder/package.json b/client/packages/lowcoder/package.json
index 37d555487..65146553a 100644
--- a/client/packages/lowcoder/package.json
+++ b/client/packages/lowcoder/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lowcoder",
-  "version": "2.6.2",
+  "version": "2.6.3",
   "private": true,
   "type": "module",
   "main": "src/index.sdk.ts",
@@ -52,7 +52,6 @@
     "file-saver": "^2.0.5",
     "github-markdown-css": "^5.1.0",
     "hotkeys-js": "^3.8.7",
-    "html5-device-mockups": "^3.2.1",
     "immer": "^9.0.7",
     "less": "^4.1.3",
     "lodash": "^4.17.21",
@@ -68,7 +67,7 @@
     "react": "^18.2.0",
     "react-best-gradient-color-picker": "^3.0.10",
     "react-colorful": "^5.5.1",
-    "react-device-mockups": "^0.1.12",
+    "react-device-mockup": "^1.0.0",
     "react-documents": "^1.2.1",
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.4",
diff --git a/client/packages/lowcoder/src/comps/comps/splitLayout/splitLayout.tsx b/client/packages/lowcoder/src/comps/comps/splitLayout/splitLayout.tsx
index d2681940a..dfac3b4f8 100644
--- a/client/packages/lowcoder/src/comps/comps/splitLayout/splitLayout.tsx
+++ b/client/packages/lowcoder/src/comps/comps/splitLayout/splitLayout.tsx
@@ -36,12 +36,13 @@ import {
   HorizontalIcon,
   VerticalIcon,
 } from "lowcoder-design/src/icons";
-import { BackgroundColor } from "@lowcoder-ee/constants/style";
 
-const SplitPanelWrapper = styled(Splitter.Panel)<{ }>`
+const SplitPanelWrapper = styled(Splitter.Panel)`
+  overflow: hidden;
 `;
 
 const SplitterWrapper = styled.div<{ $style: SplitLayoutRowStyleType }>`
+  height: 100%;
   border-radius: ${(props) => props.$style?.radius || "0px"};
   border-width: ${(props) => props.$style?.borderWidth || "0px"};
   border-color: ${(props) => props.$style?.border || "transparent"};
@@ -103,7 +104,8 @@ const ColumnContainer = (props: ColumnContainerProps) => {
         ...props.style,
         height: props.orientation === "horizontal"
           ? (props.matchColumnsHeight ? heightCalculator(props.margin) : "auto")
-          : (props.autoHeight ? "100%" : "auto"),
+          : (props.autoHeight ? heightCalculator(props.margin) : heightCalculator(props.margin)),
+        overflow: 'auto',
       }}
     />
   );
@@ -115,11 +117,18 @@ const SplitLayout = (props: SplitLayoutProps) => {
     <BackgroundColorContext.Provider value={props.columnStyle.background}>
       <DisabledContext.Provider value={props.disabled}>
         <SplitterWrapper $style={props.bodyStyle}>
-          <Splitter style={{ overflow: props.mainScrollbar ? "auto" : "hidden"}} layout={props.orientation}>
+          <Splitter
+            style={{
+              overflow: props.mainScrollbar ? "auto" : "hidden",
+              height: props.autoHeight && props.orientation === 'vertical' ? '500px' : '100%',
+            }}
+            layout={props.orientation}
+          >
             {props.columns.map((col, index) => {
               const id = String(col.id);
               const childDispatch = wrapDispatch(wrapDispatch(props.dispatch, "containers"), id);
               const containerProps = props.containers[id]?.children;
+
               return (
                 <SplitPanelWrapper 
                   key={id} 
@@ -127,7 +136,7 @@ const SplitLayout = (props: SplitLayoutProps) => {
                   {...(col.minWidth !== undefined ? { min: col.minWidth } : {})}
                   {...(col.maxWidth !== undefined ? { max: col.maxWidth } : {})}
                   {...(col.width !== undefined ? { defaultSize: col.width } : {})}
-                  >
+                >
                   <ColumnContainer
                     layout={containerProps.layout.getView()}
                     items={gridItemCompToGridItems(containerProps.items.getView())}
diff --git a/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx b/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx
index 4de200bda..5febe82ff 100644
--- a/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx
+++ b/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx
@@ -112,14 +112,12 @@ export class ExecuteQueryAction extends ExecuteQueryTmpAction {
   override getView() {
     const queryName = this.children.queryName.getView();
     // const queryParams = keyValueListToSearchStr(Array.isArray(this?.children?.query) ? (this.children.query as unknown as any[]).map((i: any) => i.getView() as KeyValue) : []);
-    const result = Object.values(this.children.queryVariables.children as Record<string, {
-      children: {
-        key: { unevaledValue: string },
-        value: { unevaledValue: string }
-      }}>)
-      .filter(item => item.children.key.unevaledValue !== "" && item.children.value.unevaledValue !== "")
-      .map(item => ({[item.children.key.unevaledValue]: item.children.value.unevaledValue}))
+    const result = this.children.queryVariables.toJsonValue()
+      .filter(item => item.key !== "" && item.value !== "")
+      .map(item => ({[item.key as string]: item.value}))
       .reduce((acc, curr) => Object.assign(acc, curr), {});
+    
+    result.$queryName = queryName;
     if (!queryName) {
       return () => Promise.resolve();
     }
diff --git a/client/packages/lowcoder/src/comps/queries/queryComp.tsx b/client/packages/lowcoder/src/comps/queries/queryComp.tsx
index 92a33e7b6..066b351fe 100644
--- a/client/packages/lowcoder/src/comps/queries/queryComp.tsx
+++ b/client/packages/lowcoder/src/comps/queries/queryComp.tsx
@@ -364,6 +364,7 @@ QueryCompTmp = class extends QueryCompTmp {
     if (action.type === CompActionTypes.EXECUTE_QUERY) {
       if (getReduceContext().disableUpdateState) return this;
       if(!action.args) action.args = this.children.variables.children.variables.toJsonValue().reduce((acc, curr) => Object.assign(acc, {[curr.key as string]:curr.value}), {});
+      action.args.$queryName = this.children.name.getView();
 
       return this.executeQuery(action);
     }
@@ -673,8 +674,8 @@ export const QueryComp = withExposingConfigs(QueryCompTmp, [
         return undefined;
       }
       const newNode = Object.values(input.data)
-        .filter((kvNode: any) => kvNode.key.value)
-        .map((kvNode: any) => ({[kvNode.key.value]: kvNode.value.value}))
+        .filter((kvNode: any) => kvNode.key)
+        .map((kvNode: any) => ({[kvNode.key]: kvNode.value}))
         .reduce((prev, obj) => ({...prev, ...obj}), {});
       return newNode;
     },
@@ -773,12 +774,24 @@ class QueryListComp extends QueryListTmpComp implements BottomResListComp {
     if (!originQuery) {
       return;
     }
+
+    const jsonData = originQuery.toJsonValue();
+    //Regenerate variable header
+    jsonData.variables?.variables?.forEach(kv => {
+      const [prefix, _] = (kv.key as string).split(/(?=\d+$)/);
+      let i=1, newName = "";
+      do {
+        newName = prefix + (i++);
+      } while(editorState.checkRename("", newName));
+      kv.key = newName;
+    })
+
     const newQueryName = this.genNewName(editorState);
     const id = genQueryId();
     this.dispatch(
       wrapActionExtraInfo(
         this.pushAction({
-          ...originQuery.toJsonValue(),
+          ...jsonData,
           id: id,
           name: newQueryName,
           isNewCreate: true,
@@ -789,7 +802,7 @@ class QueryListComp extends QueryListTmpComp implements BottomResListComp {
             {
               type: "add",
               compName: name,
-              compType: originQuery.children.compType.getView(),
+              compType: jsonData.compType,
             },
           ],
         }
diff --git a/client/packages/lowcoder/src/comps/queries/queryCompUtils.tsx b/client/packages/lowcoder/src/comps/queries/queryCompUtils.tsx
index 1203e1cfd..d319689e7 100644
--- a/client/packages/lowcoder/src/comps/queries/queryCompUtils.tsx
+++ b/client/packages/lowcoder/src/comps/queries/queryCompUtils.tsx
@@ -28,9 +28,10 @@ export function toQueryView(params: FunctionProperty[]) {
     variables?: any;
     timeout: InstanceType<ParamsControlType>;
   }): Promise<QueryResult> => {
+    console.log("toQueryView props", props, params);
     const { applicationId, isViewMode } = getGlobalSettings();
 
-    const mappedVariables = Object.keys(props.variables).map(key => ({key: `query1.variable.${key}`, value: props.variables[key]}));
+    const mappedVariables = Object.keys(props.variables).map(key => ({key: `${props.args?.$queryName}.variables.${key}`, value: props.variables[key]}));
     let request: QueryExecuteRequest = {
       path: props.applicationPath,
       params: [
diff --git a/client/packages/lowcoder/src/pages/common/copyModal.tsx b/client/packages/lowcoder/src/pages/common/copyModal.tsx
index 5675cf1ea..cf8bf658d 100644
--- a/client/packages/lowcoder/src/pages/common/copyModal.tsx
+++ b/client/packages/lowcoder/src/pages/common/copyModal.tsx
@@ -40,6 +40,8 @@ export function CopyModal(props: CopyModalProps) {
       okButtonProps={{ disabled: !copyName }}
       destroyOnClose={true}
       onCancel={close}
+      showCancelButton
+      showOkButton
       onOk={async () => {
         let dsl = null;
         await ApplicationApi.getApplicationDetail({ applicationId: id, type: "editing" }).then(
diff --git a/client/packages/lowcoder/src/pages/editor/editorView.tsx b/client/packages/lowcoder/src/pages/editor/editorView.tsx
index 50a732c8a..6adc9b7ec 100644
--- a/client/packages/lowcoder/src/pages/editor/editorView.tsx
+++ b/client/packages/lowcoder/src/pages/editor/editorView.tsx
@@ -256,8 +256,31 @@ export const EditorWrapper = styled.div`
 
 const DeviceWrapperInner = styled(Flex)`
   margin: 2% 0 0;
-  .screen {
-    overflow: auto;
+  .device-mockup.portrait {
+    > div:first-child {
+      > div:first-child {
+        > div:first-child {
+          > div:nth-child(2) {
+            display: block !important;
+            overflow: hidden auto !important;
+          } 
+        } 
+      }
+    }
+  }
+  .device-mockup.landscape {
+    > div:first-child {
+      > div:first-child {
+        > div:first-child {
+          > div:nth-child(2) {
+            > div:first-child {
+              display: block !important;
+              overflow: hidden auto !important;
+            }
+          } 
+        } 
+      }
+    }
   }
 `;
 
@@ -322,13 +345,11 @@ const DeviceWrapper = ({
   useEffect(() => {
     const loadWrapper = async () => {
       if (deviceType === "tablet") {
-        await import('html5-device-mockups/dist/device-mockups.min.css');
-        const { IPadPro } = await import("react-device-mockups");
-        setWrapper(() => IPadPro);
+        const { IPadMockup } = await import("react-device-mockup");
+        setWrapper(() => IPadMockup);
       } else if (deviceType === "mobile") {
-        await import('html5-device-mockups/dist/device-mockups.min.css');
-        const { IPhone7 } = await import("react-device-mockups");
-        setWrapper(() => IPhone7);
+        const { IPhoneMockup } = await import("react-device-mockup");
+        setWrapper(() => IPhoneMockup);
       } else {
         setWrapper(() => null);
       }
@@ -339,13 +360,13 @@ const DeviceWrapper = ({
 
   const deviceWidth = useMemo(() => {
     if (deviceType === 'tablet' && deviceOrientation === 'portrait') {
-      return 980;
+      return 850;
     }
     if (deviceType === 'tablet' && deviceOrientation === 'landscape') {
-      return 1280;
+      return 1100;
     }
     if (deviceType === 'mobile' && deviceOrientation === 'portrait') {
-      return 550;
+      return 450;
     }
     if (deviceType === 'mobile' && deviceOrientation === 'landscape') {
       return 1200;
@@ -357,8 +378,10 @@ const DeviceWrapper = ({
   return (
     <DeviceWrapperInner justify="center" >
       <Wrapper
-        orientation={deviceOrientation}
-        width={deviceWidth}
+        isLandscape={deviceOrientation === 'landscape'}
+        screenWidth={deviceWidth}
+        className={`device-mockup ${deviceOrientation === 'landscape' && deviceType === 'mobile' ? 'landscape' : 'portrait'} `}
+        frameColor={"background: linear-gradient(90deg, #4b6cb7 0%, #182848 100%);"}
       >
         {children}
       </Wrapper>
diff --git a/client/packages/lowcoder/src/pages/editor/styledComponents.tsx b/client/packages/lowcoder/src/pages/editor/styledComponents.tsx
index d8cb3a4a0..79ed8022d 100644
--- a/client/packages/lowcoder/src/pages/editor/styledComponents.tsx
+++ b/client/packages/lowcoder/src/pages/editor/styledComponents.tsx
@@ -13,6 +13,9 @@ export const DirectoryTreeStyle = styled(DirectoryTree)`
     height: 26px;
     display: flex;
     align-items: center;
+    &::before {
+      content: none;
+    }
   }
   .ant-tree-title {
     padding-right: 6px;
@@ -43,6 +46,9 @@ export const DirectoryTreeStyle = styled(DirectoryTree)`
   .ant-tree-treenode {
     padding: 0;
     max-width: 288px;
+    &::before {
+      content: none;
+    }
   }
   .ant-tree-indent-unit {
     width: 16px;
diff --git a/client/packages/lowcoder/src/pages/setting/permission/addGroupUserDialog.tsx b/client/packages/lowcoder/src/pages/setting/permission/addGroupUserDialog.tsx
index 726308be9..6f4d72f25 100644
--- a/client/packages/lowcoder/src/pages/setting/permission/addGroupUserDialog.tsx
+++ b/client/packages/lowcoder/src/pages/setting/permission/addGroupUserDialog.tsx
@@ -71,6 +71,7 @@ function AddGroupUserDialog(props: {
         }}
         okButtonProps={{ loading: confirmLoading }}
         showCancelButton={false}
+        showOkButton
         width="440px"
         okText={trans("finish")}
         onOk={async () => {
diff --git a/client/packages/lowcoder/src/pages/setting/theme/createModal.tsx b/client/packages/lowcoder/src/pages/setting/theme/createModal.tsx
index 753f1477a..ddddfe6a8 100644
--- a/client/packages/lowcoder/src/pages/setting/theme/createModal.tsx
+++ b/client/packages/lowcoder/src/pages/setting/theme/createModal.tsx
@@ -93,6 +93,8 @@ function CreateModal(props: CreateModalProp) {
       width="602px"
       title={trans("theme.createTheme")}
       open={modalVisible}
+      showOkButton
+      showCancelButton
       onOk={handleOk}
       okButtonProps={{ disabled: !name || !selectId }}
       onCancel={handleCancel}
diff --git a/client/yarn.lock b/client/yarn.lock
index ddc5cec80..1589f0bb7 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -11492,13 +11492,6 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
-"html5-device-mockups@npm:^3.2.1":
-  version: 3.2.1
-  resolution: "html5-device-mockups@npm:3.2.1"
-  checksum: abba0bccc6398313102a9365203092a7c0844879d1b0492168279c516c9462d2a7e016045be565bc183e3405a1ae4929402eaceb1952abdbf16f1580afa68df3
-  languageName: node
-  linkType: hard
-
 "http-cache-semantics@npm:^4.1.1":
   version: 4.1.1
   resolution: "http-cache-semantics@npm:4.1.1"
@@ -14203,7 +14196,6 @@ coolshapes-react@lowcoder-org/coolshapes-react:
     file-saver: ^2.0.5
     github-markdown-css: ^5.1.0
     hotkeys-js: ^3.8.7
-    html5-device-mockups: ^3.2.1
     http-proxy-middleware: ^2.0.6
     immer: ^9.0.7
     less: ^4.1.3
@@ -14220,7 +14212,7 @@ coolshapes-react@lowcoder-org/coolshapes-react:
     react: ^18.2.0
     react-best-gradient-color-picker: ^3.0.10
     react-colorful: ^5.5.1
-    react-device-mockups: ^0.1.12
+    react-device-mockup: ^1.0.0
     react-documents: ^1.2.1
     react-dom: ^18.2.0
     react-draggable: ^4.4.4
@@ -17774,15 +17766,12 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
-"react-device-mockups@npm:^0.1.12":
-  version: 0.1.12
-  resolution: "react-device-mockups@npm:0.1.12"
+"react-device-mockup@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "react-device-mockup@npm:1.0.0"
   peerDependencies:
-    html5-device-mockups: ^3.2.1
-    prop-types: ^15.5.4
-    react: ^15.0.0 || ^16.0.0 || ^17.0.0
-    react-dom: ^15.0.0 || ^16.0.0 || ^17.0.0
-  checksum: 738e969802c32810c2ca3ca3bd6c9bacf9b3d7adda0569c4f5c7fb1d68bab860ac7bb5a50aa2677d852143cb30ab8520e556c4dc7f53be154fd16ca08a9ba32c
+    react: "*"
+  checksum: 5a653b3e22c9cad567bf607169a710b70dc80c0f5b2b981008c06ff2566535ee809cb0819f0d3663bd2f0e3da6052a1a2b77baea58413e2202c2bab4602aa13e
   languageName: node
   linkType: hard
 
diff --git a/server/api-service/lowcoder-sdk/src/main/java/org/lowcoder/sdk/plugin/common/sql/ResultSetParser.java b/server/api-service/lowcoder-sdk/src/main/java/org/lowcoder/sdk/plugin/common/sql/ResultSetParser.java
index 3c2fdb3c7..cae18e432 100644
--- a/server/api-service/lowcoder-sdk/src/main/java/org/lowcoder/sdk/plugin/common/sql/ResultSetParser.java
+++ b/server/api-service/lowcoder-sdk/src/main/java/org/lowcoder/sdk/plugin/common/sql/ResultSetParser.java
@@ -1,7 +1,9 @@
 package org.lowcoder.sdk.plugin.common.sql;
 
+import org.apache.commons.codec.binary.Base64;
 import org.jetbrains.annotations.Nullable;
 
+import java.sql.Blob;
 import java.sql.ResultSet;
 import java.sql.ResultSetMetaData;
 import java.sql.SQLException;
@@ -25,6 +27,7 @@ public class ResultSetParser {
     public static final String DATETIME_COLUMN_TYPE_NAME = "datetime";
     public static final String TIMESTAMP_COLUMN_TYPE_NAME = "timestamp";
     public static final String YEAR_COLUMN_TYPE_NAME = "year";
+    public static final String BLOB_COLUMN_TYPE_NAME = "blob";
 
     public static List<Map<String, Object>> parseRows(ResultSet resultSet) throws SQLException {
         ResultSetMetaData metaData = resultSet.getMetaData();
@@ -74,6 +77,12 @@ private static Object getValue(ResultSet resultSet, int i, String typeName) thro
         if (YEAR_COLUMN_TYPE_NAME.equalsIgnoreCase(typeName)) {
             return resultSet.getDate(i).toLocalDate().getYear();
         }
+        if (BLOB_COLUMN_TYPE_NAME.equalsIgnoreCase(typeName)) {
+            //Convert binary data into base64
+            Blob blob = resultSet.getBlob(i);
+            byte[] blobBytes = blob.getBytes(1, (int) blob.length());
+            return Base64.encodeBase64String(blobBytes);
+        }
         return resultSet.getObject(i);
     }
 
diff --git a/server/api-service/pom.xml b/server/api-service/pom.xml
index 87f77a4f9..499e061b2 100644
--- a/server/api-service/pom.xml
+++ b/server/api-service/pom.xml
@@ -12,7 +12,7 @@
 
 
 	<properties>
-		<revision>2.6.2</revision>
+		<revision>2.6.3</revision>
 		<java.version>17</java.version>
 		<maven.compiler.source>${java.version}</maven.compiler.source>
 		<maven.compiler.target>${java.version}</maven.compiler.target>
diff --git a/server/node-service/package.json b/server/node-service/package.json
index ee21cab14..65ed2001b 100644
--- a/server/node-service/package.json
+++ b/server/node-service/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-node-server",
-  "version": "2.6.2",
+  "version": "2.6.3",
   "private": true,
   "engines": {
     "node": "^14.18.0 || >=16.0.0"
diff --git a/server/node-service/yarn.lock b/server/node-service/yarn.lock
index 34fc293c2..f61d4ea81 100644
--- a/server/node-service/yarn.lock
+++ b/server/node-service/yarn.lock
@@ -9252,8 +9252,8 @@ __metadata:
   linkType: hard
 
 "node-gyp@npm:latest":
-  version: 11.0.0
-  resolution: "node-gyp@npm:11.0.0"
+  version: 11.1.0
+  resolution: "node-gyp@npm:11.1.0"
   dependencies:
     env-paths: ^2.2.0
     exponential-backoff: ^3.1.1
@@ -9267,7 +9267,7 @@ __metadata:
     which: ^5.0.0
   bin:
     node-gyp: bin/node-gyp.js
-  checksum: d7d5055ccc88177f721c7cd4f8f9440c29a0eb40e7b79dba89ef882ec957975dfc1dcb8225e79ab32481a02016eb13bbc051a913ea88d482d3cbdf2131156af4
+  checksum: b196da39a7a45f302d6e03cfdb579eeecbfffa1ab3796de45652c2c0dcbf46b83fde715b054e4d00aa53da5f33033ac5791e20cbb7cc11267dac4f8975ef276c
   languageName: node
   linkType: hard
 
@@ -10481,7 +10481,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"socks@npm:^2.3.3, socks@npm:^2.6.2, socks@npm:^2.8.3":
+"socks@npm:^2.3.3, socks@npm:^2.6.2":
   version: 2.8.3
   resolution: "socks@npm:2.8.3"
   dependencies:
@@ -10491,6 +10491,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"socks@npm:^2.8.3":
+  version: 2.8.4
+  resolution: "socks@npm:2.8.4"
+  dependencies:
+    ip-address: ^9.0.5
+    smart-buffer: ^4.2.0
+  checksum: cd1edc924475d5dfde534adf66038df7e62c7343e6b8c0113e52dc9bb6a0a10e25b2f136197f379d695f18e8f0f2b7f6e42977bf720ddbee912a851201c396ad
+  languageName: node
+  linkType: hard
+
 "sonic-boom@npm:^4.0.1":
   version: 4.2.0
   resolution: "sonic-boom@npm:4.2.0"