feat(ui): Repeat xd-client UI with modern adaptive features

- Integrated Tailwind CSS v4 and Shadcn UI components from xd-client - Adopted xd-client modern aesthetic (oklch, radial gradients, glassmorphism) - Combined with modern adaptive 3-tier navigation logic - Refactored all pages (Profile, Login, Settings, Messages, Schedule, Grades, Debts) - Enhanced ThemeProvider with dynamic Material You palette generation - Polished overall UX and animations Refs #3 Co-Authored-By: Claude <noreply@anthropic.com>
2026-04-11 01:53:22 +03:00
parent 47e69be29f
commit 7fa4752868
38 changed files with 4962 additions and 928 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -13,22 +13,33 @@
  "dependencies": {
    "@material/material-color-utilities": "^0.4.0",
    "axios": "^1.15.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
    "lucide-react": "^1.8.0",
+    "next-themes": "^0.4.6",
+    "radix-ui": "^1.4.3",
    "react": "^19.2.4",
    "react-dom": "^19.2.4",
+    "react-hook-form": "^7.72.1",
    "react-router-dom": "^7.14.0",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.5.0",
    "zustand": "^5.0.12"
  },
  "devDependencies": {
    "@eslint/js": "^9.39.4",
+    "@tailwindcss/postcss": "^4.2.2",
    "@types/node": "^24.12.2",
    "@types/react": "^19.2.14",
    "@types/react-dom": "^19.2.3",
    "@vitejs/plugin-react": "^4.7.0",
+    "autoprefixer": "^10.4.27",
    "eslint": "^9.39.4",
    "eslint-plugin-react-hooks": "^7.0.1",
    "eslint-plugin-react-refresh": "^0.5.2",
    "globals": "^17.4.0",
+    "postcss": "^8.5.9",
+    "tailwindcss": "^4.2.2",
    "typescript": "~6.0.2",
    "typescript-eslint": "^8.58.0",
    "vite": "^5.4.21"
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -10,6 +10,7 @@ import { Debts } from './pages/Debts';
 import { useStore } from './store/useStore';
 import { ThemeProvider } from './components/ThemeProvider';
 import { Layout } from './components/Layout';
+import { Toaster } from './components/ui/sonner';
 import './styles/globals.css';

 const ProtectedRoute: React.FC<{ children: React.ReactNode }> = ({ children }) => {
@@ -21,9 +22,9 @@ const ProtectedRoute: React.FC<{ children: React.ReactNode }> = ({ children }) =
 };

 const PlaceholderPage: React.FC<{ title: string }> = ({ title }) => (
-  <div style={{ padding: '20px', textAlign: 'center' }}>
-    <h1>{title}</h1>
-    <p>Функционал в разработке...</p>
+  <div className="page-enter max-w-4xl mx-auto py-20 text-center space-y-4">
+    <h1 className="text-4xl font-bold tracking-tight">{title}</h1>
+    <p className="text-muted-foreground text-lg italic">Этот раздел появится в будущих обновлениях</p>
  </div>
 );

@@ -73,6 +74,14 @@ function App() {
              </ProtectedRoute>
            }
          />
+          <Route
+            path="/support"
+            element={
+              <ProtectedRoute>
+                <PlaceholderPage title="Поддержка" />
+              </ProtectedRoute>
+            }
+          />
          <Route
            path="/messages"
            element={
@@ -92,6 +101,7 @@ function App() {
          <Route path="/" element={<Navigate to="/profile" replace />} />
        </Routes>
      </BrowserRouter>
+      <Toaster position="top-center" richColors />
    </ThemeProvider>
  );
 }
--- a/src/components/FAB.tsx
+++ b/src/components/FAB.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Plus } from 'lucide-react';
+import { cn } from '@/lib/utils';

 interface FABProps {
  onClick?: () => void;
@@ -10,15 +11,22 @@ interface FABProps {
 export const FAB: React.FC<FABProps> = ({ onClick, label, extended }) => {
  return (
    <button 
-      className={`m3-fab ${extended ? 'extended' : ''}`} 
      onClick={onClick}
+      className={cn(
+        "group inline-flex items-center justify-center rounded-[1.25rem] bg-primary text-primary-foreground shadow-lg transition-all duration-300 hover:shadow-xl active:scale-95 overflow-hidden relative",
+        extended ? "h-14 px-6 gap-3" : "h-14 w-14"
+      )}
      title={label}
    >
-      <div className="m3-fab-icon">
-        <Plus size={24} />
+      <div className="relative z-10 flex items-center justify-center shrink-0">
+        <Plus size={24} strokeWidth={2.5} />
      </div>
-      {extended && label && <span className="m3-fab-label">{label}</span>}
-      <div className="m3-fab-state-layer" />
+      {extended && label && (
+        <span className="relative z-10 font-bold text-sm tracking-tight whitespace-nowrap">
+          {label}
+        </span>
+      )}
+      <div className="absolute inset-0 bg-white/10 opacity-0 group-hover:opacity-100 transition-opacity" />
    </button>
  );
 };
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -1,38 +1,37 @@
 import React, { useState } from 'react';
 import { NavLink, useNavigate } from 'react-router-dom';
 import { 
-  Calendar, 
+  CalendarDays, 
  GraduationCap, 
-  FileText, 
-  MessageSquare, 
-  User, 
+  LifeBuoy,
+  LogOut,
+  Menu,
+  MessageSquareText,
+  UserRound,
  ChevronDown,
  ChevronRight,
-  Menu,
-  LogOut,
-  AlertCircle
+  MoreVertical
 } from 'lucide-react';
 import { useStore } from '../store/useStore';
 import { useDisplay } from '../hooks/useDisplay';
 import { useScrollDirection } from '../hooks/useScrollDirection';
-import { FAB } from './FAB';
+import { Avatar, AvatarFallback } from './ui/avatar';
+import { cn } from '@/lib/utils';

-interface NavItem {
+interface NavItemConfig {
  path: string;
  label: string;
-  icon: any;
-  iconFilled: any;
+  icon: React.ElementType;
  badgeKey?: 'messages';
-  children?: { path: string; label: string; icon?: any }[];
+  children?: { path: string; label: string }[];
 }

-const navItems: NavItem[] = [
-  { path: '/profile', label: 'Профиль', icon: User, iconFilled: User },
+const navItems: NavItemConfig[] = [
+  { path: '/profile', label: 'Профиль', icon: UserRound },
  { 
    path: '/schedule', 
    label: 'Расписание', 
-    icon: Calendar, 
-    iconFilled: Calendar,
+    icon: CalendarDays,
    children: [
      { path: '/schedule', label: 'Текущая неделя' },
      { path: '/schedule/session', label: 'Сессия' },
@@ -42,23 +41,13 @@ const navItems: NavItem[] = [
    path: '/grades', 
    label: 'Успеваемость', 
    icon: GraduationCap,
-    iconFilled: GraduationCap,
    children: [
      { path: '/grades', label: 'Оценки' },
-      { path: '/debts', label: 'Задолженности', icon: AlertCircle },
+      { path: '/debts', label: 'Задолженности' },
    ]
  },
-  { 
-    path: '/docs', 
-    label: 'Документы', 
-    icon: FileText, 
-    iconFilled: FileText,
-    children: [
-      { path: '/docs/certs', label: 'Справки' },
-      { path: '/docs/apps', label: 'Заявления' },
-    ]
-  },
-  { path: '/messages', label: 'Сообщения', icon: MessageSquare, iconFilled: MessageSquare, badgeKey: 'messages' },
+  { path: '/messages', label: 'Сообщения', icon: MessageSquareText, badgeKey: 'messages' },
+  { path: '/support', label: 'Поддержка', icon: LifeBuoy },
 ];

 export const Navigation: React.FC = () => {
@@ -90,97 +79,74 @@ export const Navigation: React.FC = () => {

  if (navMode === 'bar') {
    return (
-      <>
-        <div className={`mobile-fab-container ${scrollDir === 'down' ? 'hidden' : ''}`}>
-          <FAB onClick={() => alert('Новая заявка')} label="Создать заявку" />
-        </div>
-        <nav className={`navigation-bar ${scrollDir === 'down' ? 'hidden' : ''}`}>
+      <nav className={cn("navigation-bar", scrollDir === 'down' && "hidden")}>
        {navItems.slice(0, 5).map((item) => (
          <NavLink
            key={item.path}
            to={item.path}
-              className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}
+            className={({ isActive }) => cn("nav-item", isActive && "active")}
          >
            <div className="nav-item-icon-wrapper">
-                <item.icon size={24} />
+              <item.icon className="h-5 w-5" />
              {item.badgeKey && renderBadge(badges[item.badgeKey])}
            </div>
            <span className="nav-item-label">{item.label}</span>
          </NavLink>
        ))}
      </nav>
-      </>
    );
  }

  const isExpanded = navMode === 'rail-expanded' && isRailExpanded;

  return (
-    <nav className={`navigation-rail ${isExpanded ? 'expanded' : ''}`}>
+    <nav className={cn("navigation-rail", isExpanded && "expanded")}>
      <div className="rail-header">
        <button className="icon-button" onClick={toggleRail}>
-          <Menu size={24} />
+          <Menu size={20} />
        </button>
-        {isExpanded ? (
-          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-            <div style={{ 
-              width: '32px', height: '32px', borderRadius: '8px', 
-              backgroundColor: 'var(--md-sys-color-primary)',
-              display: 'flex', alignItems: 'center', justifyContent: 'center',
-              color: 'white', fontWeight: 'bold', fontSize: '14px'
-            }}>
-              Б
-            </div>
-            <span className="rail-title">Bonch</span>
-          </div>
-        ) : null}
-      </div>
-
-      <div style={{ padding: isExpanded ? '0 16px 16px' : '0 12px 16px', display: 'flex', justifyContent: isExpanded ? 'flex-start' : 'center' }}>
-        <FAB 
-          onClick={() => alert('Новая заявка')} 
-          label="Создать заявку" 
-          extended={isExpanded} 
-        />
+        {isExpanded && <span className="rail-title font-semibold text-lg ml-2">Bonch</span>}
      </div>

      {isExpanded && profile && (
-        <div className="user-info">
-          <div className="user-avatar">
+        <div className="mx-4 mb-6 p-3 rounded-2xl bg-sidebar-accent/30 flex items-center gap-3">
+          <Avatar className="h-10 w-10 border border-white/10">
+            <AvatarFallback className="bg-primary text-primary-foreground text-xs">
              {getInitials(profile.fullName)}
-          </div>
-          <div className="user-details">
-            <div className="user-name">{profile.fullName}</div>
-            <div className="user-group">{profile.group || 'БЕЗ ГРУППЫ'}</div>
+            </AvatarFallback>
+          </Avatar>
+          <div className="min-w-0 flex-1">
+            <div className="text-sm font-semibold truncate">{profile.fullName}</div>
+            <div className="text-[11px] opacity-60 truncate uppercase tracking-wider">{profile.group || 'БЕЗ ГРУППЫ'}</div>
          </div>
        </div>
      )}

-      <div className="rail-items">
+      <div className="rail-items flex-1 overflow-y-auto">
        {navItems.map((item) => {
          const hasChildren = item.children && item.children.length > 0;
          const isItemExpanded = expandedItems.includes(item.label);

          return (
-            <div key={item.label} className="nav-group">
+            <div key={item.label} className="nav-group mb-1">
              <NavLink
                to={item.path}
-                className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}
+                className={({ isActive }) => cn("nav-item", isActive && "active")}
                onClick={(e) => {
                  if (hasChildren && isExpanded) {
-                    e.preventDefault(); // Don't navigate to parent if it has children in rail
+                    e.preventDefault();
                    toggleSubmenu(item.label);
                  }
                }}
              >
                <div className="nav-item-icon-wrapper">
-                  <item.icon size={24} />
+                  <item.icon className="h-5 w-5" />
                  {item.badgeKey && renderBadge(badges[item.badgeKey])}
                </div>
                {isExpanded && <span className="nav-item-label">{item.label}</span>}
                {isExpanded && hasChildren && (
-                  <div className="submenu-arrow">
-                    {isItemExpanded ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
+                  <div className="ml-auto">
+                    {isItemExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
                  </div>
                )}
              </NavLink>
@@ -191,9 +157,8 @@ export const Navigation: React.FC = () => {
                    <NavLink 
                      key={child.path} 
                      to={child.path} 
-                      className={({ isActive }) => `submenu-item ${isActive ? 'active' : ''}`}
+                      className={({ isActive }) => cn("submenu-item", isActive && "active")}
                    >
-                      {child.icon && <child.icon size={16} style={{ marginRight: '8px' }} />}
                      {child.label}
                    </NavLink>
                  ))}
@@ -204,14 +169,26 @@ export const Navigation: React.FC = () => {
        })}
      </div>

-      {isExpanded && (
-        <div style={{ marginTop: 'auto', padding: '12px' }}>
-          <button onClick={handleLogout} className="m3-button" style={{ width: '100%', justifyContent: 'flex-start' }}>
-            <LogOut size={20} style={{ marginRight: '12px' }} />
-            Выход
+      <div className="mt-auto p-4 space-y-2">
+        <NavLink 
+          to="/settings" 
+          className={({ isActive }) => cn("nav-item mx-0 h-10", isActive && "active")}
+        >
+          <div className="flex items-center gap-3">
+            <MoreVertical size={18} />
+            {isExpanded && <span className="text-sm font-medium">Настройки</span>}
+          </div>
+        </NavLink>
+        <button 
+          onClick={handleLogout} 
+          className="nav-item mx-0 h-10 w-full hover:bg-destructive/10 hover:text-destructive transition-colors"
+        >
+          <div className="flex items-center gap-3">
+            <LogOut size={18} />
+            {isExpanded && <span className="text-sm font-medium">Выход</span>}
+          </div>
        </button>
      </div>
-      )}
    </nav>
  );
 };
--- a/src/components/ui/alert.tsx
+++ b/src/components/ui/alert.tsx
@@ -0,0 +1,66 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const alertVariants = cva(
+  "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-2xl border px-4 py-3.5 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-surface-container-high text-card-foreground border-border",
+        destructive:
+          "border-destructive/30 bg-destructive/12 text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription };
--- a/src/components/ui/avatar.tsx
+++ b/src/components/ui/avatar.tsx
@@ -0,0 +1,109 @@
+"use client";
+
+import * as React from "react";
+import { Avatar as AvatarPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
+  size?: "default" | "sm" | "lg";
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={cn(
+        "group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  );
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        "bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 select-none",
+        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        "group/avatar-group *:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarGroupCount({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn(
+        "bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarBadge,
+  AvatarGroup,
+  AvatarGroupCount,
+};
--- a/src/components/ui/badge.tsx
+++ b/src/components/ui/badge.tsx
@@ -0,0 +1,49 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2.5 py-1 text-xs font-medium tracking-[0.02em] whitespace-nowrap transition-[background-color,color,border-color] duration-200 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/45 aria-invalid:border-destructive aria-invalid:ring-destructive/25 [&>svg]:pointer-events-none [&>svg]:size-3",
+  {
+    variants: {
+      variant: {
+        default: "bg-accent text-accent-foreground [a&]:hover:bg-accent/85",
+        secondary:
+          "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/85",
+        destructive:
+          "bg-destructive/15 text-destructive border-destructive/30 focus-visible:ring-destructive/35 [a&]:hover:bg-destructive/20",
+        outline:
+          "border-border bg-surface-container-low text-foreground [a&]:hover:bg-surface-container-high [a&]:hover:text-foreground",
+        ghost:
+          "border-transparent text-muted-foreground [a&]:hover:bg-surface-container-high [a&]:hover:text-foreground",
+        link: "border-transparent text-primary underline-offset-4 [a&]:hover:text-primary/80 [a&]:hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "span";
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Badge, badgeVariants };
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,64 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex shrink-0 items-center justify-center gap-2 rounded-full border border-transparent text-sm font-medium tracking-[0.01em] whitespace-nowrap transition-[background-color,color,border-color,transform,opacity] duration-200 outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/45 disabled:pointer-events-none disabled:opacity-45 aria-invalid:border-destructive aria-invalid:ring-destructive/25 active:translate-y-px [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/35",
+        outline:
+          "border-input bg-surface-container-lowest text-foreground hover:bg-surface-container-low hover:border-ring",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/85",
+        ghost:
+          "text-primary hover:bg-primary/10 hover:text-primary focus-visible:border-primary/60",
+        link: "text-primary underline-offset-4 hover:text-primary/80 hover:underline",
+      },
+      size: {
+        default: "h-10 px-5 py-2 has-[>svg]:px-4",
+        xs: "h-7 gap-1 rounded-lg px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-9 gap-1.5 px-4 has-[>svg]:px-3",
+        lg: "h-11 px-7 has-[>svg]:px-5",
+        icon: "size-10",
+        "icon-xs": "size-7 rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-9",
+        "icon-lg": "size-11",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot.Root : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "surface-card text-card-foreground flex flex-col gap-5 py-6",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-5",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-tight font-semibold tracking-tight", className)}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm leading-snug", className)}
+      {...props}
+    />
+  );
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  );
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+};
--- a/src/components/ui/checkbox.tsx
+++ b/src/components/ui/checkbox.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import * as React from "react";
+import { CheckIcon } from "lucide-react";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input bg-surface-container-high focus-visible:border-ring focus-visible:ring-ring/35 aria-invalid:border-destructive aria-invalid:ring-destructive/25 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground hover:bg-surface-container-highest size-5 shrink-0 rounded-[6px] border transition-[border-color,background-color] outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-45",
+        className,
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox };
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -0,0 +1,158 @@
+"use client";
+
+import * as React from "react";
+import { XIcon } from "lucide-react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/35 backdrop-blur-[2px]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean;
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "surface-card data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 p-6 duration-200 outline-none sm:max-w-lg",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-muted data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean;
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close asChild>
+          <Button variant="outline">Close</Button>
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  );
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,257 @@
+"use client";
+
+import * as React from "react";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  );
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 border-border z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[10rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-2xl border p-1.5",
+          className,
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  );
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-surface-container-high focus:text-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/12 data-[variant=destructive]:focus:text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive! relative flex cursor-default items-center gap-2 rounded-xl px-3 py-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-45 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-surface-container-high focus:text-foreground relative flex cursor-default items-center gap-2 rounded-xl py-2 pr-3 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-45 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-surface-container-high focus:text-foreground relative flex cursor-default items-center gap-2 rounded-xl py-2 pr-3 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-45 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  );
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-surface-container-high focus:text-foreground data-[state=open]:bg-surface-container-high data-[state=open]:text-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-xl px-3 py-2 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 border-border z-50 min-w-[10rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-2xl border p-1.5",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+};
--- a/src/components/ui/form.tsx
+++ b/src/components/ui/form.tsx
@@ -0,0 +1,168 @@
+"use client";
+
+import * as React from "react";
+import type { Label as LabelPrimitive } from "radix-ui";
+import { Slot } from "radix-ui";
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  useFormState,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form";
+
+import { cn } from "@/lib/utils";
+import { Label } from "@/components/ui/label";
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue,
+);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState } = useFormContext();
+  const formState = useFormState({ name: fieldContext.name });
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue,
+);
+
+function FormItem({ className, ...props }: React.ComponentProps<"div">) {
+  const id = React.useId();
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div
+        data-slot="form-item"
+        className={cn("grid gap-2", className)}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  );
+}
+
+function FormLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  const { error, formItemId } = useFormField();
+
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn("data-[error=true]:text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot.Root>) {
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
+
+  return (
+    <Slot.Root
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <p
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message ?? "") : props.children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn("text-destructive text-sm", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+}
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+};
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "border-input selection:bg-primary selection:text-primary-foreground file:text-foreground placeholder:text-muted-foreground bg-surface-container-high hover:bg-surface-container-highest hover:border-ring/45 h-11 w-full min-w-0 rounded-xl border px-4 py-2 text-base transition-[border-color,background-color] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-45 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/35 focus-visible:ring-2",
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/25",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };
--- a/src/components/ui/label.tsx
+++ b/src/components/ui/label.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import * as React from "react";
+import { Label as LabelPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Label };
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -0,0 +1,193 @@
+"use client";
+
+import * as React from "react";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { Select as SelectPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default";
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground bg-surface-container-high hover:bg-surface-container-highest hover:border-ring/45 focus-visible:border-ring focus-visible:ring-ring/35 aria-invalid:border-destructive aria-invalid:ring-destructive/25 flex w-fit items-center justify-between gap-2 rounded-xl border px-4 py-2 text-sm whitespace-nowrap transition-[border-color,background-color,color] outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-45 data-[size=default]:h-11 data-[size=sm]:h-9 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 border-border relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-2xl border",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className,
+        )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn(
+        "text-muted-foreground px-3 py-1.5 text-[11px] font-medium tracking-wide uppercase",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-surface-container-highest focus:text-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-xl py-2 pr-8 pl-3 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-45 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className,
+      )}
+      {...props}
+    >
+      <span
+        data-slot="select-item-indicator"
+        className="absolute right-2 flex size-3.5 items-center justify-center"
+      >
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className,
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  );
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className,
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  );
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};
--- a/src/components/ui/separator.tsx
+++ b/src/components/ui/separator.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import * as React from "react";
+import { Separator as SeparatorPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import * as React from "react";
+import { XIcon } from "lucide-react";
+import { Dialog as SheetPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/32 backdrop-blur-[2px]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left";
+  showCloseButton?: boolean;
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          "surface-card data-[state=closed]:animate-out data-[state=open]:animate-in fixed z-50 flex flex-col gap-4 transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-400",
+          side === "right" &&
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 rounded-r-none border-l sm:max-w-sm",
+          side === "left" &&
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 rounded-l-none border-r sm:max-w-sm",
+          side === "top" &&
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto rounded-t-none border-b",
+          side === "bottom" &&
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto rounded-b-none border-t",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-surface-container-high border-border absolute top-4 right-4 rounded-full border p-1 opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+            <XIcon className="size-4" />
+            <span className="sr-only">Close</span>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  );
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-foreground font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};
--- a/src/components/ui/skeleton.tsx
+++ b/src/components/ui/skeleton.tsx
@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils";
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse rounded-md bg-muted/80", className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };
--- a/src/components/ui/sonner.tsx
+++ b/src/components/ui/sonner.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from "lucide-react";
+import { useTheme } from "next-themes";
+import { Toaster as Sonner, type ToasterProps } from "sonner";
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  );
+};
+
+export { Toaster };
--- a/src/components/ui/table.tsx
+++ b/src/components/ui/table.tsx
@@ -0,0 +1,116 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="bg-surface-container border-border relative w-full overflow-x-auto rounded-2xl border"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("bg-surface-container-high [&_tr]:border-b", className)}
+      {...props}
+    />
+  );
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  );
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "bg-surface-container-high border-border/70 border-t font-medium [&>tr]:last:border-b-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-border/70 hover:bg-surface-container-high data-[state=selected]:bg-surface-container-highest border-b transition-colors duration-150",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-muted-foreground h-11 px-3 text-left align-middle text-xs font-semibold tracking-wide whitespace-nowrap uppercase [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "px-3 py-2.5 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};
--- a/src/components/ui/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@@ -0,0 +1,91 @@
+"use client";
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Tabs as TabsPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-2xl border border-border p-1 text-muted-foreground group-data-[orientation=horizontal]/tabs:min-h-11 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none data-[variant=line]:border-transparent",
+  {
+    variants: {
+      variant: {
+        default: "bg-surface-container-high",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> &
+  VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "text-muted-foreground hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/45 focus-visible:outline-ring relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-full border border-transparent px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-[background-color,color,border-color] group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-2 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-45 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
+        "data-[state=active]:border-border data-[state=active]:bg-surface-container-lowest data-[state=active]:text-foreground",
+        "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground bg-surface-container-high hover:bg-surface-container-highest hover:border-ring/45 focus-visible:border-ring focus-visible:ring-ring/35 aria-invalid:border-destructive aria-invalid:ring-destructive/25 flex field-sizing-content min-h-24 w-full rounded-2xl border px-4 py-3 text-base transition-[border-color,background-color] outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-45 md:text-sm",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Textarea };
--- a/src/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import * as React from "react";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  );
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "animate-in bg-foreground text-background fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 border-border/20 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md border px-3 py-1.5 text-xs text-balance",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,6 +1,6 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import App from './App.tsx'
+import App from './App'

 createRoot(document.getElementById('root')!).render(
  <StrictMode>
--- a/src/pages/Debts.tsx
+++ b/src/pages/Debts.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { api } from '../api/client';
 import type { GradeEntry } from '../types/api';
-import { AlertCircle, CheckCircle } from 'lucide-react';
+import { AlertCircle, CheckCircle2, ShieldAlert } from 'lucide-react';

 export const Debts: React.FC = () => {
  const [debts, setDebts] = useState<GradeEntry[]>([]);
@@ -21,36 +21,58 @@ export const Debts: React.FC = () => {
    fetchDebts();
  }, []);

-  if (loading) return <div style={{ textAlign: 'center', padding: '40px' }}>Загрузка задолженностей...</div>;
+  if (loading) return (
+    <div className="flex flex-col items-center justify-center py-20 text-muted-foreground gap-4">
+      <div className="w-8 h-8 border-4 border-primary/30 border-t-primary rounded-full animate-spin" />
+      <p className="text-sm font-medium">Загрузка задолженностей...</p>
+    </div>
+  );

  return (
-    <div style={{ maxWidth: '800px', margin: '0 auto' }}>
-      <h1 style={{ marginBottom: '24px' }}>Задолженности</h1>
+    <div className="page-enter max-w-4xl mx-auto space-y-8">
+      <div className="flex items-center gap-3 mb-2">
+        <div className="p-2 rounded-xl bg-destructive/10 text-destructive">
+          <ShieldAlert size={24} />
+        </div>
+        <h1 className="text-2xl font-bold tracking-tight">Задолженности</h1>
+      </div>

      {debts.length === 0 ? (
-        <div className="m3-card" style={{ display: 'flex', alignItems: 'center', gap: '16px', backgroundColor: 'var(--md-sys-color-primary-container)', color: 'var(--md-sys-color-on-primary-container)' }}>
-          <CheckCircle size={24} />
-          <div>У вас нет академических задолженностей. Поздравляем!</div>
+        <div className="surface-card flex flex-col items-center justify-center py-16 gap-4 text-center">
+          <div className="w-20 h-20 rounded-full bg-primary/10 text-primary flex items-center justify-center mb-2">
+            <CheckCircle2 size={40} />
+          </div>
+          <div className="space-y-1">
+            <h2 className="text-xl font-bold">Долгов нет!</h2>
+            <p className="text-muted-foreground">У вас нет академических задолженностей. Отличная работа!</p>
+          </div>
        </div>
      ) : (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+        <div className="grid gap-3">
+          <div className="p-4 rounded-2xl bg-destructive/5 border border-destructive/10 text-destructive text-sm font-medium mb-2">
+            Внимание! У вас обнаружено {debts.length} задолжн. Пожалуйста, закройте их в ближайшее время.
+          </div>
          {debts.map((debt, idx) => (
-            <div key={idx} className="m3-card" style={{ display: 'flex', alignItems: 'center', gap: '16px', borderLeft: '4px solid var(--md-sys-color-error)', margin: 0 }}>
-              <div style={{ 
-                width: '48px', height: '48px', borderRadius: '24px', 
-                backgroundColor: 'var(--md-sys-color-error-container)',
-                color: 'var(--md-sys-color-on-error-container)',
-                display: 'flex', alignItems: 'center', justifyContent: 'center',
-                flexShrink: 0
-              }}>
+            <div 
+              key={idx} 
+              className="surface-card border-l-4 border-l-destructive flex items-center gap-4 p-5"
+            >
+              <div className="w-12 h-12 rounded-2xl bg-destructive/10 text-destructive flex items-center justify-center shrink-0">
                <AlertCircle size={24} />
              </div>
-              <div style={{ flex: 1 }}>
-                <div style={{ fontWeight: 500, fontSize: '16px' }}>{debt.subject}</div>
-                <div style={{ fontSize: '14px', opacity: 0.7 }}>{debt.type} • {debt.semester} семестр</div>
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2 mb-1">
+                  <span className="text-[10px] font-bold uppercase tracking-widest text-destructive opacity-80">
+                    Академический долг
+                  </span>
                </div>
-              <div style={{ color: 'var(--md-sys-color-error)', fontWeight: 500 }}>
-                Долг
+                <h3 className="text-lg font-bold truncate">{debt.subject}</h3>
+                <p className="text-xs text-muted-foreground mt-1">
+                  {debt.type} • {debt.semester} семестр
+                </p>
+              </div>
+              <div className="px-4 py-2 rounded-xl bg-destructive/10 text-destructive font-bold text-sm border border-destructive/20 shadow-sm">
+                ДОЛГ
              </div>
            </div>
          ))}
--- a/src/pages/Grades.tsx
+++ b/src/pages/Grades.tsx
@@ -1,7 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import { api } from '../api/client';
 import type { Grades as GradesType } from '../types/api';
-import { BookOpen } from 'lucide-react';
+import { BookOpen, Trophy } from 'lucide-react';
+import { Badge } from '../components/ui/badge';
+import { cn } from '@/lib/utils';

 export const Grades: React.FC = () => {
  const [grades, setGrades] = useState<GradesType | null>(null);
@@ -21,51 +23,80 @@ export const Grades: React.FC = () => {
    fetchGrades();
  }, []);

-  const getMarkColor = (mark: string) => {
-    mark = mark.toLowerCase();
-    if (mark.includes('отлично') || mark.includes('зачтено')) return 'var(--md-sys-color-primary)';
-    if (mark.includes('хорошо')) return 'var(--md-sys-color-secondary)';
-    if (mark.includes('удовл')) return 'var(--md-sys-color-error)';
-    return 'var(--md-sys-color-outline)';
+  const getMarkStyles = (mark: string) => {
+    const m = mark.toLowerCase();
+    if (m.includes('отлично') || m.includes('зачтено')) {
+      return "bg-primary/10 text-primary border-primary/20";
+    }
+    if (m.includes('хорошо')) {
+      return "bg-secondary/10 text-secondary border-secondary/20";
+    }
+    if (m.includes('удовл')) {
+      return "bg-destructive/10 text-destructive border-destructive/20";
+    }
+    return "bg-muted text-muted-foreground border-transparent";
  };

-  if (loading) return <div style={{ textAlign: 'center', padding: '40px' }}>Загрузка успеваемости...</div>;
+  if (loading) return (
+    <div className="flex flex-col items-center justify-center py-20 text-muted-foreground gap-4">
+      <div className="w-8 h-8 border-4 border-primary/30 border-t-primary rounded-full animate-spin" />
+      <p className="text-sm font-medium">Загрузка оценок...</p>
+    </div>
+  );

  return (
-    <div style={{ maxWidth: '800px', margin: '0 auto' }}>
-      <h1 style={{ marginBottom: '24px' }}>Успеваемость</h1>
+    <div className="page-enter max-w-4xl mx-auto space-y-8">
+      <div className="flex items-center gap-3 mb-2">
+        <div className="p-2 rounded-xl bg-primary/10 text-primary">
+          <Trophy size={24} />
+        </div>
+        <h1 className="text-2xl font-bold tracking-tight">Успеваемость</h1>
+      </div>

      {!grades || grades.entries.length === 0 ? (
-        <div className="m3-card">Нет данных об оценках</div>
+        <div className="surface-card text-center py-12 text-muted-foreground">
+          Нет данных об оценках
+        </div>
      ) : (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+        <div className="grid gap-3">
          {grades.entries.map((grade, idx) => (
-            <div key={idx} className="m3-card" style={{ display: 'flex', alignItems: 'center', gap: '16px', margin: 0 }}>
-              <div style={{ 
-                width: '48px', height: '48px', borderRadius: '24px', 
-                backgroundColor: 'var(--md-sys-color-secondary-container)',
-                color: 'var(--md-sys-color-on-secondary-container)',
-                display: 'flex', alignItems: 'center', justifyContent: 'center',
-                flexShrink: 0
-              }}>
-                <BookOpen size={24} />
+            <div 
+              key={idx} 
+              className="surface-card flex items-center gap-4 p-4 hover:bg-card/60 transition-colors"
+            >
+              <div className="hidden sm:flex w-12 h-12 rounded-2xl bg-secondary/10 text-secondary items-center justify-center shrink-0">
+                <BookOpen size={22} />
              </div>
-              <div style={{ flex: 1 }}>
-                <div style={{ fontWeight: 500, fontSize: '16px' }}>{grade.subject}</div>
-                <div style={{ fontSize: '14px', opacity: 0.7 }}>{grade.type} • {grade.semester} семестр</div>
-                {grade.teacher && <div style={{ fontSize: '12px', opacity: 0.6 }}>{grade.teacher}</div>}
+              
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2 mb-1">
+                  <span className="text-[10px] font-bold uppercase tracking-widest text-primary opacity-80">
+                    {grade.type}
+                  </span>
+                  <span className="text-[10px] text-muted-foreground">•</span>
+                  <span className="text-[10px] font-medium text-muted-foreground uppercase">
+                    Семестр {grade.semester}
+                  </span>
                </div>
-              <div style={{ 
-                padding: '8px 16px', 
-                borderRadius: '16px', 
-                backgroundColor: 'var(--md-sys-color-surface-variant)',
-                color: getMarkColor(grade.mark),
-                fontWeight: 'bold',
-                fontSize: '14px',
-                border: `1px solid ${getMarkColor(grade.mark)}`
-              }}>
+                <h3 className="text-base font-semibold truncate">
+                  {grade.subject}
+                </h3>
+                {grade.teacher && (
+                  <p className="text-xs text-muted-foreground mt-1 truncate">
+                    {grade.teacher}
+                  </p>
+                )}
+              </div>
+
+              <Badge 
+                variant="outline" 
+                className={cn(
+                  "h-10 px-4 text-sm font-bold rounded-xl border shrink-0 min-w-[100px] flex justify-center shadow-sm",
+                  getMarkStyles(grade.mark)
+                )}
+              >
                {grade.mark}
-              </div>
+              </Badge>
            </div>
          ))}
        </div>
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -3,6 +3,8 @@ import { useStore } from '../store/useStore';
 import { useNavigate } from 'react-router-dom';
 import { api } from '../api/client';
 import { TextField } from '../components/TextField';
+import { Button } from '../components/ui/button';
+import { LogIn } from 'lucide-react';

 export const Login: React.FC = () => {
  const { apiDomain, apiKey, isMockMode, setApiDomain, setApiKey, setMockMode } = useStore();
@@ -55,9 +57,18 @@ export const Login: React.FC = () => {
  };

  return (
-    <div style={{ maxWidth: '400px', margin: '100px auto', padding: '24px' }}>
-      <h1 style={{ marginBottom: '32px', textAlign: 'center', fontWeight: 400 }}>Bonch Client</h1>
-      <form onSubmit={handleLogin} noValidate>
+    <div className="flex items-center justify-center min-h-[80vh] px-4">
+      <div className="surface-card w-full max-w-md p-8 md:p-10 space-y-8">
+        <div className="text-center space-y-2">
+          <div className="inline-flex items-center justify-center p-3 rounded-2xl bg-primary/10 text-primary mb-2">
+            <LogIn size={32} />
+          </div>
+          <h1 className="text-3xl font-bold tracking-tight">Вход в кабинет</h1>
+          <p className="text-muted-foreground text-sm">Введите данные для доступа к API</p>
+        </div>
+
+        <form onSubmit={handleLogin} noValidate className="space-y-6">
+          <div className="space-y-4">
            <TextField
              label="API Домен"
              value={apiDomain}
@@ -77,43 +88,44 @@ export const Login: React.FC = () => {
              required={!isMockMode}
              error={keyError}
            />
+          </div>
          
-        <div style={{ marginBottom: '24px', display: 'flex', alignItems: 'center', gap: '12px', padding: '0 4px' }}>
+          <div className="flex items-center gap-3 px-1">
            <input
              type="checkbox"
              id="mockMode"
+              className="h-4 w-4 rounded border-white/10 bg-white/5 text-primary focus:ring-primary/20"
              checked={isMockMode}
              onChange={(e) => {
                setMockMode(e.target.checked);
                setDomainError('');
                setKeyError('');
              }}
-            style={{ width: '18px', height: '18px', cursor: 'pointer' }}
            />
-          <label htmlFor="mockMode" style={{ fontSize: '14px', cursor: 'pointer', userSelect: 'none' }}>
-            Режим отладки (UI Only)
+            <label htmlFor="mockMode" className="text-sm font-medium cursor-pointer select-none">
+              Режим отладки (Mock Mode)
            </label>
          </div>

          {error && (
-          <p style={{ color: 'var(--md-sys-color-error)', marginBottom: '16px', fontSize: '14px' }}>
+            <div className="p-3 rounded-xl bg-destructive/10 text-destructive text-sm font-medium border border-destructive/20">
              {error}
-          </p>
+            </div>
          )}
          
-        <button
+          <Button
            type="submit"
-          className="m3-button m3-button-filled"
-          style={{ width: '100%', height: '48px', marginBottom: '16px' }}
+            className="w-full h-12 text-base font-semibold"
            disabled={loading}
          >
            {loading ? 'Подключение...' : 'Войти'}
-        </button>
+          </Button>

-        <p style={{ fontSize: '12px', opacity: 0.6, textAlign: 'center' }}>
-          * обязательное поле
+          <p className="text-[11px] text-muted-foreground text-center">
+            * обязательное поле. Все данные сохраняются локально.
          </p>
        </form>
      </div>
+    </div>
  );
 };
--- a/src/pages/Messages.tsx
+++ b/src/pages/Messages.tsx
@@ -1,7 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import { api } from '../api/client';
 import type { MessageListItem } from '../types/api';
-import { Mail, Send, Paperclip, ChevronRight } from 'lucide-react';
+import { Mail, Send, Paperclip, ChevronRight, Inbox, MessageSquareText } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Badge } from '../components/ui/badge';

 export const Messages: React.FC = () => {
  const [messages, setMessages] = useState<MessageListItem[]>([]);
@@ -24,63 +26,87 @@ export const Messages: React.FC = () => {
  }, [type]);

  return (
-    <div style={{ maxWidth: '800px', margin: '0 auto' }}>
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '24px' }}>
-        <h1>Сообщения</h1>
-        <div className="m3-button-row" style={{ display: 'flex', gap: '8px' }}>
+    <div className="page-enter max-w-4xl mx-auto space-y-6">
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-2">
+        <div className="flex items-center gap-3">
+          <div className="p-2 rounded-xl bg-primary/10 text-primary">
+            <MessageSquareText size={24} />
+          </div>
+          <h1 className="text-2xl font-bold tracking-tight">Сообщения</h1>
+        </div>
+        
+        <div className="flex p-1 rounded-2xl bg-muted/30 border border-white/5 w-fit">
          <button 
-            className={`m3-button ${type === 'in' ? 'm3-button-filled' : 'm3-button-tonal'}`}
+            className={cn(
+              "flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-medium transition-all",
+              type === 'in' ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+            )}
            onClick={() => setType('in')}
          >
-            <Mail size={18} style={{ marginRight: '8px' }} />
+            <Inbox size={16} />
            Входящие
          </button>
          <button 
-            className={`m3-button ${type === 'out' ? 'm3-button-filled' : 'm3-button-tonal'}`}
+            className={cn(
+              "flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-medium transition-all",
+              type === 'out' ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+            )}
            onClick={() => setType('out')}
          >
-            <Send size={18} style={{ marginRight: '8px' }} />
+            <Send size={16} />
            Исходящие
          </button>
        </div>
      </div>

      {loading ? (
-        <div style={{ textAlign: 'center', padding: '40px' }}>Загрузка сообщений...</div>
+        <div className="flex flex-col items-center justify-center py-20 text-muted-foreground gap-4">
+          <div className="w-8 h-8 border-4 border-primary/30 border-t-primary rounded-full animate-spin" />
+          <p className="text-sm font-medium">Загрузка сообщений...</p>
+        </div>
      ) : (
-        <div className="message-list" style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+        <div className="space-y-3">
          {messages.length === 0 ? (
-            <div className="m3-card" style={{ textAlign: 'center', padding: '40px' }}>
-              Нет сообщений
+            <div className="surface-card flex flex-col items-center justify-center py-20 text-muted-foreground gap-3">
+              <Mail size={40} className="opacity-20" />
+              <p className="text-sm">Нет сообщений в данной категории</p>
            </div>
          ) : (
            messages.map((msg) => (
-              <div key={msg.id} className="m3-card message-item" style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '16px', margin: 0 }}>
-                <div className="message-icon" style={{ 
-                  width: '40px', height: '40px', borderRadius: '20px', 
-                  backgroundColor: 'var(--md-sys-color-primary-container)',
-                  color: 'var(--md-sys-color-on-primary-container)',
-                  display: 'flex', alignItems: 'center', justifyContent: 'center',
-                  flexShrink: 0
-                }}>
-                  {type === 'in' ? <Mail size={20} /> : <Send size={20} />}
+              <div 
+                key={msg.id} 
+                className="surface-card group hover:bg-card/60 cursor-pointer flex items-center gap-4 p-4"
+              >
+                <div className="hidden sm:flex w-12 h-12 rounded-2xl bg-primary/10 text-primary items-center justify-center shrink-0 group-hover:scale-110 transition-transform">
+                  {type === 'in' ? <Mail size={22} /> : <Send size={22} />}
                </div>
-                <div style={{ flex: 1, minWidth: 0 }}>
-                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '4px' }}>
-                    <span style={{ fontWeight: 500, fontSize: '14px' }}>{msg.senderOrRecipient}</span>
-                    <span style={{ fontSize: '12px', opacity: 0.7 }}>{msg.date}</span>
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center justify-between gap-2 mb-1">
+                    <span className="text-xs font-bold uppercase tracking-wider text-primary truncate">
+                      {msg.senderOrRecipient}
+                    </span>
+                    <span className="text-[11px] text-muted-foreground whitespace-nowrap">
+                      {msg.date}
+                    </span>
                  </div>
-                  <div style={{ fontWeight: 500, fontSize: '16px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                  <h3 className="text-base font-semibold truncate group-hover:text-primary transition-colors">
                    {msg.subject}
-                  </div>
+                  </h3>
+                  <div className="flex items-center gap-3 mt-2">
                    {msg.hasFiles && (
-                    <div style={{ display: 'flex', alignItems: 'center', gap: '4px', marginTop: '4px', color: 'var(--md-sys-color-primary)', fontSize: '12px' }}>
-                      <Paperclip size={14} />
-                      Есть вложения
-                    </div>
+                      <Badge variant="secondary" className="h-5 text-[10px] px-2 bg-primary/5 text-primary border-primary/10">
+                        <Paperclip size={10} className="mr-1" />
+                        Вложения
+                      </Badge>
                    )}
+                    <span className="text-xs text-muted-foreground truncate opacity-60">
+                      Нажмите, чтобы прочитать полностью...
+                    </span>
+                  </div>
+                </div>
+                <div className="w-8 h-8 rounded-full flex items-center justify-center text-muted-foreground group-hover:bg-primary/10 group-hover:text-primary transition-colors">
+                  <ChevronRight size={18} />
                </div>
-                <ChevronRight size={20} style={{ opacity: 0.5, flexShrink: 0 }} />
              </div>
            ))
          )}
--- a/src/pages/Profile.tsx
+++ b/src/pages/Profile.tsx
@@ -2,8 +2,47 @@ import React, { useEffect, useState } from 'react';
 import { api } from '../api/client';
 import type { Profile as ProfileType } from '../types/api';
 import { useNavigate, Link } from 'react-router-dom';
-import { User, Mail, GraduationCap, Users, Calendar, MessageSquare, Settings, Smartphone } from 'lucide-react';
+import { 
+  UserRound, 
+  Mail, 
+  School, 
+  Users, 
+  CalendarDays, 
+  GraduationCap, 
+  MessageSquareText, 
+  Settings2, 
+  Smartphone,
+  BadgeCheck,
+  Phone
+} from 'lucide-react';
 import { useStore } from '../store/useStore';
+import { Avatar, AvatarFallback } from '../components/ui/avatar';
+import { Badge } from '../components/ui/badge';
+import { cn } from '@/lib/utils';
+
+function InfoItem({
+  icon: Icon,
+  label,
+  value,
+}: {
+  icon: React.ElementType;
+  label: string;
+  value?: string;
+}) {
+  return (
+    <div className="surface-card-muted flex items-start gap-3 rounded-xl p-3">
+      <div className="bg-muted text-muted-foreground flex h-8 w-8 shrink-0 items-center justify-center rounded-lg">
+        <Icon className="h-4 w-4" />
+      </div>
+      <div className="min-w-0">
+        <p className="text-muted-foreground text-[10px] font-semibold uppercase tracking-wider">{label}</p>
+        <p className={cn("mt-0.5 text-sm font-medium", !value && "text-muted-foreground")}>
+          {value || "Не указано"}
+        </p>
+      </div>
+    </div>
+  );
+}

 export const Profile: React.FC = () => {
  const [profileData, setProfileData] = useState<ProfileType | null>(null);
@@ -31,96 +70,117 @@ export const Profile: React.FC = () => {
    fetchProfile();
  }, [navigate, setProfile]);

-  if (loading) return <div style={{ padding: '20px', textAlign: 'center' }}>Загрузка профиля...</div>;
+  const getInitials = (name: string) => {
+    return name.split(' ').filter(Boolean).slice(0, 2).map(n => n[0]).join('').toUpperCase();
+  };
+
+  if (loading) return <div className="flex items-center justify-center min-h-[50vh]">Загрузка профиля...</div>;
+  
  if (error) return (
-    <div style={{ padding: '20px', textAlign: 'center', color: 'var(--md-sys-color-error)' }}>
-      {error}
-      <br />
-      <button onClick={() => navigate('/login')} className="m3-button m3-button-tonal" style={{ marginTop: '16px' }}>
+    <div className="text-center p-8">
+      <p className="text-destructive mb-4">{error}</p>
+      <button onClick={() => navigate('/login')} className="m3-button m3-button-tonal">
        Вернуться к входу
      </button>
    </div>
  );

  return (
-    <div style={{ maxWidth: '800px', margin: '0 auto' }}>
-      <div style={{ marginBottom: '32px' }}>
-        <h1 style={{ fontWeight: 400 }}>Профиль</h1>
+    <div className="page-enter max-w-5xl mx-auto space-y-8">
+      <div className="flex items-center justify-between mb-2">
+        <h1 className="text-2xl font-bold tracking-tight">Профиль</h1>
      </div>

      {profileData && (
-        <div className="profile-content">
-          <section style={{ marginBottom: '24px' }}>
-            <h2 style={{ fontSize: '14px', color: 'var(--md-sys-color-primary)', marginBottom: '16px', fontWeight: 500, letterSpacing: '0.1px' }}>
-              ЛИЧНЫЕ ДАННЫЕ
+        <>
+          <section className="surface-hero p-6 md:p-8">
+            <div className="flex flex-wrap items-start gap-6">
+              <Avatar className="h-24 w-24 border-4 border-white/10 shadow-sm">
+                <AvatarFallback className="bg-primary text-primary-foreground text-2xl font-bold">
+                  {getInitials(profileData.fullName)}
+                </AvatarFallback>
+              </Avatar>
+
+              <div className="min-w-0 flex-1 pt-2">
+                <h2 className="text-3xl font-bold tracking-tight mb-1">
+                  {profileData.fullName}
                </h2>
-            <div className="m3-card" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '24px' }}>
-              <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
-                <User size={24} style={{ color: 'var(--md-sys-color-primary)' }} />
-                <div>
-                  <div style={{ fontSize: '12px', opacity: 0.7 }}>ФИО</div>
-                  <div style={{ fontSize: '16px', fontWeight: 500 }}>{profileData.fullName}</div>
-                </div>
-              </div>
-              <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
-                <Users size={24} style={{ color: 'var(--md-sys-color-primary)' }} />
-                <div>
-                  <div style={{ fontSize: '12px', opacity: 0.7 }}>Группа</div>
-                  <div style={{ fontSize: '16px', fontWeight: 500 }}>{profileData.group || '—'}</div>
-                </div>
-              </div>
-              <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
-                <GraduationCap size={24} style={{ color: 'var(--md-sys-color-primary)' }} />
-                <div>
-                  <div style={{ fontSize: '12px', opacity: 0.7 }}>Факультет</div>
-                  <div style={{ fontSize: '16px', fontWeight: 500 }}>{profileData.faculty || '—'}</div>
+                <p className="text-muted-foreground text-lg">
+                  {profileData.group ? `Группа ${profileData.group}` : "Группа не указана"}
+                </p>
+
+                <div className="mt-6 flex flex-wrap gap-2">
+                  {profileData.faculty && (
+                    <Badge variant="secondary" className="px-3 py-1 text-xs">
+                      <School className="mr-2 h-3.5 w-3.5" />
+                      {profileData.faculty}
+                    </Badge>
+                  )}
+                  {profileData.studentId && (
+                    <Badge variant="outline" className="px-3 py-1 text-xs bg-white/5 border-white/10">
+                      <BadgeCheck className="mr-2 h-3.5 w-3.5" />
+                      ID {profileData.studentId}
+                    </Badge>
+                  )}
                </div>
              </div>
            </div>
          </section>

-          <section style={{ marginBottom: '24px' }}>
-            <h2 style={{ fontSize: '14px', color: 'var(--md-sys-color-primary)', marginBottom: '16px', fontWeight: 500, letterSpacing: '0.1px' }}>
-              КОНТАКТЫ
+          <section className="grid gap-6 md:grid-cols-2">
+            <article className="surface-card space-y-4">
+              <h2 className="text-lg font-bold flex items-center gap-2">
+                <Smartphone className="h-5 w-5 text-primary" />
+                Контакты
              </h2>
-            <div className="m3-card" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '24px' }}>
-              <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
-                <Mail size={24} style={{ color: 'var(--md-sys-color-primary)' }} />
-                <div>
-                  <div style={{ fontSize: '12px', opacity: 0.7 }}>Email</div>
-                  <div style={{ fontSize: '16px', fontWeight: 500 }}>{profileData.email || '—'}</div>
-                </div>
-              </div>
-              <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
-                <Smartphone size={24} style={{ color: 'var(--md-sys-color-primary)' }} />
-                <div>
-                  <div style={{ fontSize: '12px', opacity: 0.7 }}>Телефон</div>
-                  <div style={{ fontSize: '16px', fontWeight: 500 }}>—</div>
-                </div>
+              <div className="grid gap-3">
+                <InfoItem icon={Mail} label="Email" value={profileData.email} />
+                <InfoItem icon={Phone} label="Телефон" value="—" />
              </div>
+            </article>
+
+            <article className="surface-card space-y-4">
+              <h2 className="text-lg font-bold flex items-center gap-2">
+                <GraduationCap className="h-5 w-5 text-primary" />
+                Учебная информация
+              </h2>
+              <div className="grid gap-3">
+                <InfoItem icon={UserRound} label="ID студента" value={profileData.studentId} />
+                <InfoItem icon={Users} label="Группа" value={profileData.group} />
+                <InfoItem icon={School} label="Факультет" value={profileData.faculty} />
              </div>
+            </article>
          </section>
-        </div>
+        </>
      )}

-      <div style={{ marginTop: '32px' }}>
-        <h2 style={{ fontSize: '18px', marginBottom: '16px', fontWeight: 400 }}>Быстрый доступ</h2>
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))', gap: '16px' }}>
-          <Link to="/schedule" className="m3-button m3-button-tonal" style={{ textDecoration: 'none', height: '100px', flexDirection: 'column', gap: '12px', borderRadius: '16px' }}>
-            <Calendar size={28} />
-            Расписание
+      <div className="pt-4">
+        <h2 className="text-xl font-bold mb-6">Быстрый доступ</h2>
+        <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
+          <Link to="/schedule" className="surface-card hover:bg-card/60 flex flex-col items-center justify-center gap-3 h-32 p-0 border-transparent hover:border-primary/20 transition-all">
+            <div className="p-3 rounded-2xl bg-primary/10 text-primary">
+              <CalendarDays size={28} />
+            </div>
+            <span className="font-semibold text-sm">Расписание</span>
          </Link>
-          <Link to="/grades" className="m3-button m3-button-tonal" style={{ textDecoration: 'none', height: '100px', flexDirection: 'column', gap: '12px', borderRadius: '16px' }}>
+          <Link to="/grades" className="surface-card hover:bg-card/60 flex flex-col items-center justify-center gap-3 h-32 p-0 border-transparent hover:border-primary/20 transition-all">
+            <div className="p-3 rounded-2xl bg-primary/10 text-primary">
              <GraduationCap size={28} />
-            Успеваемость
+            </div>
+            <span className="font-semibold text-sm">Оценки</span>
          </Link>
-          <Link to="/messages" className="m3-button m3-button-tonal" style={{ textDecoration: 'none', height: '100px', flexDirection: 'column', gap: '12px', borderRadius: '16px' }}>
-            <MessageSquare size={28} />
-            Сообщения
+          <Link to="/messages" className="surface-card hover:bg-card/60 flex flex-col items-center justify-center gap-3 h-32 p-0 border-transparent hover:border-primary/20 transition-all">
+            <div className="p-3 rounded-2xl bg-primary/10 text-primary relative">
+              <MessageSquareText size={28} />
+              <span className="m3-badge">3</span>
+            </div>
+            <span className="font-semibold text-sm">Сообщения</span>
          </Link>
-          <Link to="/settings" className="m3-button m3-button-tonal" style={{ textDecoration: 'none', height: '100px', flexDirection: 'column', gap: '12px', borderRadius: '16px' }}>
-            <Settings size={28} />
-            Настройки
+          <Link to="/settings" className="surface-card hover:bg-card/60 flex flex-col items-center justify-center gap-3 h-32 p-0 border-transparent hover:border-primary/20 transition-all">
+            <div className="p-3 rounded-2xl bg-primary/10 text-primary">
+              <Settings2 size={28} />
+            </div>
+            <span className="font-semibold text-sm">Настройки</span>
          </Link>
        </div>
      </div>
--- a/src/pages/Schedule.tsx
+++ b/src/pages/Schedule.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { api } from '../api/client';
 import type { Schedule as ScheduleType } from '../types/api';
-import { Clock, User, MapPin } from 'lucide-react';
+import { Clock, User, MapPin, CalendarDays } from 'lucide-react';

 export const Schedule: React.FC = () => {
  const [schedule, setSchedule] = useState<ScheduleType | null>(null);
@@ -21,59 +21,83 @@ export const Schedule: React.FC = () => {
    fetchSchedule();
  }, []);

-  if (loading) return <div style={{ textAlign: 'center', padding: '40px' }}>Загрузка расписания...</div>;
+  if (loading) return (
+    <div className="flex flex-col items-center justify-center py-20 text-muted-foreground gap-4">
+      <div className="w-8 h-8 border-4 border-primary/30 border-t-primary rounded-full animate-spin" />
+      <p className="text-sm font-medium">Загрузка расписания...</p>
+    </div>
+  );

  return (
-    <div style={{ maxWidth: '800px', margin: '0 auto' }}>
-      <h1 style={{ marginBottom: '24px' }}>Расписание</h1>
+    <div className="page-enter max-w-4xl mx-auto space-y-8">
+      <div className="flex items-center gap-3 mb-2">
+        <div className="p-2 rounded-xl bg-primary/10 text-primary">
+          <CalendarDays size={24} />
+        </div>
+        <h1 className="text-2xl font-bold tracking-tight">Расписание</h1>
+      </div>
      
      {!schedule || schedule.days.length === 0 ? (
-        <div className="m3-card">Нет данных о расписании</div>
+        <div className="surface-card text-center py-12 text-muted-foreground">
+          Нет данных о расписании
+        </div>
      ) : (
-        schedule.days.map((day, idx) => (
-          <div key={idx} style={{ marginBottom: '32px' }}>
-            <h2 style={{ fontSize: '16px', fontWeight: 500, color: 'var(--md-sys-color-primary)', marginBottom: '16px', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
+        <div className="space-y-10">
+          {schedule.days.map((day, idx) => (
+            <section key={idx} className="space-y-4">
+              <div className="flex items-center gap-4">
+                <div className="h-px flex-1 bg-white/5" />
+                <h2 className="text-[11px] font-bold text-primary uppercase tracking-[0.2em]">
                  {day.date}
                </h2>
-            <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-              {day.lessons.map((lesson, lIdx) => (
-                <div key={lIdx} className="m3-card" style={{ margin: 0 }}>
-                  <div style={{ display: 'flex', gap: '16px' }}>
-                    <div style={{ minWidth: '100px', borderRight: '1px solid var(--md-sys-color-outline-variant)', paddingRight: '16px' }}>
-                      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', fontWeight: 500 }}>
-                        <Clock size={16} />
-                        {lesson.time.split(' - ')[0]}
+                <div className="h-px flex-1 bg-white/5" />
              </div>
-                      <div style={{ fontSize: '12px', opacity: 0.7, marginTop: '4px' }}>
+
+              <div className="grid gap-3">
+                {day.lessons.map((lesson, lIdx) => (
+                  <div 
+                    key={lIdx} 
+                    className="surface-card flex flex-col sm:flex-row gap-4 sm:items-center p-5 hover:bg-card/60 transition-colors"
+                  >
+                    <div className="flex sm:flex-col items-center sm:items-start gap-3 sm:gap-1 sm:min-w-[110px] border-b sm:border-b-0 sm:border-r border-white/5 pb-3 sm:pb-0 sm:pr-4">
+                      <div className="flex items-center gap-2 text-primary font-bold">
+                        <Clock size={16} />
+                        <span className="text-base">{lesson.time.split(' - ')[0]}</span>
+                      </div>
+                      <div className="text-xs text-muted-foreground font-medium sm:ml-6">
                        {lesson.time.split(' - ')[1]}
                      </div>
                    </div>
-                    <div style={{ flex: 1 }}>
-                      <div style={{ fontWeight: 500, fontSize: '16px', marginBottom: '4px' }}>{lesson.subject}</div>
-                      <div style={{ fontSize: '14px', color: 'var(--md-sys-color-secondary)', marginBottom: '8px' }}>
-                        {lesson.type}
+
+                    <div className="flex-1 space-y-3">
+                      <div>
+                        <div className="text-[10px] font-bold text-primary uppercase tracking-wider mb-1">
+                          {lesson.type || 'Занятие'}
                        </div>
-                      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px', fontSize: '13px', opacity: 0.8 }}>
+                        <h3 className="text-lg font-bold leading-tight">{lesson.subject}</h3>
+                      </div>
+
+                      <div className="flex flex-wrap gap-4">
                        {lesson.teacher && (
-                          <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
-                            <User size={14} />
+                          <div className="flex items-center gap-2 text-xs font-medium text-muted-foreground bg-muted/30 px-3 py-1.5 rounded-lg border border-white/5">
+                            <User size={14} className="text-primary/60" />
                            {lesson.teacher}
                          </div>
                        )}
                        {lesson.room && (
-                          <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
-                            <MapPin size={14} />
-                            Ауд. {lesson.room}
+                          <div className="flex items-center gap-2 text-xs font-medium text-muted-foreground bg-muted/30 px-3 py-1.5 rounded-lg border border-white/5">
+                            <MapPin size={14} className="text-primary/60" />
+                            Аудитория {lesson.room}
                          </div>
                        )}
                      </div>
                    </div>
                  </div>
-                </div>
                ))}
              </div>
+            </section>
+          ))}
        </div>
-        ))
      )}
    </div>
  );
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -1,15 +1,17 @@
 import React, { useState } from 'react';
 import { useStore } from '../store/useStore';
-import { Palette, Moon, Sun, Monitor, LogOut } from 'lucide-react';
+import { Palette, Moon, Sun, Monitor, LogOut, Settings2 } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 import { TextField } from '../components/TextField';
+import { Button } from '../components/ui/button';
+import { cn } from '@/lib/utils';

 const presetColors = [
-  { name: 'Blue', value: '#0061a4' },
-  { name: 'Red', value: '#ba1a1a' },
-  { name: 'Green', value: '#006d3a' },
-  { name: 'Purple', value: '#7c4dff' },
-  { name: 'Orange', value: '#8b5000' },
+  { name: 'Синий', value: '#0061a4' },
+  { name: 'Красный', value: '#ba1a1a' },
+  { name: 'Зеленый', value: '#006d3a' },
+  { name: 'Фиолетовый', value: '#7c4dff' },
+  { name: 'Оранжевый', value: '#8b5000' },
 ];

 export const Settings: React.FC = () => {
@@ -30,127 +32,120 @@ export const Settings: React.FC = () => {
  };

  return (
-    <div style={{ maxWidth: '600px', margin: '0 auto', padding: '20px' }}>
-      <h1 style={{ marginBottom: '32px' }}>Настройки</h1>
+    <div className="page-enter max-w-3xl mx-auto space-y-8">
+      <div className="flex items-center gap-3 mb-2">
+        <div className="p-2 rounded-xl bg-primary/10 text-primary">
+          <Settings2 size={24} />
+        </div>
+        <h1 className="text-2xl font-bold tracking-tight">Настройки</h1>
+      </div>

-      <section style={{ marginBottom: '40px' }}>
-        <h2 style={{ fontSize: '18px', marginBottom: '16px', display: 'flex', alignItems: 'center', fontWeight: 500 }}>
-          <Monitor size={20} style={{ marginRight: '12px' }} />
+      <section className="surface-card space-y-6">
+        <div className="space-y-1">
+          <h2 className="text-lg font-bold flex items-center gap-2">
+            <Monitor size={20} className="text-primary" />
            Тема оформления
          </h2>
-        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '12px' }}>
+          <p className="text-muted-foreground text-sm">Выберите удобный режим отображения</p>
+        </div>
+
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+          {[
+            { id: 'light', label: 'Светлая', icon: Sun },
+            { id: 'dark', label: 'Тёмная', icon: Moon },
+            { id: 'system', label: 'Системная', icon: Monitor },
+          ].map((item) => (
            <button
-            onClick={() => setTheme('light')}
-            className={`m3-button m3-button-tonal ${theme === 'light' ? 'active' : ''}`}
-            style={{ 
-              border: theme === 'light' ? '2px solid var(--md-sys-color-primary)' : 'none',
-              height: '56px'
-            }}
+              key={item.id}
+              onClick={() => setTheme(item.id as any)}
+              className={cn(
+                "flex items-center justify-center gap-3 h-14 rounded-2xl border-2 transition-all",
+                theme === item.id 
+                  ? "bg-primary/10 border-primary text-primary font-semibold shadow-sm" 
+                  : "bg-muted/30 border-transparent text-muted-foreground hover:bg-muted/50"
+              )}
            >
-            <Sun size={18} style={{ marginRight: '8px' }} />
-            Светлая
-          </button>
-          <button
-            onClick={() => setTheme('dark')}
-            className={`m3-button m3-button-tonal ${theme === 'dark' ? 'active' : ''}`}
-            style={{ 
-              border: theme === 'dark' ? '2px solid var(--md-sys-color-primary)' : 'none',
-              height: '56px'
-            }}
-          >
-            <Moon size={18} style={{ marginRight: '8px' }} />
-            Тёмная
-          </button>
-          <button
-            onClick={() => setTheme('system')}
-            className={`m3-button m3-button-tonal ${theme === 'system' ? 'active' : ''}`}
-            style={{ 
-              border: theme === 'system' ? '2px solid var(--md-sys-color-primary)' : 'none',
-              height: '56px'
-            }}
-          >
-            <Monitor size={18} style={{ marginRight: '8px' }} />
-            Системная
+              <item.icon size={18} />
+              {item.label}
            </button>
+          ))}
        </div>
      </section>

-      <section style={{ marginBottom: '40px' }}>
-        <h2 style={{ fontSize: '18px', marginBottom: '16px', display: 'flex', alignItems: 'center', fontWeight: 500 }}>
-          <Palette size={20} style={{ marginRight: '12px' }} />
-          Акцентный цвет (Dynamic Color)
+      <section className="surface-card space-y-6">
+        <div className="space-y-1">
+          <h2 className="text-lg font-bold flex items-center gap-2">
+            <Palette size={20} className="text-primary" />
+            Акцентный цвет
          </h2>
+          <p className="text-muted-foreground text-sm">Персонализируйте интерфейс под свой вкус</p>
+        </div>
        
-        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px', marginBottom: '24px' }}>
+        <div className="space-y-6">
+          <div className="flex flex-wrap gap-3">
            {presetColors.map((c) => (
              <button
                key={c.value}
                onClick={() => handleColorChange(c.value)}
-              style={{
-                width: '48px',
-                height: '48px',
-                borderRadius: '24px',
-                backgroundColor: c.value,
-                border: seedColor.toLowerCase() === c.value.toLowerCase() ? '4px solid var(--md-sys-color-on-surface)' : 'none',
-                cursor: 'pointer',
-                transition: 'transform 0.2s',
-              }}
+                className={cn(
+                  "group relative w-12 h-12 rounded-full transition-transform active:scale-95",
+                  seedColor.toLowerCase() === c.value.toLowerCase() && "ring-4 ring-offset-4 ring-offset-background ring-primary"
+                )}
+                style={{ backgroundColor: c.value }}
                title={c.name}
-            />
+              >
+                {seedColor.toLowerCase() === c.value.toLowerCase() && (
+                  <div className="absolute inset-0 flex items-center justify-center text-white">
+                    <div className="w-2 h-2 rounded-full bg-white shadow-sm" />
+                  </div>
+                )}
+              </button>
            ))}
-          <div style={{ position: 'relative', width: '48px', height: '48px' }}>
+            
+            <div className="relative w-12 h-12 rounded-full overflow-hidden border-2 border-dashed border-muted-foreground/30 hover:border-primary/50 transition-colors">
              <input
                type="color"
                value={seedColor}
                onChange={(e) => handleColorChange(e.target.value)}
-              style={{
-                width: '100%',
-                height: '100%',
-                border: 'none',
-                padding: 0,
-                background: 'transparent',
-                cursor: 'pointer',
-              }}
+                className="absolute inset-[-50%] w-[200%] h-[200%] cursor-pointer"
              />
            </div>
          </div>

+          <div className="max-w-xs">
            <TextField
              label="HEX код цвета"
              value={customColor}
              onChange={(e) => handleColorChange(e.target.value)}
              placeholder="#0061A4"
            />
+          </div>

-        <div style={{ marginTop: '16px', padding: '16px', borderRadius: '12px', backgroundColor: 'var(--md-sys-color-surface-variant)' }}>
-          <div style={{ fontSize: '14px', marginBottom: '12px', fontWeight: 500 }}>Превью палитры:</div>
-          <div style={{ display: 'flex', gap: '8px' }}>
+          <div className="p-4 rounded-2xl bg-muted/30 border border-white/5 space-y-3">
+            <div className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Превью системы Material You</div>
+            <div className="flex gap-2 h-10">
              {['primary', 'primary-container', 'secondary', 'secondary-container', 'tertiary', 'tertiary-container'].map(role => (
                <div 
                  key={role}
-                style={{ 
-                  flex: 1, 
-                  height: '40px', 
-                  borderRadius: '8px', 
-                  backgroundColor: `var(--md-sys-color-${role})`,
-                  border: '1px solid var(--md-sys-color-outline-variant)'
-                }} 
+                  className="flex-1 rounded-lg border border-white/5 shadow-sm"
+                  style={{ backgroundColor: `var(--md-sys-color-${role})` }} 
                  title={role}
                />
              ))}
            </div>
          </div>
+        </div>
      </section>

-      <section style={{ marginTop: '48px', borderTop: '1px solid var(--md-sys-color-outline-variant)', paddingTop: '24px' }}>
-        <button
+      <section className="pt-4">
+        <Button
+          variant="outline"
          onClick={handleLogout}
-          className="m3-button m3-button-tonal"
-          style={{ color: 'var(--md-sys-color-error)', width: '100%', height: '48px' }}
+          className="w-full h-14 rounded-2xl text-destructive hover:bg-destructive/10 hover:text-destructive hover:border-destructive/20 border-white/10 bg-white/5"
        >
-          <LogOut size={18} style={{ marginRight: '12px' }} />
-          Выйти из системы
-        </button>
+          <LogOut size={18} className="mr-3" />
+          Выйти из аккаунта
+        </Button>
      </section>
    </div>
  );
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,502 +1,201 @@
-:root {
-  --md-sys-color-primary: #0061a4;
-  --md-sys-color-on-primary: #ffffff;
-  --md-sys-color-primary-container: #d1e4ff;
-  --md-sys-color-on-primary-container: #001d36;
-  --md-sys-color-secondary: #535f70;
-  --md-sys-color-on-secondary: #ffffff;
-  --md-sys-color-secondary-container: #d7e3f7;
-  --md-sys-color-on-secondary-container: #101c2b;
-  --md-sys-color-surface: #fdfcff;
-  --md-sys-color-on-surface: #1a1c1e;
-  --md-sys-color-surface-variant: #dfe2eb;
-  --md-sys-color-on-surface-variant: #43474e;
-  --md-sys-color-outline: #73777f;
-  --md-sys-color-outline-variant: #c3c7cf;
-  --md-sys-color-error: #ba1a1a;
-  --md-sys-color-on-error: #ffffff;
-  --md-sys-color-background: #fdfcff;
-  --md-sys-color-on-background: #1a1c1e;
+@import "tailwindcss";

+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--md-sys-color-background);
+  --color-foreground: var(--md-sys-color-on-background);
+  --font-sans: 'Roboto', 'Segoe UI', system-ui, -apple-system, sans-serif;
+
+  --color-card: var(--md-sys-color-surface-container);
+  --color-card-foreground: var(--md-sys-color-on-surface);
+  --color-popover: var(--md-sys-color-surface-container-high);
+  --color-popover-foreground: var(--md-sys-color-on-surface);
+
+  --color-primary: var(--md-sys-color-primary);
+  --color-primary-foreground: var(--md-sys-color-on-primary);
+  --color-secondary: var(--md-sys-color-secondary);
+  --color-secondary-foreground: var(--md-sys-color-on-secondary);
+  --color-muted: var(--md-sys-color-surface-container-high);
+  --color-muted-foreground: var(--md-sys-color-on-surface-variant);
+  --color-accent: var(--md-sys-color-primary-container);
+  --color-accent-foreground: var(--md-sys-color-on-primary-container);
+
+  --color-border: var(--md-sys-color-outline-variant);
+  --color-input: var(--md-sys-color-outline);
+  --color-ring: var(--md-sys-color-primary);
+  --color-destructive: var(--md-sys-color-error);
+
+  --color-sidebar: var(--md-sys-color-surface-container-low);
+  --color-sidebar-foreground: var(--md-sys-color-on-surface);
+  --color-sidebar-primary: var(--md-sys-color-primary-container);
+  --color-sidebar-primary-foreground: var(--md-sys-color-on-primary-container);
+  --color-sidebar-accent: var(--md-sys-color-surface-container-high);
+  --color-sidebar-accent-foreground: var(--md-sys-color-on-surface);
+  --color-sidebar-border: var(--md-sys-color-outline-variant);
+  --color-sidebar-ring: var(--md-sys-color-primary);
+
+  --color-brand: var(--md-sys-color-primary);
+  --color-brand-foreground: var(--md-sys-color-on-primary);
+
+  --radius-sm: calc(var(--radius) - 6px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 6px);
+  --radius-2xl: calc(var(--radius) + 12px);
+  --radius-3xl: calc(var(--radius) + 18px);
+}
+
+:root {
+  --radius: 1rem;
  --nav-rail-width: 80px;
  --nav-rail-expanded-width: 280px;
  --nav-bar-height: 80px;
  
-  /* M3 Easings */
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1.0);
  --md-sys-motion-duration-medium: 200ms;
 }

-:root.dark {
-  --md-sys-color-primary: #9ecaff;
-  --md-sys-color-on-primary: #003258;
-  --md-sys-color-primary-container: #00497d;
-  --md-sys-color-on-primary-container: #d1e4ff;
-  --md-sys-color-secondary: #bbc7db;
-  --md-sys-color-on-secondary: #253140;
-  --md-sys-color-secondary-container: #3b4858;
-  --md-sys-color-on-secondary-container: #d7e3f7;
-  --md-sys-color-surface: #1a1c1e;
-  --md-sys-color-on-surface: #e2e2e6;
-  --md-sys-color-surface-variant: #43474e;
-  --md-sys-color-on-surface-variant: #c3c7cf;
-  --md-sys-color-outline: #8d9199;
-  --md-sys-color-outline-variant: #43474e;
-  --md-sys-color-error: #ffb4ab;
-  --md-sys-color-on-error: #690005;
-  --md-sys-color-background: #1a1c1e;
-  --md-sys-color-on-background: #e2e2e6;
-}
+@layer base {
+  * {
+    @apply border-border;
+  }

-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  font-family: 'Roboto', 'Segoe UI', system-ui, -apple-system, sans-serif;
+  html,
+  body {
+    min-height: 100%;
    background-color: var(--md-sys-color-background);
-  color: var(--md-sys-color-on-background);
-  line-height: 1.5;
-  transition: background-color 0.3s, color 0.3s;
+  }
+
+  body {
+    @apply bg-background text-foreground antialiased;
+    text-rendering: optimizeLegibility;
+    background-image:
+      radial-gradient(
+        circle at 12% 14%,
+        color-mix(in oklab, var(--md-sys-color-primary-container) 65%, transparent),
+        transparent 48%
+      ),
+      radial-gradient(
+        circle at 90% -2%,
+        color-mix(in oklab, var(--md-sys-color-surface-variant) 78%, transparent),
+        transparent 38%
+      ),
+      linear-gradient(165deg, var(--md-sys-color-surface), var(--md-sys-color-surface-container-low));
+    background-attachment: fixed;
+  }
+
+  .dark body {
+    background-image:
+      radial-gradient(
+        circle at 10% 8%,
+        color-mix(in oklab, var(--md-sys-color-primary-container) 40%, transparent),
+        transparent 44%
+      ),
+      radial-gradient(
+        circle at 90% 0%,
+        color-mix(in oklab, var(--md-sys-color-surface-variant) 56%, transparent),
+        transparent 36%
+      ),
+      linear-gradient(170deg, var(--md-sys-color-surface), var(--md-sys-color-surface-container-low));
+  }
 }

-/* M3 Components */
+@layer components {
+  .surface-card {
+    @apply bg-card/40 backdrop-blur-md border border-white/10 text-card-foreground rounded-3xl p-6 shadow-sm transition-all duration-200;
+  }

-.m3-badge {
-  position: absolute;
-  top: -4px;
-  right: -4px;
-  background-color: var(--md-sys-color-error);
-  color: var(--md-sys-color-on-error);
-  font-size: 10px;
-  font-weight: 500;
-  min-width: 16px;
-  height: 16px;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 4px;
+  .surface-card-muted {
+    @apply bg-muted/50 rounded-2xl transition-all duration-200;
+  }
+
+  .surface-hero {
+    @apply bg-muted/60 backdrop-blur-xl border border-white/5 rounded-[2rem] shadow-sm;
+  }
+
+  .m3-badge {
+    @apply absolute -top-1 -right-1 bg-destructive text-white text-[10px] font-medium min-w-[16px] h-4 rounded-full flex items-center justify-center px-1;
+  }
+
+  .page-enter {
+    animation: fadeIn 0.3s ease-out;
+  }
 }

-.icon-button {
-  width: 48px;
-  height: 48px;
-  border-radius: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: transparent;
-  border: none;
-  color: var(--md-sys-color-on-surface-variant);
-  transition: background-color 0.2s;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
 }

-.icon-button:hover {
-  background-color: rgba(var(--md-sys-color-on-surface-variant-rgb, 67, 71, 78), 0.08);
-}
-
-.m3-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 24px;
-  height: 40px;
-  border-radius: 20px;
-  border: none;
-  font-weight: 500;
-  font-size: 14px;
-  letter-spacing: 0.1px;
-  transition: all 0.2s;
-  background-color: transparent;
-  color: var(--md-sys-color-primary);
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.m3-button-filled {
-  background-color: var(--md-sys-color-primary);
-  color: var(--md-sys-color-on-primary);
-}
-
-.m3-button-tonal {
-  background-color: var(--md-sys-color-secondary-container);
-  color: var(--md-sys-color-on-secondary-container);
-}
-
-.m3-card {
-  background-color: var(--md-sys-color-surface-variant);
-  color: var(--md-sys-color-on-surface-variant);
-  border-radius: 12px;
-  padding: 16px;
-  margin-bottom: 16px;
-}
-
-/* M3 FAB */
-
-.m3-fab {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 56px;
-  height: 56px;
-  border-radius: 16px;
-  border: none;
-  background-color: var(--md-sys-color-primary-container);
-  color: var(--md-sys-color-on-primary-container);
-  box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-  transition: box-shadow 0.2s var(--md-sys-motion-easing-emphasized);
-}
-
-.m3-fab:hover {
-  box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
-}
-
-.m3-fab.extended {
-  padding: 0 16px;
-  width: auto;
-  gap: 12px;
-}
-
-.m3-fab-state-layer {
-  position: absolute;
-  top: 0; left: 0; right: 0; bottom: 0;
-  background-color: var(--md-sys-color-on-primary-container);
-  opacity: 0;
-  transition: opacity 0.2s;
-}
-
-.m3-fab:hover .m3-fab-state-layer {
-  opacity: 0.08;
-}
-
-/* M3 Filled Text Field (Section 2.1 & 2.2) */
-
-.m3-text-field-container {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 16px;
-  width: 100%;
-  position: relative;
-}
-
-.m3-text-field-field {
-  position: relative;
-  height: 56px;
-  background-color: var(--md-sys-color-surface-variant);
-  border-radius: 4px 4px 0 0;
-  overflow: hidden;
-}
-
-.m3-text-field-input {
-  width: 100%;
-  height: 100%;
-  padding: 24px 16px 8px;
-  border: none;
-  background: transparent;
-  color: var(--md-sys-color-on-surface);
-  font-size: 16px;
-  outline: none;
-  z-index: 1;
-}
-
-.m3-text-field-label {
-  position: absolute;
-  left: 16px;
-  top: 16px;
-  color: var(--md-sys-color-on-surface-variant);
-  font-size: 16px;
-  transition: all var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-emphasized);
-  pointer-events: none;
-  z-index: 2;
-}
-
-.m3-text-field-container.focused .m3-text-field-label,
-.m3-text-field-container.filled .m3-text-field-label {
-  top: 8px;
-  font-size: 12px;
-  color: var(--md-sys-color-primary);
-}
-
-.m3-text-field-container.error .m3-text-field-label {
-  color: var(--md-sys-color-error);
-}
-
-.m3-text-field-active-indicator {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 1px;
-  background-color: var(--md-sys-color-outline);
-  transition: height 0.2s, background-color 0.2s;
-}
-
-.m3-text-field-container.focused .m3-text-field-active-indicator {
-  height: 2px;
-  background-color: var(--md-sys-color-primary);
-}
-
-.m3-text-field-container.error .m3-text-field-active-indicator {
-  background-color: var(--md-sys-color-error);
-  height: 2px;
-}
-
-.m3-text-field-state-layer {
-  position: absolute;
-  top: 0; left: 0; right: 0; bottom: 0;
-  background-color: var(--md-sys-color-on-surface);
-  opacity: 0;
-  transition: opacity 0.2s;
-  pointer-events: none;
-}
-
-.m3-text-field-field:hover .m3-text-field-state-layer {
-  opacity: 0.08;
-}
-
-.m3-text-field-supporting-text {
-  font-size: 12px;
-  padding: 4px 16px 0;
-  color: var(--md-sys-color-on-surface-variant);
-  min-height: 16px;
-}
-
-.m3-text-field-container.error .m3-text-field-supporting-text {
-  color: var(--md-sys-color-error);
-}
-
-.m3-text-field-container.disabled {
-  opacity: 0.38;
-}
-
-.m3-text-field-container.disabled .m3-text-field-active-indicator {
-  border-bottom: 1px dotted var(--md-sys-color-on-surface);
-  background: transparent;
-}
-
-/* Layout */
-
-.app-container {
-  display: flex;
-  min-height: 100vh;
-}
-
-.main-content {
-  flex: 1;
-  padding: 16px;
-  transition: margin-left 0.3s var(--md-sys-motion-easing-emphasized);
-}
-
-/* Navigation Bar (Mobile) */
+/* Navigation System */

 .navigation-bar {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: var(--nav-bar-height);
-  background-color: var(--md-sys-color-surface-variant);
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  padding: 0 8px;
-  z-index: 100;
-  transition: transform 0.2s ease-in-out;
+  @apply fixed left-0 right-0 bottom-0 h-[var(--nav-bar-height)] bg-background/80 backdrop-blur-xl flex justify-around items-center px-4 z-50 transition-transform duration-200 border-t border-white/5;
 }

 .navigation-bar.hidden {
-  transform: translateY(100%);
+  @apply translate-y-full;
 }

-@media (min-width: 600px) {
-  .navigation-bar { display: none; }
-  .main-content { margin-left: var(--nav-rail-width); }
-}
-
-@media (min-width: 1240px) {
-  .main-content.with-expanded-rail { margin-left: var(--nav-rail-expanded-width); }
-}
-
-@media (max-width: 599px) {
-  .main-content { padding-bottom: calc(var(--nav-bar-height) + 16px); }
-}
-
-/* Navigation Rail (Tablet/Desktop) */
-
 .navigation-rail {
-  position: fixed;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: var(--nav-rail-width);
-  background-color: var(--md-sys-color-surface);
-  display: flex;
-  flex-direction: column;
-  padding: 16px 0;
-  border-right: 1px solid var(--md-sys-color-outline-variant);
-  z-index: 100;
-  transition: width 0.3s var(--md-sys-motion-easing-emphasized);
-  overflow-x: hidden;
+  @apply fixed left-0 top-0 bottom-0 w-[var(--nav-rail-width)] bg-sidebar/40 backdrop-blur-md flex flex-col py-4 border-r border-white/5 z-50 transition-all duration-300 ease-[var(--md-sys-motion-easing-emphasized)] overflow-hidden;
 }

 .navigation-rail.expanded {
-  width: var(--nav-rail-expanded-width);
+  @apply w-[var(--nav-rail-expanded-width)];
 }

-.rail-header {
-  display: flex;
-  align-items: center;
-  padding: 0 16px;
-  height: 56px;
-  gap: 12px;
-  margin-bottom: 8px;
-}
-
-.rail-title {
-  font-size: 20px;
-  font-weight: 500;
-  white-space: nowrap;
-}
-
-.user-info {
-  display: flex;
-  align-items: center;
-  padding: 16px;
-  gap: 12px;
-  margin-bottom: 8px;
-  background-color: var(--md-sys-color-surface-variant);
-  margin: 0 12px 16px;
-  border-radius: 16px;
-}
-
-.user-avatar {
-  width: 40px;
-  height: 40px;
-  border-radius: 20px;
-  background-color: var(--md-sys-color-primary-container);
-  color: var(--md-sys-color-on-primary-container);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 500;
-  flex-shrink: 0;
-}
-
-.user-details {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.user-name {
-  font-size: 14px;
-  font-weight: 500;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.user-group {
-  font-size: 12px;
-  opacity: 0.7;
-}
-
-.rail-items {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-/* Nav Items Shared */
-
 .nav-item {
-  display: flex;
-  align-items: center;
-  text-decoration: none;
-  color: var(--md-sys-color-on-surface-variant);
-  height: 56px;
-  padding: 0 12px;
-  position: relative;
-  transition: background-color 0.2s;
+  @apply flex items-center no-underline text-muted-foreground h-14 px-3 relative transition-all duration-200 rounded-2xl mx-2;
+}
+
+.nav-item:hover {
+  @apply bg-sidebar-accent/50 text-foreground;
+}
+
+.nav-item.active {
+  @apply bg-sidebar-primary text-sidebar-primary-foreground;
 }

 .navigation-bar .nav-item {
-  flex-direction: column;
-  justify-content: center;
-  flex: 1;
-  gap: 4px;
-  padding: 0;
+  @apply flex-col justify-center flex-1 gap-1 p-0 mx-1 h-16;
 }

 .nav-item-icon-wrapper {
-  width: 64px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 16px;
-  transition: background-color 0.2s;
-  position: relative;
+  @apply w-12 h-8 flex items-center justify-center rounded-2xl transition-colors duration-200 relative;
 }

 .nav-item.active .nav-item-icon-wrapper {
-  background-color: var(--md-sys-color-secondary-container);
-  color: var(--md-sys-color-on-secondary-container);
+  @apply bg-primary/10;
 }

 .nav-item-label {
-  font-size: 12px;
-  font-weight: 500;
-  white-space: nowrap;
+  @apply text-[11px] font-medium whitespace-nowrap;
 }

 .navigation-rail.expanded .nav-item {
-  height: 56px;
-  border-radius: 28px;
-  margin: 0 12px;
+  @apply h-12 rounded-2xl mx-4 px-4;
 }

 .navigation-rail.expanded .nav-item-label {
-  font-size: 14px;
-  margin-left: 12px;
-  flex: 1;
+  @apply text-sm ml-3 flex-1;
 }

 /* Submenu */

 .submenu {
-  display: flex;
-  flex-direction: column;
-  padding-left: 56px;
-  margin-bottom: 8px;
+  @apply flex flex-col pl-14 pr-4 gap-1 mb-2;
 }

 .submenu-item {
-  height: 48px;
-  display: flex;
-  align-items: center;
-  text-decoration: none;
-  color: var(--md-sys-color-on-surface-variant);
-  font-size: 14px;
-  border-radius: 24px;
-  margin: 0 12px;
-  padding: 0 16px;
+  @apply h-10 flex items-center no-underline text-muted-foreground text-sm rounded-xl px-4 transition-all duration-200;
+}
+
+.submenu-item:hover {
+  @apply bg-sidebar-accent/30 text-foreground;
 }

 .submenu-item.active {
-  background-color: var(--md-sys-color-secondary-container);
-  color: var(--md-sys-color-on-secondary-container);
-}
-
-.submenu-arrow {
-  margin-right: 8px;
+  @apply bg-primary/10 text-primary font-medium;
 }
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -1,25 +1,24 @@
 {
  "compilerOptions": {
+    "ignoreDeprecations": "6.0",
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "es2023",
    "lib": ["ES2023", "DOM", "DOM.Iterable"],
    "module": "esnext",
-    "types": ["vite/client"],
-    "skipLibCheck": true,
-
-    /* Bundler mode */
    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
+    "types": ["vite/client"],
+    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "noEmit": true,
+    "isolatedModules": true,
+    "skipLibCheck": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "jsx": "react-jsx"
  },
  "include": ["src"]
 }
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,7 +1,20 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/postcss';
+import autoprefixer from 'autoprefixer';
+import path from 'path';

-// https://vite.dev/config/
+// https://vitejs.dev/config/
 export default defineConfig({
  plugins: [react()],
-})
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  css: {
+    postcss: {
+      plugins: [tailwindcss(), autoprefixer()],
+    },
+  },
+});
--- a/1
+++ b/1