diff --git a/lib/core/widgets/animations/slide_down_fade.dart b/lib/core/widgets/animations/slide_down_fade.dart
new file mode 100644
index 0000000..e035c65
--- /dev/null
+++ b/lib/core/widgets/animations/slide_down_fade.dart
@@ -0,0 +1,67 @@
+import 'package:flutter/material.dart';
+
+class SlideDownFade extends StatefulWidget {
+  const SlideDownFade({
+    super.key,
+    required this.child,
+    this.delay = Duration.zero,
+  });
+
+  final Widget child;
+  final Duration delay;
+
+  @override
+  State<SlideDownFade> createState() => _SlideDownFadeState();
+}
+
+class _SlideDownFadeState extends State<SlideDownFade>
+    with SingleTickerProviderStateMixin {
+  late AnimationController _controller;
+  late Animation<double> _fadeAnim;
+  late Animation<Offset> _slideAnim;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+      vsync: this,
+      duration: Duration(milliseconds: 500),
+      reverseDuration: Duration(milliseconds: 500),
+    );
+
+    _fadeAnim = Tween<double>(
+      begin: 0,
+      end: 1,
+    ).animate(CurvedAnimation(parent: _controller, curve: Curves.easeIn));
+
+    _slideAnim = Tween<Offset>(
+      begin: Offset(0, -0.1),
+      end: Offset.zero,
+    ).animate(CurvedAnimation(parent: _controller, curve: Curves.easeIn));
+    startAnim();
+  }
+
+  Future<void> startAnim() async {
+    await Future.delayed(widget.delay, () {
+      _controller.forward();
+    });
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return AnimatedBuilder(
+      animation: _controller,
+      child: widget.child,
+      builder: (context, child) => FadeTransition(
+        opacity: _fadeAnim,
+        child: SlideTransition(position: _slideAnim, child: child),
+      ),
+    );
+  }
+}
diff --git a/lib/features/home/presentation/ui/home_page.dart b/lib/features/home/presentation/ui/home_page.dart
index 9a2a1b5..3cdab7e 100644
--- a/lib/features/home/presentation/ui/home_page.dart
+++ b/lib/features/home/presentation/ui/home_page.dart
@@ -5,6 +5,8 @@ import 'package:hadi_hoda_flutter/common_ui/resources/my_spaces.dart';
 import 'package:hadi_hoda_flutter/core/utils/my_localization.dart';
 import 'package:hadi_hoda_flutter/core/utils/screen_size.dart';
 import 'package:hadi_hoda_flutter/core/utils/set_platform_size.dart';
+import 'package:hadi_hoda_flutter/core/widgets/animations/slide_down_fade.dart';
+import 'package:hadi_hoda_flutter/core/widgets/animations/slide_up_fade.dart';
 import 'package:hadi_hoda_flutter/core/widgets/button/my_yellow_button.dart';
 import 'package:hadi_hoda_flutter/core/widgets/images/my_image.dart';
 import 'package:hadi_hoda_flutter/core/widgets/inkwell/my_inkwell.dart';
@@ -47,14 +49,17 @@ class HomePage extends StatelessWidget {
     return PositionedDirectional(
       top: MySpaces.s36,
       end: MySpaces.s16,
-      child: StreamBuilder<double>(
-        initialData: 1,
-        stream: context.read<HomeBloc>().volumeStream,
-        builder: (context, snapshot) => MyInkwell(
-          onTap: () => context.read<HomeBloc>().changeMute(),
-          child: MyImage(
-            image: snapshot.data == 0 ? MyAssets.musicOff : MyAssets.musicOn,
-            size: setSize(context: context, tablet: 100),
+      child: SlideDownFade(
+        delay: Duration(milliseconds: 200),
+        child: StreamBuilder<double>(
+          initialData: 1,
+          stream: context.read<HomeBloc>().volumeStream,
+          builder: (context, snapshot) => MyInkwell(
+            onTap: () => context.read<HomeBloc>().changeMute(),
+            child: MyImage(
+              image: snapshot.data == 0 ? MyAssets.musicOff : MyAssets.musicOn,
+              size: setSize(context: context, tablet: 100),
+            ),
           ),
         ),
       ),
@@ -87,29 +92,32 @@ class HomePage extends StatelessWidget {
       bottom: MySpaces.s40,
       left: MySpaces.s16,
       right: MySpaces.s16,
-      child: Row(
-        crossAxisAlignment: CrossAxisAlignment.end,
-        mainAxisAlignment: MainAxisAlignment.spaceBetween,
-        children: [
-          MyInkwell(
-            onTap: () => context.read<HomeBloc>().goToLanguagePage(context),
-            child: MyImage(
-              image: MyAssets.language,
-              size: setSize(context: context, tablet: 100),
+      child: SlideUpFade(
+        delay: Duration(milliseconds: 200),
+        child: Row(
+          crossAxisAlignment: CrossAxisAlignment.end,
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            MyInkwell(
+              onTap: () => context.read<HomeBloc>().goToLanguagePage(context),
+              child: MyImage(
+                image: MyAssets.language,
+                size: setSize(context: context, tablet: 100),
+              ),
             ),
-          ),
-          MyYellowButton(
-            onTap: () => context.read<HomeBloc>().goToLevelPage(context),
-            title: context.translate.start,
-          ),
-          MyInkwell(
-            onTap: () => context.read<HomeBloc>().showAboutUs(context),
-            child: MyImage(
-              image: MyAssets.theme,
-              size: setSize(context: context, tablet: 100),
+            MyYellowButton(
+              onTap: () => context.read<HomeBloc>().goToLevelPage(context),
+              title: context.translate.start,
             ),
-          ),
-        ],
+            MyInkwell(
+              onTap: () => context.read<HomeBloc>().showAboutUs(context),
+              child: MyImage(
+                image: MyAssets.theme,
+                size: setSize(context: context, tablet: 100),
+              ),
+            ),
+          ],
+        ),
       ),
     );
   }