@@ -1,8 +1,6 @@
 .wrapModelTitle {
 	margin-bottom: 20px;
 	margin-top: 15px;
-  // width: max-content;
-  width: 100% !important;
 	@media (max-width: 768px) {
 		margin: 0;
 		margin-top: 15px;
@@ -27,12 +27,6 @@ export default function Title(props: TitleProps) {
 				</Typography>
 			</Box>
 			<div style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
-				<Typography
-					className={styles.bigTitle}
-					style={{ fontSize: 35, fontWeight: 600 }}
-				>
-					{props.title}
-				</Typography>				
 				<div style={{ width: '100%' }} className={styles['title-box']}>
 					{props.rightSlot}
 				</div>
@@ -222,9 +222,22 @@ const Page: NextPageWithLayout<ChatBotPageProps> = () => {
 						type={'Чат-боты'}
 						linkBack={'/chat-bot'}
 					/>
+					{!desktop && (
+						<Stack sx={{ display: 'flex', alignItems: 'center', width: '100%', marginBottom: '15px', marginTop: '10px' }}>
+							<StaticTabs scope={scope} setScope={setScope} />
+						</Stack>
+					)}
+					
+					<ChatsContainer desktop={desktop} modelType={modelType} />
+					{desktop && (
+							<Stack sx={{ display: 'flex', alignItems: 'center', width: '25%', marginRight: 'calc(5% - 22px)', marginBottom: '15px', marginTop: '0px' }}>
+								<StaticTabs scope={scope} setScope={setScope} />
+							</Stack>
+						)}
 				</div>
 
 				<Box sx={{ height: 'calc(100% - 100px)' }} className={styles.main}>
+					
 					<Box className={styles.chatWindow}>
 						<Box sx={{ display: scope === 'playground' ? 'block' : 'none' }}>
 							<AllChatWindow
@@ -271,10 +284,7 @@ const Page: NextPageWithLayout<ChatBotPageProps> = () => {
 						</Box>
 					</Box>
 					<Box className={styles.settings}>
-						<Stack sx={{ display: 'flex', alignItems: 'center', width: '100%', marginBottom: '15px', marginTop: desktop ? '0px' : '10px' }}>
-							<StaticTabs scope={scope} setScope={setScope} />
-						</Stack>
-						<ChatsContainer desktop={desktop} modelType={modelType} />
+					
 						{desktop && (
 							<Stack id='text-models-tour-3' className='pd-30 bg-color-block border-radius-main' spacing={2}>
 								{botParams?.versions && botParams.versions?.length !== 0 && (
@@ -11,10 +11,24 @@
 }
 
 .header {
-	width: 70%;
+	display: flex;
+	align-items: flex-start;
+	width: calc(100%);
+	gap: 22px;
+
+	> *:first-child {
+		flex: 1;
+		min-width: 200px;
+	}
 
 	@media screen and (max-width: 768px) {
 		width: 100%;
+		flex-direction: column;
+		gap: 0;
+
+		> *:first-child {
+			flex: none;
+		}
 	}
 }
 
@@ -1,34 +1,98 @@
 .title {
+	color: #a4aab5;
+	font-weight: 600;
+	font-size: 14px;
+	letter-spacing: 0.1px;
+
 	@media screen and (max-width: 768px) {
 		display: none;
 	}
 }
 
+.createButtonWrapper {
+	position: relative;
+	display: flex;
+	align-items: center;
+
+	&::before {
+		content: '';
+		position: absolute;
+		top: 0;
+		right: 100%;
+		width: 40px;
+		height: 100%;
+		background: linear-gradient(to right, transparent, var(--new-ui-main-color));
+		pointer-events: none;
+	}
+}
+
+.createButton {
+	background-color: #151518;
+	padding: 9px 11px;
+	border-radius: 10px;
+	cursor: pointer;
+}
+
+.createButtonIcon {
+	margin-top: 3px;
+}
+
+.wrapDesktop {
+	margin: 0 0 15px 0;
+}
+
+.wrapMobile {
+	margin: 15px 0 0;
+}
+
 .wrap {
-	width: 100%;
+	margin-left: auto;
+	width: fit-content;
+	max-width: 70%;
 	background-color: var(--new-ui-main-color);
 	border-radius: 15px;
-	padding: 30px;
+	padding: 4px;
+	display: flex;
+	flex: 0 1 auto;
 	height: fit-content;
-	//margin-bottom: 15px;
 	max-height: 350px;
 	overflow-y: auto;
 
 	@media (max-width: 768px) {
-		padding: 10px 20px;
-    display: flex;
-    flex-direction: row-reverse;
+		max-width: 100%;
+		margin-top: 0;
+		padding-left: 8px;
+		display: flex;
 	}
 
 	.container {
-		display: block;
+		display: flex;
 		overflow: auto;
+		overflow-y: auto;
+		max-height: 210px;
+		scrollbar-width: thin;
+		scrollbar-color: rgba(217, 217, 217, 0.49) transparent;
+
+		&::-webkit-scrollbar {
+			width: 6px;
+		}
+
+		&::-webkit-scrollbar-track {
+			background: transparent;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background-color: rgba(217, 217, 217, 0.49);
+			border-radius: 6px;
+			border: 2px solid transparent;
+			background-clip: content-box;
+		}
 
 		@media (max-width: 768px) {
 			display: flex;
 			overflow-x: scroll;
 			scrollbar-width: none;
-      width: 100%;
+      		width: 100%;
 			-ms-overflow-style: none;
 			&::-webkit-scrollbar {
 				width: 2px;
@@ -38,6 +102,7 @@
 		.item {
 			padding: 0;
 			border: none;
+			min-width: 120px;
 			width: 100%;
 
 			&:hover {
@@ -46,42 +111,119 @@
 
 			.main {
 				display: flex;
+				align-items: center;
 				width: 100%;
+				height: 44px;
+				min-height: 44px;
 				border: none;
 				justify-content: space-between;
 				background-color: transparent;
 				border-radius: 13px;
-				padding: 12px 15px;
+				padding: 0 15px;
 				text-transform: none;
+				overflow: hidden;
 
 				&_active {
 					display: flex;
 					align-items: center;
 					justify-content: space-between;
+					gap: 10px;
 					width: 100%;
+					height: 44px;
+					min-height: 44px;
 					border: none;
 					border-radius: 13px;
-					padding: 12px 15px;
+					padding: 0 15px;
 					text-transform: none;
 					background-color: rgba(130, 128, 255, 0.15);
+					overflow: hidden;
 
 					@media (max-width: 768px) {
-						margin-right: 10px;
-						// margin-top: 10px;
 						width: 125px;
+						min-width: 125px;
 						max-width: 130px;
-						overflow: hidden;
-						padding: 8px 12px;
+						height: 36px;
+						min-height: 36px;
+						padding: 0 12px;
 						justify-content: space-between;
 					}
 				}
 
 				@media (max-width: 768px) {
-					// margin-top: 10px;
 					width: 100px;
+					min-width: 100px;
+					height: 36px;
+					min-height: 36px;
 					padding: 0;
 				}
 			}
+
+			.chatTitle {
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+				min-width: 0;
+				flex: 1;
+			}
+
+			.chatIcon {
+				flex-shrink: 0;
+				margin-top: 6px;
+			}
 		}
 	}
 }
+
+.textField {
+	:global(.MuiInputBase-input) {
+		padding: 12px 5px 12px 15px;
+		border-radius: 13px;
+		outline: none;
+		width: 100%;
+		color: #a4aab5;
+		font-size: 15px;
+		font-weight: 500;
+	}
+
+	:global(.MuiInputBase-root) {
+		border-radius: 13px !important;
+		background-color: rgba(130, 128, 255, 0.15);
+	}
+
+	:global(.MuiFormControl-root-MuiTextField-root) {
+		border-radius: 13px;
+	}
+}
+
+.saveIconBox {
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+}
+
+.menuPaper {
+	background-color: #303035;
+	border-radius: 15px;
+}
+
+.menuList {
+	background-color: #303035;
+	color: #8280ff;
+	border-radius: 15px;
+}
+
+.menuItem {
+	font-size: 15px;
+	font-weight: 500;
+	display: flex;
+	align-items: center;
+	gap: 10px;
+}
+
+.menuItemDelete {
+	font-size: 15px;
+	font-weight: 500;
+	display: flex;
+	align-items: center;
+	gap: 12px;
+}
@@ -5,8 +5,6 @@ import Image from 'next/image'
 import styles2 from '#/app/styles/account.module.css'
 import { Chat, Chats as ChatProps } from '#/features/chats'
 import { TooltipCustom } from '#/shared'
-import { makeThinScrollbar } from '#/shared/lib/constants/styles'
-
 import { DeleteMenuIcon, RenameMenuIcon, SaveRenameIcon } from './icons'
 
 import styles from './chats.module.scss'
@@ -80,44 +78,8 @@ export const Chats = ({ chats, currentChat, removeChat, setChat, chatSetting, cr
 	}
 
 	return (
-		<Box className={styles.wrap} sx={{ margin: desktop ? '0 0 15px 0' : '15px 0 0' }}>
-			<Box display='flex' alignItems='center' justifyContent='space-between'>
-				<Typography
-					className={styles.title}
-					sx={{
-						color: '#A4AAB5',
-						fontWeight: '600',
-						fontSize: '14px',
-						letterSpacing: '0.1px',
-					}}
-				>
-					ЧАТЫ
-				</Typography>
-				<TooltipCustom title='Создать чат'>
-					<Box
-						onClick={createNewChat}
-						sx={{
-							backgroundColor: '#151518',
-							padding: '9px 11px',
-							borderRadius: '10px',
-							cursor: 'pointer',
-						}}
-					>
-						<Image src={'/plus.svg'} style={{ marginTop: '3px' }} width={18} height={18} alt={''} />
-					</Box>
-				</TooltipCustom>
-			</Box>
-			<ToggleButtonGroup
-				className={styles.container}
-				color='primary'
-				exclusive
-				aria-label='chats'
-				sx={{
-					overflowY: 'auto',
-					maxHeight: '210px',
-					...makeThinScrollbar()
-				}}
-			>
+		<Box className={`${styles.wrap} ${desktop ? styles.wrapDesktop : styles.wrapMobile}`}>
+			<ToggleButtonGroup className={styles.container} color='primary' exclusive aria-label='chats'>
 				{!(localChats === null || localChats?.length <= 0) &&
 					localChats?.map((el) => {
 						return (
@@ -147,30 +109,11 @@ export const Chats = ({ chats, currentChat, removeChat, setChat, chatSetting, cr
 										value={newTitle}
 										onChange={(e) => setNewTitle(e.target.value)}
 										variant='outlined'
-										sx={{
-											'& .MuiInputBase-input': {
-												padding: '12px 5px 12px 15px',
-												borderRadius: '13px',
-												outline: 'none',
-												width: '100%',
-												color: '#A4AAB5',
-												fontSize: '15px',
-												fontWeight: '500',
-											},
-											'& .MuiInputBase-root': {
-												borderRadius: '13px !important',
-												backgroundColor: 'rgba(130, 128, 255, 0.15)',
-											},
-											'& .MuiFormControl-root-MuiTextField-root': {
-												borderRadius: '13px',
-											},
-										}}
+										className={styles.textField}
 										InputProps={{
 											endAdornment: (
 												<Box
-													sx={{ cursor: 'pointer' }}
-													display={'flex'}
-													alignItems={'center'}
+													className={styles.saveIconBox}
 													onClick={() => {
 														setRename(false)
 														renameChat()
@@ -184,20 +127,22 @@ export const Chats = ({ chats, currentChat, removeChat, setChat, chatSetting, cr
 								) : (
 									<Box className={el?.uid === currentChat ? styles.main_active : styles.main}>
 										<Typography
-											className={el?.uid === currentChat ? styles2.toggle_text_active_chat : styles2.toggle_text}
+											className={`${styles.chatTitle} ${el?.uid === currentChat ? styles2.toggle_text_active_chat : styles2.toggle_text}`}
 										>
 											{el?.title}
 										</Typography>
 
 										{el?.uid === currentChat && (
-											<Image
-												onClick={handleClick}
-												aria-describedby={Boolean(chatSetting) ? 'simple-popover' : undefined}
-												src={'/svg/chat-setting.svg'}
-												alt={'Настройка чата'}
-												width={18}
-												height={18}
-											/>
+											<Box className={styles.chatIcon}>
+												<Image
+													onClick={handleClick}
+													aria-describedby={Boolean(chatSetting) ? 'simple-popover' : undefined}
+													src={'/svg/chat-setting.svg'}
+													alt={'Настройка чата'}
+													width={18}
+													height={18}
+												/>
+											</Box>
 										)}
 										<Menu
 											autoFocus={false}
@@ -206,27 +151,12 @@ export const Chats = ({ chats, currentChat, removeChat, setChat, chatSetting, cr
 											id='message-menu'
 											onClose={handleClose}
 											onClick={handleClose}
-											sx={{
-												'& .MuiMenu-list': {
-													backgroundColor: '#303035',
-													color: '#8280FF',
-													borderRadius: '15px',
-												},
-												'& .MuiPopover-paper': {
-													backgroundColor: '#303035',
-													borderRadius: '15px',
-												},
-											}}
+											PaperProps={{ className: styles.menuPaper }}
+											MenuListProps={{ className: styles.menuList }}
 										>
 											<MenuItem
 												autoFocus={false}
-												sx={{
-													fontSize: '15px',
-													fontWeight: '500',
-													display: 'flex',
-													alignItems: 'center',
-													gap: '10px',
-												}}
+												className={styles.menuItem}
 												onClick={() => {
 													setRename(true)
 												}}
@@ -236,13 +166,7 @@ export const Chats = ({ chats, currentChat, removeChat, setChat, chatSetting, cr
 											</MenuItem>
 											<MenuItem
 												autoFocus={false}
-												sx={{
-													fontSize: '15px',
-													fontWeight: '500',
-													display: 'flex',
-													alignItems: 'center',
-													gap: '12px',
-												}}
+												className={styles.menuItemDelete}
 												onClick={() => {
 													removeChat(localChat)
 												}}
@@ -257,6 +181,15 @@ export const Chats = ({ chats, currentChat, removeChat, setChat, chatSetting, cr
 						)
 					})}
 			</ToggleButtonGroup>
+			<Box className={styles.createButtonWrapper} display='flex' alignItems='center' justifyContent='space-between'>
+				<Box>
+					<TooltipCustom title='Создать чат'>
+						<Box onClick={createNewChat} className={styles.createButton}>
+							<Image src={'/plus.svg'} className={styles.createButtonIcon} width={18} height={18} alt={''} />
+						</Box>
+					</TooltipCustom>
+				</Box>
+			</Box>
 		</Box>
 	)
 }
@@ -49,7 +49,6 @@ export const MainMenuMobile = memo(() => {
 					<MenuIcon
 						sx={{
 							color: '#868686',
-							marginRight: '28px',
 							width: 30,
 						}}
 					/>
@@ -0,0 +1,75 @@
+.container {
+	display: flex;
+	border: none;
+	gap: 8px;
+	background-color: var(--new-ui-main-color);
+	padding: 4px;
+	border-radius: 13px;
+	width: 100%;
+
+
+	.item {
+		padding: 0;
+		flex: 1;
+		border: none;
+
+		&:hover {
+			background-color: transparent;
+		}
+
+		.main {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 100%;
+			height: 44px;
+			min-height: 44px;
+			border: none;
+			background-color: transparent;
+			border-radius: 13px;
+			padding: 0 15px;
+			text-transform: none;
+			overflow: hidden;
+
+			&_active {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				width: 100%;
+				height: 44px;
+				min-height: 44px;
+				border: none;
+				border-radius: 13px;
+				padding: 0 15px;
+				text-transform: none;
+				background-color: #1D1D21;
+				overflow: hidden;
+
+				@media (max-width: 768px) {
+					height: 36px;
+					min-height: 36px;
+					padding: 0 12px;
+				}
+			}
+
+			@media (max-width: 768px) {
+				height: 36px;
+				min-height: 36px;
+				padding: 0 12px;
+			}
+		}
+
+		.tabText {
+			font-weight: 600;
+			font-size: 15px;
+			
+			color: #FFFFFF;
+		}
+
+		.tabTextActive {
+			font-weight: 600;
+			font-size: 15px;
+			color: #FFFFFF;
+		}
+	}
+}
@@ -1,45 +1,42 @@
 import React, { memo } from 'react'
-import { Tab, Tabs, Typography } from '@mui/material'
-
-import styles from '#/app/styles/accountTabs.module.css'
+import { Box, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material'
 
+import styles from './static-tabs.module.scss'
 
 interface IProps {
-    scope:'playground' | 'api'
-    setScope:React.Dispatch<React.SetStateAction<'playground' | 'api'>>
+	scope: 'playground' | 'api'
+	setScope: React.Dispatch<React.SetStateAction<'playground' | 'api'>>
 }
 
 export const StaticTabs = memo(({ scope, setScope }: IProps) => {
-
-	const tabs: {
-		scope: 'playground' | 'api'
-		title: string
-	}[] = [
+	const tabs: { scope: 'playground' | 'api'; title: string }[] = [
 		{ scope: 'playground', title: 'Playground' },
 		{ scope: 'api', title: 'API' },
 	]
 
 	return (
-		<Tabs
+		<ToggleButtonGroup
+			className={styles.container}
 			value={scope}
-			variant='scrollable'
-			className={styles.wrap_toggle_button}
+			exclusive
 			aria-label='Platform'
-			scrollButtons={false}
-			sx={{ '& .MuiTabs-indicator': { display: 'none' } }}
+			onChange={(_, value) => value && setScope(value)}
 		>
-			{tabs.map((el) => {
-				return (
-					<Tab
-						disableRipple
-						onClick={() => setScope(el.scope)}
-						key={el.title}
-						className={scope === el.scope ? styles.wrap_toggle_button_active : styles.wrap_toggle_button}
-						value={el.scope}
-						label={<Typography sx={{ fontSize: 18, fontWeight: 'bold' }}>{el.title}</Typography>}
-					/>
-				)
-			})}
-		</Tabs>
+			{tabs.map((el) => (
+				<ToggleButton
+					disableRipple
+					onClick={() => setScope(el.scope)}
+					key={el.scope}
+					className={styles.item}
+					value={el.scope}
+				>
+					<Box className={scope === el.scope ? styles.main_active : styles.main}>
+						<Typography className={scope === el.scope ? styles.tabTextActive : styles.tabText}>
+							{el.title}
+						</Typography>
+					</Box>
+				</ToggleButton>
+			))}
+		</ToggleButtonGroup>
 	)
 })