diff --git a/Modules/Article/Resources/views/backend/categories/edit.blade.php b/Modules/Article/Resources/views/backend/categories/edit.blade.php
index 0af01c22e..1206671f5 100644
--- a/Modules/Article/Resources/views/backend/categories/edit.blade.php
+++ b/Modules/Article/Resources/views/backend/categories/edit.blade.php
@@ -46,6 +46,7 @@
                             @can('delete_'.$module_name)
                             <a href="{{route("backend.$module_name.destroy", $$module_name_singular)}}" class="btn btn-danger" data-method="DELETE" data-token="{{csrf_token()}}" data-toggle="tooltip" title="{{__('labels.backend.delete')}}"><i class="fas fa-trash-alt"></i></a>
                             @endcan
+                            <x-backend.buttons.cancel />
                             <a href="{{ route("backend.$module_name.index") }}" class="btn btn-warning" data-toggle="tooltip" title="{{__('labels.backend.cancel')}}"><i class="fas fa-reply"></i> Cancel</a>
                         </div>
                     </div>
diff --git a/Modules/Article/Resources/views/backend/posts/form.blade.php b/Modules/Article/Resources/views/backend/posts/form.blade.php
index a415e7dc7..3ce3845b4 100644
--- a/Modules/Article/Resources/views/backend/posts/form.blade.php
+++ b/Modules/Article/Resources/views/backend/posts/form.blade.php
@@ -167,7 +167,7 @@
             ];
             ?>
             {{ html()->label($field_lable, $field_name) }} {!! fielf_required($required) !!}
-            {{ html()->select($field_name, $select_options)->placeholder($field_placeholder)->class('form-control select2')->attributes(["$required"]) }}
+            {{ html()->select($field_name, $select_options)->placeholder($field_placeholder)->class('form-select')->attributes(["$required"]) }}
         </div>
     </div>
     <div class="col-6">
@@ -176,15 +176,10 @@
             $field_name = 'published_at';
             $field_lable = __("article::$module_name.$field_name");
             $field_placeholder = $field_lable;
-            $required = "";
+            $required = "required";
             ?>
             {{ html()->label($field_lable, $field_name) }} {!! fielf_required($required) !!}
-            <div class="input-group date datetime" id="{{$field_name}}" data-target-input="nearest">
-                {{ html()->text($field_name)->placeholder($field_placeholder)->class('form-control datetimepicker-input')->attributes(["$required", 'data-target'=>"#$field_name"]) }}
-                <div class="input-group-append" data-target="#{{$field_name}}" data-toggle="datetimepicker">
-                    <span class="input-group-text">&nbsp;<i class="fas fa-calendar-alt"></i>&nbsp;</span>
-                </div>
-            </div>
+            {{ html()->datetime($field_name)->placeholder($field_placeholder)->class('form-control')->attributes(["$required"]) }}
         </div>
     </div>
 </div>
@@ -269,7 +264,6 @@
 
 <!-- Select2 Library -->
 <x-library.select2 />
-<x-library.datetime-picker />
 
 @push('after-styles')
 <!-- File Manager -->
@@ -393,13 +387,5 @@
             }
         });
     });
-
-    // Date Time Picker
-    $('.datetime').tempusDominus({
-        localization: {
-            locale: 'en',
-            format: 'yyyy-MM-dd HH:mm:ss'
-        }
-    });
 </script>
 @endpush
\ No newline at end of file
diff --git a/resources/views/backend/users/profileEdit.blade.php b/resources/views/backend/users/profileEdit.blade.php
index 7ae8f5e27..37fc080c2 100644
--- a/resources/views/backend/users/profileEdit.blade.php
+++ b/resources/views/backend/users/profileEdit.blade.php
@@ -31,7 +31,7 @@
 
         <hr>
 
-        <div class="row mt-4 mb-4">
+        <div class="row mt-4">
             <div class="col">
                 {{ html()->modelForm($userprofile, 'PATCH', route('backend.users.profileUpdate', $$module_name_singular->id))->class('form-horizontal')->attributes(['enctype'=>"multipart/form-data"])->open() }}
                 <div class="form-group row">
@@ -47,7 +47,7 @@
                 <!--form-group-->
 
                 <div class="row">
