diff --git a/resources/assets/js/components/AkauntingCarousel.vue b/resources/assets/js/components/AkauntingCarousel.vue
new file mode 100644
index 000000000..3ed016682
--- /dev/null
+++ b/resources/assets/js/components/AkauntingCarousel.vue
@@ -0,0 +1,111 @@
+<template>
+    <div v-if="video || screenshots">
+        <el-carousel :height="height"
+            :initial-index="initial_index"
+            :trigger="trigger" :autoplay="autoplay"
+            :indicator-position="indicator_position"
+            :type="type" :loop="loop" :direction="direction"
+            :interval="interval" :arrow="arrow">
+
+            <el-carousel-item v-if="video">
+                <iframe width="100%" height="400px"
+                :src="'https://www.youtube-nocookie.com/embed/' + video"
+                frameborder="0"
+                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+                <div class="image-description text-center">
+                    {{ name }}
+                </div>
+            </el-carousel-item>
+
+            <el-carousel-item v-for="(screenshot, index) in screenshots" :key="index">
+                <img class="d-block w-100" :src="screenshot.path_string" :alt="screenshot.alt_attribute">
+                <div class="image-description text-center">
+                    {{ screenshot.description }}
+                </div>
+            </el-carousel-item>
+        </el-carousel>
+    </div>
+</template>
+
+<script>
+import {Image, Carousel, CarouselItem} from 'element-ui';
+
+export default {
+    name: "akaunting-carousel",
+
+    components: {
+        [Image.name]: Image,
+        [Carousel.name]: Carousel,
+        [CarouselItem.name]: CarouselItem,
+    },
+
+    props: {
+        name: {
+            type: String,
+            default: null,
+            description: "App Name"
+        },
+        video: {
+            type: String,
+            default: null,
+            description: "App Video"
+        },
+        screenshots: {
+            type: Array,
+            default: false,
+            description: "App Screenshots"
+        },
+
+        height: {
+            type: String,
+            default: null,
+            description: "height of the carousel"
+        },
+        initial_index: {
+            type: Number,
+            default: 1,
+            description: "index of the initially active slide (starting from 0)"
+        },
+        trigger: {
+            type: String,
+            default: 'hover',
+            description: "how indicators are triggered (hover/click)"
+        },
+        autoplay: {
+            type: Boolean,
+            default: false,
+            description: "whether automatically loop the slides"
+        },
+        interval: {
+            type: Number,
+            default: 3000,
+            description: "interval of the auto loop, in milliseconds"
+        },
+        indicator_position: {
+            type: String,
+            default: 'none',
+            description: "position of the indicators (outside/none)"
+        },
+        arrow: {
+            type: String,
+            default: 'hover',
+            description: "when arrows are shown (always/hover/never)"
+        },
+        type: {
+            type: String,
+            default: '',
+            description: "type of the Carousel (card)"
+        },
+        loop: {
+            type: Boolean,
+            default: true,
+            description: "display the items in loop"
+        },
+        direction: {
+            type: String,
+            default: 'horizontal',
+            description: "display direction (horizontal/vertical)"
+        }
+    }
+}
+</script>
diff --git a/resources/assets/js/views/modules/item.js b/resources/assets/js/views/modules/item.js
index 537769ec1..404dccdac 100644
--- a/resources/assets/js/views/modules/item.js
+++ b/resources/assets/js/views/modules/item.js
@@ -12,6 +12,8 @@ import Global from '../../mixins/global';
 
 import {Progress} from 'element-ui';
 
