diff --git a/packages/playwright-core/src/server/trace/viewer/traceViewer.ts b/packages/playwright-core/src/server/trace/viewer/traceViewer.ts
index a49148e061..11d446b042 100644
--- a/packages/playwright-core/src/server/trace/viewer/traceViewer.ts
+++ b/packages/playwright-core/src/server/trace/viewer/traceViewer.ts
@@ -125,7 +125,13 @@ export async function installRootRedirect(server: HttpServer, traceUrls: string[
   for (const reporter of options.reporter || [])
     params.append('reporter', reporter);
 
-  const urlPath  = `./trace/${options.webApp || 'index.html'}?${params.toString()}`;
+  let urlPath  = `./trace/${options.webApp || 'index.html'}?${params.toString()}`;
+
+  if (process.env.PW_WEB_DEV_SERVER) {
+    params.append('testServerPort', '' + server.port());
+    urlPath = `http://localhost:${process.env.PW_WEB_DEV_SERVER}/${options.webApp || 'index.html'}?${params.toString()}`;
+  }
+
   server.routePath('/', (_, response) => {
     response.statusCode = 302;
     response.setHeader('Location', urlPath);
diff --git a/packages/trace-viewer/src/ui/uiModeView.tsx b/packages/trace-viewer/src/ui/uiModeView.tsx
index 69a5988641..1345fd6951 100644
--- a/packages/trace-viewer/src/ui/uiModeView.tsx
+++ b/packages/trace-viewer/src/ui/uiModeView.tsx
@@ -48,8 +48,10 @@ const xtermDataSource: XtermDataSource = {
 
 const searchParams = new URLSearchParams(window.location.search);
 const guid = searchParams.get('ws');
+const testServerPort = searchParams.get('testServerPort') ?? window.location.port;
 const wsURL = new URL(`../${guid}`, window.location.toString());
 wsURL.protocol = (window.location.protocol === 'https:' ? 'wss:' : 'ws:');
+wsURL.port = testServerPort;
 const queryParams = {
   args: searchParams.getAll('arg'),
   grep: searchParams.get('grep') || undefined,
@@ -440,7 +442,7 @@ export const UIModeView: React.FC<{}> = ({
       sidebar={<div className='vbox ui-mode-sidebar'>
         <Toolbar noShadow={true} noMinHeight={true}>
           <img src='playwright-logo.svg' alt='Playwright logo' />
-          <div className='section-title'>Playwright</div>
+          <div className='section-title'>Claywright</div>
           <ToolbarButton icon='refresh' title='Reload' onClick={() => reloadTests()} disabled={isRunningTest || isLoading}></ToolbarButton>
           <div style={{ position: 'relative' }}>
             <ToolbarButton icon={'terminal'} title={'Toggle output — ' + (isMac ? '⌃`' : 'Ctrl + `')} toggled={isShowingOutput} onClick={() => { setIsShowingOutput(!isShowingOutput); }} />
diff --git a/packages/trace-viewer/vite.config.ts b/packages/trace-viewer/vite.config.ts
index 0e2e9cb642..541b1ab6b6 100644
--- a/packages/trace-viewer/vite.config.ts
+++ b/packages/trace-viewer/vite.config.ts
@@ -26,6 +26,9 @@ export default defineConfig({
     react(),
     bundle()
   ],
+  define: {
+    'process.env': {},
+  },
   resolve: {
     alias: {
       '@injected': path.resolve(__dirname, '../playwright-core/src/server/injected'),
diff --git a/utils/build/build.js b/utils/build/build.js
index 04bcc0c302..0f32f05df7 100644
--- a/utils/build/build.js
+++ b/utils/build/build.js
@@ -307,10 +307,10 @@ steps.push({
 });
 
 // web packages dev server
-if (watchMode) {
+if (process.env.PW_WEB_DEV_SERVER) {
   steps.push({
     command: 'npx',
-    args: ['vite', '--port', '5781'],
+    args: ['vite', '--port', process.env.PW_WEB_DEV_SERVER],
     shell: true,
     cwd: path.join(__dirname, '..', '..', 'packages', 'trace-viewer'),
     concurrent: true,