-                    <div class="col-12 col-md-6">
+                    <div class="col-12 col-sm-6 mb-3">
                         <div class="form-group">
                             <?php
                             $field_name = 'first_name';
@@ -59,7 +59,7 @@
                             {{ html()->text($field_name)->placeholder($field_placeholder)->class('form-control')->attributes(["$required"]) }}
                         </div>
                     </div>
-                    <div class="col-12 col-md-6">
+                    <div class="col-12 col-sm-6 mb-3">
                         <div class="form-group">
                             <?php
                             $field_name = 'last_name';
@@ -71,7 +71,7 @@
                             {{ html()->text($field_name)->placeholder($field_placeholder)->class('form-control')->attributes(["$required"]) }}
                         </div>
                     </div>
-                    <div class="col-12 col-md-6">
+                    <div class="col-12 col-sm-6 mb-3">
                         <div class="form-group">
                             <?php
                             $field_name = 'email';
@@ -83,7 +83,7 @@
                             {{ html()->email($field_name)->placeholder($field_placeholder)->class('form-control')->attributes(["$required"])->disabled() }}
                         </div>
                     </div>
-                    <div class="col-12 col-md-6">
+                    <div class="col-12 col-sm-6 mb-3">
                         <div class="form-group">
                             <?php
                             $field_name = 'mobile';
@@ -99,7 +99,7 @@
 
                 <div class="row">
 
-                    <div class="col-12 col-sm-6">
+                    <div class="col-12 col-sm-6 mb-3">
                         <div class="form-group">
                             <?php
                             $field_name = 'gender';
@@ -113,11 +113,11 @@
                             ];
                             ?>
                             {{ html()->label($field_lable, $field_name)->class('form-label') }} {!! fielf_required($required) !!}
-                            {{ html()->select($field_name, $select_options)->placeholder($field_placeholder)->class('form-control select2')->attributes(["$required"]) }}
+                            {{ html()->select($field_name, $select_options)->placeholder($field_placeholder)->class('form-select')->attributes(["$required"]) }}
                         </div>
                     </div>
 
-                    <div class="col-12 col-sm-6">
+                    <div class="col-12 col-sm-6 mb-3">
                         <div class="form-group">
                             <?php
                             $field_name = 'date_of_birth';
@@ -126,18 +126,13 @@
                             $required = "";
                             ?>
                             {{ html()->label($field_lable, $field_name)->class('form-label') }} {!! fielf_required($required) !!}
-                            <div class="input-group date datetime" id="{{$field_name}}" data-target-input="nearest">
-                                {{ html()->text($field_name)->placeholder($field_placeholder)->class('form-control datetimepicker-input')->attributes(["$required", 'data-target'=>"#$field_name"]) }}
-                                <div class="input-group-append" data-target="#{{$field_name}}" data-toggle="datetimepicker">
-                                    <div class="input-group-text"><i class="fas fa-calendar-alt"></i></div>
-                                </div>
-                            </div>
+                            {{ html()->date($field_name)->placeholder($field_placeholder)->class('form-control')->attributes(["$required"]) }}
                         </div>
                     </div>
                 </div>
 
                 <div class="row">
-                    <div class="col-12 col-md-6">
+                    <div class="col-12 col-sm-6 mb-3">
                         <div class="form-group">
                             <?php
                             $field_name = 'address';
@@ -149,7 +144,7 @@
                             {{ html()->textarea($field_name)->placeholder($field_placeholder)->class('form-control')->attributes(["$required"]) }}
                         </div>
                     </div>
-                    <div class="col-12 col-md-6">
+                    <div class="col-12 col-sm-6 mb-3">
                         <div class="form-group">
                             <?php
                             $field_name = 'bio';
@@ -163,7 +158,7 @@
                     </div>
                 </div>
                 <div class="row">
-                    <div class="col-12">
+                    <div class="col-12 mb-3">
                         <div class="form-group">
                             <?php
                             $field_name = 'url_website';
@@ -175,7 +170,7 @@
                             {{ html()->text($field_name)->placeholder($field_placeholder)->class('form-control')->attributes(["$required"]) }}
                         </div>
                     </div>
-                    <div class="col-12 col-md-3">
+                    <div class="col-12 col-sm-3 mb-3">
                         <div class="form-group">
                             <?php
                             $field_name = 'url_facebook';
