diff --git a/assets/fonts/Lexend-Black.ttf b/assets/fonts/Lexend-Black.ttf
new file mode 100644
index 0000000..ff44480
Binary files /dev/null and b/assets/fonts/Lexend-Black.ttf differ
diff --git a/assets/fonts/Lexend-Bold.ttf b/assets/fonts/Lexend-Bold.ttf
new file mode 100644
index 0000000..97614b9
Binary files /dev/null and b/assets/fonts/Lexend-Bold.ttf differ
diff --git a/assets/fonts/Lexend-ExtraBold.ttf b/assets/fonts/Lexend-ExtraBold.ttf
new file mode 100644
index 0000000..641ab9b
Binary files /dev/null and b/assets/fonts/Lexend-ExtraBold.ttf differ
diff --git a/assets/fonts/Lexend-ExtraLight.ttf b/assets/fonts/Lexend-ExtraLight.ttf
new file mode 100644
index 0000000..fececa0
Binary files /dev/null and b/assets/fonts/Lexend-ExtraLight.ttf differ
diff --git a/assets/fonts/Lexend-Light.ttf b/assets/fonts/Lexend-Light.ttf
new file mode 100644
index 0000000..1b67c78
Binary files /dev/null and b/assets/fonts/Lexend-Light.ttf differ
diff --git a/assets/fonts/Lexend-Medium.ttf b/assets/fonts/Lexend-Medium.ttf
new file mode 100644
index 0000000..a56f1e9
Binary files /dev/null and b/assets/fonts/Lexend-Medium.ttf differ
diff --git a/assets/fonts/Lexend-Regular.ttf b/assets/fonts/Lexend-Regular.ttf
new file mode 100644
index 0000000..b869458
Binary files /dev/null and b/assets/fonts/Lexend-Regular.ttf differ
diff --git a/assets/fonts/Lexend-SemiBold.ttf b/assets/fonts/Lexend-SemiBold.ttf
new file mode 100644
index 0000000..436b93b
Binary files /dev/null and b/assets/fonts/Lexend-SemiBold.ttf differ
diff --git a/assets/fonts/Lexend-Thin.ttf b/assets/fonts/Lexend-Thin.ttf
new file mode 100644
index 0000000..3bd5c47
Binary files /dev/null and b/assets/fonts/Lexend-Thin.ttf differ
diff --git a/assets/images/question.png b/assets/images/question.png
new file mode 100644
index 0000000..5160d1e
Binary files /dev/null and b/assets/images/question.png differ
diff --git a/assets/images/shia_mind.png b/assets/images/shia_mind.png
new file mode 100644
index 0000000..b297276
Binary files /dev/null and b/assets/images/shia_mind.png differ
diff --git a/lib/common_ui/resources/my_assets.dart b/lib/common_ui/resources/my_assets.dart
index a3d384a..09d8c1c 100644
--- a/lib/common_ui/resources/my_assets.dart
+++ b/lib/common_ui/resources/my_assets.dart
@@ -4,19 +4,22 @@ class MyAssets {
   factory MyAssets() => _i;
 
   /// ----- Images -----
-  static const String sample = 'assets/image/sample.png';
+  static const String sample = 'assets/images/sample.png';
+  static const String shiaMind = 'assets/images/shia_mind.png';
+  static const String question = 'assets/images/question.png';
 
   /// ----- Svg -----
-  static const String sampleSvg = 'assets/image/sample.svg';
+  static const String sampleSvg = 'assets/svg/sample.svg';
 
   /// ----- Audios -----
-  static const String sampleAudio = 'assets/audio/sample.mp3';
+  static const String sampleAudio = 'assets/audios/sample.mp3';
 
   /// ----- Videos -----
-  static const String sampleVideo = 'assets/video/sample.mp4';
+  static const String sampleVideo = 'assets/videos/sample.mp4';
 
 
   static const List<String> images = [
-    sample,
+    shiaMind,
+    question,
   ];
 }
diff --git a/lib/common_ui/resources/my_colors.dart b/lib/common_ui/resources/my_colors.dart
index 10ff5ac..5af3ddc 100644
--- a/lib/common_ui/resources/my_colors.dart
+++ b/lib/common_ui/resources/my_colors.dart
@@ -8,4 +8,5 @@ class MyColors {
   static const Color white = Colors.white;
   static const Color black = Colors.black;
   static const Color transparent = Colors.transparent;
+  static const Color introBackgroundColor = Color(0xFF160C30);
 }
