diff --git a/frontend/src/pages/TeapotPage.tsx b/frontend/src/pages/TeapotPage.tsx
index 103756c..c71ebf6 100644
--- a/frontend/src/pages/TeapotPage.tsx
+++ b/frontend/src/pages/TeapotPage.tsx
@@ -14,96 +14,158 @@ export function TeapotPage() {
         <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' }} />
+      {/* Teapot and Cup container */}
+      <div className="relative mb-8 flex items-start">
+        {/* Teapot */}
+        <div
+          className="relative cursor-pointer transition-transform duration-500 ease-out"
+          style={{
+            transform: isPoured ? 'rotate(15deg)' : 'rotate(0deg)',
+            transformOrigin: '80px 130px'
+          }}
+          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-0' : '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 - expanded viewBox to show full handle */}
+          <svg width="180" height="140" viewBox="-15 0 175 140" className="drop-shadow-2xl overflow-visible">
+            {/* 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>
+
+            {/* Handle - behind body */}
+            <path
+              d="M 25 70 Q -5 70 -5 90 Q -5 110 25 110"
+              fill="none"
+              stroke="#f59e0b"
+              strokeWidth="8"
+              strokeLinecap="round"
+            />
+            <path
+              d="M 25 70 Q -5 70 -5 90 Q -5 110 25 110"
+              fill="none"
+              stroke="url(#teapotGradient)"
+              strokeWidth="5"
+              strokeLinecap="round"
+            />
+
+            {/* 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"
+            />
+
+            {/* Face */}
+            <circle cx="65" cy="85" r="5" fill="#292524" />
+            <circle cx="95" cy="85" r="5" fill="#292524" />
+            <circle cx="67" cy="83" r="2" fill="white" />
+            <circle cx="97" cy="83" r="2" fill="white" />
+            <path d="M 70 100 Q 80 110 90 100" fill="none" stroke="#292524" strokeWidth="3" strokeLinecap="round" />
+
+            {/* 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" />
+          </svg>
+
+          {/* Glow effect */}
+          <div className="absolute inset-0 bg-amber-400/20 rounded-full blur-3xl -z-10" />
         </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" />
+        {/* Cup - positioned to the right and below */}
+        <div className="relative ml-[20px] mt-[125px]">
+          <svg width="100" height="70" viewBox="0 0 95 70" className="drop-shadow-xl">
+            <defs>
+              <linearGradient id="cupGradient" x1="0%" y1="0%" x2="0%" y2="100%">
+                <stop offset="0%" stopColor="#fef3c7" />
+                <stop offset="100%" stopColor="#fde68a" />
+              </linearGradient>
+              <linearGradient id="teaInCupGradient" x1="0%" y1="0%" x2="0%" y2="100%">
+                <stop offset="0%" stopColor="#d97706" />
+                <stop offset="100%" stopColor="#92400e" />
+              </linearGradient>
+            </defs>
 
-          {/* 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" />
+            {/* Cup body */}
+            <path
+              d="M 10 15 L 15 60 Q 20 68 40 68 Q 60 68 65 60 L 70 15 Z"
+              fill="url(#cupGradient)"
+              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"
-          />
+            {/* Cup rim */}
+            <ellipse cx="40" cy="15" rx="30" ry="8" fill="url(#cupGradient)" stroke="#f59e0b" strokeWidth="2" />
 
-          {/* 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"
-          />
+            {/* Tea in cup - fills up when pouring */}
+            <ellipse
+              cx="40"
+              cy="20"
+              rx="25"
+              ry="6"
+              fill="url(#teaInCupGradient)"
+              className={`transition-all duration-1000 ${isPoured ? 'opacity-100' : 'opacity-30'}`}
+              style={{
+                transform: isPoured ? 'translateY(0)' : 'translateY(15px)',
+                transformOrigin: 'center'
+              }}
+            />
 
-          {/* 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 */}
+            {/* Handle */}
+            <path
+              d="M 70 25 Q 85 25 85 40 Q 85 55 70 55"
+              fill="none"
+              stroke="#f59e0b"
+              strokeWidth="5"
+              strokeLinecap="round"
+            />
+            <path
+              d="M 70 25 Q 85 25 85 40 Q 85 55 70 55"
+              fill="none"
+              stroke="url(#cupGradient)"
+              strokeWidth="3"
+              strokeLinecap="round"
+            />
+          </svg>
 
-          {/* 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' }} />
+          {/* Steam from cup when filled */}
+          <div className={`absolute -top-4 left-1/2 -translate-x-1/2 flex gap-1 transition-opacity duration-1000 ${isPoured ? 'opacity-60' : 'opacity-0'}`}>
+            <div className="w-1 h-4 bg-gradient-to-t from-gray-400/40 to-transparent rounded-full animate-steam" style={{ animationDelay: '0.5s' }} />
+            <div className="w-1 h-5 bg-gradient-to-t from-gray-400/40 to-transparent rounded-full animate-steam" style={{ animationDelay: '0.8s' }} />
+            <div className="w-1 h-3 bg-gradient-to-t from-gray-400/40 to-transparent rounded-full animate-steam" style={{ animationDelay: '1.1s' }} />
           </div>
-        )}
-
-        {/* Glow effect */}
-        <div className="absolute inset-0 bg-amber-400/20 rounded-full blur-3xl -z-10" />
+        </div>
       </div>
 
       {/* 418 text */}
@@ -173,19 +235,6 @@ export function TeapotPage() {
         .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>
   )