diff --git a/.gitattributes b/.gitattributes
index 7ed09c65c..465a6d1c9 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -5,7 +5,6 @@
 # https://blog.madewithlove.be/post/gitattributes/
 #
 /.github export-ignore
-/.storybook export-ignore
 /docs export-ignore
 /documentation export-ignore
 /package export-ignore
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 83bafe8d8..f8d5f8d4b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,15 @@ All notable changes to this project will be documented in this file.
 
 This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a CHANGELOG](https://keepachangelog.com/).
 
+## [12.1.0]
+
+### Changed
+- Webpack config to use swc for JS compilation.
+
+### Removed
+- Babel config folder as we are using swc now.
+- Webpack browser sync as it is not used anymore.
+
 ## [12.0.0]
 
 ### Changed
@@ -1066,6 +1075,7 @@ Follow this migration script in order for you project to work correctly with the
 
 [Unreleased]: https://github.com/infinum/eightshift-frontend-libs/compare/master...HEAD
 
+[12.1.0]: https://github.com/infinum/eightshift-frontend-libs/compare/12.0.0...12.1.0
 [12.0.0]: https://github.com/infinum/eightshift-frontend-libs/compare/11.0.1...12.0.0
 [11.0.1]: https://github.com/infinum/eightshift-frontend-libs/compare/11.0.0...11.0.1
 [11.0.0]: https://github.com/infinum/eightshift-frontend-libs/compare/10.0.0...11.0.0
diff --git a/babel.config.js b/babel.config.js
deleted file mode 100644
index d52d26c87..000000000
--- a/babel.config.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
-	extends: './babel/babel.config.js',
-};
diff --git a/babel/babel.config.js b/babel/babel.config.js
deleted file mode 100644
index 3f4c36852..000000000
--- a/babel/babel.config.js
+++ /dev/null
@@ -1,17 +0,0 @@
-module.exports = (api) => {
-	api.cache(true);
-
-	return {
-		presets: [
-			[
-				'@babel/preset-env',
-				{
-					useBuiltIns: 'usage',
-					corejs: '3',
-					modules: false,
-				},
-			],
-			['@babel/preset-react'],
-		],
-	};
-};
diff --git a/package.json b/package.json
index d5ee98f8b..753da8637 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@eightshift/frontend-libs",
-	"version": "12.0.0",
+	"version": "12.1.0",
 	"description": "A collection of useful frontend utility modules. powered by Eightshift",
 	"author": {
 		"name": "Eightshift team",
@@ -25,7 +25,7 @@
 	},
 	"scripts": {
 		"lintStyle": "stylelint **/*.scss",
-		"lintJs": "eslint blocks/ webpack/ scripts/ babel/ linters/",
+		"lintJs": "eslint blocks/ webpack/ scripts/ linters/",
 		"lint": "npm run lintJs && npm run lintStyle",
 		"prepare": "husky"
 	},
diff --git a/webpack/base.js b/webpack/base.js
index 156b476c3..ede5f847b 100644
--- a/webpack/base.js
+++ b/webpack/base.js
@@ -67,23 +67,20 @@ module.exports = (options) => {
 		rules: [],
 	};
 
-	// Module for JS and JSX.
+	// Module for JS and JSX.
 	if (!options.overrides.includes('js')) {
 		module.rules.push({
 			test: /\.(js|jsx)$/,
 			exclude: /node_modules[\\/](?!@eightshift)/,
 			use: [
 				{
-					loader: 'babel-loader',
-					options: {
-						cacheDirectory: true,
-					},
+					loader: 'swc-loader',
 				},
 			],
 		});
 	}
 
