diff --git a/app/soapbox/components/account_search.tsx b/app/soapbox/components/account_search.tsx
index adbb5501df..bf9652b66e 100644
--- a/app/soapbox/components/account_search.tsx
+++ b/app/soapbox/components/account_search.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
diff --git a/app/soapbox/components/announcements/announcements-panel.tsx b/app/soapbox/components/announcements/announcements-panel.tsx
index 200615dab8..2febea40da 100644
--- a/app/soapbox/components/announcements/announcements-panel.tsx
+++ b/app/soapbox/components/announcements/announcements-panel.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
diff --git a/app/soapbox/components/announcements/reaction.tsx b/app/soapbox/components/announcements/reaction.tsx
index 1e415c667c..8e2391aec7 100644
--- a/app/soapbox/components/announcements/reaction.tsx
+++ b/app/soapbox/components/announcements/reaction.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useState } from 'react';
 
 import AnimatedNumber from 'soapbox/components/animated-number';
diff --git a/app/soapbox/components/announcements/reactions-bar.tsx b/app/soapbox/components/announcements/reactions-bar.tsx
index 66b5f3f832..5cec539742 100644
--- a/app/soapbox/components/announcements/reactions-bar.tsx
+++ b/app/soapbox/components/announcements/reactions-bar.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { TransitionMotion, spring } from 'react-motion';
 
diff --git a/app/soapbox/components/autosuggest_input.tsx b/app/soapbox/components/autosuggest_input.tsx
index 54f126a233..744160b2bc 100644
--- a/app/soapbox/components/autosuggest_input.tsx
+++ b/app/soapbox/components/autosuggest_input.tsx
@@ -1,5 +1,5 @@
 import Portal from '@reach/portal';
-import classNames from 'classnames';
+import classNames from 'clsx';
 import { List as ImmutableList } from 'immutable';
 import React from 'react';
 import ImmutablePureComponent from 'react-immutable-pure-component';
diff --git a/app/soapbox/components/autosuggest_textarea.tsx b/app/soapbox/components/autosuggest_textarea.tsx
index a475e5ce21..47f0eea39c 100644
--- a/app/soapbox/components/autosuggest_textarea.tsx
+++ b/app/soapbox/components/autosuggest_textarea.tsx
@@ -1,5 +1,5 @@
 import Portal from '@reach/portal';
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import Textarea from 'react-textarea-autosize';
diff --git a/app/soapbox/components/avatar.tsx b/app/soapbox/components/avatar.tsx
index 9d4fbaa7c3..4f40d46bb0 100644
--- a/app/soapbox/components/avatar.tsx
+++ b/app/soapbox/components/avatar.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 import StillImage from 'soapbox/components/still_image';
diff --git a/app/soapbox/components/badge.tsx b/app/soapbox/components/badge.tsx
index 78610870f9..13646bcdb6 100644
--- a/app/soapbox/components/badge.tsx
+++ b/app/soapbox/components/badge.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 interface IBadge {
diff --git a/app/soapbox/components/column_header.js b/app/soapbox/components/column_header.js
index c5fa73e5d9..42f8eebb81 100644
Binary files a/app/soapbox/components/column_header.js and b/app/soapbox/components/column_header.js differ
diff --git a/app/soapbox/components/dropdown_menu.tsx b/app/soapbox/components/dropdown_menu.tsx
index d8b35f5fc5..bb20c86226 100644
--- a/app/soapbox/components/dropdown_menu.tsx
+++ b/app/soapbox/components/dropdown_menu.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import { supportsPassiveEvents } from 'detect-passive-events';
 import React from 'react';
 import { spring } from 'react-motion';
diff --git a/app/soapbox/components/emoji-button-wrapper.tsx b/app/soapbox/components/emoji-button-wrapper.tsx
index 2315258678..0afdba85f8 100644
--- a/app/soapbox/components/emoji-button-wrapper.tsx
+++ b/app/soapbox/components/emoji-button-wrapper.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useState, useEffect, useRef } from 'react';
 import { usePopper } from 'react-popper';
 import { useDispatch } from 'react-redux';
diff --git a/app/soapbox/components/emoji_selector.tsx b/app/soapbox/components/emoji_selector.tsx
index 69d1043855..43e10d8756 100644
--- a/app/soapbox/components/emoji_selector.tsx
+++ b/app/soapbox/components/emoji_selector.tsx
@@ -1,4 +1,4 @@
-// import classNames from 'classnames';
+// import classNames from 'clsx';
 import React from 'react';
 import { HotKeys } from 'react-hotkeys';
 import ImmutablePureComponent from 'react-immutable-pure-component';
