diff --git a/packages/xgen/components/edit/CodeEditor/index.less b/packages/xgen/components/edit/CodeEditor/index.less
index 2f35c05d..23e5c962 100644
--- a/packages/xgen/components/edit/CodeEditor/index.less
+++ b/packages/xgen/components/edit/CodeEditor/index.less
@@ -1,4 +1,10 @@
+.editor {
+	width: 100%;
+	height: 100%;
+	position: relative;
+}
+
 ._local {
-	border-radius: var(--radius) !important;
-      overflow: hidden;
-}
\ No newline at end of file
+	width: 100%;
+	height: 100%;
+}
diff --git a/packages/xgen/components/edit/CodeEditor/index.tsx b/packages/xgen/components/edit/CodeEditor/index.tsx
index e01ce0b8..2a5b3434 100644
--- a/packages/xgen/components/edit/CodeEditor/index.tsx
+++ b/packages/xgen/components/edit/CodeEditor/index.tsx
@@ -1,14 +1,10 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
 import Editor from 'react-monaco-editor'
-
 import { Item } from '@/components'
 import { useGlobal } from '@/context/app'
 import vars from '@/styles/preset/vars'
-
 import styles from './index.less'
-
 import type { Component } from '@/types'
-
 import yaml from 'js-yaml'
 import type { EditorDidMount, monaco } from 'react-monaco-editor'
 import { message } from 'antd'
@@ -78,6 +74,23 @@ const Custom = window.$app.memo((props: ICustom) => {
 		setValue(props.value)
 	}, [props.value])
 
+	useEffect(() => {
+		const resizeObserver = new ResizeObserver(() => {
+			if (ref.current) {
+				ref.current.layout()
+			}
+		})
+
+		const container = document.querySelector(`.${styles.editor}`)
+		if (container) {
+			resizeObserver.observe(container)
+		}
+
+		return () => {
+			resizeObserver.disconnect()
+		}
+	}, [])
+
 	const onChange = (v: any) => {
 		if (!props.onChange) return
 		props.onChange(v)
@@ -121,30 +134,32 @@ const Custom = window.$app.memo((props: ICustom) => {
 	}
 
 	return (
-		<Editor
-			className={styles._local}
-			width='100%'
-			height={height}
-			language={language}
-			theme={theme}
-			options={{
-				readOnly: props.disabled,
-				wordWrap: 'on',
-				formatOnPaste: true,
-				formatOnType: true,
-				renderLineHighlight: 'none',
-				smoothScrolling: true,
-				padding: { top: 15 },
-				lineNumbersMinChars: 3,
-				minimap: { enabled: false },
-				lineNumbers: props.hideLineNumbers ? 'off' : 'on',
-				scrollbar: { verticalScrollbarSize: 8, horizontalSliderSize: 8, useShadows: false }
-			}}
-			value={value}
-			onChange={onChange}
-			editorDidMount={editorDidMount}
-			editorWillUnmount={editorWillUnmount}
-		></Editor>
+		<div className={styles.editor}>
+			<Editor
+				className={styles._local}
+				width='100%'
+				height={height}
+				language={language}
+				theme={theme}
+				options={{
+					readOnly: props.disabled,
+					wordWrap: 'on',
+					formatOnPaste: true,
+					formatOnType: true,
+					renderLineHighlight: 'none',
+					smoothScrolling: true,
+					padding: { top: 15 },
+					lineNumbersMinChars: 3,
+					minimap: { enabled: false },
+					lineNumbers: props.hideLineNumbers ? 'off' : 'on',
+					scrollbar: { verticalScrollbarSize: 8, horizontalSliderSize: 8, useShadows: false }
+				}}
+				value={value}
+				onChange={onChange}
+				editorDidMount={editorDidMount}
+				editorWillUnmount={editorWillUnmount}
+			/>
+		</div>
 	)
 })
 
