diff --git a/app/server/package-lock.json b/app/server/package-lock.json
index 271bf963..8ef3e0cb 100644
--- a/app/server/package-lock.json
+++ b/app/server/package-lock.json
@@ -1771,6 +1771,14 @@
         "esutils": "2.0.2"
       }
     },
+    "dom7": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.3.tgz",
+      "integrity": "sha512-QTxHHDox+M6ZFz1zHPAHZKI3JOHY5iY4i9BK2uctlggxKQwRhO3q3HHFq1BKsT25Bm/ySSj70K6Wk/G4bs9rMQ==",
+      "requires": {
+        "ssr-window": "1.0.1"
+      }
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -6280,6 +6288,11 @@
       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
       "dev": true
     },
+    "ssr-window": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-1.0.1.tgz",
+      "integrity": "sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg=="
+    },
     "ssri": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/ssri/-/ssri-5.3.0.tgz",
@@ -6422,6 +6435,15 @@
         "has-flag": "3.0.0"
       }
     },
+    "swiper": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-4.3.3.tgz",
+      "integrity": "sha512-hLjeei+E2EioFUBI4XzqUDkvZu9d6TAOWVFbrCXSrOhY9bzgXYC28dfMRHOs8IgU5WAZ7bbMR8lF706TzKf9nw==",
+      "requires": {
+        "dom7": "2.1.3",
+        "ssr-window": "1.0.1"
+      }
+    },
     "symbol-observable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.0.1.tgz",
diff --git a/app/server/package.json b/app/server/package.json
index eb77a8a5..f1febec2 100644
--- a/app/server/package.json
+++ b/app/server/package.json
@@ -14,6 +14,7 @@
     "axios": "^0.18.0",
     "chart.js": "^2.7.2",
     "marked": "^0.3.19",
+    "swiper": "^4.3.3",
     "vue": "^2.5.16",
     "vue-chartjs": "^3.4.0",
     "vue-debounce": "^1.1.0",
diff --git a/app/server/static/js/index.js b/app/server/static/js/index.js
new file mode 100644
index 00000000..d4d7ca11
--- /dev/null
+++ b/app/server/static/js/index.js
@@ -0,0 +1,14 @@
+import Swiper from 'swiper';
+
+new Swiper('.swiper-container', {
+  // Optional parameters
+  loop: true,
+  autoplay: {
+    delay: 5000,
+  },
+  // Navigation arrows
+  navigation: {
+    nextEl: '.swiper-button-next',
+    prevEl: '.swiper-button-prev',
+  },
+});
diff --git a/app/server/templates/index.html b/app/server/templates/index.html
index 4e2a342a..6c1ecd38 100644
--- a/app/server/templates/index.html
+++ b/app/server/templates/index.html
@@ -1,5 +1,6 @@
 {% extends "base.html" %}
 {% load static %}
+{% load render_bundle from webpack_loader %}
 
 {% block header %}
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.min.css">
@@ -215,19 +216,5 @@
 {% endblock %}
 
 {% block footer %}
-<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js"></script>
-<script>
-  new Swiper('.swiper-container', {
-    // Optional parameters
-    loop: true,
-    autoplay: {
-      delay: 5000,
-    },
-    // Navigation arrows
-    navigation: {
-      nextEl: '.swiper-button-next',
-      prevEl: '.swiper-button-prev',
-    },
-  })
-</script>
-{% endblock %}
\ No newline at end of file
+{% render_bundle 'index' 'js' %}
+{% endblock %}
diff --git a/app/server/webpack.config.js b/app/server/webpack.config.js
index a552747a..c59b01ea 100644
--- a/app/server/webpack.config.js
+++ b/app/server/webpack.config.js
@@ -8,6 +8,7 @@ const hotReload = process.env.HOT_RELOAD === '1';
 module.exports = {
     mode: devMode ? 'development' : 'production',
     entry: {
+        'index': './static/js/index.js',
         'sequence_labeling': './static/js/sequence_labeling.js',
         'document_classification': './static/js/document_classification.js',
         'seq2seq': './static/js/seq2seq.js',