diff --git a/app/soapbox/components/filter_bar.js b/app/soapbox/components/filter_bar.js
index 7b0651d014..601ca04a21 100644
Binary files a/app/soapbox/components/filter_bar.js and b/app/soapbox/components/filter_bar.js differ
diff --git a/app/soapbox/components/fork_awesome_icon.tsx b/app/soapbox/components/fork_awesome_icon.tsx
index 45b146e084..98d6c5747f 100644
--- a/app/soapbox/components/fork_awesome_icon.tsx
+++ b/app/soapbox/components/fork_awesome_icon.tsx
@@ -5,7 +5,7 @@
  * @see soapbox/components/icon
  */
 
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 export interface IForkAwesomeIcon extends React.HTMLAttributes<HTMLLIElement> {
diff --git a/app/soapbox/components/gdpr-banner.tsx b/app/soapbox/components/gdpr-banner.tsx
index bd9c7cb68c..425376f955 100644
--- a/app/soapbox/components/gdpr-banner.tsx
+++ b/app/soapbox/components/gdpr-banner.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
diff --git a/app/soapbox/components/hover-status-wrapper.tsx b/app/soapbox/components/hover-status-wrapper.tsx
index 6860762e71..da962e47c4 100644
--- a/app/soapbox/components/hover-status-wrapper.tsx
+++ b/app/soapbox/components/hover-status-wrapper.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import { debounce } from 'lodash';
 import React, { useRef } from 'react';
 import { useDispatch } from 'react-redux';
diff --git a/app/soapbox/components/hover_ref_wrapper.tsx b/app/soapbox/components/hover_ref_wrapper.tsx
index 7e103f3e5a..f509b2efee 100644
--- a/app/soapbox/components/hover_ref_wrapper.tsx
+++ b/app/soapbox/components/hover_ref_wrapper.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import debounce from 'lodash/debounce';
 import React, { useRef } from 'react';
 
diff --git a/app/soapbox/components/icon_button.js b/app/soapbox/components/icon_button.js
index b6ed8b3d46..cb92c28414 100644
Binary files a/app/soapbox/components/icon_button.js and b/app/soapbox/components/icon_button.js differ
diff --git a/app/soapbox/components/list.tsx b/app/soapbox/components/list.tsx
index 45e6c38c5b..ae29a5cbdc 100644
--- a/app/soapbox/components/list.tsx
+++ b/app/soapbox/components/list.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import * as React from 'react';
 import { v4 as uuidv4 } from 'uuid';
 
diff --git a/app/soapbox/components/media_gallery.js b/app/soapbox/components/media_gallery.js
index 9d23c7f724..f8e9dc51ef 100644
Binary files a/app/soapbox/components/media_gallery.js and b/app/soapbox/components/media_gallery.js differ
diff --git a/app/soapbox/components/modal_root.js b/app/soapbox/components/modal_root.js
index 6c6c4021e0..23d392b510 100644
Binary files a/app/soapbox/components/modal_root.js and b/app/soapbox/components/modal_root.js differ
diff --git a/app/soapbox/components/polls/poll-option.tsx b/app/soapbox/components/polls/poll-option.tsx
index 024f01b7ba..f81be4f5b4 100644
--- a/app/soapbox/components/polls/poll-option.tsx
+++ b/app/soapbox/components/polls/poll-option.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Motion, presets, spring } from 'react-motion';
diff --git a/app/soapbox/components/profile-hover-card.tsx b/app/soapbox/components/profile-hover-card.tsx
index e2574c7553..c96839c779 100644
--- a/app/soapbox/components/profile-hover-card.tsx
+++ b/app/soapbox/components/profile-hover-card.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { usePopper } from 'react-popper';
diff --git a/app/soapbox/components/progress_circle.tsx b/app/soapbox/components/progress_circle.tsx
index 6922bc68d3..fcfad084ed 100644
--- a/app/soapbox/components/progress_circle.tsx
+++ b/app/soapbox/components/progress_circle.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 interface IProgressCircle {
diff --git a/app/soapbox/components/quoted-status.tsx b/app/soapbox/components/quoted-status.tsx
index 6d8af184c9..a8809bedf4 100644
--- a/app/soapbox/components/quoted-status.tsx
+++ b/app/soapbox/components/quoted-status.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useState } from 'react';
 import { defineMessages, useIntl, FormattedMessage, FormattedList } from 'react-intl';
 import { useHistory } from 'react-router-dom';