diff --git a/lib/common_ui/resources/my_text_style.dart b/lib/common_ui/resources/my_text_style.dart
index 4ce69d5..0f11748 100644
--- a/lib/common_ui/resources/my_text_style.dart
+++ b/lib/common_ui/resources/my_text_style.dart
@@ -1,15 +1,54 @@
 import 'package:flutter/material.dart';
 
-class MyTextStyle {
-  static const MyTextStyle _i = MyTextStyle._internal();
-  const MyTextStyle._internal();
-  factory MyTextStyle() => _i;
+class Lexend {
+  static const Lexend _i = Lexend._internal();
+  const Lexend._internal();
+  factory Lexend() => _i;
 
-  static const String fontFamily = '';
+  static const String fontFamily = 'Lexend';
 
-  static const TextStyle lightXS = TextStyle(
+  static const TextStyle thin = TextStyle(
+    fontFamily: fontFamily,
+    fontWeight: FontWeight.w100,
+  );
+
+  static const TextStyle extraLight = TextStyle(
+    fontFamily: fontFamily,
+    fontWeight: FontWeight.w200,
+  );
+
+  static const TextStyle light = TextStyle(
+    fontFamily: fontFamily,
+    fontWeight: FontWeight.w300,
+  );
+
+  static const TextStyle regular = TextStyle(
     fontFamily: fontFamily,
-    fontSize: 10,
     fontWeight: FontWeight.w400,
   );
+
+  static const TextStyle medium = TextStyle(
+    fontFamily: fontFamily,
+    fontWeight: FontWeight.w500,
+  );
+
+  static const TextStyle semiBold = TextStyle(
+    fontFamily: fontFamily,
+    fontWeight: FontWeight.w600,
+  );
+
+  static const TextStyle bold = TextStyle(
+    fontFamily: fontFamily,
+    fontWeight: FontWeight.w700,
+  );
+
+  static const TextStyle extraBold = TextStyle(
+    fontFamily: fontFamily,
+    fontWeight: FontWeight.w800,
+  );
+
+  static const TextStyle black = TextStyle(
+    fontFamily: fontFamily,
+    fontWeight: FontWeight.w900,
+  );
 }
diff --git a/lib/common_ui/theme/my_theme.dart b/lib/common_ui/theme/my_theme.dart
index eceed16..9ba99f4 100644
--- a/lib/common_ui/theme/my_theme.dart
+++ b/lib/common_ui/theme/my_theme.dart
@@ -4,6 +4,8 @@ import 'package:get/get.dart';
 
 enum ColorsName {
   primaryColor,
+  noColor,
+  introBackgroundColor,
 }
 
 class MyTheme {
@@ -16,11 +18,15 @@ class MyTheme {
   static final ThemeData dark = ThemeData(brightness: Brightness.light);
 
   static Map<ColorsName, Color> get lightColors => {
-    ColorsName.primaryColor: MyColors.black,
+    ColorsName.primaryColor: MyColors.white,
+    ColorsName.noColor: MyColors.transparent,
+    ColorsName.introBackgroundColor: MyColors.introBackgroundColor,
   };
 
   static Map<ColorsName, Color> get darkColors => {
     ColorsName.primaryColor: MyColors.white,
+    ColorsName.noColor: MyColors.transparent,
+    ColorsName.introBackgroundColor: MyColors.introBackgroundColor,
   };
 }
 
@@ -29,4 +35,6 @@ extension ThemeExtension on BuildContext {
       Get.isDarkMode ? MyTheme.darkColors : MyTheme.lightColors;
 
   Color get primaryColor => customColors[ColorsName.primaryColor]!;
+  Color get noColor => customColors[ColorsName.noColor]!;
+  Color get introBackgroundColor => customColors[ColorsName.introBackgroundColor]!;
 }
diff --git a/lib/core/params/intro_params.dart b/lib/core/params/intro_params.dart
new file mode 100644
index 0000000..b3875c8
--- /dev/null
+++ b/lib/core/params/intro_params.dart
@@ -0,0 +1,13 @@
+class IntroParams {
+  int? id;
+
+  IntroParams({this.id});
+
+  IntroParams copyWith({
+    int? id,
+  }) {
+    return IntroParams(
+        id: id ?? this.id,
+    );
+  }
+}
diff --git a/lib/core/routers/my_routes.dart b/lib/core/routers/my_routes.dart
index d889876..4fece1a 100644
--- a/lib/core/routers/my_routes.dart
+++ b/lib/core/routers/my_routes.dart
@@ -1,3 +1,5 @@
+import 'package:shia_game_flutter/features/intro/presentation/binding/intro_binding.dart';
+import 'package:shia_game_flutter/features/intro/presentation/ui/intro_page.dart';
 import 'package:shia_game_flutter/features/sample/presentation/binding/sample_binding.dart';
 import 'package:shia_game_flutter/features/sample/presentation/ui/sample_page.dart';
 import 'package:get/get.dart';
@@ -8,12 +10,18 @@ class Routes {
   factory Routes() => _i;
 
   static const String samplePage = '/sample_page';
+  static const String introPage = '/intro_page';
 }
 
 List<GetPage> get appPages => [
-      GetPage(
-        name: Routes.samplePage,
-        page: () => const SamplePage(),
-        binding: SampleBinding(),
-      ),
-    ];
+  GetPage(
+    name: Routes.samplePage,
+    page: () => const SamplePage(),
+    binding: SampleBinding(),
+  ),
+  GetPage(
+    name: Routes.introPage,
+    page: () => const IntroPage(),
+    binding: IntroBinding(),
+  ),
+];
diff --git a/lib/core/widgets/image/my_image.dart b/lib/core/widgets/image/my_image.dart
new file mode 100644
index 0000000..3d938f8
--- /dev/null
+++ b/lib/core/widgets/image/my_image.dart
@@ -0,0 +1,45 @@
+import 'package:flutter/material.dart';
+import 'package:vector_graphics/vector_graphics.dart';
+
+class MyImage extends StatelessWidget {
+  const MyImage({
+    super.key,
+    required this.asset,
+    this.size,
+    this.fit = BoxFit.contain,
+    this.color,
+  });
+
+  final String asset;
+  final double? size;
+  final BoxFit fit;
+  final Color? color;
+
+  @override
+  Widget build(BuildContext context) {
+    return Builder(
+      builder: (context) {
+        if (asset.endsWith('.jpg') ||
+            asset.endsWith('.jpeg') ||
+            asset.endsWith('.png')) {
+          return Image.asset(
+            asset,
+            width: size,
+            height: size,
+            fit: fit,
+            color: color,
+          );
+        } else {
+          return VectorGraphic(
+            loader: AssetBytesLoader(asset),
+            height: size,
+            fit: fit,
+            colorFilter: color == null
+                ? null
+                : ColorFilter.mode(color!, BlendMode.srcIn),
+          );
+        }
+      },
+    );
+  }
+}
diff --git a/lib/features/intro/data/datasource/intro_datasource.dart b/lib/features/intro/data/datasource/intro_datasource.dart
new file mode 100644
index 0000000..2a08469
--- /dev/null
+++ b/lib/features/intro/data/datasource/intro_datasource.dart
@@ -0,0 +1,28 @@
+import 'package:shia_game_flutter/core/constants/my_api.dart';
+import 'package:shia_game_flutter/core/network/http_request.dart';
+import 'package:shia_game_flutter/core/params/intro_params.dart';
+import 'package:shia_game_flutter/core/response/base_response.dart';
+import 'package:shia_game_flutter/features/intro/data/model/intro_model.dart';
+import 'package:shia_game_flutter/features/intro/domain/entity/intro_entity.dart';
+
+abstract class IIntroDatasource {
+  Future<IntroEntity> getData({required IntroParams params});
+}
+
+class IntroDatasourceImpl implements IIntroDatasource {
+  final IHttpRequest httpRequest;
+
+  const IntroDatasourceImpl(this.httpRequest);
+
+  @override
+  Future<IntroEntity> getData({required IntroParams params}) async {
+    final response = await httpRequest.get(
+      path: MyApi.baseUrl,
+    );
+
+    return BaseResponse.getData<IntroEntity>(
+      response?['data'],
+      (json) => IntroModel.fromJson(json),
+    );
+  }
+}
diff --git a/lib/features/intro/data/model/intro_model.dart b/lib/features/intro/data/model/intro_model.dart
new file mode 100644
index 0000000..f87a8ae
--- /dev/null
+++ b/lib/features/intro/data/model/intro_model.dart
@@ -0,0 +1,13 @@
+import 'package:shia_game_flutter/features/intro/domain/entity/intro_entity.dart';
+
+class IntroModel extends IntroEntity {
+  const IntroModel({
+    super.id,
+  });
+
+  factory IntroModel.fromJson(Map<String, dynamic> json) {
+    return IntroModel(
+      id: json['id'],
+    );
+  }
+}
diff --git a/lib/features/intro/data/repository_impl/intro_repository_impl.dart b/lib/features/intro/data/repository_impl/intro_repository_impl.dart
new file mode 100644
index 0000000..d4b4b1b
--- /dev/null
+++ b/lib/features/intro/data/repository_impl/intro_repository_impl.dart
@@ -0,0 +1,29 @@
+import 'package:flutter/foundation.dart';
+import 'package:shia_game_flutter/core/error_handler/my_exception.dart';
+import 'package:shia_game_flutter/core/params/intro_params.dart';
+import 'package:shia_game_flutter/core/utils/data_state.dart';
+import 'package:shia_game_flutter/features/intro/data/datasource/intro_datasource.dart';
+import 'package:shia_game_flutter/features/intro/domain/entity/intro_entity.dart';
+import 'package:shia_game_flutter/features/intro/domain/repository/intro_repository.dart';
+
+class IntroRepositoryImpl implements IIntroRepository {
+  final IIntroDatasource datasource;
+
+  const IntroRepositoryImpl(this.datasource);
+
+  @override
+  Future<DataState<IntroEntity, MyException>> getData({required IntroParams params}) async {
+    try {
+      final IntroEntity response = await datasource.getData(params: params);
+      return DataState.success(response);
+    } on MyException catch (e) {
+      return DataState.error(e);
+    } catch (e) {
+      if (kDebugMode) {
+        rethrow;
+      } else {
+        return DataState.error(MyException(errorMessage: '$e'));
+      }
+    }
+  }
+}
diff --git a/lib/features/intro/domain/entity/intro_entity.dart b/lib/features/intro/domain/entity/intro_entity.dart
new file mode 100644
index 0000000..15c2e44
--- /dev/null
+++ b/lib/features/intro/domain/entity/intro_entity.dart
@@ -0,0 +1,14 @@
+import 'package:equatable/equatable.dart';
+
+class IntroEntity extends Equatable {
+  final int? id;
+
+  const IntroEntity({
+    this.id,
+  });
+
+  @override
+  List<Object?> get props => [
+        id,
+      ];
+}
diff --git a/lib/features/intro/domain/repository/intro_repository.dart b/lib/features/intro/domain/repository/intro_repository.dart
new file mode 100644
index 0000000..4525de3
--- /dev/null
+++ b/lib/features/intro/domain/repository/intro_repository.dart
@@ -0,0 +1,8 @@
+import 'package:shia_game_flutter/core/error_handler/my_exception.dart';
+import 'package:shia_game_flutter/core/params/intro_params.dart';
+import 'package:shia_game_flutter/core/utils/data_state.dart';
+import 'package:shia_game_flutter/features/intro/domain/entity/intro_entity.dart';
+
+abstract class IIntroRepository {
+  Future<DataState<IntroEntity, MyException>> getData({required IntroParams params});
+}
diff --git a/lib/features/intro/domain/usecases/get_intro_usecase.dart b/lib/features/intro/domain/usecases/get_intro_usecase.dart
new file mode 100644
index 0000000..8d8a38b
--- /dev/null
+++ b/lib/features/intro/domain/usecases/get_intro_usecase.dart
@@ -0,0 +1,19 @@
+import 'package:shia_game_flutter/core/error_handler/my_exception.dart';
+import 'package:shia_game_flutter/core/params/intro_params.dart';
+import 'package:shia_game_flutter/core/usecase/usecase.dart';
+import 'package:shia_game_flutter/core/utils/data_state.dart';
+import 'package:shia_game_flutter/features/intro/domain/entity/intro_entity.dart';
+import 'package:shia_game_flutter/features/intro/domain/repository/intro_repository.dart';
+
+class GetIntroUseCase implements UseCase<IntroEntity, IntroParams> {
+  final IIntroRepository repository;
+
+  const GetIntroUseCase(this.repository);
+
+  @override
+  Future<DataState<IntroEntity, MyException>> call(IntroParams params) {
+    return repository.getData(params: params);
+  }
+}
+
+
diff --git a/lib/features/intro/presentation/binding/intro_binding.dart b/lib/features/intro/presentation/binding/intro_binding.dart
new file mode 100644
index 0000000..bf3dc57
--- /dev/null
+++ b/lib/features/intro/presentation/binding/intro_binding.dart
@@ -0,0 +1,20 @@
+import 'package:shia_game_flutter/features/intro/presentation/controller/intro_controller.dart';
+import 'package:get/get.dart';
+
+class IntroBinding extends Bindings {
+  @override
+  void dependencies() {
+    Get.put<IntroController>(IntroController(Get.find()));
+  }
+
+  Future<void> deleteBindings() async {
+    await Future.wait([
+      Get.delete<IntroController>(),
+    ]);
+  }
+
+  Future<void> refreshBinding() async {
+    await deleteBindings();
+    dependencies();
+  }
+}
diff --git a/lib/features/intro/presentation/controller/intro_controller.dart b/lib/features/intro/presentation/controller/intro_controller.dart
new file mode 100644
index 0000000..23b4a77
--- /dev/null
+++ b/lib/features/intro/presentation/controller/intro_controller.dart
@@ -0,0 +1,54 @@
+import 'package:flutter/cupertino.dart';
+import 'package:shia_game_flutter/core/params/intro_params.dart';
+import 'package:shia_game_flutter/core/status/base_status.dart';
+import 'package:shia_game_flutter/features/intro/domain/entity/intro_entity.dart';
+import 'package:shia_game_flutter/features/intro/domain/usecases/get_intro_usecase.dart';
+import 'package:get/get.dart';
+
+class IntroController extends GetxController with StateMixin {
+  /// ----- Constructor -----
+  IntroController(this.getIntroUseCase);
+
+  @override
+  void onInit() {
+    super.onInit();
+    change('', status: RxStatus.success());
+  }
+
+  @override
+  void onClose() {
+    textEditingController.dispose();
+    super.onClose();
+  }
+
+  /// ----- UseCases -----
+  final GetIntroUseCase getIntroUseCase;
+
+  /// ----- Variables -----
+  final Rx<IntroParams> introParams = Rx(IntroParams());
+  final Rx<IntroEntity> introEntity = Rx(const IntroEntity());
+
+  /// ------ Controllers ------
+  final TextEditingController textEditingController = TextEditingController();
+
+  /// ------ Statuses ------
+  final Rx<BaseStatus> getIntroStatus = Rx(const BaseInit());
+
+  /// ------ Functions ------
+
+  /// ------ Api Calls ------
+  Future<void> getIntro() async {
+    change('', status: RxStatus.loading());
+    await getIntroUseCase(introParams.value).then(
+      (value) => value.fold(
+        (data) {
+          introEntity.value = data;
+          change('', status: RxStatus.success());
+        },
+        (error) {
+          change('', status: RxStatus.error(error.errorMessage));
+        },
+      ),
+    );
+  }
+}
diff --git a/lib/features/intro/presentation/ui/intro_page.dart b/lib/features/intro/presentation/ui/intro_page.dart
new file mode 100644
index 0000000..c965cea
--- /dev/null
+++ b/lib/features/intro/presentation/ui/intro_page.dart
@@ -0,0 +1,99 @@
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_assets.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_text_style.dart';
+import 'package:shia_game_flutter/common_ui/theme/my_theme.dart';
+import 'package:shia_game_flutter/core/utils/my_localization.dart';
+import 'package:shia_game_flutter/core/utils/screen_size.dart';
+import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
+import 'package:shia_game_flutter/features/intro/presentation/controller/intro_controller.dart';
+import 'package:shia_game_flutter/features/intro/presentation/ui/widgets/intro_loading.dart';
+
+class IntroPage extends GetView<IntroController> {
+  const IntroPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: context.introBackgroundColor,
+      body: SafeArea(
+        child: SizedBox.expand(
+          child: Stack(
+            alignment: Alignment.center,
+            children: [
+              _logo(context),
+              _bottomLoading(context),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  Stack _logo(BuildContext context) {
+    return Stack(
+      alignment: Alignment.center,
+      children: [
+        PositionedDirectional(
+          top: context.heightScreen / 3.2,
+          end: 50,
+          child: MyImage(asset: MyAssets.question),
+        ),
+        PositionedDirectional(
+          top: context.heightScreen / 3.5,
+          end: context.widthScreen / 2.4,
+          child: MyImage(asset: MyAssets.question, size: 30),
+        ),
+        PositionedDirectional(
+          top: context.heightScreen / 2.8,
+          start: 80,
+          child: MyImage(asset: MyAssets.question, size: 24),
+        ),
+        PositionedDirectional(
+          bottom: context.heightScreen / 3.2,
+          start: 80,
+          child: MyImage(asset: MyAssets.question),
+        ),
+        PositionedDirectional(
+          bottom: context.heightScreen / 3.2,
+          end: 50,
+          child: MyImage(asset: MyAssets.question, size: 20),
+        ),
+        PositionedDirectional(
+          bottom: context.heightScreen / 2.6,
+          start: context.widthScreen / 2,
+          child: MyImage(asset: MyAssets.question, size: 20),
+        ),
+        Container(
+          width: context.widthScreen,
+          height: context.heightScreen,
+          decoration: ShapeDecoration(
+            gradient: RadialGradient(
+              colors: [const Color(0xFF321A6D), const Color(0x00160C30)],
+            ),
+            shape: OvalBorder(),
+          ),
+        ),
+        MyImage(asset: MyAssets.shiaMind),
+      ],
+    );
+  }
+
+  Positioned _bottomLoading(BuildContext context) {
+    return Positioned(
+      bottom: MySpaces.s16,
+      child: Column(
+        spacing: MySpaces.s10,
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Text(
+            context.translate.loading,
+            style: Lexend.regular.copyWith(fontSize: MySpaces.s14),
+          ),
+          IntroLoading(),
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/features/intro/presentation/ui/widgets/intro_loading.dart b/lib/features/intro/presentation/ui/widgets/intro_loading.dart
new file mode 100644
index 0000000..6c806c8
--- /dev/null
+++ b/lib/features/intro/presentation/ui/widgets/intro_loading.dart
@@ -0,0 +1,49 @@
+import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
+
+class IntroLoading extends StatelessWidget {
+  const IntroLoading({
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: 188,
+      height: MySpaces.s16,
+      padding: EdgeInsetsDirectional.only(
+        start: MySpaces.s2,
+        top: MySpaces.s2,
+        bottom: MySpaces.s2,
+        end: MySpaces.s20,
+      ),
+      decoration: ShapeDecoration(
+        shape: StadiumBorder(
+          side: BorderSide(
+            width: 1,
+            color: Color(0XFFA579EA),
+          ),
+        ),
+      ),
+      child: Container(
+        height: MySpaces.s14,
+        decoration: ShapeDecoration(
+          shape: StadiumBorder(
+            side: BorderSide(
+              width: 1,
+              color: Colors.white.withValues(alpha: 0.5),
+            ),
+          ),
+          gradient: LinearGradient(
+            begin: AlignmentDirectional.centerStart,
+            end: AlignmentDirectional.centerEnd,
+            colors: [
+              Color(0XFF9C7EEC),
+              Color(0XFF3BBDFF),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/init_bindings.dart b/lib/init_bindings.dart
index a36b7c9..c1b1d7b 100644
--- a/lib/init_bindings.dart
+++ b/lib/init_bindings.dart
@@ -1,6 +1,10 @@
 import 'package:get/get.dart';
 import 'package:shia_game_flutter/core/network/http_request.dart';
 import 'package:shia_game_flutter/core/network/http_request_impl.dart';
+import 'package:shia_game_flutter/features/intro/data/datasource/intro_datasource.dart';
+import 'package:shia_game_flutter/features/intro/data/repository_impl/intro_repository_impl.dart';
+import 'package:shia_game_flutter/features/intro/domain/repository/intro_repository.dart';
+import 'package:shia_game_flutter/features/intro/domain/usecases/get_intro_usecase.dart';
 import 'package:shia_game_flutter/features/sample/data/datasource/sample_datasource.dart';
 import 'package:shia_game_flutter/features/sample/data/repository_impl/sample_repository_impl.dart';
 import 'package:shia_game_flutter/features/sample/domain/repository/sample_repository.dart';
@@ -14,4 +18,9 @@ void initBindings() {
   Get.lazyPut<ISampleDatasource>(() => SampleDatasourceImpl(Get.find()));
   Get.lazyPut<ISampleRepository>(() => SampleRepositoryImpl(Get.find()));
   Get.lazyPut<GetSampleUseCase>(() => GetSampleUseCase(Get.find()));
+
+  /// ----- Intro Feature -----
+  Get.lazyPut<IIntroDatasource>(() => IntroDatasourceImpl(Get.find()));
+  Get.lazyPut<IIntroRepository>(() => IntroRepositoryImpl(Get.find()));
+  Get.lazyPut<GetIntroUseCase>(() => GetIntroUseCase(Get.find()));
 }
diff --git a/lib/l10n/app_en.arb b/lib/l10n/app_en.arb
index c8d329e..ee262a0 100644
--- a/lib/l10n/app_en.arb
+++ b/lib/l10n/app_en.arb
@@ -1,3 +1,4 @@
 {
-  "@@locale": "en"
+  "@@locale": "en",
+  "loading": "Loading..."
 }
\ No newline at end of file
diff --git a/lib/l10n/app_localizations.dart b/lib/l10n/app_localizations.dart
index 0f3a0fa..f7b95b7 100644
--- a/lib/l10n/app_localizations.dart
+++ b/lib/l10n/app_localizations.dart
@@ -93,6 +93,12 @@ abstract class AppLocalizations {
 
   /// A list of this localizations delegate's supported locales.
   static const List<Locale> supportedLocales = <Locale>[Locale('en')];
+
+  /// No description provided for @loading.
+  ///
+  /// In en, this message translates to:
+  /// **'Loading...'**
+  String get loading;
 }
 
 class _AppLocalizationsDelegate
diff --git a/lib/l10n/app_localizations_en.dart b/lib/l10n/app_localizations_en.dart
index 5d9907e..3bb6aa4 100644
--- a/lib/l10n/app_localizations_en.dart
+++ b/lib/l10n/app_localizations_en.dart
@@ -7,4 +7,7 @@ import 'app_localizations.dart';
 /// The translations for English (`en`).
 class AppLocalizationsEn extends AppLocalizations {
   AppLocalizationsEn([String locale = 'en']) : super(locale);
+
+  @override
+  String get loading => 'Loading...';
 }
diff --git a/lib/main.dart b/lib/main.dart
index 4b42b16..dedefa7 100644
--- a/lib/main.dart
+++ b/lib/main.dart
@@ -31,7 +31,7 @@ class MainApp extends StatelessWidget {
       fallbackLocale: const Locale('en', 'US'),
       supportedLocales: const [Locale('en', 'US')],
       getPages: appPages,
-      initialRoute: Routes.samplePage,
+      initialRoute: Routes.introPage,
       localizationsDelegates: const [
         AppLocalizations.delegate,
         GlobalMaterialLocalizations.delegate,
diff --git a/pubspec.yaml b/pubspec.yaml
index 6bcf498..f19b4db 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -38,3 +38,25 @@ flutter:
     - path: assets/svg/
       transformers:
         - package: vector_graphics_compiler
+
+  fonts:
+    - family: Lexend
+      fonts:
+        - asset: assets/fonts/Lexend-Thin.ttf
+          weight: 100
+        - asset: assets/fonts/Lexend-ExtraLight.ttf
+          weight: 200
+        - asset: assets/fonts/Lexend-Light.ttf
+          weight: 300
+        - asset: assets/fonts/Lexend-Regular.ttf
+          weight: 400
+        - asset: assets/fonts/Lexend-Medium.ttf
+          weight: 500
+        - asset: assets/fonts/Lexend-SemiBold.ttf
+          weight: 600
+        - asset: assets/fonts/Lexend-Bold.ttf
+          weight: 700
+        - asset: assets/fonts/Lexend-ExtraBold.ttf
+          weight: 800
+        - asset: assets/fonts/Lexend-Black.ttf
+          weight: 900