diff --git a/packages/xgen/layouts/wrappers/Chat/Container/Header.tsx b/packages/xgen/layouts/wrappers/Chat/Container/Header.tsx
index 8983c14..05eb5ce 100644
--- a/packages/xgen/layouts/wrappers/Chat/Container/Header.tsx
+++ b/packages/xgen/layouts/wrappers/Chat/Container/Header.tsx
@@ -4,7 +4,7 @@ import { container } from 'tsyringe'
 import { GlobalModel } from '@/context/app'
 import Icon from '@/widgets/Icon'
 import clsx from 'clsx'
-import './styles.css'
+import './header.less'
 
 interface HeaderProps {
 	openSidebar: (temporaryLink?: string, title?: string) => void
@@ -223,29 +223,30 @@ const Header: FC<HeaderProps> = ({
 
 		const calculateVisibleItems = () => {
 			// Get the header element's width
-			const header = container.closest('.header') as HTMLElement
+			const header = container.closest('.header_container') as HTMLElement
 			if (!header) return
 
 			// Get the header-right width
-			const headerRight = header.querySelector('.header-right') as HTMLElement
+			const headerRight = header.querySelector('.header_right') as HTMLElement
 			if (!headerRight) return
 
 			// Calculate available width
 			const headerWidth = header.getBoundingClientRect().width
 			const headerRightWidth = headerRight.getBoundingClientRect().width
-			const logo = header.querySelector('.header-logo') as HTMLElement
-			const createNew = header.querySelector('.current-function') as HTMLElement
+			const logo = header.querySelector('.header_logo') as HTMLElement
+			const createNew = header.querySelector('.header_current_function') as HTMLElement
 
 			if (!logo || !createNew) return
 
-			const usedWidth =
-				headerRightWidth +
-				logo.getBoundingClientRect().width +
-				createNew.getBoundingClientRect().width +
-				64 // Total padding and gaps
+			// Add some buffer for padding and spacing
+			const BUFFER_SPACE = 80
+			const logoWidth = logo.getBoundingClientRect().width
+			const createNewWidth = createNew.getBoundingClientRect().width
+
+			const usedWidth = headerRightWidth + logoWidth + createNewWidth + BUFFER_SPACE
 
 			const availableWidth = headerWidth - usedWidth
-			const moreMenuWidth = 40
+			const moreMenuWidth = 48
 			let currentWidth = 0
 			let count = 0
 
@@ -255,7 +256,10 @@ const Header: FC<HeaderProps> = ({
 				const remainingItems = itemWidthsRef.current.length - (i + 1)
 				const needMoreMenu = remainingItems > 0
 
-				if (currentWidth + itemWidth + (needMoreMenu ? moreMenuWidth : 0) <= availableWidth) {
+				// Add the "More" menu width if there will be hidden items
+				const totalWidthNeeded = currentWidth + itemWidth + (needMoreMenu ? moreMenuWidth : 0)
+
+				if (totalWidthNeeded <= availableWidth) {
 					currentWidth += itemWidth
 					count = i + 1
 				} else {
@@ -263,7 +267,15 @@ const Header: FC<HeaderProps> = ({
 				}
 			}
 
-			setVisibleMenuItems(Math.max(1, count))
+			// Ensure we show at least one item
+			const finalCount = Math.max(1, Math.min(count, itemWidthsRef.current.length))
+
+			// If we're showing all items except one, show the more menu anyway
+			if (finalCount === itemWidthsRef.current.length - 1) {
+				setVisibleMenuItems(finalCount - 1)
+			} else {
+				setVisibleMenuItems(finalCount)
+			}
 		}
 
 		// Initial measurement and calculation
@@ -279,7 +291,7 @@ const Header: FC<HeaderProps> = ({
 		const resizeObserver = new ResizeObserver(recalculate)
 
 		// Observe the header element instead
-		const header = container.closest('.header')
+		const header = container.closest('.header_container')
 		if (header) {
 			resizeObserver.observe(header)
 		}
@@ -322,10 +334,10 @@ const Header: FC<HeaderProps> = ({
 		const activeFunction = commonFunctions.find((func) => func.id === activeCommonFunctionId)
 
 		return (
-			<div className='header-normal'>
-				<div className='header-left'>
+			<div className='header_normal'>
+				<div className='header_left'>
 					{/* Logo */}
-					<div className='header-logo'>
+					<div className='header_logo'>
 						<img src={global.app_info?.logo} alt='Logo' />
 					</div>
 
@@ -336,7 +348,7 @@ const Header: FC<HeaderProps> = ({
 								key: func.id,
 								label: (
 									<div
-										className={clsx('common-function-item', {
+										className={clsx('header_common_function_item', {
 											active: func.id === activeCommonFunctionId
 										})}
 									>
@@ -346,12 +358,12 @@ const Header: FC<HeaderProps> = ({
 								),
 								onClick: func.onClick
 							})),
-							className: 'common-functions-dropdown'
+							className: 'header_common_functions_dropdown'
 						}}
 						trigger={['hover']}
 					>
 						<div
-							className={clsx('current-function', {
+							className={clsx('header_current_function', {
 								active: !!activeCommonFunctionId
 							})}
 						>
@@ -364,9 +376,9 @@ const Header: FC<HeaderProps> = ({
 					</Dropdown>
 
 					{/* Hidden container for measurements */}
-					<div className='menu-items-measure' ref={measureContainerRef}>
+					<div className='header_menu_items_measure' ref={measureContainerRef}>
 						{menuItems.map((item) => (
-							<div key={item.id} className='menu-item'>
+							<div key={item.id} className='header_menu_item'>
 								{item.icon && <Icon name={item.icon} size={14} />}
 								<span>{item.name}</span>
 							</div>
@@ -374,11 +386,11 @@ const Header: FC<HeaderProps> = ({
 					</div>
 
 					{/* Visible menu items */}
-					<div className='menu-items' ref={menuContainerRef}>
+					<div className='header_menu_items' ref={menuContainerRef}>
 						{finalVisibleItems.map((item) => (
 							<div
 								key={item.id}
-								className={clsx('menu-item', {
+								className={clsx('header_menu_item', {
 									active: item.isActive
 								})}
 								onClick={item.onClick}
@@ -394,7 +406,7 @@ const Header: FC<HeaderProps> = ({
 										key: item.id,
 										label: (
 											<div
-												className={clsx('menu-item', {
+												className={clsx('header_menu_item', {
 													active: item.isActive
 												})}
 											>
@@ -406,11 +418,11 @@ const Header: FC<HeaderProps> = ({
 										),
 										onClick: item.onClick
 									})),
-									className: 'more-menu-items'
+									className: 'header_more_menu_items'
 								}}
 								trigger={['hover']}
 							>
-								<div className='more-menu'>
+								<div className='header_more_menu'>
 									<Icon name='material-more_horiz' size={14} />
 								</div>
 							</Dropdown>
@@ -418,17 +430,17 @@ const Header: FC<HeaderProps> = ({
 					</div>
 				</div>
 
-				<div className='header-right'>
+				<div className='header_right'>
 					<Tooltip title='Terminal'>
 						<Button
 							type='text'
-							className='header-icon-btn'
+							className='header_icon_btn'
 							icon={<Icon name='material-terminal' size={16} />}
 						/>
 					</Tooltip>
 					<Button
 						type='text'
-						className='header-icon-btn'
+						className='header_icon_btn'
 						icon={<Icon name='material-close' size={16} />}
 						onClick={closeSidebar}
 					/>
@@ -438,14 +450,14 @@ const Header: FC<HeaderProps> = ({
 	}
 
 	const renderTemporaryView = () => (
-		<div className='header-temporary'>
-			<div className='header-left'>
-				<span className='current-page'>{currentPageName}</span>
+		<div className='header_temporary'>
+			<div className='header_left'>
+				<span className='header_current_page'>{currentPageName}</span>
 			</div>
-			<div className='header-right'>
+			<div className='header_right'>
 				<Button
 					type='text'
-					className='header-icon-btn back-btn'
+					className='header_icon_btn back-btn'
 					style={{ marginRight: '2px', width: 'auto' }}
 					onClick={onBackToNormal}
 				>
@@ -454,7 +466,7 @@ const Header: FC<HeaderProps> = ({
 				</Button>
 				<Button
 					type='text'
-					className='header-icon-btn'
+					className='header_icon_btn'
 					icon={<Icon name='material-close' size={16} />}
 					onClick={closeSidebar}
 				/>
@@ -462,7 +474,9 @@ const Header: FC<HeaderProps> = ({
 		</div>
 	)
 
-	return <header className='header'>{isTemporaryView ? renderTemporaryView() : renderNormalMenu()}</header>
+	return (
+		<header className='header_container'>{isTemporaryView ? renderTemporaryView() : renderNormalMenu()}</header>
+	)
 }
 
 export default Header
diff --git a/packages/xgen/layouts/wrappers/Chat/Container/Menu.tsx b/packages/xgen/layouts/wrappers/Chat/Container/Menu.tsx
index 510bc0d..3a13651 100644
--- a/packages/xgen/layouts/wrappers/Chat/Container/Menu.tsx
+++ b/packages/xgen/layouts/wrappers/Chat/Container/Menu.tsx
@@ -2,7 +2,7 @@ import { FC, useState, useEffect, useRef } from 'react'
 import { Input } from 'antd'
 import Icon from '@/widgets/Icon'
 import clsx from 'clsx'
-import './styles.css'
+import './menu.less'
 
 interface MenuItem {
 	id: string
@@ -208,9 +208,9 @@ const MenuItem: FC<{
 	}
 
 	return (
-		<div className={clsx('menu-item-wrapper', `level-${level}`)}>
+		<div className={clsx('menu_item_wrapper', `level-${level}`)}>
 			<div
-				className={clsx('menu-item', {
+				className={clsx('menu_item', {
 					expanded: isExpanded,
 					'has-children': hasChildren,
 					active: isActive(item)
@@ -226,21 +226,21 @@ const MenuItem: FC<{
 					}
 				}}
 			>
-				<div className='menu-item-content'>
+				<div className='menu_item_content'>
 					{item.icon && <Icon name={item.icon} size={16} />}
-					{item.image && <img src={item.image} alt={item.name} className='menu-item-image' />}
-					<span className='menu-item-name'>{item.name}</span>
+					{item.image && <img src={item.image} alt={item.name} className='menu_item_image' />}
+					<span className='menu_item_name'>{item.name}</span>
 				</div>
 				{hasChildren && (
 					<Icon
 						name={isExpanded ? 'material-expand_less' : 'material-expand_more'}
 						size={16}
-						className={clsx('expand-icon', { active: isActive(item) })}
+						className={clsx('menu_expand_icon', { active: isActive(item) })}
 					/>
 				)}
 			</div>
 			{hasChildren && isExpanded && (
-				<div className='menu-children'>
+				<div className='menu_children'>
 					{item.children?.map((child) => (
 						<MenuItem
 							key={child.id}
@@ -277,8 +277,8 @@ const Menu: FC<MenuProps> = ({ isVisible = true, onToggle }) => {
 	}
 
 	return (
-		<aside className={clsx('menu', { hidden: !isVisible })} ref={menuRef}>
-			<div className='menu-search'>
+		<aside className={clsx('menu_container', { hidden: !isVisible })} ref={menuRef}>
+			<div className='menu_search'>
 				<Input
 					prefix={<Icon name='material-search' size={16} />}
 					placeholder='Search menu...'
@@ -286,7 +286,7 @@ const Menu: FC<MenuProps> = ({ isVisible = true, onToggle }) => {
 					onChange={(e) => setSearchTerm(e.target.value)}
 				/>
 			</div>
-			<div className='menu-items-container'>
+			<div className='menu_items_container'>
 				{testMenuItems.map((item) => (
 					<MenuItem
 						key={item.id}
@@ -301,7 +301,7 @@ const Menu: FC<MenuProps> = ({ isVisible = true, onToggle }) => {
 				))}
 			</div>
 			{isVisible && (
-				<button className='menu-toggle menu-toggle-close' onClick={onToggle}>
+				<button className='menu_toggle menu_toggle_close' onClick={onToggle}>
 					<Icon name='material-first_page' size={16} />
 				</button>
 			)}
diff --git a/packages/xgen/layouts/wrappers/Chat/Container/header.less b/packages/xgen/layouts/wrappers/Chat/Container/header.less
new file mode 100644
index 0000000..a007cff
--- /dev/null
+++ b/packages/xgen/layouts/wrappers/Chat/Container/header.less
@@ -0,0 +1,284 @@
+.header_container {
+	height: 48px;
+	border-bottom: 1px solid var(--color_border_light);
+	padding: 0 16px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	background: rgba(255, 255, 255, 0.3);
+	backdrop-filter: blur(10px);
+	-webkit-backdrop-filter: blur(10px);
+	position: relative;
+	z-index: 100;
+	font-size: 13px;
+	color: var(--color_text_light);
+}
+
+[data-theme='dark'] .header_container {
+	background: rgba(47, 47, 52, 0.3);
+}
+
+.header_normal,
+.header_temporary {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.header_left {
+	display: flex;
+	align-items: center;
+	gap: 16px;
+	flex: 1;
+	min-width: 0;
+}
+
+.header_logo {
+	height: 24px;
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+
+	img {
+		height: 100%;
+		width: auto;
+	}
+}
+
+.header_current_function {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 4px 8px;
+	cursor: pointer;
+	font-size: 13px;
+	color: var(--color_text_light);
+	transition: all 0.3s;
+	line-height: 1;
+	border-radius: 4px;
+	flex-shrink: 0;
+
+	i {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	&:hover {
+		background: var(--color_border_soft);
+	}
+
+	&.active {
+		background: var(--color_border_soft);
+		color: var(--color_main);
+		font-weight: 500;
+	}
+}
+
+.header_common_functions_dropdown {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+	gap: 1px;
+	background: var(--color_bg_menu);
+	border-radius: 8px;
+	box-shadow: var(--shadow);
+	padding: 4px;
+}
+
+.header_common_function_item {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 6px 12px;
+	cursor: pointer;
+	font-size: 13px;
+	color: var(--color_text_light);
+	transition: all 0.3s;
+	line-height: 1;
+	border-radius: 6px;
+
+	i {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	&.active {
+		background: var(--color_border_soft);
+		color: var(--color_main);
+		font-weight: 500;
+	}
+}
+
+.header_menu_items {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	height: 100%;
+	overflow: hidden;
+	flex: 1;
+	min-width: 0;
+}
+
+.header_menu_items_measure {
+	position: absolute;
+	visibility: hidden;
+	display: flex;
+	white-space: nowrap;
+	pointer-events: none;
+	left: -9999px;
+}
+
+.header_menu_item {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 4px 8px;
+	border-radius: 6px;
+	cursor: pointer;
+	transition: all 0.2s ease;
+	font-size: 13px;
+	color: var(--color_text_light);
+	white-space: nowrap;
+
+	i {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+	}
+
+	span {
+		white-space: nowrap;
+	}
+
+	&:hover {
+		color: var(--color_text);
+	}
+
+	&.expanded {
+		background: var(--color_border_soft);
+	}
+
+	&.active {
+		background: var(--color_border_soft);
+		color: var(--color_main);
+		font-weight: 500;
+	}
+
+	&.hidden {
+		display: none;
+	}
+}
+
+.header_more_menu {
+	display: flex;
+	align-items: center;
+	padding: 4px 8px;
+	border-radius: 4px;
+	cursor: pointer;
+	color: var(--color_text_light);
+	font-size: 13px;
+	line-height: 1;
+	flex-shrink: 0;
+
+	i {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	&:hover {
+		background: var(--color_border_soft);
+	}
+
+	&.active {
+		background: var(--color_border_soft);
+		color: var(--color_main);
+	}
+}
+
+.header_more_menu_items {
+	background: var(--color_bg_menu);
+	border-radius: 8px;
+	box-shadow: var(--shadow);
+	min-width: 160px;
+	padding: 4px;
+
+	.header_menu_item {
+		padding: 4px 8px;
+		border-radius: 4px;
+		color: var(--color_text_light);
+		transition: all 0.2s ease;
+		font-size: 13px;
+		line-height: 1;
+
+		&.active {
+			background: var(--color_border_soft);
+			color: var(--color_main);
+			font-weight: 500;
+		}
+	}
+}
+
+.header_right {
+	display: flex;
+	align-items: center;
+	gap: 0;
+	flex-shrink: 0;
+}
+
+.header_current_page {
+	font-size: 13px;
+	font-weight: 500;
+	color: var(--color_text_light);
+	line-height: 1;
+}
+
+.header_icon_btn {
+	padding: 2px;
+	height: 28px;
+	width: 28px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--color_text_light);
+	background: transparent;
+
+	&.back-btn {
+		display: inline-flex !important;
+		align-items: center !important;
+		font-size: 12px;
+		gap: 0px;
+		width: auto !important;
+
+		&:hover i,
+		&:hover span {
+			transform: none;
+			font-weight: 500;
+			color: var(--color_main);
+		}
+	}
+
+	&:hover {
+		background: transparent;
+		color: var(--color_text_light);
+	}
+
+	i {
+		transition: all 0.2s ease;
+		color: inherit;
+	}
+
+	span {
+		transition: all 0.2s ease;
+		color: inherit;
+	}
+
+	&:hover i,
+	&:hover span {
+		transform: scale(1.1);
+		color: var(--color_main);
+	}
+}
diff --git a/packages/xgen/layouts/wrappers/Chat/Container/index.tsx b/packages/xgen/layouts/wrappers/Chat/Container/index.tsx
index a432ab6..e4e3317 100644
--- a/packages/xgen/layouts/wrappers/Chat/Container/index.tsx
+++ b/packages/xgen/layouts/wrappers/Chat/Container/index.tsx
@@ -2,7 +2,7 @@ import { FC, PropsWithChildren, useState, useEffect, useRef } from 'react'
 import Icon from '@/widgets/Icon'
 import Header from './Header'
 import Menu from './Menu'
-import './styles.css'
+import './style.less'
 
 interface ContainerProps {
 	openSidebar: (temporaryLink?: string, title?: string) => void
@@ -71,9 +71,9 @@ const Container: FC<PropsWithChildren<ContainerProps>> = ({
 			<div className='mainContent' ref={mainContentRef}>
 				{showMenu && <Menu isVisible={isMenuVisible} onToggle={toggleMenu} />}
 				<main className='content' ref={contentRef}>
-					<div className='content-wrapper'>{children}</div>
+					<div className='content_wrapper'>{children}</div>
 					{showMenu && !isMenuVisible && (
-						<button className='menu-toggle menu-toggle-open' onClick={toggleMenu}>
+						<button className='menu_toggle menu_toggle_open' onClick={toggleMenu}>
 							<Icon name='material-menu' size={14} />
 						</button>
 					)}
diff --git a/packages/xgen/layouts/wrappers/Chat/Container/menu.less b/packages/xgen/layouts/wrappers/Chat/Container/menu.less
new file mode 100644
index 0000000..c2532c2
--- /dev/null
+++ b/packages/xgen/layouts/wrappers/Chat/Container/menu.less
@@ -0,0 +1,318 @@
+.menu_container {
+	width: 240px;
+	border-right: 1px solid var(--color_border_light);
+	height: 100%;
+	background: rgba(255, 255, 255, 0.3);
+	backdrop-filter: blur(10px);
+	-webkit-backdrop-filter: blur(10px);
+	transition: all 0.3s ease;
+	position: relative;
+	z-index: 1;
+	flex-shrink: 0;
+	transform: translateX(0);
+	opacity: 1;
+	display: flex;
+	flex-direction: column;
+
+	&.hidden {
+		width: 0;
+		padding: 0;
+		margin: 0;
+		border: none;
+		transform: translateX(-100%);
+		opacity: 0;
+	}
+}
+
+[data-theme='dark'] .menu_container {
+	background: rgba(47, 47, 52, 0.3);
+}
+
+.menu_items_container {
+	padding: 8px;
+	flex: 1;
+	overflow-y: auto;
+	min-height: 0;
+
+	&::-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;
+	}
+}
+
+.menu_toggle {
+	position: absolute;
+	bottom: 12px;
+	width: 24px;
+	height: 24px;
+	border-radius: 12px;
+	background: var(--color_main);
+	color: white;
+	border: none;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	box-shadow: var(--shadow);
+	transition: all 0.3s ease;
+	z-index: 100;
+
+	&.menu_toggle_open {
+		left: 12px;
+	}
+
+	i {
+		font-size: 14px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	&:hover {
+		transform: scale(1.05);
+		background: var(--color_main_hover);
+	}
+}
+
+.menu_search {
+	height: 60px;
+	padding: 16px;
+	border-bottom: 1px solid var(--color_border_light);
+	display: flex;
+	align-items: center;
+
+	.ant-input-affix-wrapper {
+		border-radius: 6px;
+		border: 1px solid var(--color_border_light);
+		background: rgba(255, 255, 255, 0.3);
+		backdrop-filter: blur(10px);
+		-webkit-backdrop-filter: blur(10px);
+		height: 28px;
+
+		.ant-input-prefix {
+			margin-right: 4px;
+		}
+
+		&:hover,
+		&:focus-within {
+			border-color: var(--color_main);
+		}
+	}
+
+	.ant-input {
+		background: transparent;
+		font-size: 13px;
+	}
+}
+
+[data-theme='dark'] .menu_search .ant-input-affix-wrapper {
+	background: rgba(47, 47, 52, 0.3);
+}
+
+.menu_item_wrapper {
+	margin: 2px 0;
+
+	&.level-0 > .menu_item {
+		margin-bottom: 4px;
+	}
+}
+
+.menu_item {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 8px;
+	border-radius: 6px;
+	cursor: pointer;
+	transition: all 0.2s ease;
+	font-size: 13px;
+	color: var(--color_text_light);
+
+	&:hover {
+		background: var(--color_border_soft);
+		color: var(--color_text);
+	}
+
+	&.expanded {
+		background: var(--color_border_soft);
+	}
+
+	&.active {
+		background: var(--color_border_soft);
+		color: var(--color_main);
+		font-weight: 500;
+	}
+
+	&.hidden {
+		display: none;
+	}
+
+	i {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+}
+
+.menu_item_content {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	flex: 1;
+	min-width: 0;
+
+	i {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		opacity: 0.7;
+		transition: opacity 0.2s ease;
+	}
+}
+
+.menu_item:hover .menu_item_content i,
+.menu_item.expanded .menu_item_content i {
+	opacity: 1;
+}
+
+.menu_item_image {
+	width: 16px;
+	height: 16px;
+	object-fit: cover;
+	border-radius: 4px;
+}
+
+.menu_item_name {
+	flex: 1;
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.menu_expand_icon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	opacity: 0.5;
+	transition: all 0.2s ease;
+}
+
+.menu_item:hover .menu_expand_icon {
+	opacity: 0.7;
+}
+
+.menu_item.expanded .menu_expand_icon {
+	opacity: 1;
+}
+
+.menu_children {
+	padding-left: 24px;
+}
+
+.level-1 .menu_item {
+	font-size: 12px;
+}
+
+.level-2 .menu_item {
+	font-size: 12px;
+	padding: 6px 8px;
+}
+
+.menu_items_measure {
+	position: absolute;
+	visibility: hidden;
+	display: flex;
+	white-space: nowrap;
+	pointer-events: none;
+	left: -9999px;
+
+	.menu_item {
+		position: static;
+		visibility: visible;
+		opacity: 0;
+	}
+}
+
+.menu_close_btn {
+	position: absolute;
+	bottom: 12px;
+	right: 12px;
+	color: var(--color_text_light);
+
+	&:hover {
+		background: transparent;
+		color: var(--color_main);
+	}
+
+	i {
+		transition: all 0.2s ease;
+		color: inherit;
+
+		&:hover {
+			transform: scale(1.1);
+		}
+	}
+}
+
+.menu_toggle_close {
+	padding: 2px;
+	height: 28px;
+	width: 28px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--color_text_light);
+	background: transparent;
+	position: fixed;
+	bottom: 12px;
+	right: 12px;
+	border: none;
+	cursor: pointer;
+	box-shadow: none;
+	border-radius: 0;
+	z-index: 2;
+
+	&:hover {
+		background: transparent;
+		color: var(--color_text_light);
+	}
+
+	i {
+		transition: all 0.2s ease;
+		color: inherit;
+
+		&:hover {
+			transform: scale(1.1);
+			color: var(--color_main);
+		}
+	}
+}
+
+@media (max-width: 720px) {
+	.menu_container {
+		position: fixed;
+		left: -240px;
+		top: 48px;
+		bottom: 0;
+		box-shadow: var(--shadow);
+
+		&.visible {
+			left: 0;
+		}
+	}
+}
diff --git a/packages/xgen/layouts/wrappers/Chat/Container/style.less b/packages/xgen/layouts/wrappers/Chat/Container/style.less
new file mode 100644
index 0000000..ddddbb8
--- /dev/null
+++ b/packages/xgen/layouts/wrappers/Chat/Container/style.less
@@ -0,0 +1,26 @@
+.container {
+	display: flex;
+	flex-direction: column;
+	height: 100vh;
+	margin-left: 2px;
+	background: var(--color_bg);
+}
+
+.mainContent {
+	display: flex;
+	flex: 1;
+	overflow: hidden;
+	position: relative;
+}
+
+.content {
+	flex: 1;
+	overflow-y: auto;
+	padding: 0;
+	min-width: 0;
+	position: relative;
+}
+
+.content_wrapper {
+	min-height: 100%;
+}
diff --git a/packages/xgen/layouts/wrappers/Chat/Container/styles.css b/packages/xgen/layouts/wrappers/Chat/Container/styles.css
deleted file mode 100644
index db71d16..0000000
--- a/packages/xgen/layouts/wrappers/Chat/Container/styles.css
+++ /dev/null
@@ -1,625 +0,0 @@
-.container {
-	display: flex;
-	flex-direction: column;
-	height: 100vh;
-	margin-left: 2px;
-	background: var(--color_bg);
-}
-
-.header {
-	height: 48px;
-	border-bottom: 1px solid var(--color_border_light);
-	padding: 0 16px;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	background: rgba(255, 255, 255, 0.3);
-	backdrop-filter: blur(10px);
-	-webkit-backdrop-filter: blur(10px);
-	position: relative;
-	z-index: 100;
-	font-size: 13px;
-	color: var(--color_text_light);
-}
-
-[data-theme='dark'] .header {
-	background: rgba(47, 47, 52, 0.3);
-}
-
-.header-normal,
-.header-temporary {
-	width: 100%;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-}
-
-.header-left {
-	display: flex;
-	align-items: center;
-	gap: 16px;
-}
-
-.header-logo {
-	height: 24px;
-	display: flex;
-	align-items: center;
-}
-
-.header-logo img {
-	height: 100%;
-	width: auto;
-}
-
-.current-function {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	padding: 4px 8px;
-	cursor: pointer;
-	font-size: 13px;
-	color: var(--color_text_light);
-	transition: all 0.3s;
-	line-height: 1;
-	border-radius: 4px;
-}
-
-.current-function i {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.current-function:hover {
-	background: var(--color_border_soft);
-}
-
-.current-function.active {
-	background: var(--color_border_soft);
-	color: var(--color_main);
-	font-weight: 500;
-}
-
-.common-functions-dropdown {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-	gap: 1px;
-	background: var(--color_bg_menu);
-	border-radius: 8px;
-	box-shadow: var(--shadow);
-}
-
-.common-function-item {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	padding: 6px 12px;
-	cursor: pointer;
-	font-size: 13px;
-	color: var(--color_text_light);
-	transition: all 0.3s;
-	line-height: 1;
-	border-radius: 6px;
-}
-
-.common-function-item i {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.common-function-item.active {
-	background: var(--color_border_soft);
-	color: var(--color_main);
-	font-weight: 500;
-}
-
-.menu-items {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	height: 100%;
-	overflow: hidden;
-	flex: 1;
-	min-width: 0;
-}
-
-.menu-item {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: 8px;
-	border-radius: 6px;
-	cursor: pointer;
-	transition: all 0.2s ease;
-	font-size: 13px;
-	color: var(--color_text_light);
-}
-
-.menu-item:hover {
-	background: var(--color_border_soft);
-	color: var(--color_text);
-}
-
-.menu-item.expanded {
-	background: var(--color_border_soft);
-}
-
-.menu-item.active {
-	background: var(--color_border_soft);
-	color: var(--color_main);
-	font-weight: 500;
-}
-
-.menu-item.active .menu-item-content i {
-	color: var(--color_main);
-	opacity: 1;
-}
-
-.menu-item i {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.menu-item.hidden {
-	display: none;
-}
-
-.menu-item:hover {
-	background: var(--color_border_soft);
-}
-
-.menu-item.active {
-	background: var(--color_border_soft);
-	color: var(--color_main);
-	font-weight: 500;
-}
-
-.more-menu {
-	display: flex;
-	align-items: center;
-	padding: 4px 8px;
-	border-radius: 4px;
-	cursor: pointer;
-	color: var(--color_text_light);
-	font-size: 13px;
-	line-height: 1;
-}
-
-.more-menu i {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.more-menu:hover {
-	background: var(--color_border_soft);
-}
-
-.more-menu.active {
-	background: var(--color_border_soft);
-	color: var(--color_main);
-}
-
-.more-menu-items {
-	background: var(--color_bg_menu);
-	border-radius: 8px;
-	box-shadow: var(--shadow);
-	min-width: 160px;
-	padding: 4px;
-}
-
-.more-menu-items .menu-item {
-	padding: 4px 8px;
-	border-radius: 4px;
-	color: var(--color_text_light);
-	transition: all 0.2s ease;
-	font-size: 13px;
-	line-height: 1;
-}
-
-.more-menu-items .menu-item:hover {
-	background: none;
-}
-
-.more-menu-items .menu-item.active {
-	background: var(--color_border_soft);
-	color: var(--color_main);
-	font-weight: 500;
-}
-
-.header-right {
-	display: flex;
-	align-items: center;
-	gap: 0;
-}
-
-.header-right .ant-btn {
-	color: var(--color_text_light);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.header-right .ant-btn i {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.header-right .ant-btn:hover {
-	color: var(--color_main);
-}
-
-.current-page {
-	font-size: 13px;
-	font-weight: 500;
-	color: var(--color_text_light);
-	line-height: 1;
-}
-
-.mainContent {
-	display: flex;
-	flex: 1;
-	overflow: hidden;
-	position: relative;
-}
-
-.menu {
-	width: 240px;
-	border-right: 1px solid var(--color_border_light);
-	height: 100%;
-	background: rgba(255, 255, 255, 0.3);
-	backdrop-filter: blur(10px);
-	-webkit-backdrop-filter: blur(10px);
-	transition: all 0.3s ease;
-	position: relative;
-	z-index: 1;
-	flex-shrink: 0;
-	transform: translateX(0);
-	opacity: 1;
-	display: flex;
-	flex-direction: column;
-}
-
-.menu-items-container {
-	padding: 8px;
-	flex: 1;
-	overflow-y: auto;
-	min-height: 0;
-}
-
-.menu-items-container::-webkit-scrollbar {
-	width: 6px;
-	height: 6px;
-}
-
-.menu-items-container::-webkit-scrollbar-thumb {
-	background: var(--color_border);
-	border-radius: 3px;
-}
-
-.menu-items-container::-webkit-scrollbar-thumb:hover {
-	background: var(--color_text_grey);
-}
-
-.menu-items-container::-webkit-scrollbar-track {
-	background: var(--color_border_soft);
-	border-radius: 3px;
-}
-
-.menu .menu-toggle {
-	position: absolute;
-	bottom: 12px;
-	right: 12px;
-}
-
-.menu.hidden {
-	width: 0;
-	padding: 0;
-	margin: 0;
-	border: none;
-	transform: translateX(-100%);
-	opacity: 0;
-}
-
-[data-theme='dark'] .menu {
-	background: rgba(47, 47, 52, 0.3);
-}
-
-.menu-toggle {
-	position: absolute;
-	bottom: 12px;
-	width: 24px;
-	height: 24px;
-	border-radius: 12px;
-	background: var(--color_main);
-	color: white;
-	border: none;
-	cursor: pointer;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	box-shadow: var(--shadow);
-	transition: all 0.3s ease;
-	z-index: 100;
-}
-
-.menu-toggle-open {
-	left: 12px;
-}
-
-.menu-toggle i {
-	font-size: 14px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.menu-toggle:hover {
-	transform: scale(1.05);
-	background: var(--color_main_hover);
-}
-
-@media (max-width: 720px) {
-	.menu {
-		position: fixed;
-		left: -240px;
-		top: 48px;
-		bottom: 0;
-		box-shadow: var(--shadow);
-	}
-
-	.menu.visible {
-		left: 0;
-	}
-}
-
-.menu-search {
-	height: 60px;
-	padding: 16px;
-	border-bottom: 1px solid var(--color_border_light);
-	display: flex;
-	align-items: center;
-}
-
-.menu-search .ant-input-affix-wrapper {
-	border-radius: 6px;
-	border: 1px solid var(--color_border_light);
-	background: rgba(255, 255, 255, 0.3);
-	backdrop-filter: blur(10px);
-	-webkit-backdrop-filter: blur(10px);
-	height: 28px;
-}
-
-.menu-search .ant-input-affix-wrapper .ant-input-prefix {
-	margin-right: 4px;
-}
-
-[data-theme='dark'] .menu-search .ant-input-affix-wrapper {
-	background: rgba(47, 47, 52, 0.3);
-}
-
-.menu-search .ant-input-affix-wrapper:hover,
-.menu-search .ant-input-affix-wrapper:focus-within {
-	border-color: var(--color_main);
-}
-
-.menu-search .ant-input {
-	background: transparent;
-	font-size: 13px;
-}
-
-.menu-item-wrapper {
-	margin: 2px 0;
-}
-
-.menu-item-wrapper.level-0 > .menu-item {
-	margin-bottom: 4px;
-}
-
-.menu-item-content {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	flex: 1;
-	min-width: 0;
-}
-
-.menu-item-content i {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	opacity: 0.7;
-	transition: opacity 0.2s ease;
-}
-
-.menu-item:hover .menu-item-content i,
-.menu-item.expanded .menu-item-content i {
-	opacity: 1;
-}
-
-.menu-item-image {
-	width: 16px;
-	height: 16px;
-	object-fit: cover;
-	border-radius: 4px;
-}
-
-.menu-item-name {
-	flex: 1;
-	min-width: 0;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.expand-icon {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	opacity: 0.5;
-	transition: all 0.2s ease;
-}
-
-.menu-item:hover .expand-icon {
-	opacity: 0.7;
-}
-
-.menu-item.expanded .expand-icon {
-	opacity: 1;
-}
-
-.menu-children {
-	padding-left: 24px;
-}
-
-.level-1 .menu-item {
-	font-size: 12px;
-}
-
-.level-2 .menu-item {
-	font-size: 12px;
-	padding: 6px 8px;
-}
-
-.content {
-	flex: 1;
-	overflow-y: auto;
-	padding: 0;
-	min-width: 0;
-	position: relative;
-}
-
-.content-wrapper {
-	min-height: 100%;
-}
-
-.menu-items-measure {
-	position: absolute;
-	visibility: hidden;
-	display: flex;
-	white-space: nowrap;
-	pointer-events: none;
-	left: -9999px;
-}
-
-.menu-items-measure .menu-item {
-	position: static;
-	visibility: visible;
-	opacity: 0;
-}
-
-.header .header-right {
-	display: flex;
-	gap: 0;
-}
-
-.header .header-right .header-icon-btn {
-	padding: 2px;
-	height: 28px;
-	width: 28px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	color: var(--color_text_light);
-	background: transparent;
-}
-
-.header .header-right .header-icon-btn.back-btn {
-	display: inline-flex !important;
-	align-items: center !important;
-	font-size: 12px;
-	gap: 0px;
-}
-
-.header .header-right .header-icon-btn.back-btn:hover i,
-.header .header-right .header-icon-btn.back-btn:hover span {
-	transform: none;
-	font-weight: 500;
-	color: var(--color_main);
-}
-
-.header .header-right .header-icon-btn:hover {
-	background: transparent;
-	color: var(--color_text_light);
-}
-
-.header .header-right .header-icon-btn i {
-	transition: all 0.2s ease;
-	color: inherit;
-}
-
-.header .header-right .header-icon-btn span {
-	transition: all 0.2s ease;
-	color: inherit;
-}
-
-.header .header-right .header-icon-btn:hover i,
-.header .header-right .header-icon-btn:hover span {
-	transform: scale(1.1);
-	color: var(--color_main);
-}
-
-.current-page {
-	font-size: 14px;
-	font-weight: 500;
-	color: var(--color_text_light);
-	line-height: 1;
-}
-
-.menu .menu-close-btn {
-	position: absolute;
-	bottom: 12px;
-	right: 12px;
-	color: var(--color_text_light);
-}
-
-.menu .menu-close-btn:hover {
-	background: transparent;
-	color: var(--color_main);
-}
-
-.menu .menu-close-btn i {
-	transition: all 0.2s ease;
-	color: inherit;
-}
-
-.menu .menu-close-btn:hover i {
-	transform: scale(1.1);
-}
-
-.menu .menu-toggle-close {
-	padding: 2px;
-	height: 28px;
-	width: 28px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	color: var(--color_text_light);
-	background: transparent;
-	position: fixed;
-	bottom: 12px;
-	right: 12px;
-	border: none;
-	cursor: pointer;
-	box-shadow: none;
-	border-radius: 0;
-	z-index: 2;
-}
-
-.menu .menu-toggle-close:hover {
-	background: transparent;
-	color: var(--color_text_light);
-}
-
-.menu .menu-toggle-close i {
-	transition: all 0.2s ease;
-	color: inherit;
-}
-
-.menu .menu-toggle-close:hover i {
-	transform: scale(1.1);
-	color: var(--color_main);
-}