diff --git a/app/soapbox/components/radio_button.tsx b/app/soapbox/components/radio_button.tsx
index b317e42591..2d350b9530 100644
--- a/app/soapbox/components/radio_button.tsx
+++ b/app/soapbox/components/radio_button.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 interface IRadioButton {
diff --git a/app/soapbox/components/scroll-top-button.tsx b/app/soapbox/components/scroll-top-button.tsx
index 64c7c46294..7bf03f66bc 100644
--- a/app/soapbox/components/scroll-top-button.tsx
+++ b/app/soapbox/components/scroll-top-button.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import throttle from 'lodash/throttle';
 import React, { useState, useEffect, useCallback } from 'react';
 import { useIntl, MessageDescriptor } from 'react-intl';
diff --git a/app/soapbox/components/sidebar-navigation-link.tsx b/app/soapbox/components/sidebar-navigation-link.tsx
index 0509c34ad0..9a20ca4829 100644
--- a/app/soapbox/components/sidebar-navigation-link.tsx
+++ b/app/soapbox/components/sidebar-navigation-link.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 
diff --git a/app/soapbox/components/sidebar_menu.tsx b/app/soapbox/components/sidebar_menu.tsx
index 084506b891..4f349fd1c2 100644
--- a/app/soapbox/components/sidebar_menu.tsx
+++ b/app/soapbox/components/sidebar_menu.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { useDispatch } from 'react-redux';
diff --git a/app/soapbox/components/site-logo.tsx b/app/soapbox/components/site-logo.tsx
index 1e8751ac55..56add1c19d 100644
--- a/app/soapbox/components/site-logo.tsx
+++ b/app/soapbox/components/site-logo.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 import { useSoapboxConfig, useSettings, useTheme } from 'soapbox/hooks';
diff --git a/app/soapbox/components/status-action-bar.tsx b/app/soapbox/components/status-action-bar.tsx
index 036289e7f9..c07bf818db 100644
--- a/app/soapbox/components/status-action-bar.tsx
+++ b/app/soapbox/components/status-action-bar.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import { List as ImmutableList } from 'immutable';
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
diff --git a/app/soapbox/components/status-action-button.tsx b/app/soapbox/components/status-action-button.tsx
index 46eac83d09..aacda516fc 100644
--- a/app/soapbox/components/status-action-button.tsx
+++ b/app/soapbox/components/status-action-button.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 import { Text, Icon, Emoji } from 'soapbox/components/ui';
diff --git a/app/soapbox/components/status-hover-card.tsx b/app/soapbox/components/status-hover-card.tsx
index dc02af3f48..4ae3f705ec 100644
--- a/app/soapbox/components/status-hover-card.tsx
+++ b/app/soapbox/components/status-hover-card.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useEffect, useState, useCallback } from 'react';
 import { usePopper } from 'react-popper';
 import { useHistory } from 'react-router-dom';
diff --git a/app/soapbox/components/status.tsx b/app/soapbox/components/status.tsx
index da7af3fa7f..dd2a151423 100644
--- a/app/soapbox/components/status.tsx
+++ b/app/soapbox/components/status.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useEffect, useRef, useState } from 'react';
 import { HotKeys } from 'react-hotkeys';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
diff --git a/app/soapbox/components/status_content.tsx b/app/soapbox/components/status_content.tsx
index 75d969868f..2a89723151 100644
--- a/app/soapbox/components/status_content.tsx
+++ b/app/soapbox/components/status_content.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useState, useRef, useEffect, useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
diff --git a/app/soapbox/components/status_list.tsx b/app/soapbox/components/status_list.tsx
index 3f0b262b55..295538da2e 100644
--- a/app/soapbox/components/status_list.tsx
+++ b/app/soapbox/components/status_list.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import debounce from 'lodash/debounce';
 import React, { useRef, useCallback } from 'react';
 import { FormattedMessage } from 'react-intl';
diff --git a/app/soapbox/components/still_image.tsx b/app/soapbox/components/still_image.tsx
index 4369c84b99..24e212ce55 100644
--- a/app/soapbox/components/still_image.tsx
+++ b/app/soapbox/components/still_image.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useRef } from 'react';
 
 import { useSettings } from 'soapbox/hooks';
diff --git a/app/soapbox/components/svg_icon.tsx b/app/soapbox/components/svg_icon.tsx
index a81979d0d3..cd8942f68c 100644
--- a/app/soapbox/components/svg_icon.tsx
+++ b/app/soapbox/components/svg_icon.tsx
@@ -4,7 +4,7 @@
  * @see soapbox/components/icon
  */
 
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import InlineSVG from 'react-inlinesvg'; // eslint-disable-line no-restricted-imports
 
diff --git a/app/soapbox/components/thumb_navigation-link.tsx b/app/soapbox/components/thumb_navigation-link.tsx
index 1a6fa2ea56..58a55e7e69 100644
--- a/app/soapbox/components/thumb_navigation-link.tsx
+++ b/app/soapbox/components/thumb_navigation-link.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { NavLink, useLocation } from 'react-router-dom';
 
diff --git a/app/soapbox/components/ui/avatar/avatar.tsx b/app/soapbox/components/ui/avatar/avatar.tsx
index 1b02c6d25d..bdd38df9c1 100644
--- a/app/soapbox/components/ui/avatar/avatar.tsx
+++ b/app/soapbox/components/ui/avatar/avatar.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import * as React from 'react';
 
 import StillImage from 'soapbox/components/still_image';
