diff --git a/liquidity/ui/index.js b/liquidity/ui/index.js
new file mode 100644
index 000000000..0bde738aa
--- /dev/null
+++ b/liquidity/ui/index.js
@@ -0,0 +1,17 @@
+import { safeImport } from '@synthetixio/safe-import/safeImport';
+
+async function bootstrap() {
+  const { bootstrap } = await safeImport(() =>
+    import(/* webpackChunkName: "app" */ './src/index.tsx')
+  );
+  bootstrap();
+}
+
+bootstrap();
+
+if (module.hot) {
+  module.hot.accept();
+  module.hot.dispose(() => {
+    // do nothing
+  });
+}
diff --git a/liquidity/ui/src/index.tsx b/liquidity/ui/src/index.tsx
index 816b75137..7311f7929 100644
--- a/liquidity/ui/src/index.tsx
+++ b/liquidity/ui/src/index.tsx
@@ -3,7 +3,7 @@ import { App } from './App';
 import { preserveConnectedWallets, autoConnect } from '@snx-v3/useBlockchain';
 
 const container = document.querySelector('#app');
-async function run() {
+export async function bootstrap() {
   if (!container) {
     throw new Error('Container #app does not exist');
   }
@@ -48,4 +48,3 @@ async function run() {
   const root = ReactDOM.createRoot(container);
   root.render(<App />);
 }
-run();
diff --git a/liquidity/ui/webpack.config.js b/liquidity/ui/webpack.config.js
index 43f7a2279..0f8e39fe2 100644
--- a/liquidity/ui/webpack.config.js
+++ b/liquidity/ui/webpack.config.js
@@ -100,7 +100,7 @@ module.exports = {
   devtool: isTest ? false : 'source-map',
   devServer,
   mode: isProd ? 'production' : 'development',
-  entry: './src/index.tsx',
+  entry: './index.js',
 
   output: {
     path: path.resolve(__dirname, 'dist'),