diff --git a/shell-ui/babel.config.js b/shell-ui/babel.config.js
index 05ac9182f0..ab7d8e7383 100644
--- a/shell-ui/babel.config.js
+++ b/shell-ui/babel.config.js
@@ -1,16 +1,36 @@
-if (process.env.NODE_ENV === "test") {
+if (process.env.NODE_ENV === 'test') {
   module.exports = {
-    "presets": ["@babel/preset-env", "@babel/preset-flow", ["@babel/preset-react", {
-        "runtime": "automatic"
-      }]],
-      "plugins": ["@babel/plugin-transform-modules-commonjs"]
-  }
+    presets: [
+      '@babel/preset-env',
+      '@babel/preset-flow',
+      [
+        '@babel/preset-react',
+        {
+          runtime: 'automatic',
+        },
+      ],
+    ],
+    plugins: ['@babel/plugin-transform-modules-commonjs'],
+  };
 } else {
   module.exports = {
-    "presets": ["@babel/preset-env", "@babel/preset-flow", ["@babel/preset-react", {
-        "runtime": "automatic"
-      }]]
-  }
-  
+    plugins: [
+      [
+        'babel-plugin-styled-components',
+        {
+          namespace: 'shell-ui',
+        },
+      ]
+    ]
+    presets: [
+      '@babel/preset-env',
+      '@babel/preset-flow',
+      [
+        '@babel/preset-react',
+        {
+          runtime: 'automatic',
+        },
+      ],
+    ],
+  };
 }
-
diff --git a/shell-ui/package.json b/shell-ui/package.json
index b69e5c2ac9..714ca0de0d 100644
--- a/shell-ui/package.json
+++ b/shell-ui/package.json
@@ -20,6 +20,7 @@
     "@testing-library/user-event": "^13.0.10",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.2",
+    "babel-plugin-styled-components": "^1.12.0",
     "css-loader": "^5.0.1",
     "flow-bin": "^0.143.1",
     "html-webpack-plugin": "^4.5.1",