diff --git a/client/packages/lowcoder/src/components/ResCreatePanel.tsx b/client/packages/lowcoder/src/components/ResCreatePanel.tsx
index 1225b99c72..75ac54db48 100644
--- a/client/packages/lowcoder/src/components/ResCreatePanel.tsx
+++ b/client/packages/lowcoder/src/components/ResCreatePanel.tsx
@@ -25,6 +25,7 @@ import { getUser } from "../redux/selectors/usersSelectors";
 import DataSourceIcon from "./DataSourceIcon";
 import { genRandomKey } from "comps/utils/idGenerator";
 import { isPublicApplication } from "@lowcoder-ee/redux/selectors/applicationSelector";
+import { JS_CODE_ID } from "constants/datasourceConstants";
 
 const Wrapper = styled.div<{ $placement: PageType }>`
   width: 100%;
@@ -145,6 +146,7 @@ const ResButton = (props: {
       type: BottomResTypeEnum.Query,
       extra: {
         compType: "js",
+        dataSourceId: JS_CODE_ID,
       },
     },
     libraryQuery: {
@@ -320,6 +322,17 @@ export function ResCreatePanel(props: ResCreateModalProps) {
                 </div>
               </>
             )}
+                      
+            {placement === "queryLibrary" && (
+              <>
+                <div className="section-title">{trans("code")}</div>
+                <div className="section">
+                  <DataSourceListWrapper $placement={placement}>
+                    <ResButton size={buttonSize} identifier={"js"} onSelect={onSelect} />
+                  </DataSourceListWrapper>
+                </div>
+              </>
+            )}
 
             <div className="section-title">{trans("query.datasource")}</div>
             <div className="section">
diff --git a/client/packages/lowcoder/src/comps/queries/queryComp/queryPropertyView.tsx b/client/packages/lowcoder/src/comps/queries/queryComp/queryPropertyView.tsx
index 7ddf4c0d63..d78f7d6ab9 100644
--- a/client/packages/lowcoder/src/comps/queries/queryComp/queryPropertyView.tsx
+++ b/client/packages/lowcoder/src/comps/queries/queryComp/queryPropertyView.tsx
@@ -5,6 +5,7 @@ import { isCompWithPropertyView } from "comps/utils/propertyUtils";
 import {
   QUICK_GRAPHQL_ID,
   QUICK_REST_API_ID,
+  JS_CODE_ID
 } from "constants/datasourceConstants";
 import { PageType } from "constants/pageConstants";
 import { trans } from "i18n";
@@ -795,7 +796,8 @@ function useDatasourceStatus(datasourceId: string, datasourceType: ResourceType)
       datasourceType === "libraryQuery" ||
       datasourceType === "alasql" ||
       datasourceId === QUICK_REST_API_ID ||
-      datasourceId === QUICK_GRAPHQL_ID
+      datasourceId === QUICK_GRAPHQL_ID || 
+      datasourceId === JS_CODE_ID
     ) {
       return "";
     }
diff --git a/client/packages/lowcoder/src/comps/queries/resourceDropdown.tsx b/client/packages/lowcoder/src/comps/queries/resourceDropdown.tsx
index 3907a3d92c..9446b6ccbd 100644
--- a/client/packages/lowcoder/src/comps/queries/resourceDropdown.tsx
+++ b/client/packages/lowcoder/src/comps/queries/resourceDropdown.tsx
@@ -15,6 +15,7 @@ import { DatasourceType, ResourceType } from "@lowcoder-ee/constants/queryConsta
 import {
   QUICK_GRAPHQL_ID,
   QUICK_REST_API_ID,
+  JS_CODE_ID
 } from "constants/datasourceConstants";
 import {
   apiPluginsForQueryLibrary,
@@ -78,7 +79,7 @@ interface ResourceOptionValue {
 }
 
 const JSOptionValue: ResourceOptionValue = {
-  id: "",
+  id: JS_CODE_ID,
   type: "js",
 };
 
@@ -156,6 +157,7 @@ export const ResourceDropdown = (props: ResourceDropdownProps) => {
           const optionValue: ResourceOptionValue = JSON.parse(value);
           const datasourceId = optionValue.id;
           const datasourceType = optionValue.type;
+
           if (!datasourceType) {
             messageInstance.error("datasource invalid");
             return;
@@ -293,19 +295,20 @@ export const ResourceDropdown = (props: ResourceDropdownProps) => {
           </SelectOptionContains>
         </SelectOption>
 
-        {context?.placement !== "queryLibrary" && (
-          <>
-            <SelectOption
-              key={JSON.stringify(JSOptionValue)}
-              label={trans("query.executeJSCode")}
-              value={JSON.stringify(JSOptionValue)}
-            >
-              <SelectOptionContains>
-                {getBottomResIcon("js")}
-                <SelectOptionLabel>{trans("query.executeJSCode")} </SelectOptionLabel>
-              </SelectOptionContains>
-            </SelectOption>
+        {/* Always show JS option regardless of placement */}
+          <SelectOption
+            key={JSON.stringify(JSOptionValue)}
+            label={trans("query.executeJSCode")}
+            value={JSON.stringify(JSOptionValue)}
+          >
+            <SelectOptionContains>
+              {getBottomResIcon("js")}
+              <SelectOptionLabel>{trans("query.executeJSCode")} </SelectOptionLabel>
+            </SelectOptionContains>
+          </SelectOption>
 
+          {/* Only show Library Query option when not in Query Library */}
+          {context?.placement !== "queryLibrary" && (
             <SelectOption
               key={JSON.stringify(LibraryQueryOptionValue)}
               label={trans("query.importFromQueryLibrary")}
@@ -316,8 +319,7 @@ export const ResourceDropdown = (props: ResourceDropdownProps) => {
                 <SelectOptionLabel>{trans("query.importFromQueryLibrary")} </SelectOptionLabel>
               </SelectOptionContains>
             </SelectOption>
-          </>
-        )}
+          )}
       </CustomSelect>
     </SelectWrapper>
   );
diff --git a/client/packages/lowcoder/src/constants/datasourceConstants.ts b/client/packages/lowcoder/src/constants/datasourceConstants.ts
index 640fee1afa..0c65449f38 100644
--- a/client/packages/lowcoder/src/constants/datasourceConstants.ts
+++ b/client/packages/lowcoder/src/constants/datasourceConstants.ts
@@ -43,4 +43,5 @@ export interface Datasource {
 
 export const QUICK_REST_API_ID = "#QUICK_REST_API";
 export const QUICK_GRAPHQL_ID = "#QUICK_GRAPHQL";
+export const JS_CODE_ID = "#JS_CODE";
 export const OLD_LOWCODER_DATASOURCE: Partial<DatasourceType>[] = [];

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/lowcoder-org/lowcoder/pull/1648.diff" target="_blank">Alternative Proxy</a></p><p><a href="http://clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/lowcoder-org/lowcoder/pull/1648.diff" target="_blank">pFad Proxy</a></p><p><a href="http://clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/lowcoder-org/lowcoder/pull/1648.diff" target="_blank">pFad v3 Proxy</a></p><p><a href="http://clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/lowcoder-org/lowcoder/pull/1648.diff" target="_blank">pFad v4 Proxy</a></p></body>
</html>