diff --git a/lib/core/widgets/answer_box/answer_box.dart b/lib/core/widgets/answer_box/answer_box.dart
new file mode 100644
index 0000000..05e4268
--- /dev/null
+++ b/lib/core/widgets/answer_box/answer_box.dart
@@ -0,0 +1,47 @@
+import 'package:flutter/material.dart';
+import 'package:hadi_hoda_flutter/core/widgets/answer_box/styles/picture_box.dart';
+import 'package:hadi_hoda_flutter/core/widgets/answer_box/styles/text_box.dart';
+
+class AnswerBox extends StatefulWidget {
+  const AnswerBox({super.key});
+
+  @override
+  State<AnswerBox> createState() => _AnswerBoxState();
+}
+
+class _AnswerBoxState extends State<AnswerBox> {
+
+  bool selected = false;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: () {
+        setState(() {
+          selected = !selected;
+        });
+      },
+      child: SizedBox(
+        width: 170,
+        child: Stack(
+          alignment: Alignment.bottomCenter,
+          clipBehavior: Clip.none,
+          children: [
+            AnswerPictureBox(
+              selected: selected,
+            ),
+            Positioned(
+              left: 0,
+              right: 0,
+              bottom: -36,
+              child: SizedBox(
+                height: 60,
+                child: AnswerTextBox(),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/core/widgets/answer_box/styles/picture_box.dart b/lib/core/widgets/answer_box/styles/picture_box.dart
new file mode 100644
index 0000000..7263d0f
--- /dev/null
+++ b/lib/core/widgets/answer_box/styles/picture_box.dart
@@ -0,0 +1,127 @@
+import 'package:flutter/material.dart';
+import 'package:hadi_hoda_flutter/common_ui/resources/my_assets.dart';
+import 'package:hadi_hoda_flutter/core/utils/my_image.dart';
+
+class AnswerPictureBox extends StatelessWidget {
+  const AnswerPictureBox({super.key, required this.selected});
+
+  final bool selected;
+
+  @override
+  Widget build(BuildContext context) {
+    return CustomPaint(
+      size: Size(170, 170),
+      foregroundPainter: _SvgCustomPainter(selected),
+      child: ClipPath(
+        clipper: _SvgCustomClipper(),
+        child: MyImage(
+          image: MyAssets.backgroundIntro, fit: BoxFit.cover, size: 170),
+      ),
+    );
+  }
+}
+
+class _SvgCustomClipper extends CustomClipper<Path> {
+  @override
+  Path getClip(Size size) {
+    double scaleFactor = 170.0 / 480.0;
+
+    Path path = Path()
+      ..moveTo(242.081 * scaleFactor, 4.12988 * scaleFactor)
+      ..cubicTo(189.733 * scaleFactor, 1.72935 * scaleFactor, 137.532 * scaleFactor, 3.16507 * scaleFactor, 96.9766 * scaleFactor, 8.33887 * scaleFactor)
+      ..cubicTo(76.6855 * scaleFactor, 10.9275 * scaleFactor, 59.4247 * scaleFactor, 14.4382 * scaleFactor, 46.5547 * scaleFactor, 18.8203 * scaleFactor)
+      ..cubicTo(40.1188 * scaleFactor, 21.0117 * scaleFactor, 34.878 * scaleFactor, 23.3892 * scaleFactor, 30.9326 * scaleFactor, 25.916 * scaleFactor)
+      ..cubicTo(26.9611 * scaleFactor, 28.4595 * scaleFactor, 24.5168 * scaleFactor, 31.0171 * scaleFactor, 23.3438 * scaleFactor, 33.4795 * scaleFactor)
+      ..cubicTo(20.5038 * scaleFactor, 39.4409 * scaleFactor, 17.8387 * scaleFactor, 49.1133 * scaleFactor, 15.4463 * scaleFactor, 61.8105 * scaleFactor)
+      ..cubicTo(13.066 * scaleFactor, 74.4434 * scaleFactor, 10.9937 * scaleFactor, 89.8529 * scaleFactor, 9.25879 * scaleFactor, 107.15 * scaleFactor)
+      ..cubicTo(5.78933 * scaleFactor, 141.742 * scaleFactor, 3.68374 * scaleFactor, 183.74 * scaleFactor, 3.14062 * scaleFactor, 225.896 * scaleFactor)
+      ..cubicTo(2.5975 * scaleFactor, 268.052 * scaleFactor, 3.61795 * scaleFactor, 310.308 * scaleFactor, 6.3877 * scaleFactor, 345.416 * scaleFactor)
+      ..cubicTo(7.77271 * scaleFactor, 362.972 * scaleFactor, 9.59224 * scaleFactor, 378.701 * scaleFactor, 11.8633 * scaleFactor, 391.718 * scaleFactor)
+      ..cubicTo(14.1445 * scaleFactor, 404.793 * scaleFactor, 16.8465 * scaleFactor, 414.918 * scaleFactor, 19.9121 * scaleFactor, 421.396 * scaleFactor)
+      ..cubicTo(21.2125 * scaleFactor, 424.143 * scaleFactor, 23.8655 * scaleFactor, 426.967 * scaleFactor, 28.083 * scaleFactor, 429.773 * scaleFactor)
+      ..cubicTo(32.2774 * scaleFactor, 432.565 * scaleFactor, 37.8229 * scaleFactor, 435.209 * scaleFactor, 44.6045 * scaleFactor, 437.676 * scaleFactor)
+      ..cubicTo(58.1675 * scaleFactor, 442.609 * scaleFactor, 76.2991 * scaleFactor, 446.701 * scaleFactor, 97.542 * scaleFactor, 449.934 * scaleFactor)
+      ..cubicTo(140.002 * scaleFactor, 456.395 * scaleFactor, 194.428 * scaleFactor, 459.359 * scaleFactor, 248.533 * scaleFactor, 458.966 * scaleFactor)
+      ..cubicTo(302.639 * scaleFactor, 458.572 * scaleFactor, 356.282 * scaleFactor, 454.822 * scaleFactor, 397.177 * scaleFactor, 447.904 * scaleFactor)
+      ..cubicTo(417.642 * scaleFactor, 444.443 * scaleFactor, 434.779 * scaleFactor, 440.209 * scaleFactor, 447.149 * scaleFactor, 435.27 * scaleFactor)
+      ..cubicTo(453.338 * scaleFactor, 432.798 * scaleFactor, 458.209 * scaleFactor, 430.199 * scaleFactor, 461.686 * scaleFactor, 427.518 * scaleFactor)
+      ..cubicTo(465.181 * scaleFactor, 424.821 * scaleFactor, 467.024 * scaleFactor, 422.232 * scaleFactor, 467.636 * scaleFactor, 419.835 * scaleFactor)
+      ..cubicTo(471.161 * scaleFactor, 405.976 * scaleFactor, 473.704 * scaleFactor, 379.536 * scaleFactor, 475.24 * scaleFactor, 346.71 * scaleFactor)
+      ..cubicTo(476.772 * scaleFactor, 313.978 * scaleFactor, 477.293 * scaleFactor, 275.164 * scaleFactor, 476.847 * scaleFactor, 236.729 * scaleFactor)
+      ..cubicTo(476.401 * scaleFactor, 198.293 * scaleFactor, 474.989 * scaleFactor, 160.274 * scaleFactor, 472.661 * scaleFactor, 129.129 * scaleFactor)
+      ..cubicTo(471.497 * scaleFactor, 113.555 * scaleFactor, 470.106 * scaleFactor, 99.729 * scaleFactor, 468.498 * scaleFactor, 88.4443 * scaleFactor)
+      ..cubicTo(466.881 * scaleFactor, 77.0977 * scaleFactor, 465.07 * scaleFactor, 68.5213 * scaleFactor, 463.128 * scaleFactor, 63.3262 * scaleFactor)
+      ..cubicTo(460.15 * scaleFactor, 55.3421 * scaleFactor, 451.863 * scaleFactor, 47.7494 * scaleFactor, 438.653 * scaleFactor, 40.8027 * scaleFactor)
+      ..cubicTo(425.546 * scaleFactor, 33.9095 * scaleFactor, 408.099 * scaleFactor, 27.9176 * scaleFactor, 387.654 * scaleFactor, 22.8643 * scaleFactor)
+      ..cubicTo(346.784 * scaleFactor, 12.7625 * scaleFactor, 294.436 * scaleFactor, 6.53075 * scaleFactor, 242.081 * scaleFactor, 4.12988 * scaleFactor)
+      ..close();
+
+    return path;
+  }
+
+  @override
+  bool shouldReclip(CustomClipper<Path> oldClipper) {
+    return false;
+  }
+}
+
+class _SvgCustomPainter extends CustomPainter {
+  _SvgCustomPainter(this.selected);
+
+  final bool selected;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    double scaleFactor = 170.0 / 480.0;
+
+    Path path = Path()
+      ..moveTo(242.081 * scaleFactor, 4.12988 * scaleFactor)
+      ..cubicTo(189.733 * scaleFactor, 1.72935 * scaleFactor, 137.532 * scaleFactor, 3.16507 * scaleFactor, 96.9766 * scaleFactor, 8.33887 * scaleFactor)
+      ..cubicTo(76.6855 * scaleFactor, 10.9275 * scaleFactor, 59.4247 * scaleFactor, 14.4382 * scaleFactor, 46.5547 * scaleFactor, 18.8203 * scaleFactor)
+      ..cubicTo(40.1188 * scaleFactor, 21.0117 * scaleFactor, 34.878 * scaleFactor, 23.3892 * scaleFactor, 30.9326 * scaleFactor, 25.916 * scaleFactor)
+      ..cubicTo(26.9611 * scaleFactor, 28.4595 * scaleFactor, 24.5168 * scaleFactor, 31.0171 * scaleFactor, 23.3438 * scaleFactor, 33.4795 * scaleFactor)
+      ..cubicTo(20.5038 * scaleFactor, 39.4409 * scaleFactor, 17.8387 * scaleFactor, 49.1133 * scaleFactor, 15.4463 * scaleFactor, 61.8105 * scaleFactor)
+      ..cubicTo(13.066 * scaleFactor, 74.4434 * scaleFactor, 10.9937 * scaleFactor, 89.8529 * scaleFactor, 9.25879 * scaleFactor, 107.15 * scaleFactor)
+      ..cubicTo(5.78933 * scaleFactor, 141.742 * scaleFactor, 3.68374 * scaleFactor, 183.74 * scaleFactor, 3.14062 * scaleFactor, 225.896 * scaleFactor)
+      ..cubicTo(2.5975 * scaleFactor, 268.052 * scaleFactor, 3.61795 * scaleFactor, 310.308 * scaleFactor, 6.3877 * scaleFactor, 345.416 * scaleFactor)
+      ..cubicTo(7.77271 * scaleFactor, 362.972 * scaleFactor, 9.59224 * scaleFactor, 378.701 * scaleFactor, 11.8633 * scaleFactor, 391.718 * scaleFactor)
+      ..cubicTo(14.1445 * scaleFactor, 404.793 * scaleFactor, 16.8465 * scaleFactor, 414.918 * scaleFactor, 19.9121 * scaleFactor, 421.396 * scaleFactor)
+      ..cubicTo(21.2125 * scaleFactor, 424.143 * scaleFactor, 23.8655 * scaleFactor, 426.967 * scaleFactor, 28.083 * scaleFactor, 429.773 * scaleFactor)
+      ..cubicTo(32.2774 * scaleFactor, 432.565 * scaleFactor, 37.8229 * scaleFactor, 435.209 * scaleFactor, 44.6045 * scaleFactor, 437.676 * scaleFactor)
+      ..cubicTo(58.1675 * scaleFactor, 442.609 * scaleFactor, 76.2991 * scaleFactor, 446.701 * scaleFactor, 97.542 * scaleFactor, 449.934 * scaleFactor)
+      ..cubicTo(140.002 * scaleFactor, 456.395 * scaleFactor, 194.428 * scaleFactor, 459.359 * scaleFactor, 248.533 * scaleFactor, 458.966 * scaleFactor)
+      ..cubicTo(302.639 * scaleFactor, 458.572 * scaleFactor, 356.282 * scaleFactor, 454.822 * scaleFactor, 397.177 * scaleFactor, 447.904 * scaleFactor)
+      ..cubicTo(417.642 * scaleFactor, 444.443 * scaleFactor, 434.779 * scaleFactor, 440.209 * scaleFactor, 447.149 * scaleFactor, 435.27 * scaleFactor)
+      ..cubicTo(453.338 * scaleFactor, 432.798 * scaleFactor, 458.209 * scaleFactor, 430.199 * scaleFactor, 461.686 * scaleFactor, 427.518 * scaleFactor)
+      ..cubicTo(465.181 * scaleFactor, 424.821 * scaleFactor, 467.024 * scaleFactor, 422.232 * scaleFactor, 467.636 * scaleFactor, 419.835 * scaleFactor)
+      ..cubicTo(471.161 * scaleFactor, 405.976 * scaleFactor, 473.704 * scaleFactor, 379.536 * scaleFactor, 475.24 * scaleFactor, 346.71 * scaleFactor)
+      ..cubicTo(476.772 * scaleFactor, 313.978 * scaleFactor, 477.293 * scaleFactor, 275.164 * scaleFactor, 476.847 * scaleFactor, 236.729 * scaleFactor)
+      ..cubicTo(476.401 * scaleFactor, 198.293 * scaleFactor, 474.989 * scaleFactor, 160.274 * scaleFactor, 472.661 * scaleFactor, 129.129 * scaleFactor)
+      ..cubicTo(471.497 * scaleFactor, 113.555 * scaleFactor, 470.106 * scaleFactor, 99.729 * scaleFactor, 468.498 * scaleFactor, 88.4443 * scaleFactor)
+      ..cubicTo(466.881 * scaleFactor, 77.0977 * scaleFactor, 465.07 * scaleFactor, 68.5213 * scaleFactor, 463.128 * scaleFactor, 63.3262 * scaleFactor)
+      ..cubicTo(460.15 * scaleFactor, 55.3421 * scaleFactor, 451.863 * scaleFactor, 47.7494 * scaleFactor, 438.653 * scaleFactor, 40.8027 * scaleFactor)
+      ..cubicTo(425.546 * scaleFactor, 33.9095 * scaleFactor, 408.099 * scaleFactor, 27.9176 * scaleFactor, 387.654 * scaleFactor, 22.8643 * scaleFactor)
+      ..cubicTo(346.784 * scaleFactor, 12.7625 * scaleFactor, 294.436 * scaleFactor, 6.53075 * scaleFactor, 242.081 * scaleFactor, 4.12988 * scaleFactor)
+      ..close();
+
+    Paint shadowPaint = Paint()
+      ..color = selected ? Colors.green.withValues(alpha: 0.5) : Colors
+          .transparent
+      ..style = PaintingStyle.fill
+      ..maskFilter = MaskFilter.blur(BlurStyle.outer, 10);
+
+    canvas.drawPath(path, shadowPaint);
+    canvas.drawPath(path, shadowPaint);
+
+    canvas.clipPath(path);
+
+    Paint strokePaint = Paint()
+      ..color = selected ? Colors.green : Colors.white
+      ..style = PaintingStyle.stroke
+      ..strokeWidth = 5;
+    canvas.drawPath(path, strokePaint);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => true;
+}
\ No newline at end of file
diff --git a/lib/core/widgets/answer_box/styles/text_box.dart b/lib/core/widgets/answer_box/styles/text_box.dart
new file mode 100644
index 0000000..ed40b1d
--- /dev/null
+++ b/lib/core/widgets/answer_box/styles/text_box.dart
@@ -0,0 +1,62 @@
+import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
+
+class AnswerTextBox extends StatelessWidget {
+  const AnswerTextBox({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return AspectRatio(
+      aspectRatio: 480 / 149.0,
+      child: Stack(
+        alignment: Alignment.center,
+        children: [
+          Positioned.fill(
+            child: CustomPaint(
+              painter: _WavyBannerPainter(),
+            ),
+          ),
+          Text(
+            'We walk in the yard with a glass of juice',
+            textAlign: TextAlign.center,
+            style: GoogleFonts.marhey(
+              fontSize: 12,
+              fontWeight: FontWeight.w600,
+              color: Color(0XFF322386)
+            ),
+          )
+        ],
+      ),
+    );
+  }
+}
+
+class _WavyBannerPainter extends CustomPainter {
+  @override
+  void paint(Canvas canvas, Size size) {
+    final sx = size.width / 480.0;
+    final sy = size.height / 149.0;
+
+    final path = Path()
+      ..moveTo(14.0623 * sx, 20.0845 * sy)
+      ..cubicTo(-2.44627 * sx, 34.3262 * sy, -4.98303 * sx, 117.33 * sy, 9.45711 * sx, 135.641 * sy)
+      ..cubicTo(22.9216 * sx, 152.647 * sy, 436.846 * sx, 154.003 * sy, 462.799 * sx, 136.319 * sy)
+      ..cubicTo(488.753 * sx, 118.634 * sy, 483.484 * sx, 26.7097 * sy, 459.365 * sx, 10.3813 * sy)
+      ..cubicTo(435.246 * sx, -5.94701 * sy, 41.0302 * sx, -3.23423 * sy, 14.0623 * sx, 20.0845 * sy)
+      ..close();
+
+    final paint = Paint()
+      ..style = PaintingStyle.fill
+      ..isAntiAlias = true
+      ..shader = const LinearGradient(
+        begin: Alignment.bottomCenter,
+        end: Alignment.topCenter,
+        colors: [Color(0xFFCADCFF), Colors.white],
+      ).createShader(Offset.zero & size);
+
+    canvas.drawPath(path, paint);
+  }
+
+  @override
+  bool shouldRepaint(covariant _WavyBannerPainter oldDelegate) => false;
+}