diff --git a/config/data/paragonUtils.js b/config/data/paragonUtils.js
index 26253997e..5498ce9ae 100644
--- a/config/data/paragonUtils.js
+++ b/config/data/paragonUtils.js
@@ -1,6 +1,17 @@
 const path = require('path');
 const fs = require('fs');
 
+/**
+ * Retrieves the name of the brand package from the dependencies in the application.
+ *
+ * @param {string} dir - The root path of the application.
+ * @returns {string | undefined} The name of the brand package, or undefined if not found.
+ */
+function getBrandPackageName(dir) {
+  const appDependencies = JSON.parse(fs.readFileSync(path.resolve(dir, 'package.json'), 'utf-8')).dependencies;
+  return Object.keys(appDependencies).find((key) => key.match(/@(open)?edx\/brand/));
+}
+
 /**
  * Attempts to extract the Paragon version from the `node_modules` of
  * the consuming application.
@@ -9,7 +20,7 @@ const fs = require('fs');
  * @returns {string} Paragon dependency version of the consuming application
  */
 function getParagonVersion(dir, { isBrandOverride = false } = {}) {
-  const npmPackageName = isBrandOverride ? '@openedx/brand' : '@openedx/paragon';
+  const npmPackageName = isBrandOverride ? getBrandPackageName(dir) : '@openedx/paragon';
   const pathToPackageJson = `${dir}/node_modules/${npmPackageName}/package.json`;
   if (!fs.existsSync(pathToPackageJson)) {
     return undefined;
@@ -44,7 +55,7 @@ function getParagonVersion(dir, { isBrandOverride = false } = {}) {
  * @returns {ParagonThemeCss}
  */
 function getParagonThemeCss(dir, { isBrandOverride = false } = {}) {
-  const npmPackageName = isBrandOverride ? '@openedx/brand' : '@openedx/paragon';
+  const npmPackageName = isBrandOverride ? getBrandPackageName(dir) : '@openedx/paragon';
   const pathToParagonThemeOutput = path.resolve(dir, 'node_modules', npmPackageName, 'dist', 'theme-urls.json');
 
   if (!fs.existsSync(pathToParagonThemeOutput)) {
diff --git a/config/webpack.common.config.js b/config/webpack.common.config.js
index 38f2152df..ab72d9136 100644
--- a/config/webpack.common.config.js
+++ b/config/webpack.common.config.js
@@ -25,8 +25,8 @@ module.exports = {
     /**
      * The entry points for the brand theme CSS. Example: ```
      * {
-     *   "paragon.theme.core": "/path/to/node_modules/@openedx/brand/dist/core.min.css",
-     *   "paragon.theme.variants.light": "/path/to/node_modules/@openedx/brand/dist/light.min.css"
+     *   "paragon.theme.core": "/path/to/node_modules/@(open)edx/brand/dist/core.min.css",
+     *   "paragon.theme.variants.light": "/path/to/node_modules/@(open)edx/brand/dist/light.min.css"
      * }
      */
     ...getParagonEntryPoints(brandThemeCss),
diff --git a/config/webpack.dev.config.js b/config/webpack.dev.config.js
index 4acb69dde..eb7eac230 100644
--- a/config/webpack.dev.config.js
+++ b/config/webpack.dev.config.js
@@ -109,7 +109,7 @@ module.exports = merge(commonConfig, {
         test: /(.scss|.css)$/,
         oneOf: [
           {
-            resource: /(@openedx\/paragon|@openedx\/brand)/,
+            resource: /(@openedx\/paragon|@(open)?edx\/brand)/,
             use: [
               MiniCssExtractPlugin.loader,
               ...getStyleUseConfig(),