diff --git a/ui/package.json b/ui/package.json
index 2d61b411..4a0bee63 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -41,6 +41,7 @@
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "query-string": "^8.1.0",
+    "re-resizable": "^6.10.0",
     "react": "18.2.0",
     "react-diff-viewer-continued": "^3.3.1",
     "react-dom": "18.2.0",
diff --git a/ui/src/components/yaml/index.tsx b/ui/src/components/yaml/index.tsx
index 347cd515..5a832bb9 100644
--- a/ui/src/components/yaml/index.tsx
+++ b/ui/src/components/yaml/index.tsx
@@ -1,6 +1,7 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import type { LegacyRef } from 'react'
 import { Button, message } from 'antd'
+import { Resizable } from 're-resizable'
 import { useTranslation } from 'react-i18next'
 import hljs from 'highlight.js'
 import yaml from 'js-yaml'
@@ -21,6 +22,8 @@ const Yaml = (props: IProps) => {
   const { t } = useTranslation()
   const yamlRef = useRef<LegacyRef<HTMLDivElement> | undefined>()
   const { data } = props
+  const [moduleHeight, setModuleHeight] = useState<number>(500)
+
   useEffect(() => {
     const yamlStatusJson = yaml2json(data)
     if (yamlRef.current && yamlStatusJson?.data) {
@@ -42,19 +45,38 @@ const Yaml = (props: IProps) => {
   }
 
   return (
-    <div className={styles.yaml_content} style={{ height: props?.height }}>
-      <div className={styles.copy}>
-        {data && (
-          <Button type="primary" size="small" onClick={copy} disabled={!data}>
-            {t('Copy')}
-          </Button>
-        )}
-      </div>
-      <div
-        className={styles.yaml_box}
-        style={{ height: props?.height }}
-        ref={yamlRef as any}
-      />
+    <div style={{ paddingBottom: 20 }}>
+      <Resizable
+        defaultSize={{
+          height: moduleHeight,
+        }}
+        onResizeStop={(e, direction, ref, d) => {
+          const newModuleHeight = moduleHeight + d.height
+          setModuleHeight(newModuleHeight)
+        }}
+      >
+        <div className={styles.yaml_content} style={{ height: props?.height }}>
+          <div className={styles.copy}>
+            {data && (
+              <Button
+                type="primary"
+                size="small"
+                onClick={copy}
+                disabled={!data}
+              >
+                {t('Copy')}
+              </Button>
+            )}
+          </div>
+          <div className={styles.yaml_container}>
+            <div
+              className={styles.yaml_box}
+              style={{ height: props?.height }}
+              ref={yamlRef as any}
+            />
+          </div>
+        </div>
+      </Resizable>
     </div>
   )
 }
diff --git a/ui/src/components/yaml/styles.module.less b/ui/src/components/yaml/styles.module.less
index 0ba9695d..77088875 100644
--- a/ui/src/components/yaml/styles.module.less
+++ b/ui/src/components/yaml/styles.module.less
@@ -1,28 +1,29 @@
 .yaml_content {
-  position: relative;
+  height: 100%;
   overflow-y: auto;
+  border-radius: 8px;
 
   .copy {
     position: absolute;
     top: 20px;
     right: 20px;
   }
-
-  .yaml_box {
-    width: 100%;
-    height: 500px;
-    max-height: 800px;
-    min-height: 300px;
-    padding: 1.5rem 2rem;
-    overflow-y: auto;
-    font:
-      1.1em Inconsolata,
-      monospace;
-    color: #fff;
-    word-break: break-all;
-    white-space: pre-wrap;
+  .yaml_container {
+    height: 100%;
     background-color: #000;
-    border-radius: 8px;
-    box-sizing: border-box;
+    .yaml_box {
+      width: 100%;
+      padding: 1.5rem 2rem;
+      overflow-y: auto;
+      font:
+        1.1em Inconsolata,
+        monospace;
+      color: #fff;
+      word-break: break-all;
+      white-space: pre-wrap;
+      background-color: #000;
+      border-radius: 8px;
+      box-sizing: border-box;
+    }
   }
 }