+import AkauntingCarousel from './../../components/AkauntingCarousel';
+
 Vue.use(Progress);
 
 const app = new Vue({
@@ -23,6 +25,7 @@ const app = new Vue({
 
     components: {
         [Progress.name]: Progress,
+        AkauntingCarousel
     },
 
     mounted() {
diff --git a/resources/views/modules/item/pre_sale.blade.php b/resources/views/modules/item/pre_sale.blade.php
index 1afe40314..73f63212d 100644
--- a/resources/views/modules/item/pre_sale.blade.php
+++ b/resources/views/modules/item/pre_sale.blade.php
@@ -3,7 +3,7 @@
 @section('title', trans_choice('general.modules', 2))
 
 @section('new_button')
-<span class="new-button">
+    <span class="new-button">
         <a href="{{ route('apps.api-key.create') }}" class="btn btn-white btn-sm header-button-top">
             <span class="fa fa-key"></span> &nbsp;{{ trans('modules.api_key') }}
         </a>
@@ -36,64 +36,25 @@
                             {!! $module->description !!}
 
                             @if($module->screenshots || $module->video)
-                                <div id="carousel-screenshot-generic" class="carousel slide" data-ride="carousel">
-                                    <div class="carousel-inner">
-                                        @if($module->video)
-                                            @php
-                                                if (strpos($module->video->link, '=') !== false) {
-                                                    $code = explode('=', $module->video->link);
-                                                    $code[1]= str_replace('&list', '', $code[1]);
-
-                                                    if (empty($status)) {
-                                                        $status = 5;
-                                                    } else {
-                                                        $status = 1;
-                                                    }
-                                            @endphp
-
-                                                <div class="item @if($status == 5) {{ 'active' }} @endif">
-                                                    <iframe width="100%" height="410px" src="https://www.youtube-nocookie.com/embed/{{ $code[1] }}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-
-                                                    <div class="image-description text-center">
-                                                        {{ $module->name }}
-                                                    </div>
-                                                </div>
-                                            @php } @endphp
-                                        @endif
-
-                                        @foreach($module->screenshots as $screenshot)
-                                            @php if (empty($status)) { $status = 5; } else { $status = 1; } @endphp
-                                            <div class="item @if($status == 5) {{ 'active' }} @endif">
-                                                <a href="{{ $screenshot->path_string }}" data-toggle="lightbox" data-gallery="{{ $module->slug}}">
-                                                    <img class="img-fluid d-block w-100" src="{{ $screenshot->path_string }}" alt="{{ $screenshot->alt_attribute }}">
-                                                </a>
-
-                                                <div class="image-description text-center">
-                                                    {{ $screenshot->description }}
-                                                </div>
-                                            </div>
-                                        @endforeach
-
-                                        <div class="carousel-navigation-message">
-                                            @if (($module->video && (count($module->screenshots) > 1)) || (!$module->video && (count($module->screenshots) > 1)))
-                                                <a href="#carousel-screenshot-generic" class="left carousel-control" role="button" data-slide="prev">
-                                                    <i class="fa fa-chevron-left"></i>
-                                                    <span class="sr-only">{{ trans('pagination.previous') }}</span>
-                                                </a>
-                                                <a href="#carousel-screenshot-generic" class="right carousel-control" role="button" data-slide="next">
-                                                    <i class="fa fa-chevron-right"></i>
-                                                    <span class="sr-only">{{ trans('pagination.next') }}</span>
-                                                </a>
-                                            @endif()
-                                        </div>
-                                    </div>
-                                </div>
+                               <akaunting-carousel :name="'{{ $module->name }}'" :height="'430px'"
+                                    @if($module->video)
+                                        @php
+                                            if (strpos($module->video->link, '=') !== false) {
+                                                $code = explode('=', $module->video->link);
+                                                $code[1]= str_replace('&list', '', $code[1]);
+                                            }
+                                        @endphp
+                                        :video="'{{ $code[1] }}'"
+                                    @endif
+                                    :screenshots="{{ json_encode($module->screenshots) }}">
+                                </akaunting-carousel>
                             @endif
                         </div>
                     </div>
                 </div>
             </div>
         </div>
+
         <div class="col-md-4">
             <h3>{{ trans_choice('general.actions', 1) }}</h3>
             <div class="card">
diff --git a/resources/views/modules/item/show.blade.php b/resources/views/modules/item/show.blade.php
index 5bf220c13..bb3edd678 100644
--- a/resources/views/modules/item/show.blade.php
+++ b/resources/views/modules/item/show.blade.php
@@ -82,43 +82,18 @@
                             {!! $module->description !!}
 
                             @if($module->screenshots || $module->video)
-                               <div class="carousel-inner">
-                                   <div class="carousel-item" data-ride="carousel">
-                                        @if($module->video)
-                                            @php
-                                                if (strpos($module->video->link, '=') !== false) {
-                                                    $code = explode('=', $module->video->link);
-                                                    $code[1]= str_replace('&list', '', $code[1]);
-
-                                                    if (empty($status)) {
-                                                        $status = 5;
-                                                    } else {
-                                                        $status = 1;
-                                                    }
-                                            @endphp
-                                            <div class="carousel-item @if($status == 5) {{ 'active' }} @endif">
-                                                <iframe width="100%" height="410px" src="https://www.youtube-nocookie.com/embed/{{ $code[1] }}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-                                                <div class="image-description text-center">
-                                                    {{ $module->name }}
-                                                </div>
-                                            </div>
-                                            @php } @endphp
-                                        @endif
-
-                                       @foreach($module->screenshots as $screenshot)
-                                           @php if (empty($status)) { $status = 5; } else { $status = 1; } @endphp
-                                           <div class="carousel-item @if($status == 5) {{ 'active' }} @endif">
-                                               <a href="{{ $screenshot->path_string }}" data-toggle="lightbox" data-gallery="{{ $module->slug}}">
-                                                   <img class="d-block w-100" src="{{ $screenshot->path_string }}" alt="{{ $screenshot->alt_attribute }}">
-                                               </a>
-
-                                               <div class="image-description text-center">
-                                                   {{ $screenshot->description }}
-                                               </div>
-                                           </div>
-                                       @endforeach
-                                   </div>
-                                </div>
+                               <akaunting-carousel :name="'{{ $module->name }}'" :height="'430px'"
+                                    @if($module->video)
+                                        @php
+                                            if (strpos($module->video->link, '=') !== false) {
+                                                $code = explode('=', $module->video->link);
+                                                $code[1]= str_replace('&list', '', $code[1]);
+                                            }
+                                        @endphp
+                                        :video="'{{ $code[1] }}'"
+                                    @endif
+                                    :screenshots="{{ json_encode($module->screenshots) }}">
+                                </akaunting-carousel>
                             @endif
                         </div>