diff --git a/src/ui/readme.md b/src/ui/readme.md
index 2ad823d..b50d5a5 100644
--- a/src/ui/readme.md
+++ b/src/ui/readme.md
@@ -46,7 +46,7 @@ the two primary pieces of the interface:
 
 `render-preview-frame.mjs` relies on `renderFrames` from `../render-scene.mjs`, which serves as the source of truth for generating left and right frame buffers. `CanvasPreview.js` invokes this helper on each animation tick to populate the canvases.
 
-The UI is bundled with Webpack, treating this directory as the source and writing output to `dist/`.
+The UI is bundled with Webpack, treating this directory as the source and writing output to `dist/`. `HtmlWebpackPlugin` copies `index.html` into this folder so the server can serve it alongside the compiled bundle.
 The generated `index.html` references the compiled bundle with `<script src="/bundle.js"></script>`.
 
 ## File extensions mix
diff --git a/webpack.config.js b/webpack.config.js
index bf4bb04..09402cb 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -3,15 +3,17 @@ import HtmlWebpackPlugin from 'html-webpack-plugin';
 import { fileURLToPath } from 'url';
 
 const currentDirectory = dirname(fileURLToPath(import.meta.url));
+// Build paths used throughout the UI bundling process
+const uiSourceDirectory = resolve(currentDirectory, 'src/ui');
 
 export default {
-  context: resolve(currentDirectory, 'src/ui'),
+  context: uiSourceDirectory,
   // main.js mounts the React app; layout-service.js handles layout fetching
   // and runtime helpers that were previously in main.mjs.
   entry: './main.js',
   output: {
     filename: 'bundle.js',
-    path: resolve(currentDirectory, 'src/ui/dist'),
+    path: resolve(uiSourceDirectory, 'dist'),
     publicPath: '/',
     clean: true
   },
@@ -34,7 +36,7 @@ export default {
   },
   plugins: [
     new HtmlWebpackPlugin({
-      template: resolve(currentDirectory, 'src/ui/index.html'),
+      template: resolve(uiSourceDirectory, 'index.html'),
       scriptLoading: 'blocking'
     })
   ]