UI: тёплый современный дизайн + русификация

client/src/pages/CatPage.tsx

@@ -34,24 +34,21 @@ export default function CatPage() {
   const handleLike = async () => {
     if (isOwner || !user || !cat) return;
     setAnimating(true);
-    setTimeout(() => setAnimating(false), 400);
+    setTimeout(() => setAnimating(false), 450);
 
     if (isLiked) {
       setLiked(false);
       try {
         const res = await unlikeMutation.mutateAsync();
-        if (res.ownerPoints !== undefined && cat.user_id === user.id) {
+        if (res.ownerPoints !== undefined && cat.user_id === user.id)
           updateUser({ ...user, points: res.ownerPoints });
-        }
         refetchLike();
       } catch { setLiked(true); }
     } else {
       setLiked(true);
-      toast('Liked', 'like');
-      try {
-        await likeMutation.mutateAsync();
-        refetchLike();
-      } catch { setLiked(false); }
+      toast('Нравится ♥', 'like');
+      try { await likeMutation.mutateAsync(); refetchLike(); }
+      catch { setLiked(false); }
     }
   };
 
@@ -59,21 +56,19 @@ export default function CatPage() {
     if (!isOwner || !cat) return;
     try {
       await deleteMutation.mutateAsync(cat.id);
-      toast('Deleted', 'success');
+      toast('Удалено', 'success');
       navigate('/feed');
-    } catch {
-      toast('Failed to delete', 'error');
-    }
+    } catch { toast('Ошибка удаления', 'error'); }
   };
 
   if (isLoading) {
     return (
       <div className="mx-auto max-w-2xl px-4 py-8">
-        <Skeleton className="mb-4 h-5 w-20" />
-        <Skeleton className="aspect-[4/3] w-full" />
+        <Skeleton className="mb-4 h-5 w-20 rounded-xl" />
+        <Skeleton className="aspect-[4/3] w-full rounded-2xl" />
         <div className="mt-4 space-y-2">
-          <Skeleton className="h-5 w-32" />
-          <Skeleton className="h-4 w-48" />
+          <Skeleton className="h-5 w-32 rounded-xl" />
+          <Skeleton className="h-4 w-48 rounded-xl" />
         </div>
       </div>
     );
@@ -82,8 +77,8 @@ export default function CatPage() {
   if (isError || !cat) {
     return (
       <div className="flex flex-col items-center justify-center py-20">
-        <p className="text-muted-foreground">Cat not found</p>
-        <Button variant="outline" className="mt-4" onClick={() => navigate('/feed')}>Go to feed</Button>
+        <p className="text-muted-foreground mb-4">Кот не найден</p>
+        <Button variant="outline" onClick={() => navigate('/feed')}>Перейти в ленту</Button>
       </div>
     );
   }
@@ -95,66 +90,70 @@ export default function CatPage() {
         className="mb-6 flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
       >
         <ArrowLeft className="h-4 w-4" />
-        Back
+        Назад
       </button>
 
-      {/* Image */}
-      <div className="bg-muted mb-5">
-        <img src={cat.image_url} alt={cat.caption || 'Cat photo'} className="w-full max-h-[60vh] object-contain mx-auto" />
-      </div>
+      <div className="bg-white rounded-2xl border border-border/60 shadow-sm overflow-hidden">
+        <div className="bg-muted/30">
+          <img src={cat.image_url} alt={cat.caption || 'Фото кота'} className="w-full max-h-[60vh] object-contain mx-auto" />
+        </div>
 
-      {/* Info */}
-      <div className="space-y-3">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2.5">
-            <Avatar className="h-7 w-7">
-              <AvatarFallback className="text-[10px] bg-foreground text-background">
-                {cat.username.charAt(0).toUpperCase()}
-              </AvatarFallback>
-            </Avatar>
-            <span className="text-sm font-medium">@{cat.username}</span>
+        <div className="p-5 space-y-3">
+          {/* Header */}
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <Avatar className="h-9 w-9 ring-2 ring-offset-1 ring-orange-200">
+                <AvatarFallback className="text-sm bg-gradient-to-br from-orange-400 to-rose-500 text-white font-bold">
+                  {cat.username.charAt(0).toUpperCase()}
+                </AvatarFallback>
+              </Avatar>
+              <div>
+                <span className="text-sm font-bold">@{cat.username}</span>
+                <p className="text-xs text-muted-foreground">
+                  {new Date(cat.created_at).toLocaleDateString('ru-RU', {
+                    year: 'numeric', month: 'long', day: 'numeric',
+                    hour: '2-digit', minute: '2-digit',
+                  })}
+                </p>
+              </div>
+            </div>
+            {isOwner && (
+              <button onClick={handleDelete} className="p-2 rounded-xl text-muted-foreground hover:text-destructive hover:bg-red-50 transition-colors">
+                <Trash2 className="h-4 w-4" />
+              </button>
+            )}
           </div>
-          {isOwner && (
-            <button onClick={handleDelete} className="text-muted-foreground hover:text-destructive transition-colors">
-              <Trash2 className="h-4 w-4" />
+
+          {/* Actions */}
+          <div className="flex items-center gap-4 border-t pt-3">
+            <button
+              onClick={handleLike}
+              disabled={isOwner || !user}
+              className={`like-btn ${animating ? 'heart-animate' : ''}`}
+            >
+              <Heart
+                className={`h-6 w-6 transition-all ${
+                  isLiked ? 'fill-rose-500 text-rose-500' : 'text-foreground hover:text-rose-400'
+                }`}
+                strokeWidth={isLiked ? 2.5 : 1.5}
+              />
             </button>
+            <button className="hover:text-primary transition-colors">
+              <MessageCircle className="h-6 w-6" strokeWidth={1.5} />
+            </button>
+          </div>
+
+          <span className="text-sm font-bold block">{cat.likes_count.toLocaleString('ru-RU')} отметок «Нравится»</span>
+
+          {cat.caption && (
+            <p className="text-sm">
+              <span className="font-bold mr-1.5">@{cat.username}</span>
+              {cat.caption}
+            </p>
           )}
+
+          <p className="text-xs text-muted-foreground">🏆 {cat.user_points} баллов</p>
         </div>
-
-        <div className="flex items-center gap-4">
-          <button
-            onClick={handleLike}
-            disabled={isOwner || !user}
-            className={`like-btn ${animating ? 'heart-animate' : ''}`}
-          >
-            <Heart
-              className={`h-5 w-5 ${isLiked ? 'fill-[#e00] text-[#e00]' : 'text-foreground'}`}
-              strokeWidth={isLiked ? 2 : 1.5}
-            />
-          </button>
-          <button className="hover:text-muted-foreground transition-colors">
-            <MessageCircle className="h-5 w-5" strokeWidth={1.5} />
-          </button>
-        </div>
-
-        <span className="text-sm font-semibold block">{cat.likes_count.toLocaleString()} likes</span>
-
-        {cat.caption && (
-          <p className="text-sm">
-            <span className="font-semibold mr-1.5">@{cat.username}</span>
-            {cat.caption}
-          </p>
-        )}
-
-        <p className="text-xs text-muted-foreground">
-          {new Date(cat.created_at).toLocaleDateString('en-US', {
-            year: 'numeric',
-            month: 'long',
-            day: 'numeric',
-          })}
-        </p>
-
-        <p className="text-xs text-muted-foreground">🏆 {cat.user_points} points</p>
       </div>
     </div>
   );

client/src/pages/FeedPage.tsx

@@ -7,20 +7,20 @@ import StoryCircle from '@/components/StoryCircle';
 import CatModal from '@/components/CatModal';
 import { Button } from '@/components/ui/button';
 import { Skeleton } from '@/components/ui/skeleton';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { ChevronLeft, ChevronRight, Cat } from 'lucide-react';
 
 function FeedSkeleton() {
   return (
-    <div className="space-y-6">
+    <div className="space-y-5">
       {Array.from({ length: 2 }).map((_, i) => (
-        <div key={i}>
-          <div className="flex items-center gap-2.5 mb-3">
-            <Skeleton className="h-7 w-7 rounded-full" />
-            <Skeleton className="h-4 w-20" />
+        <div key={i} className="bg-white rounded-2xl p-4">
+          <div className="flex items-center gap-3 mb-3">
+            <Skeleton className="h-8 w-8 rounded-full" />
+            <Skeleton className="h-4 w-24" />
           </div>
-          <Skeleton className="aspect-[4/3] w-full" />
-          <div className="mt-3 space-y-1.5">
-            <Skeleton className="h-4 w-16" />
+          <Skeleton className="aspect-[4/3] w-full rounded-xl" />
+          <div className="mt-3 space-y-2">
+            <Skeleton className="h-4 w-20" />
             <Skeleton className="h-4 w-48" />
           </div>
         </div>
@@ -36,19 +36,22 @@ export default function FeedPage() {
   const { user } = useAuth();
 
   return (
-    <div className="mx-auto max-w-5xl px-4 py-8">
-      <div className="flex gap-12">
+    <div className="mx-auto max-w-5xl px-4 py-6">
+      <div className="flex gap-10">
         {/* Main feed */}
-        <div className="flex-1 max-w-[520px] mx-auto lg:mx-0">
+        <div className="flex-1 max-w-[500px] mx-auto lg:mx-0">
           {/* Stories */}
-          <div className="mb-6 pb-6 border-b overflow-hidden">
+          <div className="bg-white rounded-2xl border border-border/60 shadow-sm px-4 py-3.5 mb-5 overflow-hidden">
             <div className="flex gap-4 overflow-x-auto scrollbar-none">
               {user && <StoryCircle user={user} />}
               {data?.cats
                 .filter((c, i, arr) => arr.findIndex((x) => x.user_id === c.user_id) === i)
                 .slice(0, 7)
                 .map((c) => (
-                  <StoryCircle key={c.user_id} user={{ id: c.user_id, username: c.username, points: c.user_points }} />
+                  <StoryCircle
+                    key={c.user_id}
+                    user={{ id: c.user_id, username: c.username, points: c.user_points }}
+                  />
                 ))}
             </div>
           </div>
@@ -57,16 +60,18 @@ export default function FeedPage() {
 
           {isError && (
             <div className="flex flex-col items-center justify-center py-20 text-center">
-              <p className="text-muted-foreground">Failed to load cats</p>
-              <Button variant="outline" className="mt-4" onClick={() => setPage(1)}>Try again</Button>
+              <Cat className="mb-4 h-12 w-12 text-muted-foreground/40" />
+              <p className="text-muted-foreground mb-4">Не удалось загрузить котов</p>
+              <Button variant="outline" onClick={() => setPage(1)}>Попробовать снова</Button>
             </div>
           )}
 
           {data && data.cats.length === 0 && (
-            <div className="flex flex-col items-center justify-center py-20 text-center">
-              <p className="text-2xl font-semibold mb-1">No cats yet</p>
-              <p className="text-sm text-muted-foreground mb-4">Be the first to upload a cat photo</p>
-              <Button onClick={() => window.location.href = '/upload'}>Upload</Button>
+            <div className="flex flex-col items-center justify-center py-20 text-center bg-white rounded-2xl border border-border/60 shadow-sm">
+              <Cat className="mb-4 h-16 w-16 text-muted-foreground/20" />
+              <h2 className="text-lg font-semibold mb-1">Пока нет котов</h2>
+              <p className="text-sm text-muted-foreground mb-5">Будьте первым, кто загрузит фото кота</p>
+              <Button onClick={() => window.location.href = '/upload'}>Загрузить кота</Button>
             </div>
           )}
 
@@ -77,14 +82,14 @@ export default function FeedPage() {
               ))}
 
               {data.totalPages > 1 && (
-                <div className="flex items-center justify-center gap-4 mt-8 pb-8">
-                  <Button variant="outline" size="sm" onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page === 1}>
+                <div className="flex items-center justify-center gap-4 mt-6 pb-6">
+                  <Button variant="outline" size="sm" onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page === 1} className="rounded-xl">
                     <ChevronLeft className="h-4 w-4" />
-                    Previous
+                    Назад
                   </Button>
-                  <span className="text-sm text-muted-foreground">{data.page} / {data.totalPages}</span>
-                  <Button variant="outline" size="sm" onClick={() => setPage((p) => p + 1)} disabled={page >= data.totalPages}>
-                    Next
+                  <span className="text-sm text-muted-foreground">{data.page} из {data.totalPages}</span>
+                  <Button variant="outline" size="sm" onClick={() => setPage((p) => p + 1)} disabled={page >= data.totalPages} className="rounded-xl">
+                    Вперёд
                     <ChevronRight className="h-4 w-4" />
                   </Button>
                 </div>
@@ -95,15 +100,13 @@ export default function FeedPage() {
 
         {/* Sidebar */}
         <div className="hidden lg:block w-[280px] shrink-0">
-          <div className="sticky top-20">
+          <div className="sticky top-20 bg-white rounded-2xl border border-border/60 shadow-sm p-5">
             <FeedSidebar />
           </div>
         </div>
       </div>
 
-      {modalCatId && (
-        <CatModal catId={modalCatId} onClose={() => setModalCatId(null)} />
-      )}
+      {modalCatId && <CatModal catId={modalCatId} onClose={() => setModalCatId(null)} />}
     </div>
   );
 }

client/src/pages/LoginPage.tsx

@@ -3,6 +3,7 @@ import { Link, Navigate } from 'react-router-dom';
 import { useAuth } from '@/hooks/useAuth';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+import { Cat } from 'lucide-react';
 
 export default function LoginPage() {
   const { user, login } = useAuth();
@@ -20,49 +21,64 @@ export default function LoginPage() {
     try {
       await login(username, password);
     } catch (err: any) {
-      setError(err.response?.data?.error || 'Login failed');
+      setError(err.response?.data?.error || 'Ошибка входа');
     } finally {
       setLoading(false);
     }
   };
 
   return (
-    <div className="flex min-h-screen items-center justify-center p-4">
+    <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-orange-50 via-amber-50 to-rose-50 p-4">
       <div className="w-full max-w-sm animate-fade-in">
         <div className="text-center mb-8">
-          <h1 className="text-2xl font-semibold tracking-tight">Catstagram</h1>
-          <p className="text-sm text-muted-foreground mt-1">Sign in to your account</p>
+          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-orange-400 to-rose-500 shadow-lg shadow-orange-200/50">
+            <Cat className="h-8 w-8 text-white" />
+          </div>
+          <h1 className="text-2xl font-bold bg-gradient-to-r from-orange-500 to-rose-500 bg-clip-text text-transparent">
+            Catstagram
+          </h1>
+          <p className="mt-1.5 text-sm text-muted-foreground">Войдите, чтобы смотреть котов</p>
         </div>
 
-        <form onSubmit={handleSubmit} className="space-y-3">
-          <Input
-            value={username}
-            onChange={(e) => setUsername(e.target.value)}
-            placeholder="Username"
-            required
-            autoFocus
-            className="h-10 text-sm"
-          />
-          <Input
-            type="password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            placeholder="Password"
-            required
-            className="h-10 text-sm"
-          />
-          {error && <p className="text-sm text-destructive">{error}</p>}
-          <Button type="submit" className="w-full h-10" disabled={loading}>
-            {loading ? 'Signing in...' : 'Sign in'}
-          </Button>
-        </form>
+        <div className="bg-white rounded-2xl border border-border/60 shadow-sm p-6">
+          <form onSubmit={handleSubmit} className="space-y-3.5">
+            <Input
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              placeholder="Имя пользователя"
+              required
+              autoFocus
+              className="h-11 text-sm rounded-xl bg-secondary/50"
+            />
+            <Input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="Пароль"
+              required
+              className="h-11 text-sm rounded-xl bg-secondary/50"
+            />
+            {error && (
+              <p className="text-sm text-destructive text-center bg-red-50 rounded-xl py-2">{error}</p>
+            )}
+            <Button
+              type="submit"
+              className="w-full h-11 rounded-xl bg-gradient-to-r from-orange-400 to-rose-500 text-white hover:from-orange-500 hover:to-rose-600 shadow-sm"
+              disabled={loading}
+            >
+              {loading ? 'Вход...' : 'Войти'}
+            </Button>
+          </form>
+        </div>
 
-        <p className="mt-6 text-center text-sm text-muted-foreground">
-          No account?{' '}
-          <Link to="/register" className="font-medium underline-offset-4 hover:underline">
-            Register
-          </Link>
-        </p>
+        <div className="mt-4 bg-white rounded-2xl border border-border/60 shadow-sm p-5 text-center">
+          <p className="text-sm text-muted-foreground">
+            Нет аккаунта?{' '}
+            <Link to="/register" className="font-semibold text-orange-500 hover:text-orange-600 transition-colors">
+              Зарегистрироваться
+            </Link>
+          </p>
+        </div>
       </div>
     </div>
   );

client/src/pages/ProfilePage.tsx

@@ -6,7 +6,7 @@ import CatModal from '@/components/CatModal';
 import { Button } from '@/components/ui/button';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Avatar, AvatarFallback } from '@/components/ui/avatar';
-import { Heart, Plus, ArrowLeft } from 'lucide-react';
+import { Heart, Plus, ArrowLeft, Grid3X3, Bookmark } from 'lucide-react';
 
 export default function ProfilePage() {
   const { id: paramId } = useParams<{ id?: string }>();
@@ -19,9 +19,11 @@ export default function ProfilePage() {
 
   const { data, isLoading } = useUserCats(profileUserId ?? 0);
 
-  const profileUser = isMe ? me : data?.cats?.[0]
-    ? { id: data.cats[0].user_id, username: data.cats[0].username, points: data.cats[0].user_points }
-    : null;
+  const profileUser = isMe
+    ? me
+    : data?.cats?.[0]
+      ? { id: data.cats[0].user_id, username: data.cats[0].username, points: data.cats[0].user_points }
+      : null;
 
   if (isLoading) {
     return (
@@ -30,13 +32,11 @@ export default function ProfilePage() {
           <Skeleton className="h-16 w-16 rounded-full" />
           <div className="space-y-2">
             <Skeleton className="h-6 w-32" />
-            <Skeleton className="h-4 w-48" />
+            <div className="flex gap-4"><Skeleton className="h-4 w-16" /><Skeleton className="h-4 w-16" /><Skeleton className="h-4 w-16" /></div>
           </div>
         </div>
-        <div className="grid grid-cols-3 gap-0.5">
-          {Array.from({ length: 6 }).map((_, i) => (
-            <Skeleton key={i} className="aspect-square" />
-          ))}
+        <div className="grid grid-cols-3 gap-1">
+          {Array.from({ length: 6 }).map((_, i) => (<Skeleton key={i} className="aspect-square rounded-xl" />))}
         </div>
       </div>
     );
@@ -45,8 +45,8 @@ export default function ProfilePage() {
   if (!profileUser && !isMe) {
     return (
       <div className="flex flex-col items-center justify-center py-20">
-        <p className="text-muted-foreground">User not found</p>
-        <Button variant="outline" className="mt-4" onClick={() => navigate('/feed')}>Go to feed</Button>
+        <p className="text-muted-foreground mb-4">Пользователь не найден</p>
+        <Button variant="outline" onClick={() => navigate('/feed')}>Перейти в ленту</Button>
       </div>
     );
   }
@@ -55,44 +55,61 @@ export default function ProfilePage() {
   const initials = profileUser?.username?.charAt(0).toUpperCase() || '?';
   const totalLikes = cats.reduce((sum, c) => sum + c.likes_count, 0);
 
+  const declension = (n: number, forms: [string, string, string]) => {
+    n = Math.abs(n) % 100;
+    const n1 = n % 10;
+    if (n > 10 && n < 20) return forms[2];
+    if (n1 > 1 && n1 < 5) return forms[1];
+    if (n1 === 1) return forms[0];
+    return forms[2];
+  };
+
   return (
     <div className="mx-auto max-w-4xl px-4 py-10">
       {!isMe && (
         <button onClick={() => navigate(-1)} className="mb-6 flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors">
           <ArrowLeft className="h-4 w-4" />
-          Back
+          Назад
         </button>
       )}
 
       {/* Profile header */}
       <div className="flex items-start gap-8 mb-10">
-        <Avatar className="h-16 w-16 shrink-0">
-          <AvatarFallback className="bg-foreground text-background text-lg font-medium">
+        <Avatar className="h-20 w-20 shrink-0 ring-2 ring-offset-2 ring-orange-200">
+          <AvatarFallback className="text-2xl font-bold bg-gradient-to-br from-orange-400 to-rose-500 text-white">
             {initials}
           </AvatarFallback>
         </Avatar>
         <div className="flex-1 min-w-0">
           <div className="flex items-center gap-3 mb-4">
-            <h1 className="text-xl font-medium">@{profileUser?.username}</h1>
-            {/* Edit profile button - only for own profile, navigates to profile settings or does nothing */}
+            <h1 className="text-xl font-semibold">@{profileUser?.username}</h1>
             {isMe && (
-              <Button variant="outline" size="sm" className="text-xs h-7 rounded-sm">
-                Edit profile
+              <Button variant="outline" size="sm" className="rounded-xl text-xs h-8">
+                Редактировать профиль
               </Button>
             )}
           </div>
 
           <div className="flex items-center gap-6 text-sm mb-4">
-            <div><span className="font-semibold">{cats.length}</span> <span className="text-muted-foreground">posts</span></div>
-            <div><span className="font-semibold">{totalLikes}</span> <span className="text-muted-foreground">likes</span></div>
-            <div><span className="font-semibold">{profileUser?.points ?? 0}</span> <span className="text-muted-foreground">pts</span></div>
+            <div>
+              <span className="font-bold">{cats.length}</span>{' '}
+              <span className="text-muted-foreground">{declension(cats.length, ['публикация', 'публикации', 'публикаций'])}</span>
+            </div>
+            <div>
+              <span className="font-bold">{totalLikes}</span>{' '}
+              <span className="text-muted-foreground">{declension(totalLikes, ['лайк', 'лайка', 'лайков'])}</span>
+            </div>
+            <div>
+              <span className="font-bold">🏆 {profileUser?.points ?? 0}</span>{' '}
+              <span className="text-muted-foreground">{declension(profileUser?.points ?? 0, ['балл', 'балла', 'баллов'])}</span>
+            </div>
           </div>
 
           {isMe && (
             <Link to="/upload">
-              <Button size="sm" className="text-xs h-7 rounded-sm gap-1">
-                <Plus className="h-3.5 w-3.5" />
-                New post
+              <Button size="sm" className="rounded-xl bg-gradient-to-r from-orange-400 to-rose-500 text-white hover:from-orange-500 hover:to-rose-600 shadow-sm gap-1">
+                <Plus className="h-4 w-4" />
+                Новая публикация
               </Button>
             </Link>
           )}
@@ -100,41 +117,41 @@ export default function ProfilePage() {
       </div>
 
       {/* Tabs */}
-      <div className="flex items-center gap-6 border-t pt-4 mb-4">
-        <button className="text-xs font-semibold tracking-wider uppercase text-foreground">Posts</button>
-        <button className="text-xs font-semibold tracking-wider uppercase text-muted-foreground hover:text-foreground transition-colors">Saved</button>
-        <button className="text-xs font-semibold tracking-wider uppercase text-muted-foreground hover:text-foreground transition-colors">Liked</button>
+      <div className="flex items-center gap-6 border-t pt-4 mb-1">
+        <button className="flex items-center gap-1.5 text-xs font-bold tracking-wider uppercase text-foreground">
+          <Grid3X3 className="h-3 w-3" />
+          Публикации
+        </button>
+        <button className="flex items-center gap-1.5 text-xs font-bold tracking-wider uppercase text-muted-foreground hover:text-foreground transition-colors">
+          <Bookmark className="h-3 w-3" />
+          Сохранённое
+        </button>
       </div>
 
       {/* Grid */}
       {cats.length === 0 ? (
         <div className="flex flex-col items-center justify-center py-20 text-center border-t">
-          <p className="text-base font-medium mb-1">No cats yet</p>
+          <p className="text-base font-medium mb-1">Пока нет котов</p>
           <p className="text-sm text-muted-foreground mb-4">
-            {isMe ? 'Share your first cat photo' : 'This user has no cats yet'}
+            {isMe ? 'Поделитесь первым фото кота' : 'У пользователя пока нет котов'}
           </p>
           {isMe && (
             <Link to="/upload">
-              <Button size="sm">Upload</Button>
+              <Button size="sm" className="rounded-xl">Загрузить кота</Button>
             </Link>
           )}
         </div>
       ) : (
-        <div className="grid grid-cols-3 gap-0.5">
+        <div className="grid grid-cols-3 gap-1">
           {cats.map((cat) => (
             <button
               key={cat.id}
               onClick={() => setModalCatId(cat.id)}
-              className="group relative aspect-square overflow-hidden bg-muted"
+              className="group relative aspect-square overflow-hidden rounded-xl bg-muted"
             >
-              <img
-                src={cat.image_url}
-                alt={cat.caption || 'Cat photo'}
-                className="h-full w-full object-cover transition-transform group-hover:scale-105"
-                loading="lazy"
-              />
-              <div className="absolute inset-0 flex items-center justify-center bg-black/30 opacity-0 group-hover:opacity-100 transition-opacity">
-                <div className="flex items-center gap-1 text-white text-sm font-medium">
+              <img src={cat.image_url} alt={cat.caption || 'Фото кота'} className="h-full w-full object-cover transition-transform group-hover:scale-105" loading="lazy" />
+              <div className="absolute inset-0 flex items-center justify-center bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity rounded-xl">
+                <div className="flex items-center gap-1.5 text-white text-sm font-bold">
                   <Heart className="h-4 w-4 fill-white" strokeWidth={2} />
                   <span>{cat.likes_count}</span>
                 </div>
@@ -144,9 +161,7 @@ export default function ProfilePage() {
         </div>
       )}
 
-      {modalCatId && (
-        <CatModal catId={modalCatId} onClose={() => setModalCatId(null)} />
-      )}
+      {modalCatId && <CatModal catId={modalCatId} onClose={() => setModalCatId(null)} />}
     </div>
   );
 }

client/src/pages/RegisterPage.tsx

@@ -3,6 +3,7 @@ import { Link, Navigate } from 'react-router-dom';
 import { useAuth } from '@/hooks/useAuth';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+import { Cat } from 'lucide-react';
 
 export default function RegisterPage() {
   const { user, register } = useAuth();
@@ -19,7 +20,7 @@ export default function RegisterPage() {
     setError('');
 
     if (password !== confirm) {
-      setError('Passwords do not match');
+      setError('Пароли не совпадают');
       return;
     }
 
@@ -27,59 +28,74 @@ export default function RegisterPage() {
     try {
       await register(username, password);
     } catch (err: any) {
-      setError(err.response?.data?.error || 'Registration failed');
+      setError(err.response?.data?.error || 'Ошибка регистрации');
     } finally {
       setLoading(false);
     }
   };
 
   return (
-    <div className="flex min-h-screen items-center justify-center p-4">
+    <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-orange-50 via-amber-50 to-rose-50 p-4">
       <div className="w-full max-w-sm animate-fade-in">
         <div className="text-center mb-8">
-          <h1 className="text-2xl font-semibold tracking-tight">Catstagram</h1>
-          <p className="text-sm text-muted-foreground mt-1">Create your account</p>
+          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-orange-400 to-rose-500 shadow-lg shadow-orange-200/50">
+            <Cat className="h-8 w-8 text-white" />
+          </div>
+          <h1 className="text-2xl font-bold bg-gradient-to-r from-orange-500 to-rose-500 bg-clip-text text-transparent">
+            Catstagram
+          </h1>
+          <p className="mt-1.5 text-sm text-muted-foreground">Присоединяйтесь к сообществу котоводов</p>
         </div>
 
-        <form onSubmit={handleSubmit} className="space-y-3">
-          <Input
-            value={username}
-            onChange={(e) => setUsername(e.target.value)}
-            placeholder="Username"
-            minLength={3}
-            required
-            autoFocus
-            className="h-10 text-sm"
-          />
-          <Input
-            type="password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            placeholder="Password"
-            minLength={4}
-            required
-            className="h-10 text-sm"
-          />
-          <Input
-            type="password"
-            value={confirm}
-            onChange={(e) => setConfirm(e.target.value)}
-            placeholder="Confirm password"
-            required
-            className="h-10 text-sm"
-          />
-          {error && <p className="text-sm text-destructive">{error}</p>}
-          <Button type="submit" className="w-full h-10" disabled={loading}>
-            {loading ? 'Creating account...' : 'Create account'}
-          </Button>
-        </form>
+        <div className="bg-white rounded-2xl border border-border/60 shadow-sm p-6">
+          <form onSubmit={handleSubmit} className="space-y-3.5">
+            <Input
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              placeholder="Имя пользователя"
+              minLength={3}
+              required
+              autoFocus
+              className="h-11 text-sm rounded-xl bg-secondary/50"
+            />
+            <Input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="Пароль"
+              minLength={4}
+              required
+              className="h-11 text-sm rounded-xl bg-secondary/50"
+            />
+            <Input
+              type="password"
+              value={confirm}
+              onChange={(e) => setConfirm(e.target.value)}
+              placeholder="Подтвердите пароль"
+              required
+              className="h-11 text-sm rounded-xl bg-secondary/50"
+            />
+            {error && (
+              <p className="text-sm text-destructive text-center bg-red-50 rounded-xl py-2">{error}</p>
+            )}
+            <Button
+              type="submit"
+              className="w-full h-11 rounded-xl bg-gradient-to-r from-orange-400 to-rose-500 text-white hover:from-orange-500 hover:to-rose-600 shadow-sm"
+              disabled={loading}
+            >
+              {loading ? 'Создание аккаунта...' : 'Создать аккаунт'}
+            </Button>
+          </form>
+        </div>
 
-        <p className="mt-6 text-center text-sm text-muted-foreground">
-          Already have an account?{' '}
-          <Link to="/login" className="font-medium underline-offset-4 hover:underline">
-            Sign in
-          </Link>
-        </p>
+        <div className="mt-4 bg-white rounded-2xl border border-border/60 shadow-sm p-5 text-center">
+          <p className="text-sm text-muted-foreground">
+            Уже есть аккаунт?{' '}
+            <Link to="/login" className="font-semibold text-orange-500 hover:text-orange-600 transition-colors">
+              Войти
+            </Link>
+          </p>
+        </div>
       </div>
     </div>
   );

client/src/pages/UploadPage.tsx

@@ -6,7 +6,7 @@ import { useAuth } from '@/hooks/useAuth';
 import { useToast } from '@/components/Toast';
 import { Button } from '@/components/ui/button';
 import { Avatar, AvatarFallback } from '@/components/ui/avatar';
-import { ArrowLeft, Upload, X } from 'lucide-react';
+import { ArrowLeft, Upload, X, ImageIcon } from 'lucide-react';
 
 export default function UploadPage() {
   const navigate = useNavigate();
@@ -35,7 +35,6 @@ export default function UploadPage() {
 
   const handleUpload = async () => {
     if (!file) return;
-
     const fd = new FormData();
     fd.append('image', file);
     fd.append('caption', caption);
@@ -43,10 +42,10 @@ export default function UploadPage() {
     try {
       const result = await uploadMutation.mutateAsync(fd);
       if (user) updateUser({ ...user, points: (user.points || 0) + 10 });
-      toast('+10 points', 'success');
+      toast('+10 баллов! 🎉', 'success');
       navigate(`/cat/${result.cat.id}`);
     } catch {
-      toast('Upload failed', 'error');
+      toast('Ошибка загрузки', 'error');
     }
   };
 
@@ -57,82 +56,100 @@ export default function UploadPage() {
   };
 
   return (
-    <div className="mx-auto max-w-xl px-4 py-8">
+    <div className="mx-auto max-w-xl px-4 py-6">
       <button
         onClick={() => navigate(-1)}
         className="mb-6 flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
       >
         <ArrowLeft className="h-4 w-4" />
-        Back
+        Назад
       </button>
 
-      <h1 className="text-xl font-medium mb-6">New post</h1>
-
-      {!preview ? (
-        <div
-          {...getRootProps()}
-          className={`border border-dashed p-16 text-center cursor-pointer transition-colors ${
-            isDragActive ? 'bg-secondary border-foreground' : 'hover:bg-secondary'
-          }`}
-        >
-          <input {...getInputProps()} />
-          <div className="mb-4">
-            <Upload className="mx-auto h-6 w-6 text-muted-foreground" strokeWidth={1.5} />
-          </div>
-          <p className="text-sm font-medium mb-1">
-            {isDragActive ? 'Drop your cat here' : 'Drag photo here'}
-          </p>
-          <p className="text-xs text-muted-foreground mb-4">or click to browse</p>
-          <Button variant="outline" size="sm">Select file</Button>
-          <p className="mt-3 text-xs text-muted-foreground">JPG, PNG, GIF, WebP · Max 10MB</p>
+      <div className="bg-white rounded-2xl border border-border/60 shadow-sm overflow-hidden">
+        <div className="px-5 py-3.5 border-b">
+          <h1 className="text-base font-semibold text-center">Новый пост</h1>
         </div>
-      ) : (
-        <div className="space-y-4">
-          <div className="relative bg-muted">
-            <img src={preview} alt="Preview" className="max-h-96 w-full object-contain" />
-            <button
-              onClick={clearFile}
-              className="absolute right-2 top-2 flex h-7 w-7 items-center justify-center bg-background border"
-            >
-              <X className="h-3.5 w-3.5" />
-            </button>
-          </div>
 
-          <div className="flex items-start gap-3">
-            <Avatar className="h-7 w-7 shrink-0 mt-0.5">
-              <AvatarFallback className="text-[10px] bg-foreground text-background">
-                {user?.username?.charAt(0).toUpperCase() || '?'}
-              </AvatarFallback>
-            </Avatar>
-            <div className="flex-1">
-              <p className="text-xs font-medium mb-1">{user?.username}</p>
-              <textarea
-                placeholder="Write a caption..."
-                value={caption}
-                onChange={(e) => setCaption(e.target.value)}
-                maxLength={200}
-                rows={2}
-                className="w-full resize-none text-sm bg-transparent outline-none placeholder:text-muted-foreground border-b pb-1"
-              />
-              <p className="text-right text-[11px] text-muted-foreground mt-1">{caption.length}/200</p>
+        {!preview ? (
+          <div
+            {...getRootProps()}
+            className={`flex cursor-pointer flex-col items-center justify-center p-16 text-center transition-all ${
+              isDragActive
+                ? 'bg-gradient-to-br from-orange-50 to-rose-50 border-2 border-dashed border-orange-300 m-2 rounded-xl'
+                : 'hover:bg-secondary/50'
+            }`}
+          >
+            <input {...getInputProps()} />
+            <div className="mb-5 flex h-20 w-20 items-center justify-center rounded-full bg-secondary">
+              <Upload className={`h-8 w-8 ${isDragActive ? 'text-orange-500' : 'text-muted-foreground'}`} strokeWidth={1.5} />
+            </div>
+            <p className="text-base font-medium mb-1">
+              {isDragActive ? 'Отпустите фото' : 'Перетащите фото сюда'}
+            </p>
+            <p className="text-sm text-muted-foreground mb-5">или нажмите, чтобы выбрать</p>
+            <Button variant="outline" size="sm" className="rounded-xl">
+              Выбрать файл
+            </Button>
+            <p className="mt-4 text-xs text-muted-foreground">JPG, PNG, GIF, WebP · до 10 МБ</p>
+          </div>
+        ) : (
+          <div>
+            <div className="relative bg-muted flex items-center justify-center max-h-96 overflow-hidden">
+              <img src={preview} alt="Preview" className="max-h-96 w-full object-contain" />
+              <button
+                onClick={clearFile}
+                className="absolute right-3 top-3 flex h-8 w-8 items-center justify-center rounded-xl bg-black/50 text-white hover:bg-black/70 transition-colors"
+              >
+                <X className="h-4 w-4" />
+              </button>
+            </div>
+
+            <div className="flex items-start gap-3 px-4 py-3">
+              <Avatar className="h-8 w-8 shrink-0 ring-2 ring-offset-1 ring-orange-200">
+                <AvatarFallback className="text-xs bg-gradient-to-br from-orange-400 to-rose-500 text-white">
+                  {user?.username?.charAt(0).toUpperCase() || '?'}
+                </AvatarFallback>
+              </Avatar>
+              <div className="flex-1">
+                <p className="text-xs font-semibold mb-1">{user?.username}</p>
+                <textarea
+                  placeholder="Напишите подпись..."
+                  value={caption}
+                  onChange={(e) => setCaption(e.target.value)}
+                  maxLength={200}
+                  rows={2}
+                  className="w-full resize-none text-sm bg-transparent outline-none placeholder:text-muted-foreground"
+                />
+                <p className="text-right text-xs text-muted-foreground mt-1">{caption.length}/200</p>
+              </div>
+            </div>
+
+            <div className="flex items-center justify-between px-4 py-3 bg-gradient-to-r from-orange-50 to-rose-50 border-t">
+              <span className="text-sm font-medium text-orange-600">+10 баллов за загрузку</span>
+              <Button
+                onClick={handleUpload}
+                disabled={uploadMutation.isPending}
+                size="sm"
+                className="rounded-xl bg-gradient-to-r from-orange-400 to-rose-500 text-white hover:from-orange-500 hover:to-rose-600 shadow-sm"
+              >
+                {uploadMutation.isPending ? 'Публикация...' : 'Поделиться'}
+              </Button>
             </div>
           </div>
+        )}
+      </div>
 
-          <div className="flex items-center justify-between pt-2">
-            <span className="text-xs text-muted-foreground">+10 points</span>
-            <Button
-              onClick={handleUpload}
-              disabled={uploadMutation.isPending}
-              size="sm"
-            >
-              {uploadMutation.isPending ? 'Sharing...' : 'Share'}
-            </Button>
-          </div>
+      {preview && (
+        <div className="mt-4 flex justify-center">
+          <Button variant="ghost" size="sm" onClick={clearFile} className="text-muted-foreground rounded-xl">
+            <ImageIcon className="h-4 w-4 mr-1.5" />
+            Выбрать другое фото
+          </Button>
         </div>
       )}
 
       {uploadMutation.isError && (
-        <p className="mt-3 text-sm text-destructive text-center">Failed to upload. Try again.</p>
+        <p className="mt-3 text-center text-sm text-destructive">Не удалось загрузить. Попробуйте снова.</p>
       )}
     </div>
   );