diff --git a/app/soapbox/components/ui/banner/banner.tsx b/app/soapbox/components/ui/banner/banner.tsx
index fa1cd0b444..f9313eca34 100644
--- a/app/soapbox/components/ui/banner/banner.tsx
+++ b/app/soapbox/components/ui/banner/banner.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 interface IBanner {
diff --git a/app/soapbox/components/ui/button/button.tsx b/app/soapbox/components/ui/button/button.tsx
index e3ae339fc7..97de8862b8 100644
--- a/app/soapbox/components/ui/button/button.tsx
+++ b/app/soapbox/components/ui/button/button.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 
diff --git a/app/soapbox/components/ui/button/useButtonStyles.ts b/app/soapbox/components/ui/button/useButtonStyles.ts
index 23d4019991..286a7751f5 100644
--- a/app/soapbox/components/ui/button/useButtonStyles.ts
+++ b/app/soapbox/components/ui/button/useButtonStyles.ts
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 
 type ButtonThemes = 'primary' | 'secondary' | 'tertiary' | 'accent' | 'danger' | 'transparent' | 'outline'
 type ButtonSizes = 'sm' | 'md' | 'lg'
diff --git a/app/soapbox/components/ui/card/card.tsx b/app/soapbox/components/ui/card/card.tsx
index d342ef63cf..8166273263 100644
--- a/app/soapbox/components/ui/card/card.tsx
+++ b/app/soapbox/components/ui/card/card.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
diff --git a/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx b/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
index 659f72fd3e..20810efbe4 100644
--- a/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
+++ b/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 import { Emoji, HStack } from 'soapbox/components/ui';
diff --git a/app/soapbox/components/ui/hstack/hstack.tsx b/app/soapbox/components/ui/hstack/hstack.tsx
index f05f991ec0..3eef110556 100644
--- a/app/soapbox/components/ui/hstack/hstack.tsx
+++ b/app/soapbox/components/ui/hstack/hstack.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { forwardRef } from 'react';
 
 const justifyContentOptions = {
diff --git a/app/soapbox/components/ui/icon-button/icon-button.tsx b/app/soapbox/components/ui/icon-button/icon-button.tsx
index 6b4f5414a3..0e0ad25e2e 100644
--- a/app/soapbox/components/ui/icon-button/icon-button.tsx
+++ b/app/soapbox/components/ui/icon-button/icon-button.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 import SvgIcon from '../icon/svg-icon';
diff --git a/app/soapbox/components/ui/input/input.tsx b/app/soapbox/components/ui/input/input.tsx
index 03a5630d13..5ca748ebc8 100644
--- a/app/soapbox/components/ui/input/input.tsx
+++ b/app/soapbox/components/ui/input/input.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
diff --git a/app/soapbox/components/ui/layout/layout.tsx b/app/soapbox/components/ui/layout/layout.tsx
index 59e860406a..239a7c578d 100644
--- a/app/soapbox/components/ui/layout/layout.tsx
+++ b/app/soapbox/components/ui/layout/layout.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import StickyBox from 'react-sticky-box';
 
diff --git a/app/soapbox/components/ui/modal/modal.tsx b/app/soapbox/components/ui/modal/modal.tsx
index 654ad9e7b1..e203a14600 100644
--- a/app/soapbox/components/ui/modal/modal.tsx
+++ b/app/soapbox/components/ui/modal/modal.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import * as React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
diff --git a/app/soapbox/components/ui/stack/stack.tsx b/app/soapbox/components/ui/stack/stack.tsx
index 984bae7826..3398d8df26 100644
--- a/app/soapbox/components/ui/stack/stack.tsx
+++ b/app/soapbox/components/ui/stack/stack.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 type SIZES = 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 10
diff --git a/app/soapbox/components/ui/tabs/tabs.tsx b/app/soapbox/components/ui/tabs/tabs.tsx
index 1222aaa38c..49316529af 100644
--- a/app/soapbox/components/ui/tabs/tabs.tsx
+++ b/app/soapbox/components/ui/tabs/tabs.tsx
@@ -5,7 +5,7 @@ import {
   Tab as ReachTab,
   useTabsContext,
 } from '@reach/tabs';
-import classNames from 'classnames';
+import classNames from 'clsx';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 
diff --git a/app/soapbox/components/ui/text/text.tsx b/app/soapbox/components/ui/text/text.tsx
index 087893076d..933ac7a760 100644
--- a/app/soapbox/components/ui/text/text.tsx
+++ b/app/soapbox/components/ui/text/text.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 type Themes = 'default' | 'danger' | 'primary' | 'muted' | 'subtle' | 'success' | 'inherit' | 'white'
diff --git a/app/soapbox/components/ui/textarea/textarea.tsx b/app/soapbox/components/ui/textarea/textarea.tsx
index 5ba1a523c4..c1bbe0ee49 100644
--- a/app/soapbox/components/ui/textarea/textarea.tsx
+++ b/app/soapbox/components/ui/textarea/textarea.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 interface ITextarea extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'maxLength' | 'onChange' | 'required' | 'disabled' | 'rows' | 'readOnly'> {
diff --git a/app/soapbox/components/validation-checkmark.tsx b/app/soapbox/components/validation-checkmark.tsx
index 6346348660..6b6402ac1a 100644
--- a/app/soapbox/components/validation-checkmark.tsx
+++ b/app/soapbox/components/validation-checkmark.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 import { HStack, Icon, Text } from 'soapbox/components/ui';
diff --git a/app/soapbox/components/verification_badge.tsx b/app/soapbox/components/verification_badge.tsx
index 987b1ad8ab..ce1d3792a7 100644
--- a/app/soapbox/components/verification_badge.tsx
+++ b/app/soapbox/components/verification_badge.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx
index 92b6f6f955..099bb3b96d 100644
--- a/app/soapbox/containers/soapbox.tsx
+++ b/app/soapbox/containers/soapbox.tsx
@@ -1,7 +1,7 @@
 'use strict';
 
 import { QueryClientProvider } from '@tanstack/react-query';
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useState, useEffect } from 'react';
 import { IntlProvider } from 'react-intl';
 import { Provider } from 'react-redux';
diff --git a/app/soapbox/features/account_gallery/components/media_item.tsx b/app/soapbox/features/account_gallery/components/media_item.tsx
index cddc59c9de..d98f74363e 100644
--- a/app/soapbox/features/account_gallery/components/media_item.tsx
+++ b/app/soapbox/features/account_gallery/components/media_item.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useState } from 'react';
 
 import Blurhash from 'soapbox/components/blurhash';
diff --git a/app/soapbox/features/aliases/components/search.tsx b/app/soapbox/features/aliases/components/search.tsx
index 4c2bf4b6bc..b84d90aa47 100644
--- a/app/soapbox/features/aliases/components/search.tsx
+++ b/app/soapbox/features/aliases/components/search.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
diff --git a/app/soapbox/features/audio/index.js b/app/soapbox/features/audio/index.js
index 07edf9eae2..98bfc66b50 100644
Binary files a/app/soapbox/features/audio/index.js and b/app/soapbox/features/audio/index.js differ
diff --git a/app/soapbox/features/backups/index.tsx b/app/soapbox/features/backups/index.tsx
index c74b1bf60e..87049a9367 100644
--- a/app/soapbox/features/backups/index.tsx
+++ b/app/soapbox/features/backups/index.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
diff --git a/app/soapbox/features/chats/components/chat-message-list.tsx b/app/soapbox/features/chats/components/chat-message-list.tsx
index 70f843ebd8..ad1a2f82d2 100644
--- a/app/soapbox/features/chats/components/chat-message-list.tsx
+++ b/app/soapbox/features/chats/components/chat-message-list.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import {
   Map as ImmutableMap,
   List as ImmutableList,
diff --git a/app/soapbox/features/compose/components/compose_form.js b/app/soapbox/features/compose/components/compose_form.js
index 961f79480b..da66083a65 100644
Binary files a/app/soapbox/features/compose/components/compose_form.js and b/app/soapbox/features/compose/components/compose_form.js differ
diff --git a/app/soapbox/features/compose/components/compose_form_button.tsx b/app/soapbox/features/compose/components/compose_form_button.tsx
index 975a89c410..f882259136 100644
--- a/app/soapbox/features/compose/components/compose_form_button.tsx
+++ b/app/soapbox/features/compose/components/compose_form_button.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 import { IconButton } from 'soapbox/components/ui';
diff --git a/app/soapbox/features/compose/components/emoji_picker_dropdown.js b/app/soapbox/features/compose/components/emoji_picker_dropdown.js
index aa24d2644f..9deddd6230 100644
Binary files a/app/soapbox/features/compose/components/emoji_picker_dropdown.js and b/app/soapbox/features/compose/components/emoji_picker_dropdown.js differ
diff --git a/app/soapbox/features/compose/components/privacy_dropdown.tsx b/app/soapbox/features/compose/components/privacy_dropdown.tsx
index a33eae37be..875e13d5fe 100644
--- a/app/soapbox/features/compose/components/privacy_dropdown.tsx
+++ b/app/soapbox/features/compose/components/privacy_dropdown.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import { supportsPassiveEvents } from 'detect-passive-events';
 import React, { useState, useRef, useEffect } from 'react';
 import { useIntl, defineMessages } from 'react-intl';
diff --git a/app/soapbox/features/compose/components/schedule_form.tsx b/app/soapbox/features/compose/components/schedule_form.tsx
index 32137a71f7..b1d25a6abb 100644
--- a/app/soapbox/features/compose/components/schedule_form.tsx
+++ b/app/soapbox/features/compose/components/schedule_form.tsx
@@ -1,6 +1,6 @@
 'use strict';
 
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
diff --git a/app/soapbox/features/compose/components/search.tsx b/app/soapbox/features/compose/components/search.tsx
index b9eea88d41..9c1aab765c 100644
--- a/app/soapbox/features/compose/components/search.tsx
+++ b/app/soapbox/features/compose/components/search.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import { Map as ImmutableMap } from 'immutable';
 import debounce from 'lodash/debounce';
 import React, { useCallback } from 'react';
diff --git a/app/soapbox/features/compose/components/search_results.tsx b/app/soapbox/features/compose/components/search_results.tsx
index ddcf2a563d..b1cb833ba8 100644
--- a/app/soapbox/features/compose/components/search_results.tsx
+++ b/app/soapbox/features/compose/components/search_results.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useEffect, useRef } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
diff --git a/app/soapbox/features/compose/components/text_character_counter.tsx b/app/soapbox/features/compose/components/text_character_counter.tsx
index ac650384bb..6d07fa6594 100644
--- a/app/soapbox/features/compose/components/text_character_counter.tsx
+++ b/app/soapbox/features/compose/components/text_character_counter.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { length } from 'stringz';
 
diff --git a/app/soapbox/features/compose/components/upload.tsx b/app/soapbox/features/compose/components/upload.tsx
index 5c97885752..77876c5050 100644
--- a/app/soapbox/features/compose/components/upload.tsx
+++ b/app/soapbox/features/compose/components/upload.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useState } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { spring } from 'react-motion';
diff --git a/app/soapbox/features/compose/components/upload_form.tsx b/app/soapbox/features/compose/components/upload_form.tsx
index b177e16957..88ee7c0121 100644
--- a/app/soapbox/features/compose/components/upload_form.tsx
+++ b/app/soapbox/features/compose/components/upload_form.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 import { useAppSelector } from 'soapbox/hooks';
diff --git a/app/soapbox/features/directory/components/account_card.tsx b/app/soapbox/features/directory/components/account_card.tsx
index 991461f41b..ca3e852f19 100644
--- a/app/soapbox/features/directory/components/account_card.tsx
+++ b/app/soapbox/features/directory/components/account_card.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
diff --git a/app/soapbox/features/directory/index.tsx b/app/soapbox/features/directory/index.tsx
index 375e99465e..1824ddfe33 100644
--- a/app/soapbox/features/directory/index.tsx
+++ b/app/soapbox/features/directory/index.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
diff --git a/app/soapbox/features/federation_restrictions/components/restricted_instance.tsx b/app/soapbox/features/federation_restrictions/components/restricted_instance.tsx
index 7b2547d2bb..9b5889208c 100644
--- a/app/soapbox/features/federation_restrictions/components/restricted_instance.tsx
+++ b/app/soapbox/features/federation_restrictions/components/restricted_instance.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useState } from 'react';
 
 import Icon from 'soapbox/components/icon';
