diff --git a/lib/theme/colors.dart b/lib/theme/colors.dart
index 52cb0e4..09fc842 100644
--- a/lib/theme/colors.dart
+++ b/lib/theme/colors.dart
@@ -17,6 +17,7 @@ class MyColors {
   static const Color backgroundColor = Color(0xffF8F8F8);
   static const Color grey57Color = Color(0xff575757);
   static const Color grey77Color = Color(0xff777777);
+  static const Color greyButtonColor = Color(0xffEBEBEB);
   static const Color grey70Color = Color(0xff707070);
   static const Color greyACColor = Color(0xffACACAC);
   static const Color greyShadowColor = Color(0xFFE8E7E7);
diff --git a/lib/view_models/ad_view_model.dart b/lib/view_models/ad_view_model.dart
new file mode 100644
index 0000000..ccd857f
--- /dev/null
+++ b/lib/view_models/ad_view_model.dart
@@ -0,0 +1,57 @@
+import 'dart:io';
+
+import 'package:mc_common_app/services/services.dart';
+import 'package:mc_common_app/utils/enums.dart';
+import 'package:mc_common_app/view_models/base_view_model.dart';
+
+class AdVM extends BaseVM {
+  final CommonServices commonServices;
+
+  AdVM({required this.commonServices});
+
+  AdCreationStepsEnum currentProgressStep = AdCreationStepsEnum.vehicleDetails;
+
+  void updateCurrentStep() {
+    switch (currentProgressStep) {
+      case AdCreationStepsEnum.vehicleDetails:
+        currentProgressStep = AdCreationStepsEnum.damageParts;
+        notifyListeners();
+        break;
+      case AdCreationStepsEnum.damageParts:
+        currentProgressStep = AdCreationStepsEnum.adDuration;
+        notifyListeners();
+        break;
+      case AdCreationStepsEnum.adDuration:
+        currentProgressStep = AdCreationStepsEnum.reviewAd;
+        notifyListeners();
+        break;
+      case AdCreationStepsEnum.reviewAd:
+        break;
+    }
+  }
+
+  bool financeAvailableStatus = false;
+
+  void updateFinanceAvailableStatus(bool status) {
+    financeAvailableStatus = status;
+    notifyListeners();
+  }
+
+  List<File> pickedImages = [];
+
+  void removeImageFromList(int index) {
+    pickedImages.removeAt(index);
+    notifyListeners();
+  }
+
+  // sourceFlag for Camera = 0
+  // sourceFlag for Gallery = 1
+  void pickImageFromPhone(int sourceFlag) async {
+    File? file = await commonServices.pickImageFromPhone(1);
+
+    if (file != null) {
+      pickedImages.add(file);
+      notifyListeners();
+    }
+  }
+}
diff --git a/lib/views/advertisement/ad_creation_steps_containers.dart b/lib/views/advertisement/ad_creation_steps_containers.dart
new file mode 100644
index 0000000..e1c77bb
--- /dev/null
+++ b/lib/views/advertisement/ad_creation_steps_containers.dart
@@ -0,0 +1,466 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:mc_common_app/classes/consts.dart';
+import 'package:mc_common_app/extensions/int_extensions.dart';
+import 'package:mc_common_app/extensions/string_extensions.dart';
+import 'package:mc_common_app/theme/colors.dart';
+import 'package:mc_common_app/utils/enums.dart';
+import 'package:mc_common_app/view_models/ad_view_model.dart';
+import 'package:mc_common_app/widgets/dropdown/dropdow_field.dart';
+import 'package:mc_common_app/widgets/extensions/extensions_widget.dart';
+import 'package:mc_common_app/widgets/txt_field.dart';
+import 'package:provider/provider.dart';
+import 'package:mc_common_app/widgets/common_widgets/dotted_rect.dart';
+
+class AttachImageContainer extends StatelessWidget {
+  final Function() onTap;
+
+  const AttachImageContainer({Key? key, required this.onTap}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return InkWell(
+      onTap: onTap,
+      child: Container(
+        height: 46,
+        width: double.infinity,
+        color: MyColors.white,
+        child: DashedRect(
+          color: MyColors.lightIconColor,
+          strokeWidth: 2.0,
+          gap: 4.0,
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              MyAssets.attachmentIcon.buildSvg(),
+              "Attach Image".toText(
+                fontSize: 15,
+                isBold: true,
+                color: MyColors.darkPrimaryColor,
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class BuildAdStepContainer extends StatelessWidget {
+  final WidgetBuilder onVehicleDetails;
+  final WidgetBuilder onDamageParts;
+  final WidgetBuilder onAdDuration;
+  final WidgetBuilder onReviewAd;
+  final AdCreationStepsEnum adCreationStepsEnum;
+
+  const BuildAdStepContainer({
+    Key? key,
+    required this.onVehicleDetails,
+    required this.onDamageParts,
+    required this.onAdDuration,
+    required this.onReviewAd,
+    required this.adCreationStepsEnum,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    switch (adCreationStepsEnum) {
+      case AdCreationStepsEnum.vehicleDetails:
+        return onVehicleDetails(context);
+
+      case AdCreationStepsEnum.damageParts:
+        return onDamageParts(context);
+
+      case AdCreationStepsEnum.adDuration:
+        return onAdDuration(context);
+
+      case AdCreationStepsEnum.reviewAd:
+        return onReviewAd(context);
+    }
+  }
+}
+
+class VehicleDetails extends StatelessWidget {
+  const VehicleDetails({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    List<DropValue> dropList = [
+      DropValue(0, "Maintenance", ""),
+      DropValue(1, "Car Wash", ""),
+      DropValue(2, "Monthly Checkup", ""),
+      DropValue(3, "Friendly Visit", ""),
+      DropValue(4, "Muftaa", ""),
+    ];
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        "Vehicle Detail".toText(fontSize: 18, isBold: true),
+        8.height,
+        DropdownField(
+          (DropValue value) {},
+          list: dropList,
+          hint: "Vehicle Type",
+        ),
+        8.height,
+        DropdownField(
+          (DropValue value) {},
+          list: dropList,
+          hint: "Vehicle Model",
+        ),
+        8.height,
+        DropdownField(
+          (DropValue value) {},
+          list: dropList,
+          hint: "Vehicle Model Year",
+        ),
+        8.height,
+        DropdownField(
+          (DropValue value) {},
+          list: dropList,
+          hint: "Vehicle Color",
+        ),
+        8.height,
+        DropdownField(
+          (DropValue value) {},
+          list: dropList,
+          hint: "Vehicle Condition",
+        ),
+        8.height,
+        DropdownField(
+          (DropValue value) {},
+          list: dropList,
+          hint: "Vehicle Category",
+        ),
+        8.height,
+        TxtField(
+          hint: "Vehicle Mileage",
+          // onChanged: (v) => email = v,
+        ),
+        8.height,
+        DropdownField(
+          (DropValue value) {},
+          list: dropList,
+          hint: "Vehicle Transmission",
+        ),
+        8.height,
+        DropdownField(
+          (DropValue value) {},
+          list: dropList,
+          hint: "Vehicle Seller Type",
+        ),
+        8.height,
+        DropdownField(
+          (DropValue value) {},
+          list: dropList,
+          hint: "Vehicle Country",
+        ),
+        8.height,
+        DropdownField(
+          (DropValue value) {},
+          list: dropList,
+          hint: "Vehicle City",
+        ),
+        8.height,
+        TxtField(
+          hint: "Demand Amount",
+          // onChanged: (v) => email = v,
+        ),
+        8.height,
+        TxtField(
+          hint: "Vehicle VIN",
+          // onChanged: (v) => email = v,
+        ),
+        8.height,
+        TxtField(
+          hint: "Vehicle Title",
+          // onChanged: (v) => email = v,
+        ),
+        8.height,
+        TxtField(
+          hint: "Warranty Available (No. of Years)",
+          // onChanged: (v) => email = v,
+        ),
+        8.height,
+        TxtField(
+          hint: "Vehicle Description",
+          maxLines: 5,
+          // onChanged: (v) => email = v,
+        ),
+        22.height,
+        "Finance Available".toText(fontSize: 16),
+        8.height,
+        Consumer(builder: (BuildContext context, AdVM adVm, Widget? child) {
+          return Container(
+            width: 65,
+            height: 37,
+            decoration: BoxDecoration(
+              color: adVm.financeAvailableStatus ? MyColors.darkPrimaryColor : MyColors.white,
+              borderRadius: BorderRadius.circular(25.0),
+              border: Border.all(color: MyColors.black, width: 1.5),
+            ),
+            child: CupertinoSwitch(
+              activeColor: MyColors.darkPrimaryColor,
+              trackColor: MyColors.white,
+              thumbColor: MyColors.grey98Color,
+              value: adVm.financeAvailableStatus,
+              onChanged: (value) {
+                adVm.updateFinanceAvailableStatus(value);
+              },
+            ),
+          );
+        }),
+        28.height,
+        "Vehicle Pictures".toText(fontSize: 18, isBold: true),
+        8.height,
+        AttachImageContainer(onTap: () {
+          context.read<AdVM>().pickImageFromPhone(1);
+        }),
+        20.height,
+      ],
+    ).toWhiteContainer(width: double.infinity, allPading: 12, margin: EdgeInsets.symmetric(horizontal: 21, vertical: 10));
+  }
+}
+
+class DamageParts extends StatelessWidget {
+  const DamageParts({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    List<DropValue> dropList = [
+      DropValue(0, "Door Handles", ""),
+      DropValue(1, "Wind Screen", ""),
+      DropValue(2, "Rear Light", ""),
+      DropValue(3, "Bumper", ""),
+      DropValue(4, "Headlight", ""),
+    ];
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        "Vehicle Damage Pictures".toText(fontSize: 18, isBold: true),
+        8.height,
+        DropdownField(
+          (DropValue value) {},
+          list: dropList,
+          hint: "Vehicle Part",
+        ),
+        8.height,
+        AttachImageContainer(onTap: () {
+          context.read<AdVM>().pickImageFromPhone(1);
+        }),
+        20.height,
+      ],
+    ).toWhiteContainer(width: double.infinity, allPading: 12, margin: EdgeInsets.symmetric(horizontal: 21, vertical: 10));
+  }
+}
+
+class AdDuration extends StatelessWidget {
+  const AdDuration({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    List<DropValue> dropList = [
+      DropValue(0, "One Week", ""),
+      DropValue(1, "Two Weeks", ""),
+      DropValue(2, "Three Weeks", ""),
+      DropValue(3, "One Month", ""),
+    ];
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        "Ad Duration".toText(fontSize: 18, isBold: true),
+        8.height,
+        DropdownField(
+          (DropValue value) {},
+          list: dropList,
+          hint: "Select Duration",
+        ),
+        8.height,
+        DropdownField(
+          (DropValue value) {},
+          list: dropList,
+          hint: "Start Date",
+        ),
+        28.height,
+        "Select Special Services".toText(fontSize: 18, isBold: true),
+        8.height,
+        DropdownField(
+          (DropValue value) {},
+          list: dropList,
+          hint: "Ad Management",
+        ),
+        20.height,
+      ],
+    ).toWhiteContainer(width: double.infinity, allPading: 12, margin: EdgeInsets.symmetric(horizontal: 21, vertical: 10));
+  }
+}
+
+class SingleDetailWidget extends StatelessWidget {
+  final String title;
+  final String subTitle;
+
+  const SingleDetailWidget({Key? key, required this.title, required this.subTitle}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        "$subTitle:".toText(fontSize: 12, color: MyColors.lightTextColor, isBold: true),
+        title.toText(fontSize: 14, color: MyColors.black, isBold: true),
+      ],
+    );
+  }
+}
+
+class ReviewAd extends StatelessWidget {
+  const ReviewAd({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        VehicleDetailsReview(),
+        DamagePartsReview(),
+        AdDurationReview(),
+      ],
+    );
+  }
+}
+
+class VehicleDetailsReview extends StatelessWidget {
+  const VehicleDetailsReview({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        "Vehicle Details".toText(fontSize: 18, isBold: true),
+        8.height,
+        Row(
+          mainAxisAlignment: MainAxisAlignment.start,
+          children: [
+            Expanded(
+              flex: 5,
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  SingleDetailWidget(title: "Vehicle Type", subTitle: "Car"),
+                  16.height,
+                  SingleDetailWidget(title: "Vehicle Type", subTitle: "Car"),
+                  16.height,
+                  SingleDetailWidget(title: "Vehicle Type", subTitle: "Car"),
+                  16.height,
+                  SingleDetailWidget(title: "Vehicle Type", subTitle: "Car"),
+                  16.height,
+                  SingleDetailWidget(title: "Vehicle Type", subTitle: "Car"),
+                  16.height,
+                  SingleDetailWidget(title: "Vehicle Type", subTitle: "Car"),
+                  16.height,
+                  SingleDetailWidget(title: "Vehicle Type", subTitle: "Car"),
+                  16.height,
+                  SingleDetailWidget(title: "Vehicle Type", subTitle: "Car"),
+                  16.height,
+                ],
+              ),
+            ),
+            Expanded(
+              flex: 5,
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  SingleDetailWidget(title: "Vehicle Type", subTitle: "Car"),
+                  16.height,
+                  SingleDetailWidget(title: "Vehicle Type", subTitle: "Car"),
+                  16.height,
+                  SingleDetailWidget(title: "Vehicle Type", subTitle: "Car"),
+                  16.height,
+                  SingleDetailWidget(title: "Vehicle Type", subTitle: "Car"),
+                  16.height,
+                  SingleDetailWidget(title: "Vehicle Type", subTitle: "Car"),
+                  16.height,
+                  SingleDetailWidget(title: "Vehicle Type", subTitle: "Car"),
+                  16.height,
+                  SingleDetailWidget(title: "Vehicle Type", subTitle: "Car"),
+                  16.height,
+                  SingleDetailWidget(title: "Vehicle Type", subTitle: "Car"),
+                  16.height,
+                ],
+              ),
+            ),
+          ],
+        ),
+        SingleDetailWidget(title: "Warranty Available", subTitle: "0 Years"),
+        8.height,
+        SingleDetailWidget(subTitle: "Description", title: "Some Two lines Description about the car and its unique features"),
+        8.height,
+        SingleDetailWidget(subTitle: "Finance Available", title: "No"),
+        8.height,
+        "Vehicle Pictures:".toText(fontSize: 12, color: MyColors.lightTextColor, isBold: true),
+      ],
+    ).toWhiteContainer(width: double.infinity, allPading: 12, margin: EdgeInsets.symmetric(horizontal: 21, vertical: 10));
+  }
+}
+
+class DamagePartsReview extends StatelessWidget {
+  const DamagePartsReview({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        "Vehicle Damage Part".toText(fontSize: 18, isBold: true),
+        8.height,
+        Row(
+          children: [
+            SingleDetailWidget(subTitle: "Vehicle Part", title: "Bumper"),
+          ],
+        ),
+        8.height,
+        "Damage Part Pictures:".toText(fontSize: 12, color: MyColors.lightTextColor, isBold: true),
+      ],
+    ).toWhiteContainer(width: double.infinity, allPading: 12, margin: EdgeInsets.symmetric(horizontal: 21, vertical: 10));
+  }
+}
+
+class AdDurationReview extends StatelessWidget {
+  const AdDurationReview({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        "Vehicle Damage Part".toText(fontSize: 18, isBold: true),
+        8.height,
+        Row(
+          children: [
+            Expanded(
+              flex: 5,
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  SingleDetailWidget(subTitle: "Duration", title: "One Week"),
+                  8.height,
+                  SingleDetailWidget(subTitle: "Special Services", title: "Ad Management"),
+                ],
+              ),
+            ),
+            Expanded(
+              flex: 5,
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  SingleDetailWidget(subTitle: "Start Date", title: "5 February, 2023"),
+                ],
+              ),
+            ),
+          ],
+        ),
+      ],
+    ).toWhiteContainer(width: double.infinity, allPading: 12, margin: EdgeInsets.symmetric(horizontal: 21, vertical: 10));
+  }
+}
diff --git a/lib/views/advertisement/ads_detail_view.dart b/lib/views/advertisement/ads_detail_view.dart
new file mode 100644
index 0000000..7cb6b32
--- /dev/null
+++ b/lib/views/advertisement/ads_detail_view.dart
@@ -0,0 +1,130 @@
+import 'package:flutter/material.dart';
+import 'package:mc_common_app/classes/consts.dart';
+import 'package:mc_common_app/extensions/int_extensions.dart';
+import 'package:mc_common_app/extensions/string_extensions.dart';
+import 'package:mc_common_app/theme/colors.dart';
+import 'package:mc_common_app/views/advertisement/ads_images_slider.dart';
+import 'package:mc_common_app/widgets/button/show_fill_button.dart';
+import 'package:mc_common_app/widgets/common_widgets/app_bar.dart';
+import 'package:mc_common_app/widgets/extensions/extensions_widget.dart';
+
+class AdsDetailView extends StatelessWidget {
+  const AdsDetailView({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: CustomAppBar(
+        backgroundColor: MyColors.backgroundColor,
+        title: "Ads",
+        profileImageUrl: MyAssets.bnCar,
+        isRemoveBackButton: false,
+        isDrawerEnabled: false,
+      ),
+      body: Container(
+        padding: const EdgeInsets.only(bottom: 10, left: 21, right: 21),
+        child: Stack(
+          children: [
+            Column(
+              mainAxisSize: MainAxisSize.min,
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                const CarouselWithIndicatorDemo(),
+                Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: [
+                    "Toyota Corolla | Silver".toText(fontSize: 18, isBold: true),
+                    "Jeddah".toText(fontSize: 10, isBold: true, color: MyColors.lightTextColor),
+                  ],
+                ),
+                Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: [
+                    Row(
+                      children: [
+                        "Model: ".toText(fontSize: 14, isBold: true, color: MyColors.lightTextColor),
+                        "2019".toText(
+                          fontSize: 14,
+                          isBold: true,
+                        ),
+                      ],
+                    ),
+                    "Saudi Arabia".toText(fontSize: 10, isBold: true, color: MyColors.lightTextColor),
+                  ],
+                ),
+                Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: [
+                    Row(
+                      children: [
+                        "Mileage: ".toText(fontSize: 14, isBold: true, color: MyColors.lightTextColor),
+                        "10928Km".toText(
+                          fontSize: 14,
+                          isBold: true,
+                        ),
+                      ],
+                    ),
+                    "5 Hours ago".toText(fontSize: 10, isBold: true, color: MyColors.lightTextColor),
+                  ],
+                ),
+                Row(
+                  children: [
+                    "Transmission: ".toText(fontSize: 14, isBold: true, color: MyColors.lightTextColor),
+                    "Automatic".toText(
+                      fontSize: 14,
+                      isBold: true,
+                    ),
+                  ],
+                ),
+                8.height,
+                "Description: ".toText(fontSize: 14, isBold: true, color: MyColors.lightTextColor),
+                "No Issue in the car. All parts are genuine with no major accident. ".toText(
+                  fontSize: 14,
+                  isBold: true,
+                ),
+              ],
+            ).toWhiteContainer(width: double.infinity, allPading: 12),
+            Align(
+                alignment: Alignment.bottomCenter,
+                child: Container(
+                  height: 150,
+                  child: Column(
+                    children: [
+                      Divider(thickness: 1, height: 1),
+                      18.height,
+                      Row(
+                        crossAxisAlignment: CrossAxisAlignment.end,
+                        children: [
+                          "35,000".toText(fontSize: 30, isBold: true),
+                          "SAR".toText(fontSize: 15, isBold: true, color: MyColors.lightTextColor),
+                        ],
+                      ),
+                      14.height,
+                      Row(
+                        children: [
+                          Expanded(
+                            child: ShowFillButton(
+                              maxHeight: 55,
+                              title: "Reserve Ad",
+                              onPressed: () {},
+                            ),
+                          ),
+                          12.width,
+                          Container(
+                            height: 55,
+                            width: 55,
+                            alignment: Alignment.center,
+                            decoration: BoxDecoration(border: Border.all(color: MyColors.black, width: 3)),
+                            child: Icon(Icons.phone, color: MyColors.black),
+                          ),
+                        ],
+                      ),
+                    ],
+                  ),
+                )),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/views/advertisement/ads_images_slider.dart b/lib/views/advertisement/ads_images_slider.dart
new file mode 100644
index 0000000..bbbb0e4
--- /dev/null
+++ b/lib/views/advertisement/ads_images_slider.dart
@@ -0,0 +1,66 @@
+import 'package:flutter/material.dart';
+import 'package:carousel_slider/carousel_slider.dart';
+import 'package:mc_common_app/classes/consts.dart';
+import 'package:mc_common_app/theme/colors.dart';
+
+class CarouselWithIndicatorDemo extends StatefulWidget {
+  const CarouselWithIndicatorDemo({super.key});
+
+  @override
+  State<StatefulWidget> createState() => _CarouselWithIndicatorState();
+}
+
+class _CarouselWithIndicatorState extends State<CarouselWithIndicatorDemo> {
+  int _current = 0;
+  final CarouselController _controller = CarouselController();
+
+  final imgList = [
+    MyAssets.bnCar,
+    MyAssets.bnCar,
+    MyAssets.bnCar,
+  ];
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(children: [
+      CarouselSlider(
+        items: imgList
+            .map((item) => Container(
+                  margin: EdgeInsets.all(5.0),
+                  child: ClipRRect(
+                    borderRadius: BorderRadius.all(Radius.circular(5.0)),
+                    child: Image.asset(item, fit: BoxFit.cover),
+                  ),
+                ))
+            .toList(),
+        carouselController: _controller,
+        options: CarouselOptions(
+            autoPlay: false,
+            enlargeCenterPage: false,
+            aspectRatio: 1.8,
+            onPageChanged: (index, reason) {
+              setState(() {
+                _current = index;
+              });
+            }),
+      ),
+      Row(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: imgList.asMap().entries.map((entry) {
+          return GestureDetector(
+            onTap: () => _controller.animateToPage(entry.key),
+            child: Container(
+              width: 12.0,
+              height: 12.0,
+              margin: EdgeInsets.symmetric(vertical: 8.0, horizontal: 4.0),
+              decoration: BoxDecoration(
+                shape: BoxShape.circle,
+                color: _current == entry.key ? MyColors.darkPrimaryColor : MyColors.lightTextColor.withOpacity(0.5),
+              ),
+            ),
+          );
+        }).toList(),
+      ),
+    ]);
+  }
+}
diff --git a/lib/views/advertisement/create_ad_progress_steps.dart b/lib/views/advertisement/create_ad_progress_steps.dart
new file mode 100644
index 0000000..a3e4349
--- /dev/null
+++ b/lib/views/advertisement/create_ad_progress_steps.dart
@@ -0,0 +1,60 @@
+import 'package:flutter/material.dart';
+import 'package:mc_common_app/classes/consts.dart';
+import 'package:mc_common_app/extensions/int_extensions.dart';
+import 'package:mc_common_app/extensions/string_extensions.dart';
+import 'package:mc_common_app/theme/colors.dart';
+import 'package:mc_common_app/utils/enums.dart';
+import 'package:mc_common_app/view_models/ad_view_model.dart';
+import 'package:mc_common_app/widgets/extensions/extensions_widget.dart';
+import 'package:provider/provider.dart';
+
+class CreateAdProgressSteps extends StatelessWidget {
+  const CreateAdProgressSteps({Key? key}) : super(key: key);
+
+  Widget buildStep(String icon, String title, bool isSelected) {
+    return Column(
+      children: [
+        Container(
+          height: 50,
+          width: 50,
+          padding: const EdgeInsets.all(08),
+          decoration: BoxDecoration(
+            shape: BoxShape.circle,
+            color: isSelected ? MyColors.darkPrimaryColor : MyColors.white,
+            border: Border.all(
+              color: isSelected ? MyColors.darkPrimaryColor : MyColors.lightIconColor,
+            ),
+          ),
+          child: icon.buildSvg(color: isSelected ? MyColors.white : MyColors.lightIconColor,),
+        ),
+        5.height,
+        title.toText(
+          textAlign: TextAlign.center,
+          isBold: true,
+          fontSize: 12,
+          color: isSelected ? MyColors.black : MyColors.lightIconColor,
+        ),
+      ],
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    AdVM adVM = context.watch<AdVM>();
+    return Stack(
+      // alignment: Alignment.center,
+      children: [
+        const Divider(thickness: 2).paddingOnly(left: 21, right: 21, top: 15),
+        Row(
+          mainAxisAlignment: MainAxisAlignment.spaceAround,
+          children: [
+            buildStep(MyAssets.carIcon, "Vehicle \n Details", adVM.currentProgressStep == AdCreationStepsEnum.vehicleDetails),
+            buildStep(MyAssets.carHitIcon, "Damage \n Parts", adVM.currentProgressStep == AdCreationStepsEnum.damageParts),
+            buildStep(MyAssets.clockIcon, "Ad \n Duration", adVM.currentProgressStep == AdCreationStepsEnum.adDuration),
+            buildStep(MyAssets.reviewIcon, "Review \n Ad", adVM.currentProgressStep == AdCreationStepsEnum.reviewAd),
+          ],
+        ),
+      ],
+    );
+  }
+}
diff --git a/lib/views/advertisement/create_ad_view.dart b/lib/views/advertisement/create_ad_view.dart
new file mode 100644
index 0000000..8b73370
--- /dev/null
+++ b/lib/views/advertisement/create_ad_view.dart
@@ -0,0 +1,185 @@
+import 'package:flutter/material.dart';
+import 'package:mc_common_app/extensions/int_extensions.dart';
+import 'package:mc_common_app/theme/colors.dart';
+import 'package:mc_common_app/utils/enums.dart';
+import 'package:mc_common_app/utils/navigator.dart';
+import 'package:mc_common_app/view_models/ad_view_model.dart';
+import 'package:mc_common_app/views/advertisement/ad_creation_steps_containers.dart';
+import 'package:mc_common_app/views/advertisement/create_ad_progress_steps.dart';
+import 'package:mc_common_app/widgets/button/show_fill_button.dart';
+import 'package:mc_common_app/widgets/common_widgets/app_bar.dart';
+import 'package:mc_common_app/widgets/extensions/extensions_widget.dart';
+import 'package:provider/provider.dart';
+
+class CreateAdView extends StatelessWidget {
+  const CreateAdView({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: const CustomAppBar(title: "Create Ad", isRemoveBackButton: false, isDrawerEnabled: false),
+      body: SingleChildScrollView(
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            const CreateAdProgressSteps(),
+            22.height,
+            Consumer(builder: (BuildContext context, AdVM adVm, Widget? child) {
+              return BuildAdStepContainer(
+                onVehicleDetails: (context) => const VehicleDetails(),
+                onDamageParts: (context) => const DamageParts(),
+                onAdDuration: (context) => const AdDuration(),
+                onReviewAd: (context) => const ReviewAd(),
+                adCreationStepsEnum: adVm.currentProgressStep,
+              );
+            }),
+            10.height,
+            const BuildFooterButton().horPaddingMain(),
+            10.height,
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class BuildFooterButton extends StatelessWidget {
+  const BuildFooterButton({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Consumer(
+      builder: (BuildContext context, AdVM adVm, Widget? child) {
+        switch (adVm.currentProgressStep) {
+          case AdCreationStepsEnum.vehicleDetails:
+            return SizedBox(
+              width: double.infinity,
+              child: ShowFillButton(
+                title: "Next",
+                onPressed: () {
+                  adVm.updateCurrentStep();
+                },
+              ),
+            );
+          case AdCreationStepsEnum.damageParts:
+            return Row(
+              children: [
+                Expanded(
+                  child: ShowFillButton(
+                    txtColor: MyColors.black,
+                    maxHeight: 55,
+                    title: "Cancel",
+                    onPressed: () {
+                      pop(context);
+                    },
+                    backgroundColor: MyColors.greyButtonColor,
+                  ),
+                ),
+                12.width,
+                Expanded(
+                  child: ShowFillButton(
+                    maxHeight: 55,
+                    title: "Next",
+                    onPressed: () {
+                      adVm.updateCurrentStep();
+                    },
+                    backgroundColor: MyColors.darkPrimaryColor,
+                  ),
+                ),
+              ],
+            );
+          case AdCreationStepsEnum.adDuration:
+            return Row(
+              children: [
+                Expanded(
+                  child: ShowFillButton(
+                    txtColor: MyColors.black,
+                    maxHeight: 55,
+                    title: "Cancel",
+                    onPressed: () {
+                      pop(context);
+                    },
+                    backgroundColor: MyColors.greyButtonColor,
+                  ),
+                ),
+                12.width,
+                Expanded(
+                  child: ShowFillButton(
+                    maxHeight: 55,
+                    title: "Next",
+                    onPressed: () {
+                      adVm.updateCurrentStep();
+                    },
+                    backgroundColor: MyColors.darkPrimaryColor,
+                  ),
+                ),
+              ],
+            );
+          case AdCreationStepsEnum.reviewAd:
+            return Row(
+              children: [
+                Expanded(
+                  child: ShowFillButton(
+                    txtColor: MyColors.black,
+                    maxHeight: 55,
+                    title: "Cancel",
+                    onPressed: () {
+                      pop(context);
+                    },
+                    backgroundColor: MyColors.greyButtonColor,
+                  ),
+                ),
+                12.width,
+                Expanded(
+                  child: ShowFillButton(
+                    maxHeight: 55,
+                    title: "Submit Ad",
+                    onPressed: () {},
+                    backgroundColor: MyColors.darkPrimaryColor,
+                  ),
+                ),
+              ],
+            );
+
+          default:
+            const SizedBox();
+        }
+        return const SizedBox();
+      },
+    );
+  }
+}
+
+class BuildAdStepContainer extends StatelessWidget {
+  final WidgetBuilder onVehicleDetails;
+  final WidgetBuilder onDamageParts;
+  final WidgetBuilder onAdDuration;
+  final WidgetBuilder onReviewAd;
+  final AdCreationStepsEnum adCreationStepsEnum;
+
+  const BuildAdStepContainer({
+    Key? key,
+    required this.onVehicleDetails,
+    required this.onDamageParts,
+    required this.onAdDuration,
+    required this.onReviewAd,
+    required this.adCreationStepsEnum,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    switch (adCreationStepsEnum) {
+      case AdCreationStepsEnum.vehicleDetails:
+        return onVehicleDetails(context);
+
+      case AdCreationStepsEnum.damageParts:
+        return onDamageParts(context);
+
+      case AdCreationStepsEnum.adDuration:
+        return onAdDuration(context);
+
+      case AdCreationStepsEnum.reviewAd:
+        return onReviewAd(context);
+    }
+  }
+}