diff --git a/lib/Froxlor/UI/Panel/FroxlorTwig.php b/lib/Froxlor/UI/Panel/FroxlorTwig.php
index 20c2d4e6..d2f49175 100644
--- a/lib/Froxlor/UI/Panel/FroxlorTwig.php
+++ b/lib/Froxlor/UI/Panel/FroxlorTwig.php
@@ -87,6 +87,10 @@ class FroxlorTwig extends AbstractExtension
 			new TwigFunction('linker', [
 				$this,
 				'getLink'
+			]),
+			new TwigFunction('mix', [
+				$this,
+				'getMix'
 			])
 		];
 	}
@@ -158,4 +162,9 @@ class FroxlorTwig extends AbstractExtension
 	{
 		return 'froxlortwig';
 	}
+
+	public function getMix($mix = '')
+	{
+		return mix($mix);
+	}
 }
diff --git a/lib/functions.php b/lib/functions.php
index bca5eb0e..4119bfa3 100644
--- a/lib/functions.php
+++ b/lib/functions.php
@@ -26,6 +26,14 @@
 use Froxlor\Language;
 use Froxlor\UI\Request;
 
+/**
+ * Render a template with the given data.
+ * Mostly used if we have no template-engine (twig).
+ *
+ * @param $template
+ * @param $attributes
+ * @return array|false|string|string[]
+ */
 function view($template, $attributes)
 {
 	$view = file_get_contents(dirname(__DIR__) . '/templates/' . $template);
@@ -33,11 +41,26 @@ function view($template, $attributes)
 	return str_replace(array_keys($attributes), array_values($attributes), $view);
 }
 
+/**
+ * Get the current translation for a given string.
+ *
+ * @param string $identifier
+ * @param array $arguments
+ * @return array|string
+ */
 function lng(string $identifier, array $arguments = [])
 {
 	return Language::getTranslation($identifier, $arguments);
 }
 
+/**
+ * Get the value of a request variable.
+ *
+ * @param string $identifier
+ * @param string|null $default
+ * @param string|null $session
+ * @return mixed|string|null
+ */
 function old(string $identifier, string $default = null, string $session = null)
 {
 	if ($session && isset($_SESSION[$session])) {
@@ -45,3 +68,26 @@ function old(string $identifier, string $default = null, string $session = null)
 	}
 	return Request::any($identifier, $default);
 }
+
+/**
+ * Loading the mix manifest file from given theme.
+ * This file contains the hashed filenames of the assets.
+ * It must be always placed in the theme assets folder.
+ *
+ * @param $filename
+ * @return mixed|string
+ */
+function mix($filename)
+{
+	if (preg_match('/templates\/(.+)\/assets\/(.+)\/(.+)/', $filename, $matches)) {
+		$mixManifest = dirname(__DIR__) . '/templates/' . $matches[1] . '/assets/mix-manifest.json';
+		if (file_exists($mixManifest)) {
+			$manifest = json_decode(file_get_contents($mixManifest), true);
+			$key = '/' . $matches[2] . '/' . $matches[3];
+			if ($manifest && !empty($manifest[$key])) {
+				$filename = 'templates/' . $matches[1] . '/assets' . $manifest[$key];
+			}
+		}
+	}
+	return $filename;
+}
diff --git a/lib/init.php b/lib/init.php
index 5bf42af6..16170a01 100644
--- a/lib/init.php
+++ b/lib/init.php
@@ -277,14 +277,14 @@ if (is_array($_themeoptions) && array_key_exists('js', $_themeoptions['variants'
 	if (is_array($_themeoptions['variants'][$themevariant]['js'])) {
 		foreach ($_themeoptions['variants'][$themevariant]['js'] as $jsfile) {
 			if (file_exists('templates/' . $theme . '/assets/js/' . $jsfile)) {
-				$js .= '<script type="text/javascript" src="templates/' . $theme . '/assets/js/' . $jsfile . '"></script>' . "\n";
+				$js .= '<script type="text/javascript" src="' . mix('templates/' . $theme . '/assets/js/' . $jsfile) . '"></script>' . "\n";
 			}
 		}
 	}
 	if (is_array($_themeoptions['variants'][$themevariant]['css'])) {
 		foreach ($_themeoptions['variants'][$themevariant]['css'] as $cssfile) {
 			if (file_exists('templates/' . $theme . '/assets/css/' . $cssfile)) {
-				$css .= '<link href="templates/' . $theme . '/assets/css/' . $cssfile . '" rel="stylesheet" type="text/css" />' . "\n";
+				$css .= '<link href="' . mix('templates/' . $theme . '/assets/css/' . $cssfile) . '" rel="stylesheet" type="text/css" />' . "\n";
 			}
 		}
 	}
diff --git a/templates/Froxlor/base.html.twig b/templates/Froxlor/base.html.twig
index 881184eb..f422d95d 100644
--- a/templates/Froxlor/base.html.twig
+++ b/templates/Froxlor/base.html.twig
@@ -11,7 +11,7 @@
 
 	<!-- CSS -->
 	{% if theme_css is empty %}
-		<link href="{{ basehref|default('') }}templates/Froxlor/assets/css/main.css" rel="stylesheet" type="text/css" />
+		<link href="{{ basehref|default('') }}{{ mix('templates/Froxlor/assets/css/main.css') }}" rel="stylesheet" type="text/css" />
 	{% else %}
 		{{ theme_css|raw }}
 	{% endif %}
@@ -19,7 +19,7 @@
 
 	<!-- Scripts -->
 	{% if theme_js is empty %}
-		<script type="text/javascript" src="{{ basehref|default('') }}templates/Froxlor/assets/js/main.js"></script>
+		<script type="text/javascript" src="{{ basehref|default('') }}{{ mix('templates/Froxlor/assets/js/main.js') }}"></script>
 	{% else %}
 		{{ theme_js|raw }}
 	{% endif %}
diff --git a/webpack.mix.js b/webpack.mix.js
index e865e93e..1fe43e44 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -10,4 +10,5 @@ mix
 	.copyDirectory('node_modules/@fortawesome/fontawesome-free/webfonts', 'templates/Froxlor/assets/webfonts')
 	.js('templates/Froxlor/src/js/main.js', 'js')
 	.sass('templates/Froxlor/src/scss/main.scss', 'css')
-	.sass('templates/Froxlor/src/scss/dark.scss', 'css');
+	.sass('templates/Froxlor/src/scss/dark.scss', 'css')
+	.version();