diff --git a/ui/src/components/Customize/index.tsx b/ui/src/components/Customize/index.tsx
index 9df0caf8..78665be8 100644
--- a/ui/src/components/Customize/index.tsx
+++ b/ui/src/components/Customize/index.tsx
@@ -10,6 +10,35 @@ const makeMarker = (mark) => {
   return `<!--${mark}-->`;
 };
 
+const ActivateScriptNodes = (el, part) => {
+  let startMarkNode;
+  const scriptList: HTMLScriptElement[] = [];
+  const { childNodes } = el;
+  for (let i = 0; i < childNodes.length; i += 1) {
+    const node = childNodes[i];
+    if (node.nodeType === 8 && node.nodeValue === part) {
+      if (!startMarkNode) {
+        startMarkNode = node;
+      } else {
+        // this is the endMarkNode
+        break;
+      }
+    }
+    if (
+      startMarkNode &&
+      node.nodeType === 1 &&
+      node.nodeName.toLowerCase() === 'script'
+    ) {
+      scriptList.push(node);
+    }
+  }
+  scriptList.forEach((so) => {
+    const script = document.createElement('script');
+    script.textContent = so.textContent;
+    el.replaceChild(script, so);
+  });
+};
+
 type pos = 'afterbegin' | 'beforeend';
 const renderCustomArea = (el, part, pos: pos, content: string = '') => {
   let startMarkNode;
@@ -43,6 +72,7 @@ const renderCustomArea = (el, part, pos: pos, content: string = '') => {
   el.insertAdjacentHTML(pos, makeMarker(part));
   el.insertAdjacentHTML(pos, content);
   el.insertAdjacentHTML(pos, makeMarker(part));
+  ActivateScriptNodes(el, part);
 };
 const handleCustomHead = (content) => {
   const el = document.head;
@@ -70,12 +100,7 @@ const Index: FC = () => {
     handleCustomHeader(custom_header);
     handleCustomFooter(custom_footer);
   }, [custom_head, custom_header, custom_footer]);
-  return (
-    <>
-      {null}
-      {/* App customize */}
-    </>
-  );
+  return null;
 };
 
 export default memo(Index);