diff --git a/@codexteam/ui/README.md b/@codexteam/ui/README.md
index a2cc8174..67fb9308 100644
--- a/@codexteam/ui/README.md
+++ b/@codexteam/ui/README.md
@@ -47,6 +47,9 @@ import '@codexteam/ui/styles/themes/grass';
 
 **Available themes:** `graphite`, `crimson`, `red`, `violet`, `grass`, `amber`, `pure`, `sky`
 
+> **Note:** the **red** theme is included to the library out of the box since it is used for destructive-action styles.
+> You don't need to import **@codexteam/ui/styles/themes/red** manually in your app.
+
 ### 4. Import Components (Tree-shakeable)
 
 ```typescript
diff --git a/@codexteam/ui/package.json b/@codexteam/ui/package.json
index ed95f246..b8672454 100644
--- a/@codexteam/ui/package.json
+++ b/@codexteam/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@codexteam/ui",
-  "version": "0.2.0-rc.4",
+  "version": "0.2.1",
   "type": "module",
   "sideEffects": [
     "*.css",
@@ -36,9 +36,6 @@
     "./styles/themes/crimson": {
       "import": "./dist/styles/themes/crimson.css"
     },
-    "./styles/themes/red": {
-      "import": "./dist/styles/themes/red.css"
-    },
     "./styles/themes/violet": {
       "import": "./dist/styles/themes/violet.css"
     },
diff --git a/@codexteam/ui/src/styles/index.pcss b/@codexteam/ui/src/styles/index.pcss
index 70369e9a..d57ad4db 100644
--- a/@codexteam/ui/src/styles/index.pcss
+++ b/@codexteam/ui/src/styles/index.pcss
@@ -2,3 +2,7 @@
 @import './typography.pcss';
 @import './mixins.pcss';
 @import './z-axis.pcss';
+/**
+ * Import 'red' theme by default since it is used for desctructive-action styles
+ */
+@import './themes/red.pcss';
diff --git a/@codexteam/ui/src/vue/components/button/Button.vue b/@codexteam/ui/src/vue/components/button/Button.vue
index 82e88d02..43e86cac 100644
--- a/@codexteam/ui/src/vue/components/button/Button.vue
+++ b/@codexteam/ui/src/vue/components/button/Button.vue
@@ -2,8 +2,8 @@
   <button
     :class="[
       $style.button,
-      `${$style.button}--${style}`,
-      iconType !== 'none' && `${$style.button}--icon-${iconType}`,
+      $style[`button--${style}`],
+      iconType !== 'none' && $style[`button--icon-${iconType}`],
 
       'text-ui-base-medium',
     ]"
diff --git a/@codexteam/ui/vite.config.ts b/@codexteam/ui/vite.config.ts
index 79326964..eecc9051 100644
--- a/@codexteam/ui/vite.config.ts
+++ b/@codexteam/ui/vite.config.ts
@@ -56,7 +56,6 @@ export default defineConfig({
          */
         'styles/themes/graphite': resolve(__dirname, 'src/styles/themes/graphite.pcss'),
         'styles/themes/crimson': resolve(__dirname, 'src/styles/themes/crimson.pcss'),
-        'styles/themes/red': resolve(__dirname, 'src/styles/themes/red.pcss'),
         'styles/themes/violet': resolve(__dirname, 'src/styles/themes/violet.pcss'),
         'styles/themes/grass': resolve(__dirname, 'src/styles/themes/grass.pcss'),
         'styles/themes/amber': resolve(__dirname, 'src/styles/themes/amber.pcss'),
@@ -78,8 +77,7 @@ export default defineConfig({
         preserveModules: true,
         preserveModulesRoot: 'src',
       },
-      // make sure to externalize deps that shouldn't be bundled
-      // into your library
+      // make sure to externalize deps that shouldn't be bundled into your library
       external: [
         'vue',
         '@vueuse/core',
diff --git a/src/index.ts b/src/index.ts
index 60843b5c..fbf6579b 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -10,7 +10,6 @@ import '@codexteam/ui/styles/themes/graphite';
 import '@codexteam/ui/styles/themes/sky';
 import '@codexteam/ui/styles/themes/crimson';
 import '@codexteam/ui/styles/themes/grass';
-import '@codexteam/ui/styles/themes/red';
 import '@codexteam/ui/styles/themes/violet';
 import '@codexteam/ui/styles/themes/amber';
 import '@codexteam/ui/styles/themes/pure';