diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
index 01b170a7338..41c635136f1 100644
--- a/.storybook/webpack.config.js
+++ b/.storybook/webpack.config.js
@@ -19,7 +19,10 @@ module.exports = async ({ config, mode }) => {
   })
   config.resolve.alias = {
     ...config.resolve.alias,
-    'brave-ui': path.resolve(__dirname, '../node_modules/brave-ui/src')
+    'brave-ui': path.resolve(__dirname, '../node_modules/brave-ui/src'),
+    // Force same styled-components module for brave-core and brave-ui
+    // which ensure both repos code use the same singletons, e.g. ThemeContext.
+    'styled-components': path.resolve(__dirname, '../node_modules/styled-components'),
   }
   config.resolve.extensions.push('.ts', '.tsx')
   return config
diff --git a/components/webpack/webpack.config.js b/components/webpack/webpack.config.js
index db910ae03d7..86ec1ad6842 100644
--- a/components/webpack/webpack.config.js
+++ b/components/webpack/webpack.config.js
@@ -16,7 +16,10 @@ module.exports = (env, argv) => ({
   resolve: {
     extensions: ['.js', '.tsx', '.ts', '.json'],
     alias: {
-      'brave-ui': path.resolve(__dirname, '../../node_modules/brave-ui/src')
+      'brave-ui': path.resolve(__dirname, '../../node_modules/brave-ui/src'),
+      // Force same styled-components module for brave-core and brave-ui
+      // which ensure both repos code use the same singletons, e.g. ThemeContext.
+      'styled-components': path.resolve(__dirname, '../../node_modules/styled-components'),
     },
     // For explanation of "chromeapp", see:
     // https://github.com/brave/brave-browser/issues/5587