diff --git a/assets/images/postcard_bg.png b/assets/images/postcard_bg.png
new file mode 100644
index 0000000..9e3afd0
Binary files /dev/null and b/assets/images/postcard_bg.png differ
diff --git a/lib/postcard/views/order_postcard_preview_page_view.dart b/lib/postcard/views/order_postcard_preview_page_view.dart
index 602b5c6..2dc1c72 100644
--- a/lib/postcard/views/order_postcard_preview_page_view.dart
+++ b/lib/postcard/views/order_postcard_preview_page_view.dart
@@ -6,6 +6,7 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
 import '../../common_packages/app_bar.dart';
 import '../blocs/postcard_creation_bloc.dart';
 import '../blocs/postcard_creation_state.dart';
+import '../widgets/message_card_widget.dart';
 import '../widgets/postcard_preview_widget.dart';
 
 class OrderPostcardPreviewPageView extends StatefulWidget {
@@ -138,13 +139,9 @@ class _OrderPostcardPreviewPageViewState extends State<OrderPostcardPreviewPageV
                 ),
 
                 showImage ?
-                ClipRRect(
-                  borderRadius: BorderRadius.circular(8),
-                  child: Image.asset(
-                    "assets/images/post_card_intro.png",
-                    width: double.infinity,
-                    fit: BoxFit.cover,
-                  ),
+                MessageCardWidget(
+                  message: state.message ?? "",
+                  selectedFont: state.selectedFont,
                 ):
                 PostCardPreviewWidget(
                   imagePath: state.imagePath ?? "",
diff --git a/lib/postcard/views/order_success_page_view.dart b/lib/postcard/views/order_success_page_view.dart
index 96fe16f..62b1bea 100644
--- a/lib/postcard/views/order_success_page_view.dart
+++ b/lib/postcard/views/order_success_page_view.dart
@@ -7,6 +7,7 @@ import 'package:google_fonts/google_fonts.dart';
 import '../../common_packages/app_bar.dart';
 import '../blocs/postcard_creation_bloc.dart';
 import '../blocs/postcard_creation_state.dart';
+import '../widgets/message_card_widget.dart';
 import '../widgets/postcard_preview_widget.dart';
 
 class OrderSuccessPageView extends StatelessWidget {
@@ -51,7 +52,9 @@ class OrderSuccessPageView extends StatelessWidget {
                       color: const Color(0xff585858),
                     ),
                     children: const [
-                      TextSpan(text: "Your order has been placed. Your order\nid is "),
+                      TextSpan(
+                        text: "Your order has been placed. Your order\nid is ",
+                      ),
                       TextSpan(
                         text: "#AG74563",
                         style: TextStyle(
@@ -74,11 +77,22 @@ class OrderSuccessPageView extends StatelessWidget {
                 ),
 
                 const SizedBox(height: 28),
-                
-                Container(
-                  padding: EdgeInsets.fromLTRB(30, 10, 30, 10),
+
+                Padding(
+                  padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 30),
                   child: Transform.rotate(
-                    angle: 0.08,
+                    angle: 0.20,
+                    child: MessageCardWidget(
+                      message: state.message ?? "",
+                      selectedFont: state.selectedFont,
+                    ),
+                  ),
+                ),
+
+                Padding(
+                  padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 30),
+                  child: Transform.rotate(
+                    angle: -0.15,
                     child: PostCardPreviewWidget(
                       imagePath: state.imagePath ?? "",
                       message: state.message ?? "",
@@ -88,8 +102,7 @@ class OrderSuccessPageView extends StatelessWidget {
                 ),
 
 
-                const SizedBox(height: 20),
-
+                const SizedBox(height: 30),
 
                 SizedBox(
                   width: double.infinity,
@@ -122,4 +135,3 @@ class OrderSuccessPageView extends StatelessWidget {
     );
   }
 }
-
diff --git a/lib/postcard/views/postcard_checkout_page_view.dart b/lib/postcard/views/postcard_checkout_page_view.dart
index c41d03c..c1ddc32 100644
--- a/lib/postcard/views/postcard_checkout_page_view.dart
+++ b/lib/postcard/views/postcard_checkout_page_view.dart
@@ -6,6 +6,7 @@ import '../../common_packages/app_bar.dart';
 import '../blocs/postcard_creation_bloc.dart';
 import '../blocs/postcard_creation_events.dart';
 import '../blocs/postcard_creation_state.dart';
+import '../widgets/message_card_widget.dart';
 import '../widgets/postcard_preview_widget.dart';
 
 class PostcardCheckoutPageView extends StatelessWidget {
@@ -53,12 +54,16 @@ class PostcardCheckoutPageView extends StatelessWidget {
 
                 const SizedBox(height: 16),
 
-
-              PostCardPreviewWidget(
-                imagePath: state.imagePath ?? "",
-                message: state.message ?? "",
-                selectedFont: state.selectedFont,
-              ),
+                MessageCardWidget(
+                  message: state.message ?? "",
+                  selectedFont: state.selectedFont,
+                ),
+                SizedBox(height: 10.h),
+                PostCardPreviewWidget(
+                  imagePath: state.imagePath ?? "",
+                  message: state.message ?? "",
+                  selectedFont: state.selectedFont,
+                ),
 
                 SizedBox(height: 60.h),
 
@@ -76,24 +81,20 @@ class PostcardCheckoutPageView extends StatelessWidget {
 
                 _buildPaymentRow("Subtotal", "\$ 50"),
                 const SizedBox(height: 20),
-                _buildPaymentRow(
-                  "Discount",
-                  "\$ 20",
-                  highlight: true,
-                ),
+                _buildPaymentRow("Discount", "\$ 20", highlight: true),
                 const SizedBox(height: 8),
                 Divider(color: Colors.black),
                 _buildPaymentRow("Grand Total", "\$ 30", size: 20.sp),
                 const SizedBox(height: 28),
-                Container(
-                  color: Color(0xffFAFAFA),
-                  height: 10,
-                ),
+                Container(color: Color(0xffFAFAFA), height: 10),
                 const SizedBox(height: 10),
                 Row(
                   children: [
-                    const Icon(Icons.home_outlined,
-                        color: Color(0xffF95F62), size: 20),
+                    const Icon(
+                      Icons.home_outlined,
+                      color: Color(0xffF95F62),
+                      size: 20,
+                    ),
                     const SizedBox(width: 10),
                     Expanded(
                       child: Text(
@@ -106,19 +107,17 @@ class PostcardCheckoutPageView extends StatelessWidget {
                       ),
                     ),
                     IconButton(
-                      onPressed: () {
-
-                      },
-                      icon: const Icon(Icons.edit_outlined,
-                          color: Color(0xffF95F62), size: 18),
+                      onPressed: () {},
+                      icon: const Icon(
+                        Icons.edit_outlined,
+                        color: Color(0xffF95F62),
+                        size: 18,
+                      ),
                     ),
                   ],
                 ),
                 const SizedBox(height: 10),
-                Container(
-                  color: Color(0xffFAFAFA),
-                  height: 10,
-                ),
+                Container(color: Color(0xffFAFAFA), height: 10),
 
                 const SizedBox(height: 40),
 
@@ -155,8 +154,12 @@ class PostcardCheckoutPageView extends StatelessWidget {
   }
 
   /// 💵 Helper for payment summary row
-  Widget _buildPaymentRow(String label, String value,
-      {bool highlight = false, double? size}) {
+  Widget _buildPaymentRow(
+    String label,
+    String value, {
+    bool highlight = false,
+    double? size,
+  }) {
     return Row(
       mainAxisAlignment: MainAxisAlignment.spaceBetween,
       children: [
@@ -171,13 +174,15 @@ class PostcardCheckoutPageView extends StatelessWidget {
         Container(
           decoration: highlight
               ? BoxDecoration(
-            color: const Color(0xffFDCDCE),
-            borderRadius: BorderRadius.circular(6),
-            border: Border.all(color: Color(0xffEDEDED))
-          )
+                  color: const Color(0xffFDCDCE),
+                  borderRadius: BorderRadius.circular(6),
+                  border: Border.all(color: Color(0xffEDEDED)),
+                )
               : null,
-          padding:
-          EdgeInsets.symmetric(horizontal: highlight ? 6 : 0, vertical: 2),
+          padding: EdgeInsets.symmetric(
+            horizontal: highlight ? 6 : 0,
+            vertical: 2,
+          ),
           child: Text(
             value,
             style: GoogleFonts.poppins(
@@ -191,4 +196,3 @@ class PostcardCheckoutPageView extends StatelessWidget {
     );
   }
 }
-
diff --git a/lib/postcard/views/preview_postcard_step_page_view.dart b/lib/postcard/views/preview_postcard_step_page_view.dart
index 5fb13bc..0820020 100644
--- a/lib/postcard/views/preview_postcard_step_page_view.dart
+++ b/lib/postcard/views/preview_postcard_step_page_view.dart
@@ -8,6 +8,7 @@ import 'package:google_fonts/google_fonts.dart';
 import '../../common_packages/app_bar.dart';
 import '../blocs/postcard_creation_bloc.dart';
 import '../blocs/postcard_creation_state.dart';
+import '../widgets/message_card_widget.dart';
 import '../widgets/postcard_preview_widget.dart';
 import '../widgets/purchase_details_bottom_sheet.dart';
 import '../widgets/step_progressbar.dart';
@@ -47,25 +48,6 @@ class _PreviewPostcardStepPageViewState extends State<PreviewPostcardStepPageVie
                 ),
                 const SizedBox(height: 20),
 
-
-                showImage ?
-                  ClipRRect(
-                    borderRadius: BorderRadius.circular(8),
-                    child: Image.asset(
-                      "assets/images/post_card_intro.png",
-                      width: double.infinity,
-                      fit: BoxFit.cover,
-                    ),
-                  ):
-                PostCardPreviewWidget(
-                  imagePath: state.imagePath ?? "",
-                  message: state.message ?? "",
-                  selectedFont: state.selectedFont,
-                ),
-
-                const SizedBox(height: 24),
-
-                // 🔁 Flip Buttons
                 Row(
                   mainAxisAlignment: MainAxisAlignment.spaceBetween,
                   children: [
@@ -109,7 +91,19 @@ class _PreviewPostcardStepPageViewState extends State<PreviewPostcardStepPageVie
 
                 const SizedBox(height: 16),
 
-                // ▶ Next Button
+                showImage ?
+                MessageCardWidget(
+                  message: state.message ?? "",
+                  selectedFont: state.selectedFont,
+                ):
+                PostCardPreviewWidget(
+                  imagePath: state.imagePath ?? "",
+                  message: state.message ?? "",
+                  selectedFont: state.selectedFont,
+                ),
+
+                const SizedBox(height: 24),
+
                 SizedBox(
                   width: double.infinity,
                   child: ElevatedButton(
diff --git a/lib/postcard/widgets/message_card_widget.dart b/lib/postcard/widgets/message_card_widget.dart
new file mode 100644
index 0000000..3a4d336
--- /dev/null
+++ b/lib/postcard/widgets/message_card_widget.dart
@@ -0,0 +1,40 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:google_fonts/google_fonts.dart';
+
+class MessageCardWidget extends StatelessWidget {
+  final String message;
+  final String? selectedFont;
+  const MessageCardWidget({super.key, required this.message, this.selectedFont});
+
+  @override
+  Widget build(BuildContext context) {
+    return Stack(
+      alignment: Alignment.center,
+      children: [
+        Image.asset(
+          'assets/images/postcard_bg.png',
+          width: double.infinity,
+          fit: BoxFit.contain,
+        ),
+
+        Positioned(
+          right: 10,
+          top: 50,
+          child: SizedBox(
+            width: 150.w,
+            child: Text(message,
+              textAlign: TextAlign.left,
+              style: TextStyle(
+                fontFamily: selectedFont ??
+                    GoogleFonts.poppins().fontFamily,
+                color: Colors.black,
+                fontSize: 10,
+              ),
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}
diff --git a/lib/postcard/widgets/postcard_preview_widget.dart b/lib/postcard/widgets/postcard_preview_widget.dart
index 75e0a73..0940416 100644
--- a/lib/postcard/widgets/postcard_preview_widget.dart
+++ b/lib/postcard/widgets/postcard_preview_widget.dart
@@ -1,60 +1,37 @@
 import 'dart:io';
-
 import 'package:flutter/material.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
-import 'package:google_fonts/google_fonts.dart';
 
 class PostCardPreviewWidget extends StatelessWidget {
   final String imagePath;
   final String message;
   final String? selectedFont;
-  const PostCardPreviewWidget({super.key, required this.imagePath, required this.message, this.selectedFont});
+
+  const PostCardPreviewWidget({
+    super.key,
+    required this.imagePath,
+    required this.message,
+    this.selectedFont,
+  });
 
   @override
   Widget build(BuildContext context) {
     return Container(
-      padding: const EdgeInsets.all(12),
+      width: double.infinity,
+      height: 230.h,
+      padding: const EdgeInsets.all(10),
       decoration: BoxDecoration(
-        color: const Color(0xFFFFF5F5),
+        gradient: LinearGradient(colors: [
+          Color(0xffE2D6C2),
+          Color(0xffFFF5E6),
+          Color(0xffFFF5E6),
+        ]),
+        border: Border.all(
+          color: Color(0xff000000).withOpacity(0.12),
+        ),
         borderRadius: BorderRadius.circular(12),
       ),
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-
-            ClipRRect(
-              borderRadius: BorderRadius.circular(8),
-              child: Image.file(
-                File(imagePath),
-                height: 140.h,
-                width: 140.w,
-                fit: BoxFit.cover,
-              ),
-            ),
-          const SizedBox(height: 12),
-
-          CustomPaint(
-            painter: LinedPaperPainter(lineHeight: 28.0, topPadding: 38.0),
-            child: Container(
-              width: double.infinity,
-              padding: const EdgeInsets.symmetric(
-                horizontal: 10,
-                vertical: 12,
-              ),
-              child: Text(
-                message ?? "",
-                style: TextStyle(
-                  fontFamily: selectedFont ??
-                      GoogleFonts.poppins().fontFamily,
-                  fontSize: 16.sp,
-                  color: const Color(0xff1A1A1A),
-                  height: 1.6,
-                ),
-              ),
-            ),
-          ),
-        ],
-      ),
+      child: Image.file(File(imagePath), fit: BoxFit.cover),
     );
   }
 }
@@ -81,4 +58,3 @@ class LinedPaperPainter extends CustomPainter {
   @override
   bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
 }
-
diff --git a/lib/postcard/widgets/purchase_details_bottom_sheet.dart b/lib/postcard/widgets/purchase_details_bottom_sheet.dart
index db0db34..39f41da 100644
--- a/lib/postcard/widgets/purchase_details_bottom_sheet.dart
+++ b/lib/postcard/widgets/purchase_details_bottom_sheet.dart
@@ -172,7 +172,32 @@ class PurchaseDetailsBottomSheet {
                       ),
                     ),
 
-                    const SizedBox(height: 32),
+                    const SizedBox(height: 15),
+                    SizedBox(
+                      width: double.infinity,
+                      child: ElevatedButton(
+                        onPressed: () {
+                          PurchaseDetailsBottomSheet.close(context);
+                          bloc.add(GoToNextStep());
+                        },
+                        style: ElevatedButton.styleFrom(
+                          backgroundColor: const Color(0xffF95F62),
+                          padding: EdgeInsets.symmetric(vertical: 16.h),
+                          shape: RoundedRectangleBorder(
+                            borderRadius: BorderRadius.circular(40),
+                          ),
+                        ),
+                        child: Text(
+                          "Proceed",
+                          style: TextStyle(
+                            color: Colors.white,
+                            fontSize: 14.sp,
+                            fontWeight: FontWeight.w600,
+                          ),
+                        ),
+                      ),
+                    ),
+                    const SizedBox(height: 15),
                   ],
                 ),
               );