diff --git a/MAKESTYLES_TO_CSS_MODULES_MIGRATION.md b/MAKESTYLES_TO_CSS_MODULES_MIGRATION.md
new file mode 100644
index 00000000000..dc03b83802d
--- /dev/null
+++ b/MAKESTYLES_TO_CSS_MODULES_MIGRATION.md
@@ -0,0 +1,697 @@
+# makeStyles to CSS Modules Migration Plan
+
+> **Quick Start**: For a concise guide to pick up and continue this migration, see [MIGRATION_QUICK_START.md](./MIGRATION_QUICK_START.md)
+
+## Overview
+
+Migrating 245 files from Material-UI/macaw-ui makeStyles to CSS modules.
+
+**Scope**:
+
+- 178 components with inline makeStyles
+- 67 separate styles.ts files
+
+**Strategy**: Small batches (10-15 files), organized by feature module, using CSS variables for theme values.
+
+**Status**: 11/245 files migrated (4.5%)
+
+---
+
+## Migration Strategy
+
+### CSS Variables - Use Existing Macaw-UI Variables
+
+**Source**: Variables are already defined by `@saleor/macaw-ui-next` and globally available
+
+**Existing Variable Naming Convention**:
+
+```css
+/* Spacing - Direct pixel values */
+--mu-spacing-0
+--mu-spacing-4  (0.5 * 8px)
+--mu-spacing-8  (1 * 8px)
+--mu-spacing-16 (2 * 8px)
+--mu-spacing-24 (3 * 8px)
+--mu-spacing-32 (4 * 8px)
+/* Available: 0, px, 4, 6, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, etc. */
+
+/* Colors - Macaw UI theme colors */
+--mu-colors-background-default1
+--mu-colors-background-default2
+--mu-colors-background-default3
+--mu-colors-text-default1
+--mu-colors-text-default2
+--mu-colors-border-default1
+--mu-colors-border-default2
+/* Also: accent1, critical1, critical2, info1, success1, warning1, etc. */
+
+/* Typography */
+--mu-fontSize-1 through --mu-fontSize-11
+--mu-fontWeight-light, --mu-fontWeight-regular, --mu-fontWeight-medium, --mu-fontWeight-bold
+--mu-lineHeight-1 through --mu-lineHeight-11
+```
+
+**Mapping from Material-UI Theme to Macaw Variables**:
+
+- `theme.spacing(1)` → `var(--mu-spacing-8)` (8px)
+- `theme.spacing(2)` → `var(--mu-spacing-16)` (16px)
+- `theme.spacing(3)` → `var(--mu-spacing-24)` (24px)
+- `theme.spacing(4)` → `var(--mu-spacing-32)` (32px)
+- `theme.palette.saleor.main[3]` → `var(--mu-colors-text-default2)` (or appropriate color - TBD per context)
+- `theme.breakpoints.up("sm")` → `@media (min-width: 600px)` (hardcoded breakpoint values)
+
+---
+
+## Conversion Patterns
+
+### Pattern A: Inline Styles (111 files)
+
+**Before** (`Component.tsx`):
+
+```typescript
+import { makeStyles } from "@saleor/macaw-ui";
+
+const useStyles = makeStyles(
+  theme => ({
+    root: {
+      display: "flex",
+      padding: theme.spacing(1),
+      gap: theme.spacing(2),
+    },
+  }),
+  { name: "ComponentName" },
+);
+
+const Component = () => {
+  const classes = useStyles();
+  return <div className={classes.root}>Content</div>;
+};
+```
+
+**After** (`Component.tsx` + `Component.module.css`):
+
+`Component.tsx`:
+
+```typescript
+import styles from "./Component.module.css";
+
+const Component = () => {
+  return <div className={styles.root}>Content</div>;
+};
+```
+
+`Component.module.css`:
+
+```css
+.root {
+  display: flex;
+  padding: var(--mu-spacing-8);
+  gap: var(--mu-spacing-16);
+}
+```
+
+**Steps**:
+
+1. Create `Component.module.css` next to component file
+2. Copy styles from makeStyles object to CSS file
+3. Convert JSS syntax to CSS syntax
+4. Replace `theme.spacing()` with CSS variables
+5. Replace `theme.palette` with CSS variables
+6. Update component: remove makeStyles import, add CSS module import
+7. Replace `classes.styleName` with `styles.styleName`
+8. Remove makeStyles declaration
+
+---
+
+### Pattern B: Separate Styles Files (67 files)
+
+**Before** (`styles.ts` + `Component.tsx`):
+
+`styles.ts`:
+
+```typescript
+import { makeStyles } from "@saleor/macaw-ui";
+
+export const useStyles = makeStyles(
+  theme => ({
+    root: {
+      display: "flex",
+      gap: theme.spacing(1),
+      color: theme.palette.saleor.main[3],
+    },
+  }),
+  { name: "ComponentName" },
+);
+```
+
+`Component.tsx`:
+
+```typescript
+import { useStyles } from "./styles";
+
+const Component = () => {
+  const classes = useStyles();
+  return <div className={classes.root}>Content</div>;
+};
+```
+
+**After** (`Component.module.css` + `Component.tsx`):
+
+`Component.module.css`:
+
+```css
+.root {
+  display: flex;
+  gap: var(--mu-spacing-8);
+  color: var(--mu-colors-text-default2);
+}
+```
+
+`Component.tsx`:
+
+```typescript
+import styles from "./Component.module.css";
+
+const Component = () => {
+  return <div className={styles.root}>Content</div>;
+};
+```
+
+**Steps**:
+
+1. Create `Component.module.css` next to component file
+2. Copy styles from styles.ts to CSS file
+3. Convert JSS syntax to CSS syntax
+4. Convert theme values to CSS variables
+5. Update component: remove styles.ts import, add CSS module import
+6. Replace `classes.styleName` with `styles.styleName`
+7. Delete `styles.ts` file
+
+---
+
+## JSS to CSS Syntax Conversion
+
+### Nested Selectors
+
+**JSS**:
+
+```javascript
+{
+  root: {
+    "& > div": {
+      margin: "8px",
+    },
+    "& > svg": {
+      marginLeft: "8px",
+    },
+  }
+}
+```
+
+**CSS**:
+
+```css
+.root > div {
+  margin: 8px;
+}
+
+.root > svg {
+  margin-left: 8px;
+}
+```
+
+### Pseudo-selectors
+
+**JSS**:
+
+```javascript
+{
+  hideSpinboxes: {
+    "& input::-webkit-outer-spin-button, input::-webkit-inner-spin-button": {
+      appearance: "none",
+      margin: 0,
+    },
+  }
+}
+```
+
+**CSS**:
+
+```css
+.hideSpinboxes input::-webkit-outer-spin-button,
+.hideSpinboxes input::-webkit-inner-spin-button {
+  appearance: none;
+  margin: 0;
+}
+```
+
+### Increased Specificity (`&&`)
+
+**JSS**:
+
+```javascript
+{
+  button: {
+    "&&": {
+      color: "red",
+    }
+  }
+}
+```
+
+**CSS**:
+
+```css
+.button.button {
+  color: red;
+}
+```
+
+### Responsive Styles
+
+**JSS**:
+
+```javascript
+{
+  root: {
+    [theme.breakpoints.down("sm")]: {
+      display: "none",
+    },
+    [theme.breakpoints.up("md")]: {
+      display: "flex",
+    }
+  }
+}
+```
+
+**CSS**:
+
+```css
+@media (max-width: 600px) {
+  .root {
+    display: none;
+  }
+}
+
+@media (min-width: 960px) {
+  .root {
+    display: flex;
+  }
+}
+```
+
+**Breakpoint Values** (from themeOverrides.ts):
+
+- xs: 0px
+- sm: 600px
+- md: 960px (note: custom value, not 1280px)
+- lg: 1680px (note: custom value, not 1280px)
+- xl: 1920px
+
+---
+
+## Edge Cases & Solutions
+
+### 1. Multiple useStyles in One Component
+
+**Solution**: Merge into single CSS module with multiple class names.
+
+### 2. Dynamic Styles (Based on Props)
+
+**Solution**: Keep inline styles for truly dynamic values, use CSS modules for static styles.
+
+Example:
+
+```typescript
+<div
+  className={styles.root}
+  style={{ backgroundColor: dynamicColor }}
+>
+```
+
+### 3. Conditional Classes
+
+**Before**:
+
+```typescript
+className={clsx(classes.root, condition && classes.active)}
+```
+
+**After**:
+
+```typescript
+className={clsx(styles.root, condition && styles.active)}
+```
+
+### 4. Class Concatenation with Component Props
+
+**Solution**: Use `clsx` to combine CSS module classes with external classes:
+
+```typescript
+<Component className={clsx(styles.wrapper, props.className)} />
+```
+
+---
+
+## Batch Plan by Feature Module
+
+### Batch 1: Shared Components (Start Here - Most Reusable)
+
+**Files**: ~14 files in `/src/components/`
+
+- Start with simple components (no theme usage)
+- These are used everywhere, so good early test
+
+### Batch 2: Customers
+
+**Files**: ~1-2 files in `/src/customers/`
+
+- Smallest module, quick win
+
+### Batch 3: Shipping
+
+**Files**: ~4 files in `/src/shipping/`
+
+- Small module, medium complexity
+
+### Batch 4: Gift Cards
+
+**Files**: ~4 files in `/src/giftCards/`
+
+- Small module, isolated feature
+
+### Batch 5: Channels
+
+**Files**: ~3 files in `/src/channels/`
+
+- Small module
+
+### Batch 6: Taxes
+
+**Files**: ~8 files in `/src/taxes/`
+
+- Medium module
+
+### Batch 7: Extensions
+
+**Files**: ~6 files in `/src/extensions/`
+
+- Medium module
+
+### Batch 8: Discounts Part 1
+
+**Files**: ~8 files (first batch) in `/src/discounts/`
+
+### Batch 9: Discounts Part 2
+
+**Files**: ~remaining files in `/src/discounts/`
+
+### Batch 10-15: Orders
+
+**Files**: ~15 files in `/src/orders/` (split into 2-3 batches)
+
+- Largest module, split into multiple batches
+
+### Batch 16+: Remaining Modules
+
+Continue with other modules with scattered usage
+
+---
+
+## Testing Checklist (Per Batch)
+
+**Before Migration**:
+
+- [ ] Feature works correctly
+- [ ] Visual regression baseline (screenshot)
+
+**After Migration**:
+
+- [ ] Run `pnpm run lint` - auto-fix formatting
+- [ ] Run `pnpm run check-types` - ensure type safety
+- [ ] Run `pnpm run knip` - check for unused imports
+- [ ] Visual comparison - does it look the same?
+- [ ] Test feature functionality manually
+- [ ] Check responsive behavior (if applicable)
+- [ ] Check dark mode (if applicable)
+
+---
+
+## Progress Tracking
+
+### Status Legend
+
+- ⏳ **Not Started** - Not yet migrated
+- 🚧 **In Progress** - Currently being worked on
+- ✅ **Completed** - Migrated and tested
+- ⚠️ **Blocked** - Issue preventing migration
+
+---
+
+## Completed Batches
+
+### ✅ Batch 0: Setup (No Action Needed!)
+
+- [x] CSS variables already exist from `@saleor/macaw-ui-next`
+- [x] Variables are globally available via theme provider
+- [x] All `--mu-*` prefixed variables ready to use
+- [ ] **TODO**: Document color mapping from `theme.palette.saleor.main[X]` to appropriate `--mu-colors-*` variables
+  - Will be determined contextually during migration based on usage (text color vs background vs border)
+
+---
+
+## Batch 1: Shared Components 🚧
+
+**Target**: `/src/components/` (11/62 files completed so far)
+
+### Files Migrated:
+
+1. ✅ `/src/components/Pill/Pill.tsx` (inline) - Simple hardcoded styles
+2. ✅ `/src/components/Filter/FilterKeyValueField.tsx` (inline) - Used theme.spacing()
+3. ✅ `/src/components/CardSpacer.tsx` (inline) - Used theme.spacing() and breakpoints
+4. ✅ `/src/components/FormSpacer.tsx` (inline) - Simple spacing
+5. ✅ `/src/components/VerticalSpacer/VerticalSpacer.tsx` (inline) - Dynamic styles → inline style
+6. ✅ `/src/components/HorizontalSpacer/HorizontalSpacer.tsx` (inline) - Dynamic styles → inline style
+7. ✅ `/src/components/Link.tsx` (inline) - Used theme.palette colors
+8. ✅ `/src/components/ExternalLink/ExternalLink.tsx` (inline) - Simple styles
+9. ✅ `/src/components/Checkbox/Checkbox.tsx` (inline) - Used theme.palette.error
+10. ✅ `/src/components/Money/Money.tsx` (inline) - Hardcoded styles
+11. ✅ `/src/components/Chip/Chip.tsx` (inline) - Used theme.spacing() and alpha()
+
+### Remaining Files (51):
+
+- ⏳ `/src/components/AppLayout/` (separate styles.ts)
+- ⏳ 50 more components with makeStyles...
+
+**Notes**:
+
+- Successfully migrated 11 simple components
+- Color mappings used: `--mu-colors-text-accent1`, `--mu-colors-text-default2`, `--mu-colors-text-critical1`
+- Used `color-mix()` for alpha blending in Chip component
+- Dynamic spacer components converted to inline styles
+- All migrations passed lint, check-types, and knip tests
+
+---
+
+## Batch 2: Customers ⏳
+
+**Target**: `/src/customers/` (1-2 files)
+
+### Files to Migrate:
+
+1. ⏳ [To be determined after Batch 1]
+
+---
+
+## Batch 3: Shipping ⏳
+
+**Target**: `/src/shipping/` (~4 files)
+
+### Files to Migrate:
+
+1. ⏳ [To be determined]
+
+---
+
+## Batch 4: Gift Cards ⏳
+
+**Target**: `/src/giftCards/` (~4 files)
+
+### Files to Migrate:
+
+1. ⏳ [To be determined]
+
+---
+
+## Batch 5: Channels ⏳
+
+**Target**: `/src/channels/` (~3 files)
+
+### Files to Migrate:
+
+1. ⏳ [To be determined]
+
+---
+
+## Batch 6: Taxes ⏳
+
+**Target**: `/src/taxes/` (~8 files)
+
+### Files to Migrate:
+
+1. ⏳ `/src/taxes/components/TaxInput/` (separate styles.ts)
+   - Has pseudo-selectors for hiding spinboxes
+   - Uses inputPadding class
+2. ⏳ [More files TBD]
+
+---
+
+## Batch 7: Extensions ⏳
+
+**Target**: `/src/extensions/` (~6 files)
+
+### Files to Migrate:
+
+1. ⏳ [To be determined]
+
+---
+
+## Batch 8-9: Discounts ⏳
+
+**Target**: `/src/discounts/` (~8 files, split into batches)
+
+### Files to Migrate:
+
+1. ⏳ [To be determined]
+
+---
+
+## Batch 10-15: Orders ⏳
+
+**Target**: `/src/orders/` (~15 files, split across batches)
+
+### Files to Migrate:
+
+1. ⏳ `/src/orders/components/OrderPaymentSummaryCard/` (separate styles.ts)
+   - Uses theme.spacing extensively
+   - Uses theme.palette.saleor.main for colors
+   - Complex layout with flexbox and grid
+2. ⏳ [More files TBD]
+
+---
+
+## Batch 16+: Remaining Modules ⏳
+
+**Target**: Other modules with scattered usage
+
+### Files to Migrate:
+
+1. ⏳ [To be determined based on remaining files]
+
+---
+
+## Notes & Learnings
+
+### Common Issues
+
+[To be filled in during migration]
+
+### Patterns That Worked Well
+
+[To be filled in during migration]
+
+### Things to Avoid
+
+[To be filled in during migration]
+
+---
+
+## Quick Reference
+
+### Import Changes
+
+**Remove**:
+
+```typescript
+import { makeStyles } from "@saleor/macaw-ui";
+import { makeStyles } from "@material-ui/core";
+```
+
+**Add**:
+
+```typescript
+import styles from "./ComponentName.module.css";
+```
+
+### Usage Changes
+
+**Before**: `const classes = useStyles();`
+**After**: (remove this line)
+
+**Before**: `className={classes.root}`
+**After**: `className={styles.root}`
+
+### Theme Value Conversions
+
+**Spacing** (Material-UI 8px grid):
+
+- `theme.spacing(0.5)` → `var(--mu-spacing-4)`
+- `theme.spacing(1)` → `var(--mu-spacing-8)`
+- `theme.spacing(1.5)` → `var(--mu-spacing-12)`
+- `theme.spacing(2)` → `var(--mu-spacing-16)`
+- `theme.spacing(3)` → `var(--mu-spacing-24)`
+- `theme.spacing(4)` → `var(--mu-spacing-32)`
+
+**Colors** (contextual - check usage):
+
+- Background: `var(--mu-colors-background-default1)`, `default2`, `default3`
+- Text: `var(--mu-colors-text-default1)`, `default2`
+- Border: `var(--mu-colors-border-default1)`, `default2`
+- Accent: `var(--mu-colors-background-accent1)`, `var(--mu-colors-text-accent1)`
+- Critical: `var(--mu-colors-background-critical1)`, `var(--mu-colors-text-critical1)`
+
+**Examples from existing CSS modules**:
+
+- See `/src/components/Timeline/TimelineNoteEdit.module.css`
+- See `/src/orders/components/OrderTransaction/components/TransactionEvents/components/PspReference.module.css`
+
+---
+
+## Commands to Run After Each Batch
+
+```bash
+# Format and fix linting issues
+pnpm run lint
+
+# Check TypeScript types
+pnpm run check-types
+
+# Check for unused code
+pnpm run knip
+
+# Run tests (if applicable)
+pnpm run test:quiet <path/to/test>
+
+# Start dev server to test visually
+pnpm run dev
+```
+
+---
+
+## Current Session: Batch [NUMBER]
+
+**Status**: [Not Started/In Progress/Completed]
+
+**Files in this batch**:
+
+- [ ] File 1
+- [ ] File 2
+- [ ] File 3
+
+**Notes**:
+[Session-specific notes here]
+
+---
+
+Last Updated: 2025-12-16
+Total Progress: 11/245 files (4.5%)
diff --git a/MIGRATION_QUICK_START.md b/MIGRATION_QUICK_START.md
new file mode 100644
index 00000000000..a9904ac2aae
--- /dev/null
+++ b/MIGRATION_QUICK_START.md
@@ -0,0 +1,173 @@
+# makeStyles → CSS Modules Migration - Quick Start
+
+> **Full details**: See [MAKESTYLES_TO_CSS_MODULES_MIGRATION.md](./MAKESTYLES_TO_CSS_MODULES_MIGRATION.md)
+
+## Current Status
+
+**Progress**: 11/245 files (4.5%)
+
+**Current Batch**: Batch 1 - Shared Components (11/62 files completed in `/src/components/`)
+
+## Quick Migration Steps
+
+### For Inline Styles
+
+1. **Create CSS module**: `ComponentName.module.css`
+2. **Convert styles**: Copy from `makeStyles` → CSS, convert JSS syntax
+3. **Update component**:
+
+   ```diff
+   - import { makeStyles } from "@saleor/macaw-ui";
+   + import styles from "./ComponentName.module.css";
+
+   - const useStyles = makeStyles({ ... });
+
+   - const classes = useStyles();
+   - <div className={classes.root}>
+   + <div className={styles.root}>
+   ```
+
+### For Separate Styles Files
+
+1. **Create CSS module**: `ComponentName.module.css`
+2. **Convert styles**: Copy from `styles.ts` → CSS
+3. **Update component**: Replace `useStyles` import with CSS module import
+4. **Delete**: `styles.ts` file
+
+## Key Conversions
+
+### Spacing (8px grid)
+
+```javascript
+theme.spacing(1)   → var(--mu-spacing-8)   // 8px
+theme.spacing(2)   → var(--mu-spacing-16)  // 16px
+theme.spacing(3)   → var(--mu-spacing-24)  // 24px
+theme.spacing(4)   → var(--mu-spacing-32)  // 32px
+```
+
+### Colors (contextual)
+
+```javascript
+// Background
+theme.palette... → var(--mu-colors-background-default1)
+
+// Text
+theme.palette... → var(--mu-colors-text-default1)
+theme.palette.saleor.main[3] → var(--mu-colors-text-default2)
+
+// Border
+theme.palette... → var(--mu-colors-border-default1)
+```
+
+### Breakpoints (hardcoded from themeOverrides.ts)
+
+```javascript
+[theme.breakpoints.down("sm")] → @media (max-width: 600px)
+[theme.breakpoints.up("md")]   → @media (min-width: 960px)
+[theme.breakpoints.up("lg")]   → @media (min-width: 1680px)
+```
+
+### JSS Syntax
+
+```javascript
+// Nested selectors
+"& > div" → .root > div
+
+// Pseudo-selectors
+"& input::-webkit..." → .class input::-webkit...
+
+// Increased specificity
+"&&" → .button.button
+```
+
+## Testing Commands
+
+```bash
+pnpm run lint           # Auto-fix formatting
+pnpm run check-types    # Type checking
+pnpm run knip           # Check unused imports
+pnpm run dev            # Visual testing
+```
+
+## Batch Order
+
+1. ✅ **Batch 0**: Setup (No action - CSS vars already exist!)
+2. ⏳ **Batch 1**: Shared Components (~14 files in `/src/components/`)
+3. ⏳ **Batch 2**: Customers (~1-2 files)
+4. ⏳ **Batch 3**: Shipping (~4 files)
+5. ⏳ **Batch 4**: Gift Cards (~4 files)
+6. ⏳ **Batch 5**: Channels (~3 files)
+7. ⏳ **Batch 6**: Taxes (~8 files)
+8. ⏳ **Batch 7**: Extensions (~6 files)
+9. ⏳ **Batch 8-9**: Discounts (~8 files, 2 batches)
+10. ⏳ **Batch 10-15**: Orders (~15 files, 3 batches)
+11. ⏳ **Batch 16+**: Remaining modules
+
+## Example Migration
+
+**Before** (`Pill.tsx`):
+
+```typescript
+import { makeStyles } from "@saleor/macaw-ui";
+
+const useStyles = makeStyles({
+  pill: {
+    borderRadius: "32px",
+    border: "1px solid",
+    fontWeight: 500,
+    paddingLeft: "2px",
+    "& > span": {
+      fontWeight: 500,
+    },
+  },
+}, { name: "Pill" });
+
+export const Pill = (props) => {
+  const classes = useStyles();
+  return <div className={classes.pill}>...</div>;
+};
+```
+
+**After** (`Pill.tsx` + `Pill.module.css`):
+
+`Pill.tsx`:
+
+```typescript
+import styles from "./Pill.module.css";
+
+export const Pill = (props) => {
+  return <div className={styles.pill}>...</div>;
+};
+```
+
+`Pill.module.css`:
+
+```css
+.pill {
+  border-radius: 32px;
+  border: 1px solid;
+  font-weight: 500;
+  padding-left: 2px;
+}
+
+.pill > span {
+  font-weight: 500;
+}
+```
+
+## Workflow
+
+1. Pick a batch from the list
+2. Find files with `makeStyles` using: `grep -r "makeStyles" src/[module]/`
+3. Convert each file following the patterns above
+4. Run testing commands
+5. Update progress in `MAKESTYLES_TO_CSS_MODULES_MIGRATION.md`
+6. Commit batch changes
+7. Move to next batch
+
+## Notes
+
+- CSS variables from `@saleor/macaw-ui-next` are already available globally
+- Drop-in replacement - no functional changes
+- Visual appearance should be identical after migration
+- Use existing CSS modules as reference (see `/src/components/Timeline/*.module.css`)
diff --git a/src/attributes/components/AttributeDetails/AttributeDetails.tsx b/src/attributes/components/AttributeDetails/AttributeDetails.tsx
index 59378b65a36..73e0a954db9 100644
--- a/src/attributes/components/AttributeDetails/AttributeDetails.tsx
+++ b/src/attributes/components/AttributeDetails/AttributeDetails.tsx
@@ -1,6 +1,6 @@
 import { NumericUnits } from "@dashboard/attributes/components/AttributeDetails/NumericUnits";
 import { DashboardCard } from "@dashboard/components/Card";
