diff --git a/package.json b/package.json
index 7ffb9376b66453707b577fb97a401942d85cb543..b92b98dff2eb479b522a9b64f6f97c9629b9a0a6 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "start": "vite",
-    "build": "tsc && vite build",
+    "build": "tsc && vite build && vite build --config parent-vite.config.js",
     "preview": "vite preview"
   },
   "devDependencies": {
diff --git a/parent-vite.config.js b/parent-vite.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..bc6bcbf4f33cd1de857fe07d3e0433dc2d65a892
--- /dev/null
+++ b/parent-vite.config.js
@@ -0,0 +1,20 @@
+const { defineConfig } = require("vite")
+const { resolve } = require("path");
+import manifestJSON from "./target/manifest.json";
+
+const cssLink = manifestJSON["index.html"]["css"][0];
+module.exports = defineConfig({
+    build: {
+        rollupOptions: {
+            input: {
+                parent: resolve(__dirname, "index.html"),
+            },
+        },
+        outDir: "./target/parent",
+        target: 'esnext',
+        assetsInlineLimit: 0,
+    },
+    define: {
+        cssFileName: cssLink.replace(/assets\//, ""),
+    }
+});
diff --git a/src/parent-style.css b/src/parent-style.css
index 0bac34b0e12bb92f8547e24ead3407d0edb88384..6a295ac93fb585d2096254ddcf11ea6cd770752b 100644
--- a/src/parent-style.css
+++ b/src/parent-style.css
@@ -11,7 +11,7 @@
     width: 0;
 }
 
-@media (max-width: 800px)  {
+@media (max-width: 800px) {
     .chatterbox-iframe {
         bottom: 0;
         right: 0;
@@ -28,7 +28,7 @@
     width: 32px;
     height: 32px;
     border: none;
-    background: no-repeat center #295dbd;
+    background: no-repeat center url('./ui/res/chat-bubbles.svg'), #295dbd;
     border-radius: 2px;
     cursor: pointer;
 }
diff --git a/src/parent.ts b/src/parent.ts
index 40fc6811a38afdd5f4caa7eb9f50c2ec5d7d19d4..77d5b41db37d8c148567b1eb947bdaef1ba92d4a 100644
--- a/src/parent.ts
+++ b/src/parent.ts
@@ -1,7 +1,9 @@
-import startButtonIcon from "./ui/res/chat-bubbles.svg";
+import "./parent-style.css";
 
 let isIframeLoaded = false;
-const rootHost = (document.querySelector("#chatterbox-script") as HTMLScriptElement).src;
+const parentRootHost = (document.querySelector("#chatterbox-script") as HTMLScriptElement).src;
+const parentRootHostURL = new URL(parentRootHost);
+const rootHost = `${parentRootHostURL.protocol}${parentRootHostURL.host}`;
 
 const sizeCollection = {
     "desktop": {
@@ -37,8 +39,6 @@ function renderStartButton() {
     const button = document.createElement("button");
     button.className = "StartChat";
     button.onclick = () => isIframeLoaded? minimizeIframe() : loadChatterboxIframe();
-    const fixedStartButtonIcon = new URL(startButtonIcon, rootHost).href;
-    button.style.backgroundImage = `url(${fixedStartButtonIcon})`;
     container.appendChild(button);
     document.body.appendChild(container);
 }
@@ -46,8 +46,7 @@ function renderStartButton() {
 function loadCSS() {
     const linkElement = document.createElement("link") as HTMLLinkElement;
     linkElement.rel = "stylesheet";
-    const url = new URL("./parent-style.css", import.meta.url);
-    const urlFixed = new URL(url.pathname, rootHost);
+    const urlFixed = new URL("cssFileName", parentRootHost);
     linkElement.href = urlFixed.href;
     document.head.appendChild(linkElement);
 }
@@ -58,7 +57,7 @@ function loadChatterboxIframe() {
     if (!configLocation) {
         throw new Error("CONFIG_LOCATION is not set");
     }
-    iframe.src = new URL("../chatterbox.html?config=" + configLocation, import.meta.url).href;
+    iframe.src = new URL("../chatterbox.html?config=" + configLocation, rootHost).href;
     iframe.className = "chatterbox-iframe";
     document.body.appendChild(iframe);
     isIframeLoaded = true;
diff --git a/vite.config.js b/vite.config.js
index d93f3ba5b77a299a1e539b2de5b8720ba01c03aa..b3b82b3dd032856ba0c4b1e5cdbec3fcbe293bea 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,16 +1,29 @@
-const { defineConfig } = require("vite")
+const { defineConfig } = require("vite");
 const { resolve } = require("path");
 
-module.exports = defineConfig({
-    build: {
-        rollupOptions: {
-            input: {
-                main: resolve(__dirname, "chatterbox.html"),
-                parent: resolve(__dirname, "index.html"),
+module.exports = defineConfig(({ command }) => {
+    if (command === "serve") {
+        return {
+            // dev specific config
+            define: {
+                cssFileName: JSON.stringify("parent-style.css"),
             },
-        },
-        outDir: "./target",
-        target: 'esnext',
-        assetsInlineLimit: 0,
+        };
+    } else {
+        return {
+            // build specific config
+            build: {
+                rollupOptions: {
+                    input: {
+                        main: resolve(__dirname, "chatterbox.html"),
+                        parent: resolve(__dirname, "index.html"),
+                    },
+                },
+                outDir: "./target",
+                target: "esnext",
+                assetsInlineLimit: 0,
+                manifest: true,
+            },
+        };
     }
 });