diff --git a/catalog-rest-service/src/main/resources/ui/package-lock.json b/catalog-rest-service/src/main/resources/ui/package-lock.json
index c6669989f85..4d994670389 100644
--- a/catalog-rest-service/src/main/resources/ui/package-lock.json
+++ b/catalog-rest-service/src/main/resources/ui/package-lock.json
@@ -18494,6 +18494,25 @@
         }
       }
     },
+    "sass": {
+      "version": "1.39.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.39.0.tgz",
+      "integrity": "sha512-F4o+RhJkNOIG0b6QudYU8c78ZADKZjKDk5cyrf8XTKWfrgbtyVVXImFstJrc+1pkQDCggyidIOytq6gS4gCCZg==",
+      "dev": true,
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0"
+      }
+    },
+    "sass-loader": {
+      "version": "12.1.0",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.1.0.tgz",
+      "integrity": "sha512-FVJZ9kxVRYNZTIe2xhw93n3xJNYZADr+q69/s98l9nTCrWASo+DR2Ot0s5xTKQDDEosUkatsGeHxcH4QBp5bSg==",
+      "dev": true,
+      "requires": {
+        "klona": "^2.0.4",
+        "neo-async": "^2.6.2"
+      }
+    },
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
diff --git a/catalog-rest-service/src/main/resources/ui/package.json b/catalog-rest-service/src/main/resources/ui/package.json
index 1952d29fcbd..152cb9008e1 100644
--- a/catalog-rest-service/src/main/resources/ui/package.json
+++ b/catalog-rest-service/src/main/resources/ui/package.json
@@ -150,6 +150,8 @@
     "postcss-loader": "^6.1.0",
     "prettier": "^2.1.2",
     "react-test-renderer": "^16.14.0",
+    "sass": "^1.39.0",
+    "sass-loader": "^12.1.0",
     "style-loader": "0.23.1",
     "ts-jest": "^26.4.4",
     "ts-loader": "^8.0.14",
diff --git a/catalog-rest-service/src/main/resources/ui/webpack.config.dev.js b/catalog-rest-service/src/main/resources/ui/webpack.config.dev.js
index 193ebfe9b04..63611bb4de4 100644
--- a/catalog-rest-service/src/main/resources/ui/webpack.config.dev.js
+++ b/catalog-rest-service/src/main/resources/ui/webpack.config.dev.js
@@ -67,8 +67,19 @@ module.exports = {
       // .css and .scss files to be handled by sass-loader
       // include scss rule and sass-loader if injecting scss/sass file
       {
-        test: /\.(css)$/,
-        use: ['style-loader', 'css-loader', 'postcss-loader'],
+        test: /\.(css|s[ac]ss)$/,
+        use: [
+          'style-loader',
+          'css-loader',
+          {
+            loader: 'sass-loader',
+            options: {
+              // Prefer `dart-sass`
+              implementation: require.resolve('sass'),
+            },
+          },
+          'postcss-loader',
+        ],
         // No exclude, may need to handle files outside the source code
         // (from node_modules)
       },
@@ -78,19 +89,34 @@ module.exports = {
         use: ['@svgr/webpack'],
         exclude: /node_modules/, // Just the source code
       },
-      //
+      // different urls to be handled by url-loader
       {
-        test: /\.(png|jpg|jpeg|gif|svg|ico)$/i,
+        test: /\.(png|jpg|jpeg|gif|svg|ico|eot|woff|woff2)$/i,
         use: [
           {
             loader: 'url-loader',
             options: {
               limit: 8192,
+              name: `[name].[ext]`,
             },
           },
         ],
         exclude: /node_modules/, // Just the source code
       },
+      // different urls to be handled by url-loader in node_modules
+      {
+        test: /\.(png|jpg|jpeg|gif|svg|ico|eot|woff|woff2)$/i,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              limit: 8192,
+              name: `[name].[ext]`,
+            },
+          },
+        ],
+        include: /node_modules\/slick-carousel/, // Just slick-carousel from node_modules
+      },
       // Font files to be handled by file-loader
       {
         test: /\.ttf$/,
@@ -105,6 +131,20 @@ module.exports = {
         ],
         exclude: /node_modules/, // Just the source code
       },
+      // Font files to be handled by file-loader in node_modules
+      {
+        test: /\.ttf$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: '[name].[ext]',
+              outputPath: 'fonts/',
+            },
+          },
+        ],
+        include: /node_modules\/slick-carousel/, // Just slick-carousel from node_modules
+      },
     ],
   },
 
diff --git a/catalog-rest-service/src/main/resources/ui/webpack.config.prod.js b/catalog-rest-service/src/main/resources/ui/webpack.config.prod.js
index 4468c605f24..273cd5e4812 100644
--- a/catalog-rest-service/src/main/resources/ui/webpack.config.prod.js
+++ b/catalog-rest-service/src/main/resources/ui/webpack.config.prod.js
@@ -68,8 +68,19 @@ module.exports = {
       // .css and .scss files to be handled by sass-loader
       // include scss rule and sass-loader if injecting scss/sass file
       {
-        test: /\.(css)$/,
-        use: ['style-loader', 'css-loader', 'postcss-loader'],
+        test: /\.(css|s[ac]ss)$/,
+        use: [
+          'style-loader',
+          'css-loader',
+          {
+            loader: 'sass-loader',
+            options: {
+              // Prefer `dart-sass`
+              implementation: require.resolve('sass'),
+            },
+          },
+          'postcss-loader',
+        ],
         // No exclude, may need to handle files outside the source code
         // (from node_modules)
       },
@@ -79,19 +90,34 @@ module.exports = {
         use: ['@svgr/webpack'],
         exclude: /node_modules/, // Just the source code
       },
-      //
+      // different urls to be handled by url-loader
       {
-        test: /\.(png|jpg|jpeg|gif|svg|ico)$/i,
+        test: /\.(png|jpg|jpeg|gif|svg|ico|eot|woff|woff2)$/i,
         use: [
           {
             loader: 'url-loader',
             options: {
               limit: 8192,
+              name: `[name].[ext]`,
             },
           },
         ],
         exclude: /node_modules/, // Just the source code
       },
+      // different urls to be handled by url-loader in node_modules
+      {
+        test: /\.(png|jpg|jpeg|gif|svg|ico|eot|woff|woff2)$/i,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              limit: 8192,
+              name: `[name].[ext]`,
+            },
+          },
+        ],
+        include: /node_modules\/slick-carousel/, // Just slick-carousel from node_modules
+      },
       // Font files to be handled by file-loader
       {
         test: /\.ttf$/,
@@ -106,6 +132,20 @@ module.exports = {
         ],
         exclude: /node_modules/, // Just the source code
       },
+      // Font files to be handled by file-loader in node_modules
+      {
+        test: /\.ttf$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: '[name].[ext]',
+              outputPath: 'fonts/',
+            },
+          },
+        ],
+        include: /node_modules\/slick-carousel/, // Just slick-carousel from node_modules
+      },
     ],
   },