diff --git a/src/.vuepress/components/Carousel.vue b/src/.vuepress/components/Carousel.vue
new file mode 100644
index 00000000..6bdfe651
--- /dev/null
+++ b/src/.vuepress/components/Carousel.vue
@@ -0,0 +1,46 @@
+<template>
+	<div class="carousel-root">
+		<div class="carousel" v-bind:id="name">
+			<slot />
+		</div>
+		<script>
+			var config = {{ config }};
+			new Flickity("#{{ name }}", config)
+		</script>
+	</div>
+</template>
+
+<script>
+export default {
+	props: {
+		name: {
+		type: String,
+		required: true
+	},
+	config: {
+		type: Object,
+		default: function () {
+			return {
+				adaptiveHeight: true,
+				wrapAround: true,
+				pageDots: false
+			}
+		}
+	}
+	}
+}
+</script>
+
+<style>
+.carousel {
+	background: #F0F4F8;
+	border-radius: 1em;
+}
+
+.flickity-button {
+	position: absolute;
+	background: hsla(0,0%,100%,.75);
+	border: none;
+	color: rgba(44, 62, 80);
+}
+</style>
diff --git a/src/.vuepress/components/CarouselItem.vue b/src/.vuepress/components/CarouselItem.vue
new file mode 100644
index 00000000..65f3b38c
--- /dev/null
+++ b/src/.vuepress/components/CarouselItem.vue
@@ -0,0 +1,25 @@
+<template>
+	<div class="carousel-cell" v-bind:id="name">
+		<slot />
+	</div>
+</template>
+
+<script>
+export default {
+	name: "carousel-item",
+	props: {
+		name: {
+			type: String,
+			default: "carousel-cell"
+		}
+	}
+}
+</script>
+
+<style>
+.carousel-cell {
+	width: 100%;
+	margin-right: 16px;
+	margin-left: 16px;
+}
+</style>
diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js
index 89184f0b..188b8cdb 100644
--- a/src/.vuepress/config.js
+++ b/src/.vuepress/config.js
@@ -5,7 +5,6 @@ module.exports = {
 	head: [
 		['script', { src: 'https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js'} , ''],
 		['link', { rel: "stylesheet", type: "text/css", href: 'https://unpkg.com/flickity@2/dist/flickity.min.css'} , ''],
-		['link', { rel: "stylesheet", type: "text/css", href: '/assets/css/carousel.css'} , '']
 	],
 	themeConfig: {
 		repo: 'inorichi/tachiyomi',
diff --git a/src/.vuepress/public/assets/css/carousel.css b/src/.vuepress/public/assets/css/carousel.css
deleted file mode 100644
index 2ee539a1..00000000
--- a/src/.vuepress/public/assets/css/carousel.css
+++ /dev/null
@@ -1,17 +0,0 @@
-.carousel {
-    background: #F0F4F8;
-    border-radius: 1em;
-}
-  
-.carousel-cell {
-    width: 100%; /* full width */
-    margin-right: 16px;
-    margin-left: 16px;
-}
-
-.flickity-button {
-    position: absolute;
-    background: hsla(0,0%,100%,.75);
-    border: none;
-    color: rgba(44, 62, 80);
-}
\ No newline at end of file