diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 5ca5940..f28c9ca 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -20,6 +20,7 @@ import { AssignmentDetailPage } from '@/pages/AssignmentDetailPage'
 import { ProfilePage } from '@/pages/ProfilePage'
 import { UserProfilePage } from '@/pages/UserProfilePage'
 import { NotFoundPage } from '@/pages/NotFoundPage'
+import { TeapotPage } from '@/pages/TeapotPage'
 
 // Protected route wrapper
 function ProtectedRoute({ children }: { children: React.ReactNode }) {
@@ -148,6 +149,11 @@ function App() {
 
         <Route path="users/:id" element={<UserProfilePage />} />
 
+        {/* Easter egg - 418 I'm a teapot */}
+        <Route path="418" element={<TeapotPage />} />
+        <Route path="teapot" element={<TeapotPage />} />
+        <Route path="tea" element={<TeapotPage />} />
+
         {/* 404 - must be last */}
         <Route path="*" element={<NotFoundPage />} />
       </Route>
diff --git a/frontend/src/components/SpinWheel.tsx b/frontend/src/components/SpinWheel.tsx
index 2fbbead..4c2ffde 100644
--- a/frontend/src/components/SpinWheel.tsx
+++ b/frontend/src/components/SpinWheel.tsx
@@ -1,7 +1,6 @@
-import { useState, useEffect, useRef, useCallback } from 'react'
+import { useState, useCallback, useMemo } from 'react'
 import type { Game } from '@/types'
-import { Gamepad2, Loader2, Sparkles } from 'lucide-react'
-import { NeonButton } from './ui'
+import { Gamepad2, Loader2 } from 'lucide-react'
 
 interface SpinWheelProps {
   games: Game[]
@@ -10,33 +9,80 @@ interface SpinWheelProps {
   disabled?: boolean
 }
 
-const ITEM_HEIGHT = 100
-const VISIBLE_ITEMS = 5
-const SPIN_DURATION = 4000
-const EXTRA_ROTATIONS = 3
+const SPIN_DURATION = 5000 // ms
+const EXTRA_ROTATIONS = 5
+
+// Цветовая палитра секторов
+const SECTOR_COLORS = [
+  { bg: '#0d9488', border: '#14b8a6' }, // teal
+  { bg: '#7c3aed', border: '#8b5cf6' }, // violet
+  { bg: '#0891b2', border: '#06b6d4' }, // cyan
+  { bg: '#c026d3', border: '#d946ef' }, // fuchsia
+  { bg: '#059669', border: '#10b981' }, // emerald
+  { bg: '#7c2d12', border: '#ea580c' }, // orange
+  { bg: '#1d4ed8', border: '#3b82f6' }, // blue
+  { bg: '#be123c', border: '#e11d48' }, // rose
+]
 
 export function SpinWheel({ games, onSpin, onSpinComplete, disabled }: SpinWheelProps) {
   const [isSpinning, setIsSpinning] = useState(false)
-  const [offset, setOffset] = useState(0)
-  const containerRef = useRef<HTMLDivElement>(null)
-  const animationRef = useRef<number | null>(null)
+  const [rotation, setRotation] = useState(0)
 
-  // Create extended list for seamless looping
-  const extendedGames = [...games, ...games, ...games, ...games, ...games]
+  // Размеры колеса
+  const wheelSize = 400
+  const centerX = wheelSize / 2
+  const centerY = wheelSize / 2
+  const radius = wheelSize / 2 - 10
+
+  // Рассчитываем углы секторов
+  const sectorAngle = games.length > 0 ? 360 / games.length : 360
+
+  // Создаём path для сектора
+  const createSectorPath = useCallback((index: number, total: number) => {
+    const angle = 360 / total
+    const startAngle = index * angle - 90 // Начинаем сверху
+    const endAngle = startAngle + angle
+
+    const startRad = (startAngle * Math.PI) / 180
+    const endRad = (endAngle * Math.PI) / 180
+
+    const x1 = centerX + radius * Math.cos(startRad)
+    const y1 = centerY + radius * Math.sin(startRad)
+    const x2 = centerX + radius * Math.cos(endRad)
+    const y2 = centerY + radius * Math.sin(endRad)
+
+    const largeArcFlag = angle > 180 ? 1 : 0
+
+    return `M ${centerX} ${centerY} L ${x1} ${y1} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${x2} ${y2} Z`
+  }, [centerX, centerY, radius])
+
+  // Позиция текста в секторе
+  const getTextPosition = useCallback((index: number, total: number) => {
+    const angle = 360 / total
+    const midAngle = index * angle + angle / 2 - 90
+    const midRad = (midAngle * Math.PI) / 180
+    const textRadius = radius * 0.65
+
+    return {
+      x: centerX + textRadius * Math.cos(midRad),
+      y: centerY + textRadius * Math.sin(midRad),
+      rotation: midAngle + 90, // Текст читается от центра к краю
+    }
+  }, [centerX, centerY, radius])
 
   const handleSpin = useCallback(async () => {
     if (isSpinning || disabled || games.length === 0) return
 
     setIsSpinning(true)
 
-    // Get result from API first
+    // Получаем результат от API
     const resultGame = await onSpin()
     if (!resultGame) {
       setIsSpinning(false)
       return
     }
 
-    // Find target index
+    // Находим индекс выигравшей игры
     const targetIndex = games.findIndex(g => g.id === resultGame.id)
     if (targetIndex === -1) {
       setIsSpinning(false)
@@ -44,43 +90,44 @@ export function SpinWheel({ games, onSpin, onSpinComplete, disabled }: SpinWheel
       return
     }
 
-    // Calculate animation
-    const totalItems = games.length
-    const fullRotations = EXTRA_ROTATIONS * totalItems
-    const finalPosition = (fullRotations + targetIndex) * ITEM_HEIGHT
+    // Рассчитываем угол для остановки
+    // Указатель находится сверху (на 0°/360°)
+    // Нам нужно чтобы нужный сектор оказался под указателем
+    const targetSectorMidAngle = targetIndex * sectorAngle + sectorAngle / 2
 
-    // Animate
-    const startTime = Date.now()
-    const startOffset = offset % (totalItems * ITEM_HEIGHT)
+    // Полные обороты + угол до центра сектора
+    // Колесо крутится по часовой стрелке, указатель сверху
+    // Чтобы сектор оказался сверху, нужно повернуть на (360 - targetSectorMidAngle)
+    const baseRotation = rotation % 360
+    const fullRotations = EXTRA_ROTATIONS * 360
+    const finalAngle = fullRotations + (360 - targetSectorMidAngle) + baseRotation
 
-    const animate = () => {
-      const elapsed = Date.now() - startTime
-      const progress = Math.min(elapsed / SPIN_DURATION, 1)
+    setRotation(rotation + finalAngle)
 
-      // Easing function - starts fast, slows down at end
-      const easeOut = 1 - Math.pow(1 - progress, 4)
+    // Ждём окончания анимации
+    setTimeout(() => {
+      setIsSpinning(false)
+      onSpinComplete(resultGame)
+    }, SPIN_DURATION)
+  }, [isSpinning, disabled, games, rotation, sectorAngle, onSpin, onSpinComplete])
 
-      const currentOffset = startOffset + (finalPosition - startOffset) * easeOut
-      setOffset(currentOffset)
+  // Сокращаем название игры для отображения
+  const truncateText = (text: string, maxLength: number) => {
+    if (text.length <= maxLength) return text
+    return text.slice(0, maxLength - 2) + '...'
+  }
 
-      if (progress < 1) {
-        animationRef.current = requestAnimationFrame(animate)
-      } else {
-        setIsSpinning(false)
-        onSpinComplete(resultGame)
-      }
-    }
+  // Мемоизируем секторы для производительности
+  const sectors = useMemo(() => {
+    return games.map((game, index) => {
+      const color = SECTOR_COLORS[index % SECTOR_COLORS.length]
+      const path = createSectorPath(index, games.length)
+      const textPos = getTextPosition(index, games.length)
+      const maxTextLength = games.length > 8 ? 10 : games.length > 5 ? 14 : 18
 
-    animationRef.current = requestAnimationFrame(animate)
-  }, [isSpinning, disabled, games, offset, onSpin, onSpinComplete])
-
-  useEffect(() => {
-    return () => {
-      if (animationRef.current) {
-        cancelAnimationFrame(animationRef.current)
-      }
-    }
-  }, [])
+      return { game, color, path, textPos, maxTextLength }
+    })
+  }, [games, createSectorPath, getTextPosition])
 
   if (games.length === 0) {
     return (
@@ -93,175 +140,195 @@ export function SpinWheel({ games, onSpin, onSpinComplete, disabled }: SpinWheel
     )
   }
 
-  const containerHeight = VISIBLE_ITEMS * ITEM_HEIGHT
-  const currentIndex = Math.round(offset / ITEM_HEIGHT) % games.length
-
-  // Calculate opacity and scale based on distance from center
-  const getItemStyle = (itemIndex: number) => {
-    const itemPosition = itemIndex * ITEM_HEIGHT - offset
-    const centerPosition = containerHeight / 2 - ITEM_HEIGHT / 2
-    const distanceFromCenter = Math.abs(itemPosition - centerPosition)
-    const maxDistance = containerHeight / 2
-    const normalizedDistance = distanceFromCenter / maxDistance
-
-    const opacity = Math.max(0.15, 1 - normalizedDistance * 0.85)
-    const scale = Math.max(0.85, 1 - normalizedDistance * 0.15)
-
-    return { opacity, scale }
-  }
-
   return (
     <div className="flex flex-col items-center gap-6">
-      {/* Wheel container */}
-      <div className="relative w-full max-w-lg">
-        {/* Outer glow effect */}
-        <div className={`absolute -inset-1 rounded-2xl transition-all duration-300 ${
-          isSpinning
-            ? 'bg-gradient-to-r from-neon-500 via-accent-500 to-neon-500 opacity-50 blur-xl animate-pulse'
-            : 'bg-gradient-to-r from-neon-500/20 to-accent-500/20 opacity-0'
-        }`} />
+      {/* Контейнер колеса */}
+      <div className="relative">
+        {/* Внешнее свечение */}
+        <div className={`
+          absolute -inset-4 rounded-full transition-all duration-500
+          ${isSpinning
+            ? 'bg-neon-500/30 blur-2xl animate-pulse'
+            : 'bg-neon-500/10 blur-xl'
+          }
+        `} />
 
-        {/* Main container with glass effect */}
-        <div className="relative glass rounded-2xl border border-dark-600 overflow-hidden">
-          {/* Selection indicator - center highlight */}
-          <div className="absolute inset-x-0 top-1/2 -translate-y-1/2 h-[100px] z-20 pointer-events-none">
-            {/* Neon border glow */}
-            <div className={`absolute inset-0 border-2 rounded-lg transition-all duration-300 ${
-              isSpinning
-                ? 'border-neon-400 shadow-[0_0_14px_rgba(34,211,238,0.4),inset_0_0_14px_rgba(34,211,238,0.08)]'
-                : 'border-neon-500/50 shadow-[0_0_8px_rgba(34,211,238,0.15)]'
-            }`} />
-
-            {/* Side arrows */}
-            <div className="absolute -left-1 top-1/2 -translate-y-1/2">
-              <div className={`w-3 h-6 transition-all duration-300 ${
-                isSpinning ? 'bg-neon-400' : 'bg-neon-500/70'
-              }`} style={{ clipPath: 'polygon(100% 0, 100% 100%, 0 50%)' }} />
-            </div>
-            <div className="absolute -right-1 top-1/2 -translate-y-1/2">
-              <div className={`w-3 h-6 transition-all duration-300 ${
-                isSpinning ? 'bg-neon-400' : 'bg-neon-500/70'
-              }`} style={{ clipPath: 'polygon(0 0, 0 100%, 100% 50%)' }} />
-            </div>
-
-            {/* Inner glow */}
-            <div className={`absolute inset-0 rounded-lg transition-all duration-300 ${
-              isSpinning
-                ? 'bg-neon-500/10'
-                : 'bg-neon-500/5'
-            }`} />
-          </div>
-
-          {/* Top fade gradient */}
-          <div className="absolute inset-x-0 top-0 h-24 bg-gradient-to-b from-dark-800 via-dark-800/80 to-transparent z-10 pointer-events-none" />
-
-          {/* Bottom fade gradient */}
-          <div className="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-dark-800 via-dark-800/80 to-transparent z-10 pointer-events-none" />
-
-          {/* Items container */}
-          <div
-            ref={containerRef}
-            className="relative overflow-hidden"
-            style={{ height: containerHeight }}
-          >
-            <div
-              className="absolute w-full"
-              style={{
-                transform: `translateY(${containerHeight / 2 - ITEM_HEIGHT / 2 - offset}px)`,
-              }}
-            >
-              {extendedGames.map((game, index) => {
-                const realIndex = index % games.length
-                const isSelected = !isSpinning && realIndex === currentIndex
-                const { opacity, scale } = getItemStyle(index)
-
-                return (
-                  <div
-                    key={`${game.id}-${index}`}
-                    className="px-4 transition-transform duration-200"
-                    style={{
-                      height: ITEM_HEIGHT,
-                      opacity,
-                      transform: `scale(${scale})`,
-                    }}
-                  >
-                    <div className={`
-                      flex items-center gap-4 h-full px-4 rounded-xl
-                      transition-all duration-300
-                      ${isSelected
-                        ? 'bg-neon-500/10 border border-neon-500/30'
-                        : 'bg-transparent border border-transparent'
-                      }
-                    `}>
-                      {/* Game cover */}
-                      <div className={`
-                        w-16 h-16 rounded-xl overflow-hidden flex-shrink-0
-                        border transition-all duration-300
-                        ${isSelected
-                          ? 'border-neon-500/50 shadow-[0_0_12px_rgba(34,211,238,0.25)]'
-                          : 'border-dark-600'
-                        }
-                      `}>
-                        {game.cover_url ? (
-                          <img
-                            src={game.cover_url}
-                            alt={game.title}
-                            className="w-full h-full object-cover"
-                          />
-                        ) : (
-                          <div className="w-full h-full bg-gradient-to-br from-dark-700 to-dark-800 flex items-center justify-center">
-                            <Gamepad2 className={`w-7 h-7 ${isSelected ? 'text-neon-400' : 'text-gray-600'}`} />
-                          </div>
-                        )}
-                      </div>
-
-                      {/* Game info */}
-                      <div className="flex-1 min-w-0">
-                        <h3 className={`
-                          font-bold truncate text-lg transition-colors duration-300
-                          ${isSelected ? 'text-neon-400' : 'text-white'}
-                        `}>
-                          {game.title}
-                        </h3>
-                        {game.genre && (
-                          <p className="text-sm text-gray-400 truncate">{game.genre}</p>
-                        )}
-                      </div>
-
-                      {/* Selected indicator */}
-                      {isSelected && (
-                        <div className="flex-shrink-0">
-                          <Sparkles className="w-5 h-5 text-neon-400 animate-pulse" />
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                )
-              })}
+        {/* Указатель (стрелка сверху) */}
+        <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-2 z-20">
+          <div className={`
+            relative transition-all duration-300
+            ${isSpinning ? 'scale-110' : ''}
+          `}>
+            {/* Свечение указателя */}
+            <div className={`
+              absolute inset-0 blur-sm transition-opacity duration-300
+              ${isSpinning ? 'opacity-100' : 'opacity-50'}
+            `}>
+              <svg width="40" height="50" viewBox="0 0 40 50">
+                <path
+                  d="M20 50 L5 15 L20 0 L35 15 Z"
+                  fill="#22d3ee"
+                />
+              </svg>
             </div>
+            {/* Указатель */}
+            <svg width="40" height="50" viewBox="0 0 40 50" className="relative">
+              <defs>
+                <linearGradient id="pointerGradient" x1="0%" y1="0%" x2="0%" y2="100%">
+                  <stop offset="0%" stopColor="#22d3ee" />
+                  <stop offset="100%" stopColor="#0891b2" />
+                </linearGradient>
+              </defs>
+              <path
+                d="M20 50 L5 15 L20 0 L35 15 Z"
+                fill="url(#pointerGradient)"
+                stroke="#67e8f9"
+                strokeWidth="2"
+              />
+            </svg>
           </div>
         </div>
 
-        {/* Spinning indicator lines */}
+        {/* Колесо */}
+        <div
+          className="relative"
+          style={{ width: wheelSize, height: wheelSize }}
+        >
+          {/* Внешний ободок */}
+          <div className={`
+            absolute inset-0 rounded-full
+            border-4 transition-all duration-300
+            ${isSpinning
+              ? 'border-neon-400 shadow-[0_0_30px_rgba(34,211,238,0.5),inset_0_0_30px_rgba(34,211,238,0.1)]'
+              : 'border-neon-500/50 shadow-[0_0_15px_rgba(34,211,238,0.2)]'
+            }
+          `} />
+
+          {/* SVG колесо */}
+          <svg
+            width={wheelSize}
+            height={wheelSize}
+            className="relative z-10 transition-transform"
+            style={{
+              transform: `rotate(${rotation}deg)`,
+              transitionProperty: isSpinning ? 'transform' : 'none',
+              transitionDuration: isSpinning ? `${SPIN_DURATION}ms` : '0ms',
+              transitionTimingFunction: 'cubic-bezier(0.17, 0.67, 0.12, 0.99)',
+            }}
+          >
+            <defs>
+              {/* Тени для секторов */}
+              <filter id="sectorShadow" x="-20%" y="-20%" width="140%" height="140%">
+                <feDropShadow dx="0" dy="0" stdDeviation="2" floodColor="#000" floodOpacity="0.3" />
+              </filter>
+            </defs>
+
+            {/* Секторы */}
+            {sectors.map(({ game, color, path, textPos, maxTextLength }, index) => (
+              <g key={game.id}>
+                {/* Сектор */}
+                <path
+                  d={path}
+                  fill={color.bg}
+                  stroke={color.border}
+                  strokeWidth="2"
+                  filter="url(#sectorShadow)"
+                />
+
+                {/* Текст названия игры */}
+                <text
+                  x={textPos.x}
+                  y={textPos.y}
+                  transform={`rotate(${textPos.rotation}, ${textPos.x}, ${textPos.y})`}
+                  textAnchor="middle"
+                  dominantBaseline="middle"
+                  fill="white"
+                  fontSize={games.length > 10 ? "10" : games.length > 6 ? "11" : "13"}
+                  fontWeight="bold"
+                  style={{
+                    textShadow: '0 1px 3px rgba(0,0,0,0.8)',
+                    pointerEvents: 'none',
+                  }}
+                >
+                  {truncateText(game.title, maxTextLength)}
+                </text>
+
+                {/* Разделительная линия */}
+                <line
+                  x1={centerX}
+                  y1={centerY}
+                  x2={centerX + radius * Math.cos((index * sectorAngle - 90) * Math.PI / 180)}
+                  y2={centerY + radius * Math.sin((index * sectorAngle - 90) * Math.PI / 180)}
+                  stroke="rgba(255,255,255,0.3)"
+                  strokeWidth="1"
+                />
+              </g>
+            ))}
+
+            {/* Центральный круг */}
+            <circle
+              cx={centerX}
+              cy={centerY}
+              r="50"
+              fill="url(#centerGradient)"
+              stroke="#22d3ee"
+              strokeWidth="3"
+            />
+            <defs>
+              <radialGradient id="centerGradient" cx="50%" cy="50%" r="50%">
+                <stop offset="0%" stopColor="#1e293b" />
+                <stop offset="100%" stopColor="#0f172a" />
+              </radialGradient>
+            </defs>
+          </svg>
+
+          {/* Кнопка КРУТИТЬ в центре */}
+          <button
+            onClick={handleSpin}
+            disabled={isSpinning || disabled}
+            className={`
+              absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
+              w-24 h-24 rounded-full z-20
+              flex flex-col items-center justify-center gap-1
+              font-bold text-sm uppercase tracking-wider
+              transition-all duration-300
+              disabled:cursor-not-allowed
+              ${isSpinning
+                ? 'bg-dark-800 text-neon-400 shadow-[0_0_20px_rgba(34,211,238,0.4)]'
+                : 'bg-gradient-to-br from-neon-500 to-cyan-600 text-white hover:shadow-[0_0_30px_rgba(34,211,238,0.6)] hover:scale-105 active:scale-95'
+              }
+              ${disabled && !isSpinning ? 'opacity-50' : ''}
+            `}
+          >
+            {isSpinning ? (
+              <Loader2 className="w-8 h-8 animate-spin" />
+            ) : (
+              <>
+                <span className="text-xs">КРУТИТЬ</span>
+              </>
+            )}
+          </button>
+        </div>
+
+        {/* Декоративные элементы при вращении */}
         {isSpinning && (
           <>
-            <div className="absolute left-0 top-1/2 -translate-y-1/2 w-full h-px bg-gradient-to-r from-transparent via-neon-500/50 to-transparent animate-pulse" />
-            <div className="absolute left-0 top-1/2 -translate-y-1/2 w-full h-px bg-gradient-to-r from-transparent via-accent-500/50 to-transparent animate-pulse" style={{ transform: 'translateY(-50px)' }} />
-            <div className="absolute left-0 top-1/2 -translate-y-1/2 w-full h-px bg-gradient-to-r from-transparent via-accent-500/50 to-transparent animate-pulse" style={{ transform: 'translateY(50px)' }} />
+            <div className="absolute inset-0 rounded-full border-2 border-neon-400/30 animate-ping" />
+            <div
+              className="absolute inset-0 rounded-full border border-accent-400/20"
+              style={{ animation: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite 0.5s' }}
+            />
           </>
         )}
       </div>
 
-      {/* Spin button */}
-      <NeonButton
-        onClick={handleSpin}
-        disabled={isSpinning || disabled}
-        size="lg"
-        className="px-12 text-xl"
-        icon={isSpinning ? <Loader2 className="w-6 h-6 animate-spin" /> : <Sparkles className="w-6 h-6" />}
-      >
-        {isSpinning ? 'Крутится...' : 'КРУТИТЬ!'}
-      </NeonButton>
+      {/* Подсказка */}
+      <p className={`
+        text-sm transition-all duration-300
+        ${isSpinning ? 'text-neon-400 animate-pulse' : 'text-gray-500'}
+      `}>
+        {isSpinning ? 'Колесо вращается...' : 'Нажмите на колесо, чтобы крутить!'}
+      </p>
     </div>
   )
 }
diff --git a/frontend/src/components/ui/NeonButton.tsx b/frontend/src/components/ui/NeonButton.tsx
index dfc12cb..4eb5436 100644
--- a/frontend/src/components/ui/NeonButton.tsx
+++ b/frontend/src/components/ui/NeonButton.tsx
@@ -40,6 +40,8 @@ export const NeonButton = forwardRef<HTMLButtonElement, NeonButtonProps>(
         danger: 'bg-red-600 hover:bg-red-700 text-white',
         glow: '0 0 12px rgba(34, 211, 238, 0.4)',
         glowHover: '0 0 18px rgba(34, 211, 238, 0.55)',
+        glowDanger: '0 0 12px rgba(239, 68, 68, 0.4)',
+        glowDangerHover: '0 0 18px rgba(239, 68, 68, 0.55)',
       },
       purple: {
         primary: 'bg-accent-500 hover:bg-accent-400 text-white',
@@ -49,6 +51,8 @@ export const NeonButton = forwardRef<HTMLButtonElement, NeonButtonProps>(
         danger: 'bg-red-600 hover:bg-red-700 text-white',
         glow: '0 0 12px rgba(139, 92, 246, 0.4)',
         glowHover: '0 0 18px rgba(139, 92, 246, 0.55)',
+        glowDanger: '0 0 12px rgba(239, 68, 68, 0.4)',
+        glowDangerHover: '0 0 18px rgba(239, 68, 68, 0.55)',
       },
       pink: {
         primary: 'bg-pink-500 hover:bg-pink-400 text-white',
@@ -58,6 +62,8 @@ export const NeonButton = forwardRef<HTMLButtonElement, NeonButtonProps>(
         danger: 'bg-red-600 hover:bg-red-700 text-white',
         glow: '0 0 12px rgba(244, 114, 182, 0.4)',
         glowHover: '0 0 18px rgba(244, 114, 182, 0.55)',
+        glowDanger: '0 0 12px rgba(239, 68, 68, 0.4)',
+        glowDangerHover: '0 0 18px rgba(239, 68, 68, 0.55)',
       },
     }
 
@@ -93,17 +99,19 @@ export const NeonButton = forwardRef<HTMLButtonElement, NeonButtonProps>(
           className
         )}
         style={{
-          boxShadow: glow && !disabled && variant !== 'ghost' ? colors.glow : undefined,
+          boxShadow: glow && !disabled && variant !== 'ghost'
+            ? (variant === 'danger' ? colors.glowDanger : colors.glow)
+            : undefined,
         }}
         onMouseEnter={(e) => {
           if (glow && !disabled && variant !== 'ghost') {
-            e.currentTarget.style.boxShadow = colors.glowHover
+            e.currentTarget.style.boxShadow = variant === 'danger' ? colors.glowDangerHover : colors.glowHover
           }
           props.onMouseEnter?.(e)
         }}
         onMouseLeave={(e) => {
           if (glow && !disabled && variant !== 'ghost') {
-            e.currentTarget.style.boxShadow = colors.glow
+            e.currentTarget.style.boxShadow = variant === 'danger' ? colors.glowDanger : colors.glow
           }
           props.onMouseLeave?.(e)
         }}
diff --git a/frontend/src/pages/PlayPage.tsx b/frontend/src/pages/PlayPage.tsx
index 8dde144..05b66a9 100644
--- a/frontend/src/pages/PlayPage.tsx
+++ b/frontend/src/pages/PlayPage.tsx
@@ -1006,8 +1006,7 @@ export function PlayPage() {
                     Выполнено
                   </NeonButton>
                   <NeonButton
-                    variant="outline"
-                    className="border-red-500/30 text-red-400 hover:bg-red-500/10"
+                    variant="danger"
                     onClick={handleDrop}
                     isLoading={isDropping}
                     icon={<XCircle className="w-4 h-4" />}
diff --git a/frontend/src/pages/TeapotPage.tsx b/frontend/src/pages/TeapotPage.tsx
new file mode 100644
index 0000000..103756c
--- /dev/null
+++ b/frontend/src/pages/TeapotPage.tsx
@@ -0,0 +1,192 @@
+import { useState } from 'react'
+import { Link } from 'react-router-dom'
+import { NeonButton } from '@/components/ui'
+import { Home, Sparkles, Coffee } from 'lucide-react'
+
+export function TeapotPage() {
+  const [isPoured, setIsPoured] = useState(false)
+
+  return (
+    <div className="min-h-[70vh] flex flex-col items-center justify-center text-center px-4">
+      {/* Background effects */}
+      <div className="fixed inset-0 overflow-hidden pointer-events-none">
+        <div className="absolute top-1/4 -left-32 w-96 h-96 bg-amber-500/5 rounded-full blur-[100px]" />
+        <div className="absolute bottom-1/4 -right-32 w-96 h-96 bg-orange-500/5 rounded-full blur-[100px]" />
+      </div>
+
+      {/* Teapot ASCII art / SVG */}
+      <div
+        className={`relative mb-8 cursor-pointer transition-transform duration-300 ${isPoured ? 'rotate-[-30deg]' : 'hover:rotate-[-10deg]'}`}
+        onClick={() => setIsPoured(!isPoured)}
+      >
+        {/* Steam animation */}
+        <div className={`absolute -top-8 left-1/2 -translate-x-1/2 flex gap-2 transition-opacity duration-500 ${isPoured ? 'opacity-100' : 'opacity-50'}`}>
+          <div className="w-2 h-8 bg-gradient-to-t from-gray-400/50 to-transparent rounded-full animate-steam" style={{ animationDelay: '0s' }} />
+          <div className="w-2 h-10 bg-gradient-to-t from-gray-400/50 to-transparent rounded-full animate-steam" style={{ animationDelay: '0.3s' }} />
+          <div className="w-2 h-6 bg-gradient-to-t from-gray-400/50 to-transparent rounded-full animate-steam" style={{ animationDelay: '0.6s' }} />
+        </div>
+
+        {/* Teapot */}
+        <svg width="160" height="140" viewBox="0 0 160 140" className="drop-shadow-2xl">
+          {/* Body */}
+          <ellipse cx="80" cy="90" rx="55" ry="40" fill="url(#teapotGradient)" stroke="#f59e0b" strokeWidth="3" />
+
+          {/* Lid */}
+          <ellipse cx="80" cy="55" rx="35" ry="10" fill="url(#lidGradient)" stroke="#f59e0b" strokeWidth="2" />
+          <ellipse cx="80" cy="50" rx="25" ry="7" fill="url(#lidGradient)" stroke="#f59e0b" strokeWidth="2" />
+          <circle cx="80" cy="42" r="8" fill="#fbbf24" stroke="#f59e0b" strokeWidth="2" />
+
+          {/* Spout */}
+          <path
+            d="M 135 85 Q 150 75 155 60 Q 158 50 150 45"
+            fill="none"
+            stroke="#f59e0b"
+            strokeWidth="8"
+            strokeLinecap="round"
+          />
+          <path
+            d="M 135 85 Q 150 75 155 60 Q 158 50 150 45"
+            fill="none"
+            stroke="url(#teapotGradient)"
+            strokeWidth="5"
+            strokeLinecap="round"
+          />
+
+          {/* Handle */}
+          <path
+            d="M 25 70 Q 0 70 0 90 Q 0 110 25 110"
+            fill="none"
+            stroke="#f59e0b"
+            strokeWidth="8"
+            strokeLinecap="round"
+          />
+          <path
+            d="M 25 70 Q 0 70 0 90 Q 0 110 25 110"
+            fill="none"
+            stroke="url(#teapotGradient)"
+            strokeWidth="5"
+            strokeLinecap="round"
+          />
+
+          {/* Face */}
+          <circle cx="65" cy="85" r="5" fill="#292524" /> {/* Left eye */}
+          <circle cx="95" cy="85" r="5" fill="#292524" /> {/* Right eye */}
+          <circle cx="67" cy="83" r="2" fill="white" /> {/* Left eye shine */}
+          <circle cx="97" cy="83" r="2" fill="white" /> {/* Right eye shine */}
+          <path d="M 70 100 Q 80 110 90 100" fill="none" stroke="#292524" strokeWidth="3" strokeLinecap="round" /> {/* Smile */}
+
+          {/* Blush */}
+          <ellipse cx="55" cy="95" rx="8" ry="5" fill="#fca5a5" opacity="0.5" />
+          <ellipse cx="105" cy="95" rx="8" ry="5" fill="#fca5a5" opacity="0.5" />
+
+          {/* Gradients */}
+          <defs>
+            <linearGradient id="teapotGradient" x1="0%" y1="0%" x2="0%" y2="100%">
+              <stop offset="0%" stopColor="#fde047" />
+              <stop offset="50%" stopColor="#fbbf24" />
+              <stop offset="100%" stopColor="#f59e0b" />
+            </linearGradient>
+            <linearGradient id="lidGradient" x1="0%" y1="0%" x2="0%" y2="100%">
+              <stop offset="0%" stopColor="#fef08a" />
+              <stop offset="100%" stopColor="#fbbf24" />
+            </linearGradient>
+          </defs>
+        </svg>
+
+        {/* Tea drops when pouring */}
+        {isPoured && (
+          <div className="absolute top-12 right-0">
+            <div className="w-2 h-2 rounded-full bg-amber-600 animate-drop" style={{ animationDelay: '0s' }} />
+            <div className="w-1.5 h-1.5 rounded-full bg-amber-500 animate-drop ml-1" style={{ animationDelay: '0.2s' }} />
+            <div className="w-2 h-2 rounded-full bg-amber-600 animate-drop" style={{ animationDelay: '0.4s' }} />
+          </div>
+        )}
+
+        {/* Glow effect */}
+        <div className="absolute inset-0 bg-amber-400/20 rounded-full blur-3xl -z-10" />
+      </div>
+
+      {/* 418 text */}
+      <div className="relative mb-4">
+        <h1 className="text-8xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-amber-400 via-orange-400 to-red-400">
+          418
+        </h1>
+        <div className="absolute inset-0 text-8xl font-bold text-amber-500/20 blur-xl">
+          418
+        </div>
+      </div>
+
+      <h2 className="text-2xl font-bold text-white mb-3">
+        I'm a teapot
+      </h2>
+
+      <p className="text-gray-400 mb-2 max-w-md">
+        Сервер отказывается варить кофе, потому что он чайник.
+      </p>
+      <p className="text-gray-500 text-sm mb-8 max-w-md">
+        RFC 2324, Hyper Text Coffee Pot Control Protocol
+      </p>
+
+      {/* Fun fact */}
+      <div className="glass rounded-xl p-4 mb-8 max-w-md border border-amber-500/20">
+        <div className="flex items-center gap-2 text-amber-400 mb-2">
+          <Coffee className="w-4 h-4" />
+          <span className="text-sm font-semibold">Fun fact</span>
+        </div>
+        <p className="text-gray-400 text-sm">
+          Это настоящий HTTP-код ответа из первоапрельской шутки 1998 года.
+          Нажми на чайник!
+        </p>
+      </div>
+
+      {/* Button */}
+      <Link to="/">
+        <NeonButton size="lg" icon={<Home className="w-5 h-5" />}>
+          На главную
+        </NeonButton>
+      </Link>
+
+      {/* Decorative sparkles */}
+      <div className="absolute top-1/4 left-1/4 opacity-20">
+        <Sparkles className="w-6 h-6 text-amber-400 animate-pulse" />
+      </div>
+      <div className="absolute bottom-1/3 right-1/4 opacity-20">
+        <Sparkles className="w-4 h-4 text-orange-400 animate-pulse" style={{ animationDelay: '1s' }} />
+      </div>
+
+      {/* Custom animations */}
+      <style>{`
+        @keyframes steam {
+          0% {
+            transform: translateY(0) scaleX(1);
+            opacity: 0.5;
+          }
+          50% {
+            transform: translateY(-10px) scaleX(1.2);
+            opacity: 0.3;
+          }
+          100% {
+            transform: translateY(-20px) scaleX(0.8);
+            opacity: 0;
+          }
+        }
+        .animate-steam {
+          animation: steam 2s ease-in-out infinite;
+        }
+        @keyframes drop {
+          0% {
+            transform: translateY(0);
+            opacity: 1;
+          }
+          100% {
+            transform: translateY(60px);
+            opacity: 0;
+          }
+        }
+        .animate-drop {
+          animation: drop 0.6s ease-in infinite;
+        }
+      `}</style>
+    </div>
+  )
+}
diff --git a/frontend/src/pages/index.ts b/frontend/src/pages/index.ts
index bcbc7a0..3c1da62 100644
--- a/frontend/src/pages/index.ts
+++ b/frontend/src/pages/index.ts
@@ -10,3 +10,4 @@ export { LeaderboardPage } from './LeaderboardPage'
 export { ProfilePage } from './ProfilePage'
 export { UserProfilePage } from './UserProfilePage'
 export { NotFoundPage } from './NotFoundPage'
+export { TeapotPage } from './TeapotPage'