-import FormSpacer from "@dashboard/components/FormSpacer";
+import { FormSpacer } from "@dashboard/components/FormSpacer";
 import { Select } from "@dashboard/components/Select";
 import {
   AttributeEntityTypeEnum,
diff --git a/src/attributes/components/AttributeProperties/AttributeProperties.tsx b/src/attributes/components/AttributeProperties/AttributeProperties.tsx
index 7995138025f..5bae6487ffb 100644
--- a/src/attributes/components/AttributeProperties/AttributeProperties.tsx
+++ b/src/attributes/components/AttributeProperties/AttributeProperties.tsx
@@ -1,6 +1,6 @@
 import { ATTRIBUTE_TYPES_WITH_CONFIGURABLE_FACED_NAVIGATION } from "@dashboard/attributes/utils/data";
 import { DashboardCard } from "@dashboard/components/Card";
-import FormSpacer from "@dashboard/components/FormSpacer";
+import { FormSpacer } from "@dashboard/components/FormSpacer";
 import { AttributeErrorFragment, AttributeTypeEnum } from "@dashboard/graphql";
 import { FormChange } from "@dashboard/hooks/useForm";
 import { commonMessages } from "@dashboard/intl";
diff --git a/src/auth/components/NewPasswordPage/NewPasswordPage.tsx b/src/auth/components/NewPasswordPage/NewPasswordPage.tsx
index 30b3e619153..29f027714c8 100644
--- a/src/auth/components/NewPasswordPage/NewPasswordPage.tsx
+++ b/src/auth/components/NewPasswordPage/NewPasswordPage.tsx
@@ -1,5 +1,5 @@
 import Form from "@dashboard/components/Form";
-import FormSpacer from "@dashboard/components/FormSpacer";
+import { FormSpacer } from "@dashboard/components/FormSpacer";
 import { AccountErrorFragment } from "@dashboard/graphql";
 import { SubmitPromise } from "@dashboard/hooks/useForm";
 import getAccountErrorMessage from "@dashboard/utils/errors/account";
diff --git a/src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx b/src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx
index 1ebf4e03e3a..ac706772f6d 100644
--- a/src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx
+++ b/src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx
@@ -1,6 +1,6 @@
 import { useLastLoginMethod } from "@dashboard/auth/hooks/useLastLoginMethod";
 import Form from "@dashboard/components/Form";
-import FormSpacer from "@dashboard/components/FormSpacer";
+import { FormSpacer } from "@dashboard/components/FormSpacer";
 import { iconSize, iconStrokeWidth } from "@dashboard/components/icons";
 import { getAppMountUri } from "@dashboard/config";
 import { AccountErrorCode } from "@dashboard/graphql";
diff --git a/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx b/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx
index 82d9609682c..b6ca95c8034 100644
--- a/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx
+++ b/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx
@@ -1,4 +1,4 @@
-import FormSpacer from "@dashboard/components/FormSpacer";
+import { FormSpacer } from "@dashboard/components/FormSpacer";
 import { Button, Text } from "@saleor/macaw-ui-next";
 import { FormattedMessage } from "react-intl";
 
diff --git a/src/categories/components/CategoryDetailsForm/CategoryDetailsForm.tsx b/src/categories/components/CategoryDetailsForm/CategoryDetailsForm.tsx
index 33f63462889..1c1ccbb0865 100644
--- a/src/categories/components/CategoryDetailsForm/CategoryDetailsForm.tsx
+++ b/src/categories/components/CategoryDetailsForm/CategoryDetailsForm.tsx
@@ -1,5 +1,5 @@
 import { DashboardCard } from "@dashboard/components/Card";
-import FormSpacer from "@dashboard/components/FormSpacer";
+import { FormSpacer } from "@dashboard/components/FormSpacer";
 import RichTextEditor from "@dashboard/components/RichTextEditor";
 import { RichTextEditorLoading } from "@dashboard/components/RichTextEditor/RichTextEditorLoading";
 import { ProductErrorFragment } from "@dashboard/graphql";
diff --git a/src/channels/components/ChannelForm/ChannelForm.tsx b/src/channels/components/ChannelForm/ChannelForm.tsx
index ea9a7038226..1cbd8f1bd8d 100644
--- a/src/channels/components/ChannelForm/ChannelForm.tsx
+++ b/src/channels/components/ChannelForm/ChannelForm.tsx
@@ -5,7 +5,7 @@ import {
 } from "@dashboard/channels/pages/ChannelDetailsPage/types";
 import { DashboardCard } from "@dashboard/components/Card";
 import { Combobox } from "@dashboard/components/Combobox";
-import FormSpacer from "@dashboard/components/FormSpacer";
+import { FormSpacer } from "@dashboard/components/FormSpacer";
 import { iconSize, iconStrokeWidth } from "@dashboard/components/icons";
 import {
   ChannelErrorFragment,
diff --git a/src/collections/components/CollectionDetails/CollectionDetails.tsx b/src/collections/components/CollectionDetails/CollectionDetails.tsx
index 78acdf64630..43c4d1cf69b 100644
--- a/src/collections/components/CollectionDetails/CollectionDetails.tsx
+++ b/src/collections/components/CollectionDetails/CollectionDetails.tsx
@@ -1,5 +1,5 @@
 import { DashboardCard } from "@dashboard/components/Card";
-import FormSpacer from "@dashboard/components/FormSpacer";
+import { FormSpacer } from "@dashboard/components/FormSpacer";
 import RichTextEditor from "@dashboard/components/RichTextEditor";
 import { RichTextEditorLoading } from "@dashboard/components/RichTextEditor/RichTextEditorLoading";
 import { CollectionErrorFragment } from "@dashboard/graphql";
diff --git a/src/components/CardSpacer.module.css b/src/components/CardSpacer.module.css
new file mode 100644
index 00000000000..dbfc1228e47
--- /dev/null
+++ b/src/components/CardSpacer.module.css
@@ -0,0 +1,9 @@
+.spacer {
+  margin-top: var(--mu-spacing-32);
+}
+
+@media (max-width: 600px) {
+  .spacer {
+    margin-top: var(--mu-spacing-16);
+  }
+}
diff --git a/src/components/CardSpacer.tsx b/src/components/CardSpacer.tsx
index 34474e6092f..c160db27df2 100644
--- a/src/components/CardSpacer.tsx
+++ b/src/components/CardSpacer.tsx
@@ -1,18 +1,7 @@
-import { makeStyles } from "@saleor/macaw-ui";
 import { vars } from "@saleor/macaw-ui-next";
 import * as React from "react";
 
-const useStyles = makeStyles(
-  theme => ({
-    spacer: {
-      [theme.breakpoints.down("sm")]: {
-        marginTop: theme.spacing(2),
-      },
-      marginTop: theme.spacing(4),
-    },
-  }),
-  { name: "CardSpacer" },
-);
+import styles from "./CardSpacer.module.css";
 
 interface CardSpacerProps {
   children?: React.ReactNode;
@@ -20,11 +9,9 @@ interface CardSpacerProps {
 }
 
 export const CardSpacer = ({ children, backgroundColor = "default1" }: CardSpacerProps) => {
-  const classes = useStyles(children);
-
   return (
     <div
-      className={classes.spacer}
+      className={styles.spacer}
       style={{
         backgroundColor: vars.colors.background[backgroundColor],
       }}
diff --git a/src/components/Checkbox/Checkbox.module.css b/src/components/Checkbox/Checkbox.module.css
new file mode 100644
index 00000000000..57524dd8f1c
--- /dev/null
+++ b/src/components/Checkbox/Checkbox.module.css
@@ -0,0 +1,3 @@
+.error {
+  color: var(--mu-colors-text-critical1);
+}
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index 6a57721613c..8e2ae90d7bc 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -1,16 +1,8 @@
 // @ts-strict-ignore
 import MuiCheckbox, { CheckboxProps as MuiCheckboxProps } from "@material-ui/core/Checkbox";
 import FormHelperText from "@material-ui/core/FormHelperText";
-import { makeStyles } from "@saleor/macaw-ui";
 
-const useStyles = makeStyles(
-  theme => ({
-    error: {
-      color: theme.palette.error.main,
-    },
-  }),
-  { name: "Checkbox" },
-);
+import styles from "./Checkbox.module.css";
 
 type CheckboxProps = Omit<
   MuiCheckboxProps,
@@ -27,7 +19,6 @@ const firefoxHandler = (event, onChange, checked) => {
 };
 const Checkbox = ({ helperText, error, ...props }: CheckboxProps) => {
   const { disableClickPropagation, ...rest } = props;
-  const classes = useStyles();
 
   return (
     <>
@@ -48,7 +39,7 @@ const Checkbox = ({ helperText, error, ...props }: CheckboxProps) => {
         }
       />
       {helperText && (
-        <FormHelperText classes={{ root: error && classes.error }}>{helperText}</FormHelperText>
+        <FormHelperText classes={{ root: error && styles.error }}>{helperText}</FormHelperText>
       )}
     </>
   );
diff --git a/src/components/Chip/Chip.module.css b/src/components/Chip/Chip.module.css
new file mode 100644
index 00000000000..93e4e681a08
--- /dev/null
+++ b/src/components/Chip/Chip.module.css
@@ -0,0 +1,18 @@
+.closeIcon {
+  cursor: pointer;
+  font-size: 16px;
+  margin-left: var(--mu-spacing-8);
+  vertical-align: middle;
+}
+
+.label {
+  color: #fff;
+}
+
+.root {
+  background: color-mix(in srgb, var(--mu-colors-background-accent1), transparent 20%);
+  border-radius: 18px;
+  display: inline-block;
+  margin-right: var(--mu-spacing-16);
+  padding: 6px 12px;
+}
diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx
index 241c370533a..3d71d159d1a 100644
--- a/src/components/Chip/Chip.tsx
+++ b/src/components/Chip/Chip.tsx
@@ -1,51 +1,29 @@
 import { iconSize, iconStrokeWidth } from "@dashboard/components/icons";
-import { alpha } from "@material-ui/core/styles";
-import { makeStyles } from "@saleor/macaw-ui";
 import { Text } from "@saleor/macaw-ui-next";
 import clsx from "clsx";
 import { X } from "lucide-react";
 import * as React from "react";
 
+import styles from "./Chip.module.css";
+
 interface ChipProps {
   className?: string;
   label: React.ReactNode;
   onClose?: () => void;
 }
 
-const useStyles = makeStyles(
-  theme => ({
-    closeIcon: {
-      cursor: "pointer",
-      fontSize: 16,
-      marginLeft: theme.spacing(),
-      verticalAlign: "middle",
-    },
-    label: {
-      color: theme.palette.common.white,
-    },
-    root: {
-      background: alpha(theme.palette.primary.main, 0.8),
-      borderRadius: 18,
-      display: "inline-block",
-      marginRight: theme.spacing(2),
-      padding: "6px 12px",
-    },
-  }),
-  { name: "Chip" },
-);
 const Chip = (props: ChipProps) => {
   const { className, label, onClose } = props;
-  const classes = useStyles(props);
 
   return (
-    <div className={clsx(classes.root, className)}>
-      <Text className={classes.label} size={2} fontWeight="medium">
+    <div className={clsx(styles.root, className)}>
+      <Text className={styles.label} size={2} fontWeight="medium">
         {label}
         {onClose && (
           <X
             size={iconSize.small}
             strokeWidth={iconStrokeWidth}
-            className={classes.closeIcon}
+            className={styles.closeIcon}
             onClick={onClose}
           />
         )}
diff --git a/src/components/CompanyAddressInput/CompanyAddressForm.tsx b/src/components/CompanyAddressInput/CompanyAddressForm.tsx
index b32ada43013..6f81b5caeb4 100644
--- a/src/components/CompanyAddressInput/CompanyAddressForm.tsx
+++ b/src/components/CompanyAddressInput/CompanyAddressForm.tsx
@@ -1,5 +1,5 @@
 // @ts-strict-ignore
-import FormSpacer from "@dashboard/components/FormSpacer";
+import { FormSpacer } from "@dashboard/components/FormSpacer";
 import Grid from "@dashboard/components/Grid";
 import { AddressTypeInput } from "@dashboard/customers/types";
 import {
diff --git a/src/components/ExternalLink/ExternalLink.module.css b/src/components/ExternalLink/ExternalLink.module.css
new file mode 100644
index 00000000000..d5960b4c10c
--- /dev/null
+++ b/src/components/ExternalLink/ExternalLink.module.css
@@ -0,0 +1,3 @@
+.link {
+  text-decoration: none;
+}
diff --git a/src/components/ExternalLink/ExternalLink.tsx b/src/components/ExternalLink/ExternalLink.tsx
index 327bb98c159..1aab2347a01 100644
--- a/src/components/ExternalLink/ExternalLink.tsx
+++ b/src/components/ExternalLink/ExternalLink.tsx
@@ -1,16 +1,8 @@
-import { makeStyles } from "@saleor/macaw-ui";
 import { Text, TextProps } from "@saleor/macaw-ui-next";
 import { HTMLAttributes } from "react";
 import * as React from "react";
 
-const useStyles = makeStyles(
-  {
-    link: {
-      textDecoration: "none",
-    },
-  },
-  { name: "ExternalLink" },
-);
+import styles from "./ExternalLink.module.css";
 
 interface ExternalLinkProps extends React.HTMLProps<HTMLAnchorElement> {
   href: string;
@@ -22,13 +14,12 @@ interface ExternalLinkProps extends React.HTMLProps<HTMLAnchorElement> {
  */
 const ExternalLink = (props: ExternalLinkProps) => {
   const { className, children, href, target, rel, ...rest } = props;
-  const classes = useStyles(props);
   const opensNewTab = target === "_blank";
 
   return (
     <a
       href={href}
-      className={classes.link}
+      className={styles.link}
       target={target}
       rel={(rel ?? opensNewTab) ? "noopener noreferer" : ""}
       {...rest}
diff --git a/src/components/Filter/FilterContent/FilterSingleSelectField.tsx b/src/components/Filter/FilterContent/FilterSingleSelectField.tsx
index 93bdd9e4ae2..033bcc0df4b 100644
--- a/src/components/Filter/FilterContent/FilterSingleSelectField.tsx
+++ b/src/components/Filter/FilterContent/FilterSingleSelectField.tsx
@@ -1,7 +1,7 @@
 // @ts-strict-ignore
 import { getIsFilterMultipleChoices } from "@dashboard/components/Filter/FilterContent/utils";
 import { FilterFieldBaseProps, FilterType } from "@dashboard/components/Filter/types";
-import FormSpacer from "@dashboard/components/FormSpacer";
+import { FormSpacer } from "@dashboard/components/FormSpacer";
 import { Select } from "@dashboard/components/Select";
 import { useIntl } from "react-intl";
 
diff --git a/src/components/Filter/FilterKeyValueField.module.css b/src/components/Filter/FilterKeyValueField.module.css
new file mode 100644
index 00000000000..fdcb79f1eec
--- /dev/null
+++ b/src/components/Filter/FilterKeyValueField.module.css
@@ -0,0 +1,26 @@
+.metadataField {
+  display: flex;
+  align-items: center;
+  gap: var(--mu-spacing-4);
+}
+
+.fieldsWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mu-spacing-4);
+  margin-bottom: var(--mu-spacing-8);
+}
+
+.formWrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.addButton {
+  align-self: flex-end;
+}
+
+.deleteButton {
+  margin-left: 0.25rem;
+  margin-right: -0.75rem;
+}
diff --git a/src/components/Filter/FilterKeyValueField.tsx b/src/components/Filter/FilterKeyValueField.tsx
index 8c04828f281..1eaae11719e 100644
--- a/src/components/Filter/FilterKeyValueField.tsx
+++ b/src/components/Filter/FilterKeyValueField.tsx
@@ -1,40 +1,14 @@
 import { iconSize, iconStrokeWidthBySize } from "@dashboard/components/icons";
 import { KeyValue } from "@dashboard/types";
 import { TextField } from "@material-ui/core";
-import { Button, IconButton, makeStyles } from "@saleor/macaw-ui";
+import { Button, IconButton } from "@saleor/macaw-ui";
 import { Trash2 } from "lucide-react";
 import { useIntl } from "react-intl";
 
+import styles from "./FilterKeyValueField.module.css";
 import { keyValueMessages } from "./messages";
 import { FieldType, FilterFieldBaseProps } from "./types";
 
-const useStyles = makeStyles(
-  theme => ({
-    metadataField: {
-      display: "flex",
-      alignItems: "center",
-      gap: theme.spacing(0.5),
-    },
-    fieldsWrapper: {
-      display: "flex",
-      flexDirection: "column",
-      gap: theme.spacing(0.5),
-      marginBottom: theme.spacing(1),
-    },
-    formWrapper: {
-      display: "flex",
-      flexDirection: "column",
-    },
-    addButton: {
-      alignSelf: "flex-end",
-    },
-    deleteButton: {
-      marginLeft: "0.25rem",
-      marginRight: "-0.75rem",
-    },
-  }),
-  { name: "FilterKeyValueField" },
-);
 // @eslint-ignore-next-line
 const getUpdateArrayFn =
   <T,>(key: "key" | "value") =>
@@ -57,14 +31,13 @@ export const FilterKeyValueField = <K extends string = string>({
   onFilterPropertyChange,
 }: FilterKeyValueFieldProps<K>) => {
   const intl = useIntl();
-  const classes = useStyles();
   const values = filter.value?.length ? filter.value : ([{ key: "" }] as KeyValue[]);
 
   return (
-    <div className={classes.formWrapper}>
-      <div className={classes.fieldsWrapper}>
+    <div className={styles.formWrapper}>
+      <div className={styles.fieldsWrapper}>
         {values.map((innerField, index) => (
-          <div className={classes.metadataField} key={`${innerField.key}-${index}`}>
+          <div className={styles.metadataField} key={`${innerField.key}-${index}`}>
             <TextField
               fullWidth
               name={filter.name}
@@ -101,7 +74,7 @@ export const FilterKeyValueField = <K extends string = string>({
             />
             <IconButton
               variant="secondary"
-              className={classes.deleteButton}
+              className={styles.deleteButton}
               onClick={() => {
                 onFilterPropertyChange({
                   payload: {
@@ -120,7 +93,7 @@ export const FilterKeyValueField = <K extends string = string>({
         ))}
       </div>
       <Button
-        className={classes.addButton}
+        className={styles.addButton}
         color="primary"
         onClick={() => {
           onFilterPropertyChange({
diff --git a/src/components/FormSpacer.module.css b/src/components/FormSpacer.module.css
new file mode 100644
index 00000000000..8ce2cf115c8
--- /dev/null
+++ b/src/components/FormSpacer.module.css
@@ -0,0 +1,3 @@
+.spacer {
+  margin-top: var(--mu-spacing-3);
+}
diff --git a/src/components/FormSpacer.tsx b/src/components/FormSpacer.tsx
index 95ee41db5aa..62fdd200a50 100644
--- a/src/components/FormSpacer.tsx
+++ b/src/components/FormSpacer.tsx
@@ -1,25 +1,13 @@
-import { makeStyles } from "@saleor/macaw-ui";
-import * as React from "react";
+import { ReactNode } from "react";
 
-const useStyles = makeStyles(
-  theme => ({
-    spacer: {
-      marginTop: theme.spacing(3),
-    },
-  }),
-  { name: "FormSpacer" },
-);
+import styles from "./FormSpacer.module.css";
 
 interface FormSpacerProps {
-  children?: React.ReactNode;
+  children?: ReactNode;
 }
 
 export const FormSpacer = (props: FormSpacerProps) => {
   const { children } = props;
-  const classes = useStyles(props);
 
-  return <div className={classes.spacer}>{children}</div>;
+  return <div className={styles.spacer}>{children}</div>;
 };
-
-FormSpacer.displayName = "FormSpacer";
-export default FormSpacer;
diff --git a/src/components/HorizontalSpacer/HorizontalSpacer.tsx b/src/components/HorizontalSpacer/HorizontalSpacer.tsx
index f95c52b6b9f..b6dc6f2f97d 100644
--- a/src/components/HorizontalSpacer/HorizontalSpacer.tsx
+++ b/src/components/HorizontalSpacer/HorizontalSpacer.tsx
@@ -1,21 +1,9 @@
-import { makeStyles } from "@saleor/macaw-ui";
-
 interface HorizontalSpacerProps {
   spacing?: number;
 }
 
-const useStyles = makeStyles(
-  theme => ({
-    container: ({ spacing }: Required<HorizontalSpacerProps>) => ({
-      width: theme.spacing(spacing),
-    }),
-  }),
-  { name: "HorizontalSpacer" },
-);
 const HorizontalSpacer = ({ spacing = 1 }: HorizontalSpacerProps) => {
-  const classes = useStyles({ spacing });
-
-  return <div className={classes.container} />;
+  return <div style={{ width: spacing * 8 }} />;
 };
 
 export default HorizontalSpacer;
diff --git a/src/components/Link.module.css b/src/components/Link.module.css
new file mode 100644
index 00000000000..36420ac51b5
--- /dev/null
+++ b/src/components/Link.module.css
@@ -0,0 +1,25 @@
+.primary {
+  color: var(--mu-colors-text-accent1);
+}
+
+.root {
+  cursor: pointer;
+  display: inline;
+}
+
+.secondary {
+  color: var(--mu-colors-text-accent1);
+}
+
+.underline {
+  text-decoration: underline;
+}
+
+.noUnderline {
+  text-decoration: none;
+}
+
+.disabled {
+  cursor: default;
+  color: var(--mu-colors-text-default2);
+}
diff --git a/src/components/Link.tsx b/src/components/Link.tsx
index a1ba2c2e505..232c784c48c 100644
--- a/src/components/Link.tsx
+++ b/src/components/Link.tsx
@@ -1,37 +1,12 @@
 // @ts-strict-ignore
 import { isExternalURL } from "@dashboard/utils/urls";
 import { TypographyProps } from "@material-ui/core/Typography";
-import { makeStyles } from "@saleor/macaw-ui";
 import { Text } from "@saleor/macaw-ui-next";
 import clsx from "clsx";
 import * as React from "react";
 import { Link as RouterLink } from "react-router-dom";
 
-const useStyles = makeStyles(
-  theme => ({
-    primary: {
-      color: theme.palette.textHighlighted.active,
-    },
-    root: {
-      cursor: "pointer",
-      display: "inline",
-    },
-    secondary: {
-      color: theme.palette.primary.main,
-    },
-    underline: {
-      textDecoration: "underline",
-    },
-    noUnderline: {
-      textDecoration: "none",
-    },
-    disabled: {
-      cursor: "default",
-      color: theme.palette.textHighlighted.inactive,
-    },
-  }),
-  { name: "Link" },
-);
+import styles from "./Link.module.css";
 
 interface LinkState {
   from?: string;
@@ -66,16 +41,15 @@ const Link = (props: LinkProps) => {
     state,
     ...linkProps
   } = props;
-  const classes = useStyles(props);
   const opensNewTab = target === "_blank";
   const commonLinkProps = {
     className: clsx(
       {
-        [classes.root]: inline,
-        [classes[color]]: true,
-        [classes.underline]: underline,
-        [classes.noUnderline]: !underline,
-        [classes.disabled]: disabled,
+        [styles.root]: inline,
+        [styles[color]]: true,
+        [styles.underline]: underline,
+        [styles.noUnderline]: !underline,
+        [styles.disabled]: disabled,
       },
       className,
     ),
diff --git a/src/components/Money/Money.module.css b/src/components/Money/Money.module.css
new file mode 100644
index 00000000000..2b6c6a67288
--- /dev/null
+++ b/src/components/Money/Money.module.css
@@ -0,0 +1,8 @@
+.root {
+  font-weight: 500;
+}
+
+.currency {
+  font-size: 0.87em;
+  margin-right: 0.2rem;
+}
diff --git a/src/components/Money/Money.tsx b/src/components/Money/Money.tsx
index 2b5042fa9e9..58028980d2e 100644
--- a/src/components/Money/Money.tsx
+++ b/src/components/Money/Money.tsx
@@ -1,21 +1,8 @@
 import useLocale from "@dashboard/hooks/useLocale";
 import { IMoney } from "@dashboard/utils/intl";
-import { makeStyles } from "@saleor/macaw-ui";
 
 import { formatMoneyAmount } from ".";
-
-const useStyles = makeStyles(
-  {
-    root: {
-      fontWeight: 500,
-    },
-    currency: {
-      fontSize: "0.87em",
-      marginRight: "0.2rem",
-    },
-  },
-  { name: "Money" },
-);
+import styles from "./Money.module.css";
 
 interface MoneyProps {
   money: IMoney | null;
@@ -24,15 +11,14 @@ interface MoneyProps {
 const Money = (props: MoneyProps) => {
   const { money, ...rest } = props;
   const { locale } = useLocale();
-  const classes = useStyles();
 
   if (!money) {
     return null;
   }
 
   return (
-    <span data-test-id="money-value" className={classes.root} {...rest}>
-      <span className={classes.currency}>{money.currency}</span>
+    <span data-test-id="money-value" className={styles.root} {...rest}>
+      <span className={styles.currency}>{money.currency}</span>
       {formatMoneyAmount(money, locale)}
     </span>
   );
diff --git a/src/components/Pill/Pill.module.css b/src/components/Pill/Pill.module.css
new file mode 100644
index 00000000000..777c09e9d91
--- /dev/null
+++ b/src/components/Pill/Pill.module.css
@@ -0,0 +1,19 @@
+.pill {
+  border-radius: 32px;
+  border: 1px solid;
+  font-weight: 500;
+  padding-left: 2px;
+  padding-right: 2px;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.pill > span {
+  font-weight: 500;
+}
+
+/* Override MacawUI Pill padding when there is an icon */
+.pill > div,
+.pill > svg {
+  margin-left: 8px;
+}
diff --git a/src/components/Pill/Pill.tsx b/src/components/Pill/Pill.tsx
index 5a6ab303f4e..54ee415213a 100644
--- a/src/components/Pill/Pill.tsx
+++ b/src/components/Pill/Pill.tsx
@@ -1,31 +1,11 @@
 // @ts-strict-ignore
 import { getStatusColor, PillStatusType } from "@dashboard/misc";
-import { makeStyles, Pill as MacawuiPill, PillProps } from "@saleor/macaw-ui";
+import { Pill as MacawuiPill, PillProps } from "@saleor/macaw-ui";
 import { useTheme } from "@saleor/macaw-ui-next";
 import clsx from "clsx";
 import { forwardRef } from "react";
 
-const useStyles = makeStyles(
-  {
-    pill: {
-      borderRadius: "32px",
-      border: "1px solid",
-      fontWeight: 500,
-      paddingLeft: "2px",
-      paddingRight: "2px",
-      paddingTop: "0",
-      paddingBottom: "0",
-      "& > span": {
-        fontWeight: 500,
-      },
-      // Override MacawUI Pill padding when there is an icon
-      "& > div, & > svg": {
-        marginLeft: "8px", // Compemsate for the icon internal padding if needed, or adjust based on real DOM
-      },
-    },
-  },
-  { name: "Pill" },
-);
+import styles from "./Pill.module.css";
 
 export interface CustomPillProps extends Omit<PillProps, "color"> {
   color: PillStatusType;
@@ -42,7 +22,6 @@ export const Pill = forwardRef<HTMLDivElement, CustomPillProps>(
       status: status,
       currentTheme,
     });
-    const classes = useStyles();
 
     return (
       <MacawuiPill
@@ -51,7 +30,7 @@ export const Pill = forwardRef<HTMLDivElement, CustomPillProps>(
         onPointerLeaveCapture={undefined}
         {...(props as any)}
         ref={ref}
-        className={clsx(classes.pill, props.className)}
+        className={clsx(styles.pill, props.className)}
         style={{
           backgroundColor: colors.base,
           borderColor: colors.border,
diff --git a/src/components/VerticalSpacer/VerticalSpacer.tsx b/src/components/VerticalSpacer/VerticalSpacer.tsx
index 27ac3b23bf9..732334a80c2 100644
--- a/src/components/VerticalSpacer/VerticalSpacer.tsx
+++ b/src/components/VerticalSpacer/VerticalSpacer.tsx
@@ -1,21 +1,9 @@
-import { makeStyles } from "@saleor/macaw-ui";
-
 interface VerticalSpacerProps {
   spacing?: number;
 }
 
-const useStyles = makeStyles(
-  theme => ({
-    container: ({ spacing }: Required<VerticalSpacerProps>) => ({
-      height: theme.spacing(spacing),
-    }),
-  }),
-  { name: "VerticalSpacer" },
-);
 const VerticalSpacer = ({ spacing = 1 }: VerticalSpacerProps) => {
-  const classes = useStyles({ spacing });
-
-  return <div className={classes.container} />;
+  return <div style={{ height: spacing * 8 }} />;
 };
 
 export default VerticalSpacer;
diff --git a/src/discounts/components/VoucherSummary/VoucherSummary.tsx b/src/discounts/components/VoucherSummary/VoucherSummary.tsx
index 785de4bd8b8..88d92ff049e 100644
--- a/src/discounts/components/VoucherSummary/VoucherSummary.tsx
+++ b/src/discounts/components/VoucherSummary/VoucherSummary.tsx
@@ -1,7 +1,7 @@
 import { DashboardCard } from "@dashboard/components/Card";
 import CardSpacer from "@dashboard/components/CardSpacer";
 import Date from "@dashboard/components/Date";
-import FormSpacer from "@dashboard/components/FormSpacer";
+import { FormSpacer } from "@dashboard/components/FormSpacer";
 import Hr from "@dashboard/components/Hr";
 import Money from "@dashboard/components/Money";
 import Percent from "@dashboard/components/Percent";
diff --git a/src/extensions/components/WebhookDetailsPage/WebhookDetailsPage.tsx b/src/extensions/components/WebhookDetailsPage/WebhookDetailsPage.tsx
index 60be5bf804b..cd174d6dd9b 100644
--- a/src/extensions/components/WebhookDetailsPage/WebhookDetailsPage.tsx
+++ b/src/extensions/components/WebhookDetailsPage/WebhookDetailsPage.tsx
@@ -1,7 +1,7 @@
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import Form from "@dashboard/components/Form";
-import FormSpacer from "@dashboard/components/FormSpacer";
+import { FormSpacer } from "@dashboard/components/FormSpacer";
 import { DetailPageLayout } from "@dashboard/components/Layouts";
 import { Savebar } from "@dashboard/components/Savebar";
 import {
diff --git a/src/extensions/components/WebhookDetailsPage/components/WebhookInfo/WebhookInfo.tsx b/src/extensions/components/WebhookDetailsPage/components/WebhookInfo/WebhookInfo.tsx
index 53d69a4019f..76d9bf7c7b7 100644
--- a/src/extensions/components/WebhookDetailsPage/components/WebhookInfo/WebhookInfo.tsx
+++ b/src/extensions/components/WebhookDetailsPage/components/WebhookInfo/WebhookInfo.tsx
@@ -1,5 +1,5 @@
 import { DashboardCard } from "@dashboard/components/Card";
-import FormSpacer from "@dashboard/components/FormSpacer";
+import { FormSpacer } from "@dashboard/components/FormSpacer";
 import Hr from "@dashboard/components/Hr";
 import Link from "@dashboard/components/Link";
 import { WebhookErrorFragment } from "@dashboard/graphql";
diff --git a/src/extensions/views/EditPluginExtension/components/PluginInfo.tsx b/src/extensions/views/EditPluginExtension/components/PluginInfo.tsx
index 633b4e5847c..67adcecbdcc 100644
--- a/src/extensions/views/EditPluginExtension/components/PluginInfo.tsx
+++ b/src/extensions/views/EditPluginExtension/components/PluginInfo.tsx
@@ -1,5 +1,5 @@
 import { DashboardCard } from "@dashboard/components/Card";
-import FormSpacer from "@dashboard/components/FormSpacer";
+import { FormSpacer } from "@dashboard/components/FormSpacer";
 import Hr from "@dashboard/components/Hr";
 import { PluginErrorCode } from "@dashboard/graphql";
 import { commonMessages } from "@dashboard/intl";
diff --git a/src/modeling/components/PageInfo/PageInfo.tsx b/src/modeling/components/PageInfo/PageInfo.tsx
index 12739fb6f13..7e0aa5a4adb 100644
--- a/src/modeling/components/PageInfo/PageInfo.tsx
+++ b/src/modeling/components/PageInfo/PageInfo.tsx
@@ -1,6 +1,6 @@
 // @ts-strict-ignore
 import { DashboardCard } from "@dashboard/components/Card";
-import FormSpacer from "@dashboard/components/FormSpacer";
+import { FormSpacer } from "@dashboard/components/FormSpacer";
 import RichTextEditor from "@dashboard/components/RichTextEditor";
 import { RichTextEditorLoading } from "@dashboard/components/RichTextEditor/RichTextEditorLoading";
 import { PageErrorFragment } from "@dashboard/graphql";
diff --git a/src/orders/components/OrderCustomer/AddressTextError.tsx b/src/orders/components/OrderCustomer/AddressTextError.tsx
index a5b2be7260d..5911e1c012c 100644
--- a/src/orders/components/OrderCustomer/AddressTextError.tsx
+++ b/src/orders/components/OrderCustomer/AddressTextError.tsx
@@ -1,4 +1,4 @@
-import FormSpacer from "@dashboard/components/FormSpacer";
+import { FormSpacer } from "@dashboard/components/FormSpacer";
 import { OrderErrorFragment } from "@dashboard/graphql";
 import getOrderErrorMessage from "@dashboard/utils/errors/order";
 import { Text } from "@saleor/macaw-ui-next";
diff --git a/src/orders/components/OrderCustomer/PickupAnnotation.tsx b/src/orders/components/OrderCustomer/PickupAnnotation.tsx
index 50dd574340d..2e2af09eb4c 100644
--- a/src/orders/components/OrderCustomer/PickupAnnotation.tsx
+++ b/src/orders/components/OrderCustomer/PickupAnnotation.tsx
@@ -1,4 +1,4 @@
-import FormSpacer from "@dashboard/components/FormSpacer";
+import { FormSpacer } from "@dashboard/components/FormSpacer";
 import { OrderDetailsFragment, WarehouseClickAndCollectOptionEnum } from "@dashboard/graphql";
 import { Text } from "@saleor/macaw-ui-next";
 import { FormattedMessage } from "react-intl";
diff --git a/src/orders/components/OrderCustomerAddressesEditDialog/OrderCustomerAddressEdit.tsx b/src/orders/components/OrderCustomerAddressesEditDialog/OrderCustomerAddressEdit.tsx
index 431f2b81731..e0b57b2e296 100644
--- a/src/orders/components/OrderCustomerAddressesEditDialog/OrderCustomerAddressEdit.tsx
+++ b/src/orders/components/OrderCustomerAddressesEditDialog/OrderCustomerAddressEdit.tsx
@@ -1,7 +1,7 @@
 // @ts-strict-ignore
 import { AddressEdit } from "@dashboard/components/AddressEdit/AddressEdit";
 import CardSpacer from "@dashboard/components/CardSpacer";
-import FormSpacer from "@dashboard/components/FormSpacer";
+import { FormSpacer } from "@dashboard/components/FormSpacer";
 import CustomerAddressChoiceCard from "@dashboard/customers/components/CustomerAddressChoiceCard";
 import { AddressTypeInput } from "@dashboard/customers/types";
 import { AccountErrorFragment, AddressFragment, OrderErrorFragment } from "@dashboard/graphql";
diff --git a/src/orders/components/OrderCustomerAddressesEditDialog/OrderCustomerAddressesEditDialog.tsx b/src/orders/components/OrderCustomerAddressesEditDialog/OrderCustomerAddressesEditDialog.tsx
index 30b9ff52087..9c81aac61f1 100644
--- a/src/orders/components/OrderCustomerAddressesEditDialog/OrderCustomerAddressesEditDialog.tsx
+++ b/src/orders/components/OrderCustomerAddressesEditDialog/OrderCustomerAddressesEditDialog.tsx
@@ -1,7 +1,7 @@
 // @ts-strict-ignore
 import Checkbox from "@dashboard/components/Checkbox";
 import { ConfirmButton, ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
-import FormSpacer from "@dashboard/components/FormSpacer";
+import { FormSpacer } from "@dashboard/components/FormSpacer";
 import { DashboardModal } from "@dashboard/components/Modal";
 import { AddressTypeInput } from "@dashboard/customers/types";
 import {
diff --git a/src/orders/components/OrderDraftCancelDialog/OrderDraftCancelDialog.tsx b/src/orders/components/OrderDraftCancelDialog/OrderDraftCancelDialog.tsx
index 5779acb7dfa..acf3595a929 100644
--- a/src/orders/components/OrderDraftCancelDialog/OrderDraftCancelDialog.tsx
+++ b/src/orders/components/OrderDraftCancelDialog/OrderDraftCancelDialog.tsx
@@ -1,6 +1,6 @@
 import ActionDialog from "@dashboard/components/ActionDialog";
 import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
-import FormSpacer from "@dashboard/components/FormSpacer";
+import { FormSpacer } from "@dashboard/components/FormSpacer";
 import { OrderErrorFragment } from "@dashboard/graphql";
 import useModalDialogErrors from "@dashboard/hooks/useModalDialogErrors";
 import getOrderErrorMessage from "@dashboard/utils/errors/order";
diff --git a/src/orders/components/OrderFulfillmentApproveDialog/OrderFulfillmentApproveDialog.tsx b/src/orders/components/OrderFulfillmentApproveDialog/OrderFulfillmentApproveDialog.tsx
index 7b17bc2b22b..ddf2bb89505 100644
--- a/src/orders/components/OrderFulfillmentApproveDialog/OrderFulfillmentApproveDialog.tsx
+++ b/src/orders/components/OrderFulfillmentApproveDialog/OrderFulfillmentApproveDialog.tsx
@@ -2,7 +2,7 @@ import { Button } from "@dashboard/components/Button";
 import { ConfirmButton, ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import ControlledCheckbox from "@dashboard/components/ControlledCheckbox";
 import Form from "@dashboard/components/Form";
-import FormSpacer from "@dashboard/components/FormSpacer";
+import { FormSpacer } from "@dashboard/components/FormSpacer";
 import { DashboardModal } from "@dashboard/components/Modal";
 import { OrderErrorFragment } from "@dashboard/graphql";
 import { buttonMessages } from "@dashboard/intl";
diff --git a/src/orders/components/OrderFulfillmentSettings/OrderFulfillmentSettings.tsx b/src/orders/components/OrderFulfillmentSettings/OrderFulfillmentSettings.tsx
index 1df057a0e7a..adfcc98997d 100644
--- a/src/orders/components/OrderFulfillmentSettings/OrderFulfillmentSettings.tsx
+++ b/src/orders/components/OrderFulfillmentSettings/OrderFulfillmentSettings.tsx
@@ -1,6 +1,6 @@
 import { DashboardCard } from "@dashboard/components/Card";
 import ControlledCheckbox from "@dashboard/components/ControlledCheckbox";
-import FormSpacer from "@dashboard/components/FormSpacer";
+import { FormSpacer } from "@dashboard/components/FormSpacer";
 import { Box, Text } from "@saleor/macaw-ui-next";
 import * as React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
diff --git a/src/orders/components/OrderFulfillmentTrackingDialog/OrderFulfillmentTrackingDialog.tsx b/src/orders/components/OrderFulfillmentTrackingDialog/OrderFulfillmentTrackingDialog.tsx
index 042ae86a03a..d03e51cf0a4 100644
--- a/src/orders/components/OrderFulfillmentTrackingDialog/OrderFulfillmentTrackingDialog.tsx
+++ b/src/orders/components/OrderFulfillmentTrackingDialog/OrderFulfillmentTrackingDialog.tsx
@@ -1,7 +1,7 @@
 import BackButton from "@dashboard/components/BackButton";
 import { ConfirmButton, ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import Form from "@dashboard/components/Form";
-import FormSpacer from "@dashboard/components/FormSpacer";
+import { FormSpacer } from "@dashboard/components/FormSpacer";
 import { DashboardModal } from "@dashboard/components/Modal";
 import { OrderErrorFragment } from "@dashboard/graphql";
 import useModalDialogErrors from "@dashboard/hooks/useModalDialogErrors";
diff --git a/src/orders/components/OrderInvoiceEmailSendDialog/OrderInvoiceEmailSendDialog.tsx b/src/orders/components/OrderInvoiceEmailSendDialog/OrderInvoiceEmailSendDialog.tsx
index 118ad963493..1b2aeb1d610 100644
--- a/src/orders/components/OrderInvoiceEmailSendDialog/OrderInvoiceEmailSendDialog.tsx
+++ b/src/orders/components/OrderInvoiceEmailSendDialog/OrderInvoiceEmailSendDialog.tsx
@@ -1,6 +1,6 @@
 import BackButton from "@dashboard/components/BackButton";
 import { ConfirmButton, ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
-import FormSpacer from "@dashboard/components/FormSpacer";
+import { FormSpacer } from "@dashboard/components/FormSpacer";
 import { DashboardModal } from "@dashboard/components/Modal";
 import { InvoiceErrorFragment, InvoiceFragment } from "@dashboard/graphql";
 import { buttonMessages } from "@dashboard/intl";
diff --git a/src/orders/components/OrderPaymentDialog/OrderPaymentDialog.tsx b/src/orders/components/OrderPaymentDialog/OrderPaymentDialog.tsx
index 15e3e8ee8da..6a802fc84b2 100644
--- a/src/orders/components/OrderPaymentDialog/OrderPaymentDialog.tsx
+++ b/src/orders/components/OrderPaymentDialog/OrderPaymentDialog.tsx
@@ -2,7 +2,7 @@
 import BackButton from "@dashboard/components/BackButton";
 import { ConfirmButton, ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import Form from "@dashboard/components/Form";
-import FormSpacer from "@dashboard/components/FormSpacer";
+import { FormSpacer } from "@dashboard/components/FormSpacer";
 import { DashboardModal } from "@dashboard/components/Modal";
 import { OrderErrorFragment } from "@dashboard/graphql";
 import { buttonMessages } from "@dashboard/intl";
diff --git a/src/orders/components/OrderPaymentVoidDialog/OrderPaymentVoidDialog.tsx b/src/orders/components/OrderPaymentVoidDialog/OrderPaymentVoidDialog.tsx
index e29f58ec40b..b3a7038dfaa 100644
--- a/src/orders/components/OrderPaymentVoidDialog/OrderPaymentVoidDialog.tsx
+++ b/src/orders/components/OrderPaymentVoidDialog/OrderPaymentVoidDialog.tsx
@@ -1,7 +1,7 @@
 // @ts-strict-ignore
 import BackButton from "@dashboard/components/BackButton";
 import { ConfirmButton, ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
-import FormSpacer from "@dashboard/components/FormSpacer";
+import { FormSpacer } from "@dashboard/components/FormSpacer";
 import { DashboardModal } from "@dashboard/components/Modal";
 import { OrderErrorFragment } from "@dashboard/graphql";
 import { buttonMessages } from "@dashboard/intl";
diff --git a/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx b/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx
index b7e281776f0..41a2135cc36 100644
--- a/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx
+++ b/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx
@@ -2,7 +2,7 @@
 import BackButton from "@dashboard/components/BackButton";
 import Checkbox from "@dashboard/components/Checkbox";
 import { ConfirmButton, ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
-import FormSpacer from "@dashboard/components/FormSpacer";
+import { FormSpacer } from "@dashboard/components/FormSpacer";
 import { InfiniteScroll } from "@dashboard/components/InfiniteScroll";
 import { DashboardModal } from "@dashboard/components/Modal";
 import ResponsiveTable from "@dashboard/components/ResponsiveTable";
diff --git a/src/orders/components/OrderShippingMethodEditDialog/OrderShippingMethodEditDialog.tsx b/src/orders/components/OrderShippingMethodEditDialog/OrderShippingMethodEditDialog.tsx
index 1d6456966b3..9d426d7c213 100644
--- a/src/orders/components/OrderShippingMethodEditDialog/OrderShippingMethodEditDialog.tsx
+++ b/src/orders/components/OrderShippingMethodEditDialog/OrderShippingMethodEditDialog.tsx
@@ -2,7 +2,7 @@
 import BackButton from "@dashboard/components/BackButton";
 import { ConfirmButton, ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import Form from "@dashboard/components/Form";
-import FormSpacer from "@dashboard/components/FormSpacer";
+import { FormSpacer } from "@dashboard/components/FormSpacer";
 import { DashboardModal } from "@dashboard/components/Modal";
 import Money from "@dashboard/components/Money";
 import { Select } from "@dashboard/components/Select";
diff --git a/src/permissionGroups/components/PermissionGroupCreatePage/PermissionGroupCreatePage.tsx b/src/permissionGroups/components/PermissionGroupCreatePage/PermissionGroupCreatePage.tsx
index 423e8254fc3..c001ed4c955 100644
--- a/src/permissionGroups/components/PermissionGroupCreatePage/PermissionGroupCreatePage.tsx
+++ b/src/permissionGroups/components/PermissionGroupCreatePage/PermissionGroupCreatePage.tsx
@@ -3,7 +3,7 @@ import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import { Backlink } from "@dashboard/components/Backlink";
 import { ChannelPermission } from "@dashboard/components/ChannelPermission";
 import Form from "@dashboard/components/Form";
-import FormSpacer from "@dashboard/components/FormSpacer";
+import { FormSpacer } from "@dashboard/components/FormSpacer";
 import { DetailPageLayout } from "@dashboard/components/Layouts";
 import { Savebar } from "@dashboard/components/Savebar";
 import { ChannelFragment, PermissionEnum, PermissionGroupErrorFragment } from "@dashboard/graphql";
diff --git a/src/permissionGroups/components/PermissionGroupDetailsPage/PermissionGroupDetailsPage.tsx b/src/permissionGroups/components/PermissionGroupDetailsPage/PermissionGroupDetailsPage.tsx
index d5f2b733363..e2d56bfc2a8 100644
--- a/src/permissionGroups/components/PermissionGroupDetailsPage/PermissionGroupDetailsPage.tsx
+++ b/src/permissionGroups/components/PermissionGroupDetailsPage/PermissionGroupDetailsPage.tsx
@@ -3,7 +3,7 @@ import AccountPermissions from "@dashboard/components/AccountPermissions";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import { ChannelPermission } from "@dashboard/components/ChannelPermission";
 import Form from "@dashboard/components/Form";
-import FormSpacer from "@dashboard/components/FormSpacer";
+import { FormSpacer } from "@dashboard/components/FormSpacer";
 import { DetailPageLayout } from "@dashboard/components/Layouts";
 import { Savebar } from "@dashboard/components/Savebar";
 import {
diff --git a/src/siteSettings/components/SiteCheckoutSettingsCard/SiteCheckoutSettingsCard.tsx b/src/siteSettings/components/SiteCheckoutSettingsCard/SiteCheckoutSettingsCard.tsx
index b63b1144ccc..b9a3909fe39 100644
--- a/src/siteSettings/components/SiteCheckoutSettingsCard/SiteCheckoutSettingsCard.tsx
+++ b/src/siteSettings/components/SiteCheckoutSettingsCard/SiteCheckoutSettingsCard.tsx
@@ -1,5 +1,5 @@
 import { DashboardCard } from "@dashboard/components/Card";
-import FormSpacer from "@dashboard/components/FormSpacer";
+import { FormSpacer } from "@dashboard/components/FormSpacer";
 import { ShopErrorFragment } from "@dashboard/graphql";
 import { getFormErrors } from "@dashboard/utils/errors";
 import { TextField } from "@material-ui/core";
diff --git a/src/staff/components/StaffPreferences/StaffPreferences.tsx b/src/staff/components/StaffPreferences/StaffPreferences.tsx
index cc33b5c7224..2acaa37fcb9 100644
--- a/src/staff/components/StaffPreferences/StaffPreferences.tsx
+++ b/src/staff/components/StaffPreferences/StaffPreferences.tsx
@@ -1,6 +1,6 @@
 import { DashboardCard } from "@dashboard/components/Card";
 import { Combobox } from "@dashboard/components/Combobox";
-import FormSpacer from "@dashboard/components/FormSpacer";
+import { FormSpacer } from "@dashboard/components/FormSpacer";
 import { Locale, localeNames } from "@dashboard/components/Locale";
 import { capitalize } from "@dashboard/misc";
 import { Text } from "@saleor/macaw-ui-next";