diff --git a/lib/pangea/choreographer/controllers/it_controller.dart b/lib/pangea/choreographer/controllers/it_controller.dart
index 91899a71a..f29bb59b2 100644
--- a/lib/pangea/choreographer/controllers/it_controller.dart
+++ b/lib/pangea/choreographer/controllers/it_controller.dart
@@ -21,6 +21,7 @@ class ITController {
   Choreographer choreographer;
 
   bool _isOpen = false;
+  bool _willOpen = false;
   bool _isEditingSourceText = false;
   bool showChoiceFeedback = false;
 
@@ -36,6 +37,7 @@ class ITController {
 
   void clear() {
     _isOpen = false;
+    _willOpen = false;
     showChoiceFeedback = false;
     _isEditingSourceText = false;
 
@@ -54,6 +56,7 @@ class ITController {
   }
 
   Future<void> initializeIT(ITStartData itStartData) async {
+    _willOpen = true;
     Future.delayed(const Duration(microseconds: 100), () {
       _isOpen = true;
     });
@@ -347,6 +350,8 @@ class ITController {
 
   bool get isOpen => _isOpen;
 
+  bool get willOpen => _willOpen;
+
   String get targetLangCode => choreographer.l2LangCode!;
 
   String get sourceLangCode => choreographer.l1LangCode!;
diff --git a/lib/pangea/choreographer/widgets/it_bar.dart b/lib/pangea/choreographer/widgets/it_bar.dart
index 013c7238b..068d99166 100644
--- a/lib/pangea/choreographer/widgets/it_bar.dart
+++ b/lib/pangea/choreographer/widgets/it_bar.dart
@@ -7,6 +7,7 @@ import 'package:fluffychat/pangea/choreographer/widgets/it_feedback_card.dart';
 import 'package:fluffychat/pangea/choreographer/widgets/translation_finished_flow.dart';
 import 'package:fluffychat/pangea/constants/choreo_constants.dart';
 import 'package:fluffychat/pangea/utils/error_handler.dart';
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 
@@ -21,93 +22,107 @@ class ITBar extends StatelessWidget {
   final Choreographer choreographer;
   const ITBar({super.key, required this.choreographer});
 
-  ITController get controller => choreographer.itController;
+  ITController get itController => choreographer.itController;
 
   @override
   Widget build(BuildContext context) {
-    if (!controller.isOpen) return const SizedBox();
 
-    return CompositedTransformTarget(
-      link: choreographer.itBarLinkAndKey.link,
-      child: Container(
-        key: choreographer.itBarLinkAndKey.key,
-        decoration: BoxDecoration(
-          color: Theme.of(context).brightness == Brightness.light
-              ? Colors.white
-              : Colors.black,
-          borderRadius: const BorderRadius.only(
-            topLeft: Radius.circular(AppConfig.borderRadius),
-            topRight: Radius.circular(AppConfig.borderRadius),
-          ),
-        ),
-        width: double.infinity,
-        padding: const EdgeInsets.fromLTRB(0, 3, 3, 3),
-        child: Stack(
-          children: [
-            SingleChildScrollView(
-              child: Column(
+    return AnimatedSize(
+      duration: itController.willOpen
+        ? const Duration(milliseconds: 2000)
+        : const Duration(milliseconds: 500),
+      curve: Curves.fastOutSlowIn,
+      clipBehavior: Clip.none,
+      child: !itController.willOpen
+        ? const SizedBox()
+        : CompositedTransformTarget(
+          link: choreographer.itBarLinkAndKey.link,
+          child: AnimatedOpacity(
+            duration: itController.willOpen
+              ? const Duration(milliseconds: 2000)
+              : const Duration(milliseconds: 500),
+            opacity: itController.willOpen ? 1.0 : 0.0,
+            child: Container(
+              key: choreographer.itBarLinkAndKey.key,
+              decoration: BoxDecoration(
+                color: Theme.of(context).brightness == Brightness.light
+                    ? Colors.white
+                    : Colors.black,
+                borderRadius: const BorderRadius.only(
+                  topLeft: Radius.circular(AppConfig.borderRadius),
+                  topRight: Radius.circular(AppConfig.borderRadius),
+                ),
+              ),
+              width: double.infinity,
+              padding: const EdgeInsets.fromLTRB(0, 3, 3, 3),
+              child: Stack(
                 children: [
-                  // Row(
-                  //   mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                  //   crossAxisAlignment: CrossAxisAlignment.start,
-                  //   children: [
-                  //     // Row(
-                  //     //   mainAxisAlignment: MainAxisAlignment.start,
-                  //     //   crossAxisAlignment: CrossAxisAlignment.start,
-                  //     //   children: [
-                  //     //     CounterDisplay(
-                  //     //       correct: controller.correctChoices,
-                  //     //       custom: controller.customChoices,
-                  //     //       incorrect: controller.incorrectChoices,
-                  //     //       yellow: controller.wildcardChoices,
-                  //     //     ),
-                  //     //     CompositedTransformTarget(
-                  //     //       link: choreographer.itBotLayerLinkAndKey.link,
-                  //     //       child: ITBotButton(
-                  //     //         key: choreographer.itBotLayerLinkAndKey.key,
-                  //     //         choreographer: choreographer,
-                  //     //       ),
-                  //     //     ),
-                  //     //   ],
-                  //     // ),
-                  //     ITCloseButton(choreographer: choreographer),
-                  //   ],
-                  // ),
-                  // const SizedBox(height: 40.0),
-                  OriginalText(controller: controller),
-                  const SizedBox(height: 7.0),
-                  IntrinsicHeight(
-                    child: Container(
-                      constraints: const BoxConstraints(minHeight: 80),
-                      width: double.infinity,
-                      padding: const EdgeInsets.symmetric(horizontal: 4.0),
-                      child: Center(
-                        child: controller.choreographer.errorService.isError
-                            ? ITError(
-                                error: controller
+                  SingleChildScrollView(
+                    child: Column(
+                      children: [
+                        // Row(
+                        //   mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                        //   crossAxisAlignment: CrossAxisAlignment.start,
+                        //   children: [
+                        //     // Row(
+                        //     //   mainAxisAlignment: MainAxisAlignment.start,
+                        //     //   crossAxisAlignment: CrossAxisAlignment.start,
+                        //     //   children: [
+                        //     //     CounterDisplay(
+                        //     //       correct: controller.correctChoices,
+                        //     //       custom: controller.customChoices,
+                        //     //       incorrect: controller.incorrectChoices,
+                        //     //       yellow: controller.wildcardChoices,
+                        //     //     ),
+                        //     //     CompositedTransformTarget(
+                        //     //       link: choreographer.itBotLayerLinkAndKey.link,
+                        //     //       child: ITBotButton(
+                        //     //         key: choreographer.itBotLayerLinkAndKey.key,
+                        //     //         choreographer: choreographer,
+                        //     //       ),
+                        //     //     ),
+                        //     //   ],
+                        //     // ),
+                        //     ITCloseButton(choreographer: choreographer),
+                        //   ],
+                        // ),
+                        // const SizedBox(height: 40.0),
+                        OriginalText(controller: itController),
+                        const SizedBox(height: 7.0),
+                        IntrinsicHeight(
+                          child: Container(
+                            constraints: const BoxConstraints(minHeight: 80),
+                            width: double.infinity,
+                            padding: const EdgeInsets.symmetric(horizontal: 4.0),
+                            child: Center(
+                              child: itController.choreographer.errorService.isError
+                                  ? ITError(
+                                error: itController
                                     .choreographer.errorService.error!,
-                                controller: controller,
+                                controller: itController,
                               )
-                            : controller.showChoiceFeedback
-                                ? ChoiceFeedbackText(controller: controller)
-                                : controller.isTranslationDone
-                                    ? TranslationFeedback(
-                                        controller: controller,
-                                      )
-                                    : ITChoices(controller: controller),
-                      ),
+                                  : itController.showChoiceFeedback
+                                  ? ChoiceFeedbackText(controller: itController)
+                                  : itController.isTranslationDone
+                                  ? TranslationFeedback(
+                                controller: itController,
+                              )
+                                  : ITChoices(controller: itController),
+                            ),
+                          ),
+                        ),
+                      ],
                     ),
                   ),
+                  Positioned(
+                    top: 0.0,
+                    right: 0.0,
+                    child: ITCloseButton(choreographer: choreographer),
+                  ),
                 ],
               ),
             ),
-            Positioned(
-              top: 0.0,
-              right: 0.0,
-              child: ITCloseButton(choreographer: choreographer),
-            ),
-          ],
-        ),
+          ),
       ),
     );
   }