diff --git a/apps/OpenSign/src/script/PublicTemplate.js b/apps/OpenSign/src/script/PublicTemplate.js
index 54f48d0ef..e59fa1416 100644
--- a/apps/OpenSign/src/script/PublicTemplate.js
+++ b/apps/OpenSign/src/script/PublicTemplate.js
@@ -37,6 +37,12 @@ link.href = "https://staging-app.opensignlabs.com/css/fonts.css";
 link.rel = "stylesheet";
 document.head.appendChild(link);
 
+//add the Tailwind CSS file
+const tailwindCssLink = document.createElement("link");
+tailwindCssLink.href =
+  "https://staging-app.opensignlabs.com/static/js/public-template.bundle.css"; // Replace with actual file path
+tailwindCssLink.rel = "stylesheet";
+document.head.appendChild(tailwindCssLink);
 // Create a root and render the wrapper component with initial props
 const root = ReactDOM.createRoot(document.getElementById("script-component"));
 root.render(
diff --git a/apps/OpenSign/tailwind.config.js b/apps/OpenSign/tailwind.config.js
index 0f8b78ae0..b92bfdf6c 100644
--- a/apps/OpenSign/tailwind.config.js
+++ b/apps/OpenSign/tailwind.config.js
@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
+  content: ["./src/**/*.{js,jsx,ts,tsx}", "./src/script/PublicTemplate.js"],
   theme: {
     extend: {}
   },
diff --git a/apps/OpenSign/webpack.config.js b/apps/OpenSign/webpack.config.js
index eab465dcd..54967737e 100644
--- a/apps/OpenSign/webpack.config.js
+++ b/apps/OpenSign/webpack.config.js
@@ -58,7 +58,7 @@ module.exports = {
     ...(isProduction
       ? [
           new MiniCssExtractPlugin({
-            filename: "[name].[contenthash].css"
+            filename: "public-template.bundle.css"
           })
         ]
       : [])