diff --git a/app/soapbox/features/feed-filtering/feed-carousel.tsx b/app/soapbox/features/feed-filtering/feed-carousel.tsx
index 02b30e7a1e..c3fac39be4 100644
--- a/app/soapbox/features/feed-filtering/feed-carousel.tsx
+++ b/app/soapbox/features/feed-filtering/feed-carousel.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
diff --git a/app/soapbox/features/forms/index.tsx b/app/soapbox/features/forms/index.tsx
index 4bab25a5d9..b4b13a503c 100644
--- a/app/soapbox/features/forms/index.tsx
+++ b/app/soapbox/features/forms/index.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useState, useRef } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 
diff --git a/app/soapbox/features/groups/create/index.js b/app/soapbox/features/groups/create/index.js
index 7da3e4c6a6..d7189baa47 100644
Binary files a/app/soapbox/features/groups/create/index.js and b/app/soapbox/features/groups/create/index.js differ
diff --git a/app/soapbox/features/groups/edit/index.js b/app/soapbox/features/groups/edit/index.js
index 13601708b1..2e040aa0ee 100644
Binary files a/app/soapbox/features/groups/edit/index.js and b/app/soapbox/features/groups/edit/index.js differ
diff --git a/app/soapbox/features/groups/index/index.js b/app/soapbox/features/groups/index/index.js
index 13be53b130..d661cf3413 100644
Binary files a/app/soapbox/features/groups/index/index.js and b/app/soapbox/features/groups/index/index.js differ
diff --git a/app/soapbox/features/introduction/index.js b/app/soapbox/features/introduction/index.js
index 34b8688471..a35ba341a7 100644
Binary files a/app/soapbox/features/introduction/index.js and b/app/soapbox/features/introduction/index.js differ
diff --git a/app/soapbox/features/list_editor/components/search.tsx b/app/soapbox/features/list_editor/components/search.tsx
index 4326ffa93d..d386f40f06 100644
--- a/app/soapbox/features/list_editor/components/search.tsx
+++ b/app/soapbox/features/list_editor/components/search.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
diff --git a/app/soapbox/features/notifications/index.tsx b/app/soapbox/features/notifications/index.tsx
index 4f276f42e0..de99b90431 100644
--- a/app/soapbox/features/notifications/index.tsx
+++ b/app/soapbox/features/notifications/index.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
 import debounce from 'lodash/debounce';
 import React, { useCallback, useEffect, useRef } from 'react';
