diff --git a/app/(protected)/team/(team)/layout.tsx b/app/(protected)/team/(team)/layout.tsx
index 3ca574e..b1514db 100644
--- a/app/(protected)/team/(team)/layout.tsx
+++ b/app/(protected)/team/(team)/layout.tsx
@@ -1,5 +1,4 @@
 import { PageLayout } from 'app/layouts/PageLayout';
-import { teamTabs } from 'pages/team';
 import { Badge } from 'shared/ui';
 
 export default function TeamLayout({ children }: { children: React.ReactNode }) {
@@ -8,7 +7,6 @@ export default function TeamLayout({ children }: { children: React.ReactNode })
       title="Управление командой"
       description="Управляйте участниками команды, ожидающими приглашениями, ролями и правами доступа."
       badge={<Badge variant="secondary">8 участников</Badge>}
-      tabs={teamTabs}
     >
       {children}
     </PageLayout>
diff --git a/app/(protected)/team/(team)/roles/page.tsx b/app/(protected)/team/(team)/roles/page.tsx
index f81d7e5..3be4e15 100644
--- a/app/(protected)/team/(team)/roles/page.tsx
+++ b/app/(protected)/team/(team)/roles/page.tsx
@@ -1 +1,8 @@
-export { RolesPage as default } from 'pages/team';
+import { notFound } from 'next/navigation';
+
+// export { RolesPage as default } from 'pages/team';
+export default function Page() {
+  notFound();
+}
+
+// TODO: временно убрал страницу. Вернуть, когда появится функциональность прав и ролей
diff --git a/app/(protected)/user/(user)/layout.tsx b/app/(protected)/user/(user)/layout.tsx
index 5ee9d2d..7b4319a 100644
--- a/app/(protected)/user/(user)/layout.tsx
+++ b/app/(protected)/user/(user)/layout.tsx
@@ -1,14 +1,23 @@
 import { PageLayout } from 'app/layouts/PageLayout';
-import { profileTabs } from 'pages/profile';
+import { Bell, Settings } from 'lucide-react';
+import { routes } from 'shared/config';
+import { VerticalTabsNav, type TabNavItem } from 'widgets/tabs-nav';
+
+export const tabs: TabNavItem[] = [
+  { key: routes.user.profile(), label: 'Основные настройки', icon: <Settings /> },
+  { key: routes.user.notifications(), label: 'Уведомления', icon: <Bell /> },
+];
 
 export default function ProfileLayout({ children }: { children: React.ReactNode }) {
   return (
     <PageLayout
       title="Профиль"
       description="Управляйте данными аккаунта, безопасностью и уведомлениями."
-      tabs={profileTabs}
     >
-      {children}
+      <div className="grid gap-4 lg:grid-cols-[max-content_1fr]">
+        <VerticalTabsNav className="max-lg:flex-row" tabs={tabs} />
+        {children}
+      </div>
     </PageLayout>
   );
 }
diff --git a/src/entities/user/model/schemas.ts b/src/entities/user/model/schemas.ts
index 82a91b5..f97a513 100644
--- a/src/entities/user/model/schemas.ts
+++ b/src/entities/user/model/schemas.ts
@@ -91,14 +91,11 @@ export const ProfileUpdateBody = z.object({
   headline: z.string().max(100, 'Должность слишком длинная').nullable().optional(),
   location: z.string().max(100, 'Локация слишком длинная').nullable().optional(),
   phone: z.string().max(20, 'Номер телефона слишком длинный').nullable().optional(),
-  gender: z
-    .enum(['none', 'male', 'female', 'non_binary', 'other', 'prefer_not_to_say'])
-    .default('none')
-    .optional(),
+  gender: z.enum(['none', 'male', 'female', 'non_binary', 'other', 'prefer_not_to_say']).optional(),
   vacationStart: z.string().nullable().optional(),
   vacationEnd: z.string().nullable().optional(),
   vacationMessage: z.string().max(500, 'Сообщение слишком длинное').nullable().optional(),
-  pronouns: z.enum(['he_him', 'she_her', 'they_them', 'other', 'none']).default('none').optional(),
+  pronouns: z.enum(['he_him', 'she_her', 'they_them', 'other', 'none']).optional(),
   pronounsCustom: z.string().max(50, 'Максимальная длина 50 символов').nullable().optional(),
   bio: z.string().max(1000, 'О себе не более 1000 символов').nullable().optional(),
   timezone: z.string().max(50).optional(),
diff --git a/src/pages/profile/config/tabs.ts b/src/pages/profile/config/tabs.ts
deleted file mode 100644
index 1ae5728..0000000
--- a/src/pages/profile/config/tabs.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { routes } from 'shared/config';
-
-export const profileTabs = [
-  { key: routes.user.profile(), label: 'Мой профиль' },
-  { key: routes.user.security(), label: 'Безопасность' },
-  { key: routes.user.notifications(), label: 'Уведомления' },
-];
diff --git a/src/pages/profile/index.ts b/src/pages/profile/index.ts
index 8922138..0f32dee 100644
--- a/src/pages/profile/index.ts
+++ b/src/pages/profile/index.ts
@@ -1,4 +1,3 @@
-export { profileTabs } from './config/tabs';
 export { MePage } from './ui/me-page/MePage';
 export { NotificationsPage } from './ui/notifications-page/NotificationsPage';
 export { SecurityPage } from './ui/security-page/SecurityPage';
diff --git a/src/pages/profile/ui/me-page/IdentityItem.tsx b/src/pages/profile/ui/me-page/IdentityItem.tsx
index e7475c0..43fc64b 100644
--- a/src/pages/profile/ui/me-page/IdentityItem.tsx
+++ b/src/pages/profile/ui/me-page/IdentityItem.tsx
@@ -1,26 +1,25 @@
 'use client';
 
-import { Item, ItemActions, ItemContent, ItemMedia } from 'shared/ui';
+import { Item, ItemActions, ItemMedia } from 'shared/ui';
 import { UploadAvatar } from 'features/upload-avatar';
 import { SignOut } from 'features/auth/sign-out';
 import { type TUser, UserAvatar } from 'entities/user';
 
 type AccountIdentityItemProps = {
   profile: TUser.UserResponse['profile'];
-  email: string;
 };
 
-function IdentityItem({ profile, email }: AccountIdentityItemProps) {
+function IdentityItem({ profile }: AccountIdentityItemProps) {
   const fullName = `${profile.firstName} ${profile.lastName}`;
 
   return (
-    <Item className="items-start gap-4">
-      <ItemMedia>
+    <Item className="items-center justify-between gap-4">
+      <ItemMedia className="gap-6">
         <UploadAvatar
           context="user.avatar"
           avatar={
             <UserAvatar
-              wrap={{ className: 'ring-background size-28 shadow-md ring-4' }}
+              wrap={{ className: 'size-20 ' }}
               src={profile.avatar?.medium}
               alt={fullName}
               fallback={{ firstName: profile.firstName, lastName: profile.lastName }}
@@ -28,17 +27,8 @@ function IdentityItem({ profile, email }: AccountIdentityItemProps) {
           }
         />
       </ItemMedia>
-      <ItemContent className="self-center">
-        <div className="space-y-1">
-          <p className="text-xl font-semibold">{fullName}</p>
-          <p className="text-muted-foreground text-sm sm:text-base">{email}</p>
-          <p className="text-muted-foreground max-w-xl text-sm">
-            {profile.bio?.trim() || 'Добавьте информацию о себе в профиле'}
-          </p>
-        </div>
-      </ItemContent>
       <ItemActions>
-        <SignOut className="self-start" />
+        <SignOut size={'lg'} variant={'destructive'} />
       </ItemActions>
     </Item>
   );
diff --git a/src/pages/profile/ui/me-page/MePage.tsx b/src/pages/profile/ui/me-page/MePage.tsx
index 97952ff..24db62e 100644
--- a/src/pages/profile/ui/me-page/MePage.tsx
+++ b/src/pages/profile/ui/me-page/MePage.tsx
@@ -7,7 +7,6 @@ import {
   CardSection,
   CardTitle,
   FloatingSaveBar,
-  Separator,
 } from 'shared/ui';
 import { IdentityItem } from './IdentityItem';
 import { ProfileForm } from './ProfileForm';
@@ -35,16 +34,16 @@ function MePage() {
       <Suspense>
         <QueryParamsHandler />
       </Suspense>
-      <div className="space-y-4">
+      <div className="max-w-5xl space-y-4">
         <CardSection
           className="space-y-4"
           title="Идентификация профиля"
           description="Публичная информация о вас."
         >
-          <IdentityItem profile={profile} email={email} />
-          <Separator />
+          <IdentityItem profile={profile} />
           <ProfileForm form={form} onSubmit={onSubmit} />
         </CardSection>
+
         <AccountSection />
         <FloatingSaveBar
           visible={isDirty}
diff --git a/src/pages/profile/ui/me-page/ProfileForm.tsx b/src/pages/profile/ui/me-page/ProfileForm.tsx
index c02b809..75b481b 100644
--- a/src/pages/profile/ui/me-page/ProfileForm.tsx
+++ b/src/pages/profile/ui/me-page/ProfileForm.tsx
@@ -18,6 +18,7 @@ function ProfileForm({ form, onSubmit }: ProfileFormProps) {
             <Field data-invalid={fieldState.invalid}>
               <FieldLabel>Имя</FieldLabel>
               <Input
+                className="h-9"
                 aria-label="firstName"
                 placeholder="Имя"
                 type="text"
@@ -36,6 +37,7 @@ function ProfileForm({ form, onSubmit }: ProfileFormProps) {
             <Field data-invalid={fieldState.invalid}>
               <FieldLabel>Фамилия</FieldLabel>
               <Input
+                className="h-9"
                 aria-label="lastName"
                 placeholder="Фамилия"
                 type="text"
diff --git a/src/pages/profile/ui/me-page/account-section/AccountsSection.tsx b/src/pages/profile/ui/me-page/account-section/AccountsSection.tsx
index 1744497..debf171 100644
--- a/src/pages/profile/ui/me-page/account-section/AccountsSection.tsx
+++ b/src/pages/profile/ui/me-page/account-section/AccountsSection.tsx
@@ -7,7 +7,7 @@ export function AccountSection() {
 
   return (
     <CardSection
-      className="grid auto-rows-auto grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-3"
+      className="flex flex-col"
       title="Связанные аккаунты"
       description="Управление привязкой к социальным сетям и сервисам"
     >
diff --git a/src/pages/profile/ui/me-page/account-section/OAuthManageButton.tsx b/src/pages/profile/ui/me-page/account-section/OAuthManageButton.tsx
index d2a3d4f..3f2a811 100644
--- a/src/pages/profile/ui/me-page/account-section/OAuthManageButton.tsx
+++ b/src/pages/profile/ui/me-page/account-section/OAuthManageButton.tsx
@@ -2,20 +2,27 @@
 
 import { authFabricKeys, OAUTH_PROVIDERS, type TAuth } from 'entities/auth';
 import { type ComponentProps, useCallback } from 'react';
-import { Button } from 'shared/ui';
+import { Badge, Button } from 'shared/ui';
 import { useConnectOAuthProvider } from '../../../api/useConnectOauthProvider';
 import { useDisconnectOAuthProvider } from '../../../api/useDisconnectOauthProvider';
 import { env } from 'shared/config';
 import { toast } from 'sonner';
 import Image from 'next/image';
+import { classNames } from 'shared/lib/utils';
 
-type OAuthManageButtonProps = ComponentProps<typeof Button> & {
+type OAuthManageButtonProps = ComponentProps<'div'> & {
   provider: TAuth.OAuthProvider;
   label: string;
   isLinked: boolean;
 };
 
-export function OAuthManageButton({ provider, label, isLinked, ...props }: OAuthManageButtonProps) {
+export function OAuthManageButton({
+  provider,
+  className = '',
+  label,
+  isLinked,
+  ...props
+}: OAuthManageButtonProps) {
   const connect = useConnectOAuthProvider();
   const disconnect = useDisconnectOAuthProvider();
 
@@ -32,6 +39,8 @@ export function OAuthManageButton({ provider, label, isLinked, ...props }: OAuth
     } else {
       connect.mutate(provider, {
         onSuccess: (data) => {
+          console.log(data);
+          localStorage.setItem('test', JSON.stringify(data));
           const url = data.url.startsWith('http')
             ? data.url
             : new URL(data.url, env.NEXT_PUBLIC_API_BASE_URL).toString();
@@ -44,20 +53,56 @@ export function OAuthManageButton({ provider, label, isLinked, ...props }: OAuth
   const meta = OAUTH_PROVIDERS[provider];
 
   return (
-    <Button
-      onClick={handleToggleConnect}
-      variant={isLinked ? 'destructive' : 'outline'}
-      size={'lg'}
-      className="justify-start"
-      disabled={isLoading}
+    <div
+      className={classNames(
+        'hover:bg-muted flex items-center justify-between gap-2 border-t p-2 transition-colors first:rounded-t-lg first:border-none last:rounded-b-lg',
+        {},
+        [className]
+      )}
       {...props}
     >
-      <div className={`${meta.className} w-max rounded-full text-2xl`}>
-        <Image src={meta.iconSrc} alt={label} width={24} height={24} />
+      <div className="flex shrink-0 items-center gap-3">
+        <Image
+          className={`${meta.className} rounded-lg`}
+          src={meta.iconSrc}
+          alt={label}
+          width={24}
+          height={24}
+        />
+        <div className="flex flex-col gap-1">
+          <span className="font-medium">{label}</span>
+          <OAuthBadge className="lg:hidden" isLinked={isLinked} />
+        </div>
       </div>
-      <span className="w-full text-center">
-        {isLinked ? 'Отвязать' : 'Привязать'} {label} аккаунт
-      </span>
-    </Button>
+      <div className="grid items-center gap-3 lg:w-full lg:max-w-[220px] lg:grid-cols-2">
+        <OAuthBadge isLinked={isLinked} className="hidden text-center lg:block" />
+        <Button
+          className="min-w-[106px]"
+          disabled={isLoading}
+          onClick={handleToggleConnect}
+          size={'lg'}
+          variant={isLinked ? 'outline' : 'default'}
+        >
+          {isLinked ? 'Отключить' : 'Подключить'}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function OAuthBadge({ isLinked, className = '' }: { isLinked: boolean; className?: string }) {
+  return (
+    <Badge
+      variant={isLinked ? 'outline' : 'destructive'}
+      className={classNames(
+        'w-full text-xs leading-none',
+        {
+          'border-transparent bg-green-700/10 text-green-700': isLinked,
+        },
+        [className]
+      )}
+    >
+      {isLinked ? 'Подключен' : 'Не подключен'}
+    </Badge>
   );
 }
diff --git a/src/pages/profile/ui/notifications-page/NotificationsPageFallback.tsx b/src/pages/profile/ui/notifications-page/NotificationsPageFallback.tsx
index 339c750..e45f3c7 100644
--- a/src/pages/profile/ui/notifications-page/NotificationsPageFallback.tsx
+++ b/src/pages/profile/ui/notifications-page/NotificationsPageFallback.tsx
@@ -1,4 +1,4 @@
-import { CardSection, OptionGroup, Skeleton } from 'shared/ui';
+import { CardSection, Skeleton } from 'shared/ui';
 
 export function NotificationsPageFallback() {
   return (
diff --git a/src/pages/team/index.ts b/src/pages/team/index.ts
index 3b6cf02..f579de1 100644
--- a/src/pages/team/index.ts
+++ b/src/pages/team/index.ts
@@ -1,4 +1,3 @@
-export { teamTabs } from './config/tabs';
 export { InvitationsPage } from './ui/invitations/InvitationsPage';
 export { MembersPage } from './ui/members/MembersPage';
 export { RolesPage } from './ui/roles/RolesPage';
diff --git a/src/pages/team/ui/members/MemberCard.tsx b/src/pages/team/ui/members/MemberCard.tsx
index ce311df..0ff058d 100644
--- a/src/pages/team/ui/members/MemberCard.tsx
+++ b/src/pages/team/ui/members/MemberCard.tsx
@@ -1,4 +1,4 @@
-import { type TTeam } from 'entities/team';
+import { ROLE_LABELS, type TTeam } from 'entities/team';
 import { X } from 'lucide-react';
 import { ComponentProps } from 'react';
 import { classNames } from 'shared/lib/utils';
@@ -6,31 +6,25 @@ import {
   Avatar,
   AvatarFallback,
   AvatarImage,
-  Badge,
   Button,
   Item,
   ItemActions,
   ItemContent,
-  ItemFooter,
   ItemGroup,
   ItemHeader,
-  Progress,
+  OwnerWrap,
 } from 'shared/ui';
 import { memberCardConfig as cfg } from '../../config/member';
 import { MemberRoleSelect } from './MemberRoleSelect';
 import { MemberStatusSelect } from './MemberStatusSelect';
 import { RemoveMemberDialog } from './RemoveMemberDialog';
 
-const workload = 61; //todo: mock
-const skills = ['Design System', 'Sprint Plan']; //todo: mock
-const backOn = '2026-05-10'; //todo: mock
-
 interface MemberCardProps extends Omit<ComponentProps<typeof ItemGroup>, 'children'> {
   member: TTeam.TeamMemberResponse;
 }
 
 export function MemberCard({ className, member, ...props }: MemberCardProps) {
-  const wl = cfg.workloadLabel(workload);
+  const isOwner = member.role === 'owner';
 
   return (
     <ItemGroup
@@ -45,19 +39,19 @@ export function MemberCard({ className, member, ...props }: MemberCardProps) {
     >
       <Item>
         <ItemHeader className="justify-start gap-3">
-          <Avatar
-            size="lg"
-            className={classNames('ring-background size-28 shadow-md ring-2', {}, [
-              cfg.ringColor[member.status],
-            ])}
-          >
-            <AvatarImage src={member.avatar?.small ?? undefined} alt={member.fullName} />
-            <AvatarFallback firstName={member.firstName} lastName={member.lastName} />
-          </Avatar>
+          <OwnerWrap isOwner={isOwner}>
+            <Avatar className={classNames('size-10', {}, [cfg.ringColor[member.status]])}>
+              <AvatarImage src={member.avatar?.small ?? undefined} alt={member.fullName} />
+              <AvatarFallback firstName={member.firstName} lastName={member.lastName} />
+            </Avatar>
+          </OwnerWrap>
           <div className="flex-1">
             <p className="text-sm font-semibold">{member.fullName}</p>
+            {member.role !== 'owner' && (
+              <span className="text-muted-foreground text-xs">{ROLE_LABELS[member.role]}</span>
+            )}
           </div>
-          {member.role !== 'owner' && (
+          {!isOwner && (
             <ItemActions>
               <RemoveMemberDialog userId={member.id} name={member.fullName}>
                 <Button variant="ghost">
@@ -67,47 +61,14 @@ export function MemberCard({ className, member, ...props }: MemberCardProps) {
             </ItemActions>
           )}
         </ItemHeader>
-        <ItemContent>
-          <div className="flex items-center gap-1.5">
-            {member.role !== 'owner' ? (
+        {!isOwner && (
+          <ItemContent>
+            <div className="flex items-center gap-1.5">
               <MemberRoleSelect userId={member.id} role={member.role} />
-            ) : null}
-            {member.role !== 'owner' ? (
               <MemberStatusSelect userId={member.id} status={member.status} />
-            ) : null}
-          </div>
-          <div className="mt-1.5 flex flex-row flex-wrap items-center gap-1.5">
-            {member.role === 'owner' && <Badge variant="default">Владелец</Badge>}
-            {(skills ?? []).map((s) => (
-              <Badge key={s} variant="outline">
-                {s}
-              </Badge>
-            ))}
-          </div>
-        </ItemContent>
-        <ItemFooter className="mt-3 flex flex-col gap-2">
-          <div className="flex w-full flex-wrap items-center justify-between gap-2">
-            <span className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
-              Загруженность
-            </span>
-            <div className="flex items-center gap-2">
-              <span className={`text-[11px] font-semibold ${wl.color}`}>{wl.text}</span>
-              <span className="text-muted-foreground text-xs font-semibold">{workload}%</span>
             </div>
-          </div>
-          <Progress
-            className={classNames('h-1.5', {}, [
-              '[&>[data-slot=progress-indicator]]:' + cfg.workloadColor(workload),
-            ])}
-            value={workload}
-          />
-          {backOn && (
-            <div className="mt-2 flex w-full items-center justify-between gap-1 text-[11px] font-medium">
-              <span className="text-muted-foreground">В отпуске</span>
-              <span>Вернётся {backOn}</span>
-            </div>
-          )}
-        </ItemFooter>
+          </ItemContent>
+        )}
       </Item>
     </ItemGroup>
   );
diff --git a/src/pages/team/ui/members/MembersPage.tsx b/src/pages/team/ui/members/MembersPage.tsx
index 8e90d92..0b725ef 100644
--- a/src/pages/team/ui/members/MembersPage.tsx
+++ b/src/pages/team/ui/members/MembersPage.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Filter, Plus, SlidersHorizontal } from 'lucide-react';
+import { Plus } from 'lucide-react';
 import { InviteTeamMemberDialog } from 'features/teams/invite';
 import { Button, Search } from 'shared/ui';
 import { MemberCard } from './MemberCard';
@@ -15,7 +15,7 @@ export function MembersPage() {
       <div className="mb-6 flex items-center justify-between gap-4">
         <Search value={search} onChange={onChange} placeholder="Поиск участников…" />
         <InviteTeamMemberDialog asChild>
-          <Button>
+          <Button variant={'secondary'}>
             <Plus size={15} /> Пригласить
           </Button>
         </InviteTeamMemberDialog>
@@ -25,14 +25,6 @@ export function MembersPage() {
         <p className="text-muted-foreground text-xs">
           Показано <span className="font-medium">{filtered.length}</span> из {total}
         </p>
-        <div className="flex items-center gap-2">
-          <Button variant="outline" size="sm">
-            <Filter size={12} /> Фильтр
-          </Button>
-          <Button variant="outline" size="sm">
-            <SlidersHorizontal size={12} /> Сортировка
-          </Button>
-        </div>
       </div>
 
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
diff --git a/src/pages/team/ui/settings/SettingsPage.tsx b/src/pages/team/ui/settings/SettingsPage.tsx
index 94c4045..1700871 100644
--- a/src/pages/team/ui/settings/SettingsPage.tsx
+++ b/src/pages/team/ui/settings/SettingsPage.tsx
@@ -5,13 +5,9 @@ import { FormProvider, useForm } from 'react-hook-form';
 import { useQueryTeam } from '../../api/useQueryTeam';
 import { TeamSettingsFormSchema, type TeamSettingsFormValues } from '../../model/settings';
 import { DangerZone } from './DangerZone';
-import { DefaultSettings } from './DefaultSettings';
-import { InvitationSecurity } from './InvitationSecurity';
 import { SaveBar } from './SaveBar';
 import { TeamIdentity } from './TeamIdentity';
 import { DangerZoneSkeleton } from './skeletons/DangerZone.skeleton';
-import { DefaultSettingsSkeleton } from './skeletons/DefaultSettings.skeleton';
-import { InvitationSecuritySkeleton } from './skeletons/InvitationSecurity.skeleton';
 import { TeamIdentitySkeleton } from './skeletons/TeamIdentity.skeleton';
 import { zodResolver } from '@hookform/resolvers/zod';
 
@@ -52,8 +48,6 @@ export function Settings() {
       <FormProvider {...form}>
         <form className="space-y-5">
           {team ? <TeamIdentity team={team} /> : <TeamIdentitySkeleton />}
-          {team ? <DefaultSettings /> : <DefaultSettingsSkeleton />}
-          {team ? <InvitationSecurity /> : <InvitationSecuritySkeleton />}
           {team ? <DangerZone teamName={team?.name} teamId={team?.id} /> : <DangerZoneSkeleton />}
         </form>
         {team ? <SaveBar team={team} /> : null}
diff --git a/src/shared/ui/card-section/CardSection.tsx b/src/shared/ui/card-section/CardSection.tsx
index 3f6e778..081faed 100644
--- a/src/shared/ui/card-section/CardSection.tsx
+++ b/src/shared/ui/card-section/CardSection.tsx
@@ -12,7 +12,7 @@ function CardSection({ title, description, ...props }: ICardSectionProps) {
     <Card>
       <CardHeader>
         <CardTitle className="text-base">{title}</CardTitle>
-        <CardDescription className="text-xs">{description}</CardDescription>
+        <CardDescription className="text-sm">{description}</CardDescription>
       </CardHeader>
       <CardContent {...props} />
     </Card>
diff --git a/src/widgets/app-sidebar/config/sidebar.ts b/src/widgets/app-sidebar/config/sidebar.ts
index 7652ac1..8c425c0 100644
--- a/src/widgets/app-sidebar/config/sidebar.ts
+++ b/src/widgets/app-sidebar/config/sidebar.ts
@@ -1,4 +1,4 @@
-import { Mail, Settings, ShieldUser, UsersRound } from 'lucide-react';
+import { BriefcaseBusiness, Mail, Settings, UsersRound } from 'lucide-react';
 import { routes } from 'shared/config';
 
 export const team = [
@@ -7,7 +7,7 @@ export const team = [
     title: 'Участники',
     icon: UsersRound,
   },
+  { url: routes.team.projects.all(), title: 'Проекты', icon: BriefcaseBusiness },
   { url: routes.team.invitations(), title: 'Приглашения', icon: Mail },
-  { url: routes.team.roles(), title: 'Роли', icon: ShieldUser },
   { url: routes.team.settings(), title: 'Настройки', icon: Settings },
 ] as const;
diff --git a/src/widgets/app-sidebar/ui/projects/ProjectsContent.tsx b/src/widgets/app-sidebar/ui/projects/ProjectsContent.tsx
index 53339f0..ae7b453 100644
--- a/src/widgets/app-sidebar/ui/projects/ProjectsContent.tsx
+++ b/src/widgets/app-sidebar/ui/projects/ProjectsContent.tsx
@@ -67,7 +67,8 @@ export function ProjectsContent() {
                   asChild
                 >
                   <Link href={routes.team.projects.project(project.slug)}>
-                    <span>{projectIconCodeToEmoji(project.icon)}</span> {project.name}
+                    <span>{projectIconCodeToEmoji(project.icon)}</span>
+                    <span>{project.name}</span>
                   </Link>
                 </SidebarMenuSubButton>
                 <ProjectActions project={project} teamId={teamId} asChild>
@@ -80,15 +81,15 @@ export function ProjectsContent() {
             <SidebarMenuSubItem>
               <SidebarMenuSubButton asChild>
                 <CreateProjectDialog className="w-full">
-                  <Plus /> Новый проект
+                  <Plus /> <span>Новый проект</span>
                 </CreateProjectDialog>
               </SidebarMenuSubButton>
             </SidebarMenuSubItem>
             {totalProjects > 0 ? (
               <SidebarMenuSubItem>
-                <SidebarMenuSubButton isActive={pathname === routes.team.projects.all()} asChild>
+                <SidebarMenuSubButton asChild>
                   <Link href={routes.team.projects.all()} className="!text-muted-foreground">
-                    Все проекты ({totalProjects})
+                    <span> Все проекты ({totalProjects})</span>
                   </Link>
                 </SidebarMenuSubButton>
               </SidebarMenuSubItem>
diff --git a/src/widgets/app-sidebar/ui/teams/TeamContent.tsx b/src/widgets/app-sidebar/ui/teams/TeamContent.tsx
index 974a57e..7eef692 100644
--- a/src/widgets/app-sidebar/ui/teams/TeamContent.tsx
+++ b/src/widgets/app-sidebar/ui/teams/TeamContent.tsx
@@ -60,7 +60,7 @@ export function TeamContent() {
             <SidebarMenuSubItem>
               <SidebarMenuSubButton asChild>
                 <InviteTeamMemberDialog className="w-full">
-                  <Plus /> Добавить участника
+                  <Plus /> <span>Добавить участника</span>
                 </InviteTeamMemberDialog>
               </SidebarMenuSubButton>
             </SidebarMenuSubItem>
diff --git a/src/widgets/tabs-nav/index.ts b/src/widgets/tabs-nav/index.ts
index 408ab4f..ac3dc31 100644
--- a/src/widgets/tabs-nav/index.ts
+++ b/src/widgets/tabs-nav/index.ts
@@ -1,2 +1,3 @@
 export { type TabNavItem } from './model/types';
 export { TabsNav } from './ui/TabsNav';
+export { VerticalTabsNav } from './ui/VerticalTabsNav';
diff --git a/src/widgets/tabs-nav/model/types.ts b/src/widgets/tabs-nav/model/types.ts
index 6404556..853d56e 100644
--- a/src/widgets/tabs-nav/model/types.ts
+++ b/src/widgets/tabs-nav/model/types.ts
@@ -7,4 +7,5 @@ export type TabNavItem = {
   label: string;
   matchPrefix?: boolean;
   badge?: { value: string | ReactNode; variant: ComponentProps<typeof Badge>['variant'] };
+  icon?: ReactNode;
 };
diff --git a/src/widgets/tabs-nav/ui/VerticalTabsNav.tsx b/src/widgets/tabs-nav/ui/VerticalTabsNav.tsx
new file mode 100644
index 0000000..854a03a
--- /dev/null
+++ b/src/widgets/tabs-nav/ui/VerticalTabsNav.tsx
@@ -0,0 +1,54 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { ComponentProps } from 'react';
+import { classNames } from 'shared/lib/utils';
+import { Badge, Button } from 'shared/ui';
+import { TabNavItem } from '../model/types';
+
+interface TabsNavProps extends Omit<ComponentProps<'div'>, 'children'> {
+  tabs: TabNavItem[];
+}
+
+export function VerticalTabsNav({ className, tabs, ...props }: TabsNavProps) {
+  const pathname = usePathname();
+
+  if (tabs.length === 0) {
+    return null;
+  }
+
+  return (
+    <div
+      className={classNames('relative flex flex-col flex-wrap gap-1', {}, [className])}
+      {...props}
+    >
+      {tabs.map((tab) => {
+        const active = tab.matchPrefix
+          ? (pathname ?? '').startsWith(tab.key)
+          : pathname === tab.key;
+
+        return (
+          <Button
+            className={classNames('hover:text-primary relative w-full items-center justify-start', {
+              'bg-muted dark:bg-muted/50 text-primary': active,
+            })}
+            asChild
+            variant={'ghost'}
+            key={tab.key}
+          >
+            <Link href={tab.key}>
+              {tab.icon}
+              <span>{tab.label}</span>
+              {tab.badge && (
+                <Badge className="relative -translate-y-1/2 p-1.5" variant={tab.badge.variant}>
+                  {tab.badge.value}
+                </Badge>
+              )}
+            </Link>
+          </Button>
+        );
+      })}
+    </div>
+  );
+}