diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4c77d6e2b5..3b7f925a07 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,7 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 ### Changed
 
 - Replace grommet Image and Grid component (#2518)
+- Optimized apps bundle (#2528)
 
 ## [4.9.0] - 2023-12-04
 
diff --git a/src/backend/marsha/core/templates/core/resource.html b/src/backend/marsha/core/templates/core/resource.html
index a03d3dd94d..a53feb9884 100644
--- a/src/backend/marsha/core/templates/core/resource.html
+++ b/src/backend/marsha/core/templates/core/resource.html
@@ -12,6 +12,7 @@
 
     <div id="marsha-frontend-root"></div>
     <script src='{% static "js/build/lti_site/index.js" %}'></script>
+    <link href='{% static "js/build/lti_site/main.css" %}' rel="stylesheet" />
     {% for external_script in external_javascript_scripts %}
       <script src="{{ external_script }}" ></script>
     {% endfor %}
diff --git a/src/backend/marsha/core/templates/core/site.html b/src/backend/marsha/core/templates/core/site.html
index b739588f9f..5c9cffea47 100644
--- a/src/backend/marsha/core/templates/core/site.html
+++ b/src/backend/marsha/core/templates/core/site.html
@@ -11,6 +11,7 @@
 
     <div id="marsha-frontend-root" style="height: 100%;"></div>
     <script src='{% static "js/build/lti_site/index.js" %}'></script>
+    <link href='{% static "js/build/lti_site/main.css" %}' rel="stylesheet" />
     {% for external_script in external_javascript_scripts %}
     <script src="{{ external_script }}"></script>
     {% endfor %}
diff --git a/src/backend/marsha/e2e/test_lti.py b/src/backend/marsha/e2e/test_lti.py
index 1b07ccdd72..12af1f8f73 100644
--- a/src/backend/marsha/e2e/test_lti.py
+++ b/src/backend/marsha/e2e/test_lti.py
@@ -673,11 +673,13 @@ def test_lti_video_play(page: Page, live_server: LiveServer, mock_video_cloud_st
         ).get("en-US")
 
     def check_xapi_played(request: Request):
-        """Check xapi played call."""
-        assert request.method == "POST"
-        assert (
-            request.post_data_json.get("verb").get("display").get("en-US") == "played"
-        )
+        # """Check xapi played call."""
+        if "/xapi/" in request.url:
+            assert request.method == "POST"
+            assert (
+                request.post_data_json.get("verb").get("display").get("en-US")
+                == "played"
+            )
 
     page.on("request", check_xapi_played)
 
diff --git a/src/frontend/apps/lti_site/package.json b/src/frontend/apps/lti_site/package.json
index d964b7711a..40e1fe8992 100644
--- a/src/frontend/apps/lti_site/package.json
+++ b/src/frontend/apps/lti_site/package.json
@@ -29,6 +29,7 @@
     "@babel/preset-env": "7.23.5",
     "@babel/preset-react": "7.23.3",
     "@babel/preset-typescript": "7.23.3",
+    "@faker-js/faker": "*",
     "@formatjs/cli": "6.2.4",
     "@testing-library/jest-dom": "*",
     "@testing-library/react": "*",
@@ -56,13 +57,13 @@
     "css-loader": "6.8.1",
     "eslint": "*",
     "eslint-config-marsha": "*",
-    "@faker-js/faker": "*",
     "fetch-mock": "9.11.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "jest-matchmedia-mock": "1.1.0",
     "jest-styled-components": "7.2.0",
     "lib-tests": "*",
+    "mini-css-extract-plugin": "2.7.6",
     "node-fetch": "2.6.7",
     "prettier": "*",
     "sass": "1.69.5",
diff --git a/src/frontend/apps/lti_site/webpack.config.js b/src/frontend/apps/lti_site/webpack.config.js
index ecec76a8f8..d21808cf78 100644
--- a/src/frontend/apps/lti_site/webpack.config.js
+++ b/src/frontend/apps/lti_site/webpack.config.js
@@ -1,6 +1,10 @@
 const TerserPlugin = require('terser-webpack-plugin');
 const webpack = require('webpack');
 const { alias } = require('marsha-config');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const outputDir =
+  __dirname + '/../../../backend/marsha/static/js/build/lti_site';
 
 module.exports = (_, argv) => {
   process.env.NODE_ENV = argv.mode || 'development';
@@ -27,7 +31,7 @@ module.exports = (_, argv) => {
     // is on AWS.
     output: {
       filename: 'index.js',
-      path: __dirname + '/../../../backend/marsha/static/js/build/lti_site',
+      path: outputDir,
       chunkFilename: '[id].[fullhash].index.js',
       clean: true,
     },
@@ -48,7 +52,19 @@ module.exports = (_, argv) => {
 
     module: {
       rules: [
-        { test: /\.css$/, use: ['style-loader', 'css-loader'] },
+        {
+          test: /\.css$/,
+          use: [
+            {
+              loader: MiniCssExtractPlugin.loader,
+              options: {
+                publicPath: outputDir,
+              },
+            },
+            'css-loader',
+          ],
+          sideEffects: true,
+        },
         {
           test: /\.(png|svg|jpg|jpeg|gif)$/i,
           type: 'asset/resource',
@@ -102,6 +118,7 @@ module.exports = (_, argv) => {
         Buffer: ['buffer', 'Buffer'],
         process: 'process/browser.js',
       }),
+      new MiniCssExtractPlugin(),
     ],
   };
 
diff --git a/src/frontend/yarn.lock b/src/frontend/yarn.lock
index a735d37e23..876d10f065 100644
--- a/src/frontend/yarn.lock
+++ b/src/frontend/yarn.lock
@@ -13204,6 +13204,13 @@ min-indent@^1.0.0:
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
+mini-css-extract-plugin@2.7.6:
+  version "2.7.6"
+  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.6.tgz#282a3d38863fddcd2e0c220aaed5b90bc156564d"
+  integrity sha512-Qk7HcgaPkGG6eD77mLvZS1nmxlao3j+9PkrT9Uc7HAE1id3F41+DdBRYRYkbyfNRGzm8/YWtzhw7nVPmwhqTQw==
+  dependencies:
+    schema-utils "^4.0.0"
+
 mini-css-extract-plugin@^2.4.5:
   version "2.7.2"
   resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.2.tgz#e049d3ea7d3e4e773aad585c6cb329ce0c7b72d7"