diff --git a/app/soapbox/features/onboarding/onboarding-wizard.tsx b/app/soapbox/features/onboarding/onboarding-wizard.tsx
index cf88284f64..7b82e88623 100644
--- a/app/soapbox/features/onboarding/onboarding-wizard.tsx
+++ b/app/soapbox/features/onboarding/onboarding-wizard.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import * as React from 'react';
 import { useDispatch } from 'react-redux';
 import ReactSwipeableViews from 'react-swipeable-views';
diff --git a/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx b/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
index 1889a3e20f..8f95b496f9 100644
--- a/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
+++ b/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useDispatch } from 'react-redux';
diff --git a/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx b/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
index 485775279d..9961a08c00 100644
--- a/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
+++ b/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useDispatch } from 'react-redux';
diff --git a/app/soapbox/features/placeholder/components/placeholder_card.tsx b/app/soapbox/features/placeholder/components/placeholder_card.tsx
index b296ede4e7..f587589d6d 100644
--- a/app/soapbox/features/placeholder/components/placeholder_card.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder_card.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import * as React from 'react';
 
 import { randomIntFromInterval, generateText } from '../utils';
diff --git a/app/soapbox/features/placeholder/components/placeholder_status.tsx b/app/soapbox/features/placeholder/components/placeholder_status.tsx
index 0fd5cfb9b1..1bff894594 100644
--- a/app/soapbox/features/placeholder/components/placeholder_status.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder_status.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import * as React from 'react';
 
 import PlaceholderAvatar from './placeholder_avatar';