diff --git a/packages/xgen/pages/assistants/detail/$.tsx b/packages/xgen/pages/assistants/detail/$.tsx
index af02b428..286de185 100644
--- a/packages/xgen/pages/assistants/detail/$.tsx
+++ b/packages/xgen/pages/assistants/detail/$.tsx
@@ -6,10 +6,11 @@ import type { Assistant } from '@/layouts/components/Neo/components/AIChat/Card'
 import type { UploadChangeParam } from 'antd/es/upload'
 import type { UploadFile } from 'antd/es/upload/interface'
 import Tag from '@/layouts/components/Neo/components/AIChat/Tag'
-import BasicInfo from './components/BasicInfo'
-import KnowledgeFiles from './components/KnowledgeFiles'
+import General from './components/General'
+import Files from './components/Files'
 import Workflow from './components/Workflow'
-import CodeEditor from './components/CodeEditor'
+import Script from './components/Script'
+import Functions from './components/Functions'
 import styles from './index.less'
 
 const AssistantDetail = () => {
@@ -108,14 +109,14 @@ const AssistantDetail = () => {
 
 	const items = [
 		{
-			key: 'basic',
-			label: 'Basic Info',
-			children: <BasicInfo form={form} />
+			key: 'general',
+			label: 'General',
+			children: <General form={form} />
 		},
 		{
 			key: 'files',
-			label: 'Knowledge Files',
-			children: <KnowledgeFiles files={files} onFilesChange={setFiles} />
+			label: 'Files',
+			children: <Files files={files} onFilesChange={setFiles} />
 		},
 		{
 			key: 'workflow',
@@ -123,9 +124,14 @@ const AssistantDetail = () => {
 			children: <Workflow />
 		},
 		{
-			key: 'code',
-			label: 'Code',
-			children: <CodeEditor code={code} onChange={setCode} />
+			key: 'functions',
+			label: 'Functions',
+			children: <Functions />
+		},
+		{
+			key: 'script',
+			label: 'Script',
+			children: <Script code={code} onChange={setCode} />
 		}
 	]
 
diff --git a/packages/xgen/pages/assistants/detail/components/Files.tsx b/packages/xgen/pages/assistants/detail/components/Files.tsx
new file mode 100644
index 00000000..4e73bd85
--- /dev/null
+++ b/packages/xgen/pages/assistants/detail/components/Files.tsx
@@ -0,0 +1,117 @@
+import { useState } from 'react'
+import { Table, Button, Upload, Space, Typography } from 'antd'
+import { UploadOutlined, DeleteOutlined } from '@ant-design/icons'
+import type { UploadFile } from 'antd/es/upload/interface'
+import styles from '../index.less'
+
+const { Title } = Typography
+
+interface FilesProps {
+	files: UploadFile[]
+	onFilesChange: (files: UploadFile[]) => void
+}
+
+// Generate 100 test files
+const fileTypes = [
+	{ ext: 'json', type: 'application/json' },
+	{ ext: 'yaml', type: 'application/yaml' },
+	{ ext: 'md', type: 'text/markdown' },
+	{ ext: 'js', type: 'application/javascript' },
+	{ ext: 'py', type: 'text/x-python' },
+	{ ext: 'ts', type: 'application/typescript' }
+]
+
+const testFiles: UploadFile[] = Array.from({ length: 100 }, (_, index) => {
+	const fileType = fileTypes[index % fileTypes.length]
+	return {
+		uid: String(index + 1),
+		name: `file_${index + 1}.${fileType.ext}`,
+		size: Math.floor(Math.random() * 1024 * 1024 * 5), // Random size up to 5MB
+		type: fileType.type,
+		status: 'done'
+	}
+})
+
+export default function Files({ files: propFiles, onFilesChange }: FilesProps) {
+	const [files, setFiles] = useState<UploadFile[]>(testFiles)
+
+	const columns = [
+		{
+			title: 'Name',
+			dataIndex: 'name',
+			key: 'name',
+			ellipsis: true
+		},
+		{
+			title: 'Size',
+			dataIndex: 'size',
+			key: 'size',
+			width: 120,
+			render: (size: number) => {
+				if (size < 1024) {
+					return `${size} B`
+				} else if (size < 1024 * 1024) {
+					return `${(size / 1024).toFixed(1)} KB`
+				} else {
+					return `${(size / (1024 * 1024)).toFixed(1)} MB`
+				}
+			}
+		},
+		{
+			title: 'Action',
+			key: 'action',
+			width: 80,
+			render: (_: any, record: UploadFile) => (
+				<Button
+					type='text'
+					icon={<DeleteOutlined />}
+					onClick={() => handleRemove(record)}
+					style={{ color: 'var(--color_text_grey)' }}
+				/>
+			)
+		}
+	]
+
+	const handleRemove = (file: UploadFile) => {
+		const newFiles = files.filter((item) => item.uid !== file.uid)
+		setFiles(newFiles)
+		onFilesChange(newFiles)
+	}
+
+	const handleUpload = (info: any) => {
+		const newFiles = [...files, ...info.fileList]
+		setFiles(newFiles)
+		onFilesChange(newFiles)
+	}
+
+	return (
+		<div className={styles.files}>
+			<div className={styles.filesHeader}>
+				<Title level={5} style={{ margin: 0, fontWeight: 500 }}>
+					Assistant Files
+				</Title>
+				<Upload
+					multiple
+					fileList={[]}
+					beforeUpload={() => false}
+					onChange={handleUpload}
+					showUploadList={false}
+				>
+					<Button type='primary' icon={<UploadOutlined />}>
+						Upload
+					</Button>
+				</Upload>
+			</div>
+			<div className={styles.filesTable}>
+				<Table
+					dataSource={files}
+					columns={columns}
+					pagination={false}
+					rowKey='uid'
+					size='middle'
+					scroll={{ y: 'calc(100vh - 64px - 24px - 48px - 48px - 48px - 72px)' }}
+				/>
+			</div>
+		</div>
+	)
+}
diff --git a/packages/xgen/pages/assistants/detail/components/Functions.tsx b/packages/xgen/pages/assistants/detail/components/Functions.tsx
new file mode 100644
index 00000000..be9d75b5
--- /dev/null
+++ b/packages/xgen/pages/assistants/detail/components/Functions.tsx
@@ -0,0 +1,81 @@
+import { useState } from 'react'
+import Editor from 'react-monaco-editor'
+import { useGlobal } from '@/context/app'
+import vars from '@/styles/preset/vars'
+import styles from '../index.less'
+
+const defaultFunctions = {
+	functions: [
+		{
+			name: 'example_function',
+			description: 'An example function',
+			parameters: {
+				type: 'object',
+				properties: {
+					param1: {
+						type: 'string',
+						description: 'First parameter'
+					},
+					param2: {
+						type: 'number',
+						description: 'Second parameter'
+					}
+				},
+				required: ['param1']
+			}
+		}
+	]
+}
+
+export default function Functions() {
+	const [value, setValue] = useState(JSON.stringify(defaultFunctions, null, 2))
+	const global = useGlobal()
+	const theme = global.theme === 'dark' ? 'x-dark' : 'x-light'
+
+	const editorDidMount = (editor: any, monaco: any) => {
+		monaco.editor.defineTheme('x-dark', {
+			base: 'vs-dark',
+			inherit: true,
+			rules: [],
+			colors: {
+				'editor.background': vars[global.theme].color_bg_nav
+			}
+		})
+
+		monaco.editor.defineTheme('x-light', {
+			base: 'vs',
+			inherit: true,
+			rules: [],
+			colors: {
+				'editor.background': vars[global.theme].color_bg_nav
+			}
+		})
+
+		monaco.editor.setTheme(theme)
+	}
+
+	return (
+		<div className={styles.functions}>
+			<Editor
+				width='100%'
+				height='100%'
+				language='json'
+				theme={theme}
+				value={value}
+				onChange={setValue}
+				editorDidMount={editorDidMount}
+				options={{
+					wordWrap: 'on',
+					formatOnPaste: true,
+					formatOnType: true,
+					renderLineHighlight: 'none',
+					smoothScrolling: true,
+					padding: { top: 15 },
+					lineNumbersMinChars: 3,
+					minimap: { enabled: false },
+					scrollbar: { verticalScrollbarSize: 8, horizontalSliderSize: 8, useShadows: false }
+				}}
+			/>
+		</div>
+	)
+}
diff --git a/packages/xgen/pages/assistants/detail/components/BasicInfo.tsx b/packages/xgen/pages/assistants/detail/components/General.tsx
similarity index 95%
rename from packages/xgen/pages/assistants/detail/components/BasicInfo.tsx
rename to packages/xgen/pages/assistants/detail/components/General.tsx
index 069ec55d..4e158207 100644
--- a/packages/xgen/pages/assistants/detail/components/BasicInfo.tsx
+++ b/packages/xgen/pages/assistants/detail/components/General.tsx
@@ -6,11 +6,11 @@ import styles from '../index.less'
 const { TextArea } = Input
 const { Option } = Select
 
-interface BasicInfoProps {
-	form: any
+interface GeneralProps {
+	form: FormInstance
 }
 
-export default function BasicInfo({ form }: { form: FormInstance }) {
+export default function General({ form }: GeneralProps) {
 	return (
 		<Form
 			form={form}
diff --git a/packages/xgen/pages/assistants/detail/components/KnowledgeFiles.tsx b/packages/xgen/pages/assistants/detail/components/KnowledgeFiles.tsx
deleted file mode 100644
index 80e0db61..00000000
--- a/packages/xgen/pages/assistants/detail/components/KnowledgeFiles.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import React from 'react'
-import { Upload, List, Button, message } from 'antd'
-import { UploadOutlined, FileTextOutlined, DeleteOutlined } from '@ant-design/icons'
-import type { UploadFile } from 'antd/es/upload/interface'
-import styles from '../index.less'
-
-interface KnowledgeFilesProps {
-	files: UploadFile<any>[]
-	onFilesChange: (files: UploadFile<any>[]) => void
-}
-
-const fileTypes = ['PDF', 'Markdown', 'Word', 'Text', 'Image', 'Excel']
-const testFiles = Array.from({ length: 100 }, (_, index) => ({
-	id: String(index + 1),
-	name: `file_${index + 1}.${fileTypes[index % fileTypes.length].toLowerCase()}`,
-	size: `${Math.floor(Math.random() * 10000) / 10}KB`,
-	uploadTime: new Date(Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000).toLocaleString(),
-	type: fileTypes[index % fileTypes.length]
-}))
-
-export default function KnowledgeFiles({ files, onFilesChange }: KnowledgeFilesProps) {
-	const handleUpload = (info: any) => {
-		if (info.file.status === 'done') {
-			message.success(`${info.file.name} file uploaded successfully`)
-		} else if (info.file.status === 'error') {
-			message.error(`${info.file.name} file upload failed.`)
-		}
-	}
-
-	const handleDelete = (id: string) => {
-		message.success('File deleted successfully')
-	}
-
-	return (
-		<div className={styles.knowledgeFiles}>
-			<div className={styles.uploadSection}>
-				<Upload name='file' action='/api/upload' onChange={handleUpload} showUploadList={false}>
-					<Button type='primary' icon={<UploadOutlined />} size='large'>
-						Upload Files
-					</Button>
-				</Upload>
-			</div>
-
-			<List
-				className={styles.fileList}
-				itemLayout='horizontal'
-				dataSource={testFiles}
-				renderItem={(item) => (
-					<List.Item
-						actions={[
-							<Button
-								key='delete'
-								type='text'
-								danger
-								icon={<DeleteOutlined />}
-								onClick={() => handleDelete(item.id)}
-							>
-								Delete
-							</Button>
-						]}
-					>
-						<List.Item.Meta
-							avatar={
-								<FileTextOutlined
-									style={{ fontSize: '24px', color: 'var(--color_text_grey)' }}
-								/>
-							}
-							title={item.name}
-							description={`${item.type} · ${item.size} · Uploaded on ${item.uploadTime}`}
-						/>
-					</List.Item>
-				)}
-			/>
-		</div>
-	)
-}
diff --git a/packages/xgen/pages/assistants/detail/components/CodeEditor.tsx b/packages/xgen/pages/assistants/detail/components/Script.tsx
similarity index 70%
rename from packages/xgen/pages/assistants/detail/components/CodeEditor.tsx
rename to packages/xgen/pages/assistants/detail/components/Script.tsx
index a6410ffb..76f531c7 100644
--- a/packages/xgen/pages/assistants/detail/components/CodeEditor.tsx
+++ b/packages/xgen/pages/assistants/detail/components/Script.tsx
@@ -1,17 +1,18 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import Editor from 'react-monaco-editor'
 import { useGlobal } from '@/context/app'
 import vars from '@/styles/preset/vars'
 import styles from '../index.less'
 
-interface CodeEditorProps {
+interface ScriptProps {
 	code: string
 	onChange: (code: string) => void
 }
 
-const AssistantCodeEditor: React.FC<CodeEditorProps> = ({ code, onChange }) => {
+const Script: React.FC<ScriptProps> = ({ code, onChange }) => {
 	const [value, setValue] = useState(code)
 	const global = useGlobal()
+	const editorRef = useRef<any>(null)
 
 	const theme = useMemo(() => (global.theme === 'dark' ? 'x-dark' : 'x-light'), [global.theme])
 
@@ -19,12 +20,31 @@ const AssistantCodeEditor: React.FC<CodeEditorProps> = ({ code, onChange }) => {
 		setValue(code)
 	}, [code])
 
+	useEffect(() => {
+		const resizeObserver = new ResizeObserver(() => {
+			if (editorRef.current) {
+				editorRef.current.layout()
+			}
+		})
+
+		const container = document.querySelector(`.${styles.script}`)
+		if (container) {
+			resizeObserver.observe(container)
+		}
+
+		return () => {
+			resizeObserver.disconnect()
+		}
+	}, [])
+
 	const handleChange = (newValue: string) => {
 		setValue(newValue)
 		onChange(newValue)
 	}
 
 	const editorDidMount = (editor: any, monaco: any) => {
+		editorRef.current = editor
+
 		monaco.editor.defineTheme('x-dark', {
 			base: 'vs-dark',
 			inherit: true,
@@ -47,10 +67,10 @@ const AssistantCodeEditor: React.FC<CodeEditorProps> = ({ code, onChange }) => {
 	}
 
 	return (
-		<div className={styles.codeEditor}>
+		<div className={styles.script}>
 			<Editor
 				width='100%'
-				height='calc(100vh - 300px)'
+				height='100%'
 				language='javascript'
 				theme={theme}
 				value={value}
@@ -72,4 +92,4 @@ const AssistantCodeEditor: React.FC<CodeEditorProps> = ({ code, onChange }) => {
 	)
 }
 
-export default AssistantCodeEditor
+export default Script
diff --git a/packages/xgen/pages/assistants/detail/components/Workflow.tsx b/packages/xgen/pages/assistants/detail/components/Workflow.tsx
index 4e006990..5a49ac93 100644
--- a/packages/xgen/pages/assistants/detail/components/Workflow.tsx
+++ b/packages/xgen/pages/assistants/detail/components/Workflow.tsx
@@ -1,10 +1,87 @@
-import { Empty } from 'antd'
+import { useState, useRef, useEffect } from 'react'
+import Editor from 'react-monaco-editor'
+import { useGlobal } from '@/context/app'
+import vars from '@/styles/preset/vars'
 import styles from '../index.less'
 
-const Workflow: React.FC = () => {
+const defaultWorkflow = {
+	version: '1.0',
+	name: 'Example Workflow',
+	description: 'This is an example workflow configuration',
+	triggers: [],
+	actions: [],
+	conditions: []
+}
+
+const Workflow = () => {
+	const [value, setValue] = useState(JSON.stringify(defaultWorkflow, null, 2))
+	const global = useGlobal()
+	const theme = global.theme === 'dark' ? 'x-dark' : 'x-light'
+	const editorRef = useRef<any>(null)
+
+	useEffect(() => {
+		const resizeObserver = new ResizeObserver(() => {
+			if (editorRef.current) {
+				editorRef.current.layout()
+			}
+		})
+
+		const container = document.querySelector(`.${styles.workflow}`)
+		if (container) {
+			resizeObserver.observe(container)
+		}
+
+		return () => {
+			resizeObserver.disconnect()
+		}
+	}, [])
+
+	const editorDidMount = (editor: any, monaco: any) => {
+		editorRef.current = editor
+
+		monaco.editor.defineTheme('x-dark', {
+			base: 'vs-dark',
+			inherit: true,
+			rules: [],
+			colors: {
+				'editor.background': vars[global.theme].color_bg_nav
+			}
+		})
+
+		monaco.editor.defineTheme('x-light', {
+			base: 'vs',
+			inherit: true,
+			rules: [],
+			colors: {
+				'editor.background': vars[global.theme].color_bg_nav
+			}
+		})
+
+		monaco.editor.setTheme(theme)
+	}
+
 	return (
 		<div className={styles.workflow}>
-			<Empty description='Workflow editor coming soon' image={Empty.PRESENTED_IMAGE_SIMPLE} />
+			<Editor
+				width='100%'
+				height='100%'
+				language='json'
+				theme={theme}
+				value={value}
+				onChange={setValue}
+				editorDidMount={editorDidMount}
+				options={{
+					wordWrap: 'on',
+					formatOnPaste: true,
+					formatOnType: true,
+					renderLineHighlight: 'none',
+					smoothScrolling: true,
+					padding: { top: 15 },
+					lineNumbersMinChars: 3,
+					minimap: { enabled: false },
+					scrollbar: { verticalScrollbarSize: 8, horizontalSliderSize: 8, useShadows: false }
+				}}
+			/>
 		</div>
 	)
 }
diff --git a/packages/xgen/pages/assistants/detail/index.less b/packages/xgen/pages/assistants/detail/index.less
index 4352e217..067aa077 100644
--- a/packages/xgen/pages/assistants/detail/index.less
+++ b/packages/xgen/pages/assistants/detail/index.less
@@ -108,7 +108,7 @@
 				border: none !important;
 				border-radius: 4px;
 				transition: all 0.3s;
-				color: var(--color_text_grey);
+				color: color-mix(in srgb, var(--color_text) 70%, var(--color_text_grey));
 				background: transparent !important;
 				font-size: 13px;
 
@@ -121,7 +121,10 @@
 				}
 
 				&:hover {
-					color: var(--color_text);
+					color: var(--color_main);
+					.xgen-tabs-tab-btn {
+						color: var(--color_main);
+					}
 				}
 
 				&.xgen-tabs-tab-active {
@@ -155,7 +158,7 @@
 				}
 
 				.xgen-tabs-nav-list {
-					background: var(--color_border);
+					background: color-mix(in srgb, var(--color_border) 70%, transparent);
 					padding: 3px;
 					border-radius: 6px;
 				}
@@ -202,7 +205,27 @@
 	height: 100%;
 	max-width: 720px;
 	margin: 0 auto;
-	overflow: auto;
+	padding: 0 24px 24px;
+	overflow-y: auto;
+
+	&::-webkit-scrollbar {
+		width: 6px;
+		height: 6px;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background: var(--color_border);
+		border-radius: 3px;
+
+		&:hover {
+			background: var(--color_text_grey);
+		}
+	}
+
+	&::-webkit-scrollbar-track {
+		background: var(--color_border_soft);
+		border-radius: 3px;
+	}
 
 	:global {
 		.xgen-form-item {
@@ -210,6 +233,8 @@
 
 			.xgen-form-item-control-input {
 				background-color: var(--color_bg_menu);
+				border-radius: 8px;
+				padding: 2px;
 			}
 		}
 
@@ -299,7 +324,7 @@
 	}
 }
 
-.knowledgeFiles {
+.files {
 	height: 100%;
 	max-width: 800px;
 	margin: 0 auto;
@@ -309,101 +334,130 @@
 	display: flex;
 	flex-direction: column;
 
-	.uploadSection {
+	.filesHeader {
 		display: flex;
-		justify-content: center;
+		justify-content: space-between;
+		align-items: center;
 		margin-bottom: 24px;
 		flex-shrink: 0;
 
+		h5 {
+			color: var(--color_text);
+			font-size: 15px;
+			font-weight: 500;
+		}
+
 		:global {
-			.xgen-upload-wrapper {
-				.xgen-btn {
-					height: 40px;
-					padding: 0 24px;
-					font-size: 14px;
-					border-radius: 8px;
+			.xgen-btn.xgen-btn-primary {
+				height: 32px;
+				min-height: 32px;
+				padding: 0 12px;
+				font-size: 13px;
+				border-radius: 6px;
+				line-height: 1;
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				font-weight: 400;
+				box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
+				border: 1px solid var(--color_main);
+				background: var(--color_main);
+				color: #fff;
+
+				.anticon {
+					font-size: 13px;
+					margin-right: 3px;
+					position: relative;
+					top: 1px;
+				}
+
+				&:hover {
+					border-color: var(--color_main_hover);
+					background: var(--color_main_hover);
 				}
 			}
 		}
 	}
 
-	.fileList {
+	.filesTable {
 		flex: 1;
-		overflow-y: auto;
-		padding-right: 4px;
-		margin: 0;
-
-		&::-webkit-scrollbar {
-			width: 6px;
-		}
-
-		&::-webkit-scrollbar-thumb {
-			background-color: var(--color_border);
-			border-radius: 3px;
-		}
-
-		&::-webkit-scrollbar-track {
-			background-color: transparent;
-		}
+		overflow: hidden;
 
 		:global {
-			.xgen-list-item {
-				padding: 16px 24px;
-				transition: all 0.3s;
-				background: var(--color_bg_nav);
-				border-radius: 12px;
-				margin-bottom: 12px;
-
-				&:last-child {
-					margin-bottom: 0;
+			.xgen-table-body {
+				&::-webkit-scrollbar {
+					width: 6px;
+					height: 6px;
 				}
 
-				&:hover {
+				&::-webkit-scrollbar-thumb {
 					background: var(--color_border);
-				}
+					border-radius: 3px;
 
-				.xgen-list-item-meta {
-					align-items: center;
-
-					.xgen-list-item-meta-title {
-						margin-bottom: 4px;
-						color: var(--color_text);
-						font-weight: 500;
-					}
-
-					.xgen-list-item-meta-description {
-						color: var(--color_text_grey);
-						font-size: 13px;
+					&:hover {
+						background: var(--color_text_grey);
 					}
 				}
 
-				.xgen-list-item-action {
-					margin-left: 16px;
+				&::-webkit-scrollbar-track {
+					background: var(--color_border_soft);
+					border-radius: 3px;
 				}
+			}
+		}
+	}
 
-				.xgen-btn {
-					border-radius: 6px;
-					padding: 4px 12px;
-					height: 32px;
+	:global {
+		.xgen-table {
+			height: 100%;
 
-					&.xgen-btn-text {
-						&:hover {
-							background: var(--color_bg_nav);
-						}
-					}
-				}
+			.xgen-table-container {
+				border-radius: 8px;
+				overflow: hidden;
+			}
+
+			.xgen-table-thead > tr > th {
+				background: var(--color_bg_nav);
+				border-bottom: 1px solid var(--color_border);
+				color: var(--color_text);
+				font-weight: 500;
+			}
+
+			.xgen-table-tbody > tr > td {
+				border-bottom: 1px solid var(--color_border);
+				transition: background 0.3s;
+			}
+
+			.xgen-table-tbody > tr:hover > td {
+				background: var(--color_bg_nav);
+			}
+
+			.xgen-table-cell {
+				color: var(--color_text);
+			}
+
+			.xgen-table-body {
+				overflow-y: auto !important;
+				overflow-x: hidden !important;
 			}
 		}
 	}
 }
 
-.workflow {
-	height: 100%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
+.workflow,
+.functions,
+.script {
+	height: calc(100vh - 64px - 24px - 48px - 48px - 48px);
+	border-radius: 8px;
+	overflow: hidden;
 	background: var(--color_bg_nav);
-	border-radius: 12px;
+
+	:global {
+		.monaco-editor {
+			border-radius: 8px;
+			overflow: hidden;
+		}
+	}
 }
 
 .codeEditor {