-	// Module for Images.
+	// Module for Images.
 	if (!options.overrides.includes('images')) {
 		module.rules.push({
 			test: /\.(png|svg|jpg|jpeg|gif|ico|webp)$/i,
@@ -92,16 +89,16 @@ module.exports = (options) => {
 		});
 	}
 
-	// Module for Fonts.
+	// Module for Fonts.
 	if (!options.overrides.includes('fonts')) {
 		module.rules.push({
-			test: /\.(eot|otf|ttf|woff|woff2)$/,
+			test: /\.(otf|ttf|woff2)$/,
 			exclude: [/images/, /node_modules/],
 			use: 'file-loader?name=[name].[ext]',
 		});
 	}
 
-	// Module for Scss.
+	// Module for Scss.
 	if (!options.overrides.includes('scss')) {
 		module.rules.push({
 			test: /\.scss$/,
diff --git a/webpack/development.js b/webpack/development.js
deleted file mode 100644
index 590052c3e..000000000
--- a/webpack/development.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Project Development config used only in development build.
- *
- */
-
-const BrowserSyncPlugin = require('browser-sync-v3-webpack-plugin');
-
-// Define developmentConfig setup.
-module.exports = (options) => {
-
-	// All Plugins used in development build.
-	const plugins = [];
-
-	// Use BrowserSync to see live preview of all changes.
-	if (!options.overrides.includes('browserSyncPlugin')) {
-		const syncConfig = {
-			host: 'localhost',
-			port: 3000,
-			proxy: `http://${options.config.proxyUrl}`,
-		};
-
-		if (options.config.useSsl) {
-			syncConfig.proxy = `https://${options.config.proxyUrl}`;
-			syncConfig.https = true;
-		}
-
-		plugins.push(new BrowserSyncPlugin(
-			syncConfig
-		));
-	}
-
-	return {
-		plugins,
-		devtool: false,
-	};
-};
diff --git a/webpack/helpers.js b/webpack/helpers.js
index 56e651e66..c8d8f38c6 100644
--- a/webpack/helpers.js
+++ b/webpack/helpers.js
@@ -10,35 +10,26 @@ const fs = require('fs');
  * Generate all paths required for Webpack build to work.
  *
  * @param {string} projectDir Current project directory absolute path.
- * @param {string} proxyUrl Used for providing browsersync functionality.
  * @param {string} projectPathConfig Project path relative to project root.
  * @param {string} assetsPathConfig Assets path after projectPath location.
  * @param {string} blocksAssetsPathConfig Path of the block assets.
  * @param {string} outputPathConfig Public output path after projectPath location.
  * @param {string} blocksManifestSettingsPath Main global settings manifest.json path after projectPath location.
- * @param {boolean} useSsl Change configuration if you have local ssl certificate, generally used only for BrowserSync.
  *
  */
 function getConfig(
 	projectDir,
-	proxyUrl,
 	projectPathConfig,
 	assetsPathConfig = 'assets',
 	blocksAssetsPathConfig = 'src/Blocks/assets',
 	outputPathConfig = 'public',
 	blocksManifestSettingsPath = 'src/Blocks/manifest.json',
-	useSsl = false,
 ) {
 
 	if (typeof projectDir === 'undefined') {
 		throw Error('projectDir parameter is empty, please provide. This key represents: Current project directory absolute path. For example: __dirname');
 	}
 
-	if (typeof proxyUrl === 'undefined') {
-		// eslint-disable-next-line max-len
-		throw Error('proxyUrl parameter is empty, please provide. This key represents: Development Url for providing browsersync functionality. For example: dev.boilerplate.com');
-	}
-
 	if (typeof projectPathConfig === 'undefined') {
 		// eslint-disable-next-line max-len
 		throw Error('projectPath parameter is empty, please provide. This key represents: Project path relative to project root. For example: wp-content/themes/eightshift-boilerplate');
@@ -55,7 +46,6 @@ function getConfig(
 	const absolutePath = `${projectDir}`;
 
 	return {
-		proxyUrl,
 		absolutePath,
 
 		// Output files absolute location.
@@ -72,8 +62,6 @@ function getConfig(
 		applicationBlocksFrontendEntry: path.resolve(absolutePath, blocksAssetsPathConfigClean, 'application-blocks-frontend.js'),
 
 		blocksManifestSettingsPath: path.resolve(absolutePath, blocksManifestSettingsPathClean),
-
-		useSsl,
 	};
 }
 
diff --git a/webpack/index.js b/webpack/index.js
index 1935f1934..fce522cc9 100644
--- a/webpack/index.js
+++ b/webpack/index.js
@@ -24,7 +24,6 @@ module.exports = (mode, optionsData = {}) => {
 		optionsData.config.blocksAssetsPath,
 		optionsData.config.outputPath,
 		optionsData.config.blocksManifestSettingsPath,
-		optionsData.config.useSsl,
 	);
 
 	options.config.mode = mode;
@@ -33,21 +32,18 @@ module.exports = (mode, optionsData = {}) => {
 	// Get all webpack partials.
 	const base = require('./base')(options);
 	const project = require('./project')(options);
-	const development = require('./development')(options);
 	const production = require('./production')(options);
 
 	// Default output that is going to be merged in any env.
 	const outputDefault = merge(project, base);
 
 	// Output development setup by default.
-	let output;
-
-	// Output production setup if mode is set inside package.json.
-	if (mode === 'production') {
-		output = merge(outputDefault, production);
-	} else {
-		output = merge(outputDefault, development);
-	}
+	const development = {
+		devtool: false,
+		watchOptions: {
+			ignored: '**/node_modules',
+		},
+	};
 
-	return output;
+	return merge(outputDefault, mode === 'production' ? production : development);
 };
diff --git a/webpack/production.js b/webpack/production.js
index c9fac31b4..02772f6ea 100644
--- a/webpack/production.js
+++ b/webpack/production.js
@@ -40,7 +40,10 @@ module.exports = (options) => {
 	if (!options.overrides.includes('cssMinimizerPlugin')) {
 		optimization.minimizer.push(new CssMinimizerPlugin({
 			parallel: true,
-			minify: CssMinimizerPlugin.cssoMinify,
+			minify: CssMinimizerPlugin.lightningCssMinify,
+			minimizerOptions: {
+				targets: lightningcss.browserslistToTargets(browserslist('>= 0.25%'))
+			},
 		}));
 	}