diff --git a/app/soapbox/features/scheduled_statuses/components/scheduled_status.tsx b/app/soapbox/features/scheduled_statuses/components/scheduled_status.tsx
index 9bb26762aa..865bbaff4a 100644
--- a/app/soapbox/features/scheduled_statuses/components/scheduled_status.tsx
+++ b/app/soapbox/features/scheduled_statuses/components/scheduled_status.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
diff --git a/app/soapbox/features/soapbox_config/components/icon_picker_dropdown.js b/app/soapbox/features/soapbox_config/components/icon_picker_dropdown.js
index 8c2bdf4734..cc2986a7b3 100644
Binary files a/app/soapbox/features/soapbox_config/components/icon_picker_dropdown.js and b/app/soapbox/features/soapbox_config/components/icon_picker_dropdown.js differ
diff --git a/app/soapbox/features/soapbox_config/components/site-preview.tsx b/app/soapbox/features/soapbox_config/components/site-preview.tsx
index 932fa39ca7..94c349e250 100644
--- a/app/soapbox/features/soapbox_config/components/site-preview.tsx
+++ b/app/soapbox/features/soapbox_config/components/site-preview.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
 
diff --git a/app/soapbox/features/status/components/card.tsx b/app/soapbox/features/status/components/card.tsx
index d15eaadf3f..3d83020fee 100644
--- a/app/soapbox/features/status/components/card.tsx
+++ b/app/soapbox/features/status/components/card.tsx
@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import classnames from 'clsx';
 import { List as ImmutableList } from 'immutable';
 import React, { useState, useEffect } from 'react';
 
diff --git a/app/soapbox/features/status/components/status-interaction-bar.tsx b/app/soapbox/features/status/components/status-interaction-bar.tsx
index ec21849a6b..79d4f82bd3 100644
--- a/app/soapbox/features/status/components/status-interaction-bar.tsx
+++ b/app/soapbox/features/status/components/status-interaction-bar.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
 import React from 'react';
 import { FormattedNumber } from 'react-intl';
diff --git a/app/soapbox/features/status/components/thread-status.tsx b/app/soapbox/features/status/components/thread-status.tsx
index f9117e9036..d3d587e7a5 100644
--- a/app/soapbox/features/status/components/thread-status.tsx
+++ b/app/soapbox/features/status/components/thread-status.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import React from 'react';
 
diff --git a/app/soapbox/features/status/index.tsx b/app/soapbox/features/status/index.tsx
index 1f02961d88..189c748535 100644
--- a/app/soapbox/features/status/index.tsx
+++ b/app/soapbox/features/status/index.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import { List as ImmutableList, OrderedSet as ImmutableOrderedSet } from 'immutable';
 import { debounce } from 'lodash';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