@@ -187,7 +182,7 @@
                             {{ html()->text($field_name)->placeholder($field_placeholder)->class('form-control')->attributes(["$required"]) }}
                         </div>
                     </div>
-                    <div class="col-12 col-md-3">
+                    <div class="col-12 col-sm-3 mb-3">
                         <div class="form-group">
                             <?php
                             $field_name = 'url_instagram';
@@ -199,7 +194,7 @@
                             {{ html()->text($field_name)->placeholder($field_placeholder)->class('form-control')->attributes(["$required"]) }}
                         </div>
                     </div>
-                    <div class="col-12 col-md-3">
+                    <div class="col-12 col-sm-3 mb-3">
                         <div class="form-group">
                             <?php
                             $field_name = 'url_twitter';
@@ -211,7 +206,7 @@
                             {{ html()->text($field_name)->placeholder($field_placeholder)->class('form-control')->attributes(["$required"]) }}
                         </div>
                     </div>
-                    <div class="col-12 col-md-3">
+                    <div class="col-12 col-sm-3 mb-3">
                         <div class="form-group">
                             <?php
                             $field_name = 'url_linkedin';
@@ -224,12 +219,12 @@
                         </div>
                     </div>
                 </div>
-
-                <div class="row">
-                    <div class="col">
-                        <div class="form-group">
-                            {{ html()->submit($text = icon('fas fa-save')." Save")->class('btn btn-success') }}
-                        </div>
+                <div class="row mt-4">
+                    <div class="col-6">
+                        <x-backend.buttons.save />
+                    </div>
+                    <div class="col-6 text-end">
+                        <x-backend.buttons.cancel />
                     </div>
                 </div>
                 {{ html()->closeModelForm() }}
@@ -249,54 +244,4 @@
         </div>
     </div>
 </div>
-
 @endsection
-
-
-
-@push('after-styles')
-
-<!-- Select2 Bootstrap 4 Core UI -->
-<link href="{{ asset('vendor/select2/select2-coreui-bootstrap4.min.css') }}" rel="stylesheet" />
-
-<!-- Date Time Picker -->
-<link rel="stylesheet" href="{{ asset('vendor/bootstrap-4-datetime-picker/css/tempusdominus-bootstrap-4.min.css') }}" />
-
-@endpush
-
-@push ('after-scripts')
-<!-- Select2 Bootstrap 4 Core UI -->
-<script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
-<script type="module">
-    $(document).ready(function() {
-        $('.select2').select2({
-            theme: "bootstrap",
-            placeholder: "-- Select an option --",
-            allowClear: true,
-        });
-    });
-</script>
-
-<!-- Date Time Picker & Moment Js-->
-<script type="module" src="{{ asset('vendor/moment/moment.min.js') }}"></script>
-<script type="module" src="{{ asset('vendor/bootstrap-4-datetime-picker/js/tempusdominus-bootstrap-4.min.js') }}"></script>
-
-<script type="module">
-    $(function() {
-        $('.datetime').datetimepicker({
-            format: 'YYYY-MM-DD',
-            icons: {
-                time: 'far fa-clock',
-                date: 'far fa-calendar-alt',
-                up: 'fas fa-arrow-up',
-                down: 'fas fa-arrow-down',
-                previous: 'fas fa-chevron-left',
-                next: 'fas fa-chevron-right',
-                today: 'far fa-calendar-check',
-                clear: 'far fa-trash-alt',
-                close: 'fas fa-times'
-            }
-        });
-    });
-</script>
-@endpush
\ No newline at end of file
diff --git a/resources/views/components/library/datetime-picker.blade.php b/resources/views/components/library/datetime-picker.blade.php
deleted file mode 100644
index 8515953e4..000000000
--- a/resources/views/components/library/datetime-picker.blade.php
+++ /dev/null
@@ -1,11 +0,0 @@
-@push('after-styles')
-<!-- Tempus Dominus Date Time Picker -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.4.1/dist/css/tempus-dominus.min.css" crossorigin="anonymous">
-@endpush
-
-@push('after-scripts')
-<!-- Date Time Picker -->
-<script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.6/umd/popper.min.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.4.1/dist/js/tempus-dominus.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.4.1/dist/js/jQuery-provider.js"></script>
-@endpush
\ No newline at end of file