diff --git a/app/soapbox/features/ui/components/accordion.tsx b/app/soapbox/features/ui/components/accordion.tsx
index 32eb9da0c0..f425e5321a 100644
--- a/app/soapbox/features/ui/components/accordion.tsx
+++ b/app/soapbox/features/ui/components/accordion.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
diff --git a/app/soapbox/features/ui/components/actions_modal.tsx b/app/soapbox/features/ui/components/actions_modal.tsx
index 2a9b78623b..aaa8a62092 100644
--- a/app/soapbox/features/ui/components/actions_modal.tsx
+++ b/app/soapbox/features/ui/components/actions_modal.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { spring } from 'react-motion';
diff --git a/app/soapbox/features/ui/components/background_shapes.tsx b/app/soapbox/features/ui/components/background_shapes.tsx
index fd1cd678d3..658d73f4ad 100644
--- a/app/soapbox/features/ui/components/background_shapes.tsx
+++ b/app/soapbox/features/ui/components/background_shapes.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 interface IBackgroundShapes {
diff --git a/app/soapbox/features/ui/components/column_header.tsx b/app/soapbox/features/ui/components/column_header.tsx
index a0b9a7acb1..fc0d6e7c95 100644
--- a/app/soapbox/features/ui/components/column_header.tsx
+++ b/app/soapbox/features/ui/components/column_header.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-// import classNames from 'classnames';
+// import classNames from 'clsx';
 // import Icon from 'soapbox/components/icon';
 import SubNavigation from 'soapbox/components/sub_navigation';
 
diff --git a/app/soapbox/features/ui/components/compare_history_modal.tsx b/app/soapbox/features/ui/components/compare_history_modal.tsx
index 1bf5d4df70..62898a8cb1 100644
--- a/app/soapbox/features/ui/components/compare_history_modal.tsx
+++ b/app/soapbox/features/ui/components/compare_history_modal.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import { List as ImmutableList } from 'immutable';
 import React, { useEffect } from 'react';
 import { FormattedDate, FormattedMessage } from 'react-intl';
diff --git a/app/soapbox/features/ui/components/focal_point_modal.js b/app/soapbox/features/ui/components/focal_point_modal.js
index 777b40ecbb..b45b367eb4 100644
Binary files a/app/soapbox/features/ui/components/focal_point_modal.js and b/app/soapbox/features/ui/components/focal_point_modal.js differ
diff --git a/app/soapbox/features/ui/components/image_loader.js b/app/soapbox/features/ui/components/image_loader.js
index a8f50772ea..8e6e8ec55b 100644
Binary files a/app/soapbox/features/ui/components/image_loader.js and b/app/soapbox/features/ui/components/image_loader.js differ
diff --git a/app/soapbox/features/ui/components/link_footer.tsx b/app/soapbox/features/ui/components/link_footer.tsx
index 913799a343..bc1c67fd37 100644
--- a/app/soapbox/features/ui/components/link_footer.tsx
+++ b/app/soapbox/features/ui/components/link_footer.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useDispatch } from 'react-redux';
diff --git a/app/soapbox/features/ui/components/media_modal.js b/app/soapbox/features/ui/components/media_modal.js
index dcc670d153..dc988f270a 100644
Binary files a/app/soapbox/features/ui/components/media_modal.js and b/app/soapbox/features/ui/components/media_modal.js differ
diff --git a/app/soapbox/features/ui/components/modals/landing-page-modal.tsx b/app/soapbox/features/ui/components/modals/landing-page-modal.tsx
index 815aa57b59..314f806182 100644
--- a/app/soapbox/features/ui/components/modals/landing-page-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/landing-page-modal.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
diff --git a/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx b/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx
index 38e3b11c46..aa9c4a1bdd 100644
--- a/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx
+++ b/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
diff --git a/app/soapbox/features/ui/components/navbar.tsx b/app/soapbox/features/ui/components/navbar.tsx
index 1032230092..1df4df05ab 100644
--- a/app/soapbox/features/ui/components/navbar.tsx
+++ b/app/soapbox/features/ui/components/navbar.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useRef, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
diff --git a/app/soapbox/features/ui/components/pending_status.tsx b/app/soapbox/features/ui/components/pending_status.tsx
index 5f4e5c63cc..76b8bb47ee 100644
--- a/app/soapbox/features/ui/components/pending_status.tsx
+++ b/app/soapbox/features/ui/components/pending_status.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 import StatusReplyMentions from 'soapbox/components/status-reply-mentions';
diff --git a/app/soapbox/features/ui/components/profile_fields_panel.tsx b/app/soapbox/features/ui/components/profile_fields_panel.tsx
index d734442e77..5674a3cff8 100644
--- a/app/soapbox/features/ui/components/profile_fields_panel.tsx
+++ b/app/soapbox/features/ui/components/profile_fields_panel.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl, FormattedMessage, FormatDateOptions } from 'react-intl';
 
diff --git a/app/soapbox/features/ui/components/upload_area.tsx b/app/soapbox/features/ui/components/upload_area.tsx
index 42e8783f85..6aeb5caa2c 100644
--- a/app/soapbox/features/ui/components/upload_area.tsx
+++ b/app/soapbox/features/ui/components/upload_area.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { spring } from 'react-motion';
diff --git a/app/soapbox/features/video/index.js b/app/soapbox/features/video/index.js
index d4250029b4..e5eb400b78 100644
Binary files a/app/soapbox/features/video/index.js and b/app/soapbox/features/video/index.js differ
diff --git a/package.json b/package.json
index b74ac5285f..d5a49a6f58 100644
--- a/package.json
+++ b/package.json
@@ -105,7 +105,7 @@
     "bowser": "^2.11.0",
     "browserslist": "^4.16.6",
     "cheerio": "^1.0.0-rc.10",
-    "classnames": "^2.2.5",
+    "clsx": "^1.2.1",
     "copy-webpack-plugin": "^9.0.1",
     "core-js": "^3.15.2",
     "cryptocurrency-icons": "^0.18.0",
diff --git a/webpack/shared.js b/webpack/shared.js
index 326981b8bb..6cb916290b 100644
Binary files a/webpack/shared.js and b/webpack/shared.js differ
diff --git a/yarn.lock b/yarn.lock
index 6677785fd3..5261e05704 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4213,6 +4213,11 @@ clone-regexp@^2.1.0:
   dependencies:
     is-regexp "^2.0.0"
 
+clsx@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
+  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"