diff --git a/frontend/app/components/auth/auth.tsx b/frontend/app/components/auth/auth.tsx
index 94f5ef73..1e4f7e1b 100644
--- a/frontend/app/components/auth/auth.tsx
+++ b/frontend/app/components/auth/auth.tsx
@@ -1,7 +1,7 @@
 import { h, Fragment } from 'preact';
 import { useState } from 'preact/hooks';
 import { useIntl } from 'react-intl';
-import cn from 'classnames';
+import clsx from 'clsx';
 import { useDispatch } from 'react-redux';
 
 import { setUser } from 'store/user/actions';
@@ -105,11 +105,11 @@ export default function Auth() {
   const isTokenView = view === 'token';
   const formFooterJSX = (
     <>
-      {errorMessage && <div className={cn('auth-error', styles.error)}>{errorMessage}</div>}
+      {errorMessage && <div className={clsx('auth-error', styles.error)}>{errorMessage}</div>}
       <Button className="auth-submit" type="submit" disabled={isLoading}>
         {isLoading ? (
           <div
-            className={cn('spinner', styles.spinner)}
+            className={clsx('spinner', styles.spinner)}
             role="presentation"
             aria-label={intl.formatMessage(messages.loading)}
           />
@@ -120,7 +120,7 @@ export default function Auth() {
     </>
   );
   return (
-    <div className={cn('auth', styles.root)}>
+    <div className={clsx('auth', styles.root)}>
       <Button
         className="auth-button"
         selected={isDropdownShowed}
@@ -140,11 +140,11 @@ export default function Auth() {
         {intl.formatMessage(messages.signin)}
       </Button>
       {isDropdownShowed && (
-        <div className={cn('auth-dropdown', styles.dropdown)} ref={ref}>
-          <form className={cn('auth-form', styles.form)} onSubmit={handleSubmit}>
+        <div className={clsx('auth-dropdown', styles.dropdown)} ref={ref}>
+          <form className={clsx('auth-form', styles.form)} onSubmit={handleSubmit}>
             {isTokenView ? (
               <>
-                <div className={cn('auth-row', styles.row)}>
+                <div className={clsx('auth-row', styles.row)}>
                   <div className={styles.backButton}>
                     <Button className="auth-back-button" size="small" kind="transparent" onClick={handleShowEmailStep}>
                       <svg
@@ -167,7 +167,7 @@ export default function Auth() {
                     </Button>
                   </div>
                   <button
-                    className={cn('auth-close-button', styles.closeButton)}
+                    className={clsx('auth-close-button', styles.closeButton)}
                     title="Close sign-in dropdown"
                     onClick={handleDropdownClose}
                   >
@@ -182,10 +182,10 @@ export default function Auth() {
                     </svg>
                   </button>
                 </div>
-                <div className={cn('auth-row', styles.row)}>
+                <div className={clsx('auth-row', styles.row)}>
                   <TextareaAutosize
                     name="token"
-                    className={cn('auth-token-textatea', styles.textarea)}
+                    className={clsx('auth-token-textatea', styles.textarea)}
                     placeholder={intl.formatMessage(messages.token)}
                     disabled={isLoading}
                   />
@@ -196,19 +196,21 @@ export default function Auth() {
               <>
                 {hasOAuthProviders && (
                   <>
-                    <h5 className={cn('auth-form-title', styles.title)}>{intl.formatMessage(messages.oauthSource)}</h5>
+                    <h5 className={clsx('auth-form-title', styles.title)}>
+                      {intl.formatMessage(messages.oauthSource)}
+                    </h5>
                     <OAuthProviders providers={oauthProviders} />
                   </>
                 )}
                 {hasOAuthProviders && hasFormProviders && (
-                  <div className={cn('auth-divider', styles.divider)} title={intl.formatMessage(messages.or)} />
+                  <div className={clsx('auth-divider', styles.divider)} title={intl.formatMessage(messages.or)} />
                 )}
                 {hasFormProviders && (
                   <>
                     {formProviders.length === 1 ? (
-                      <h5 className={cn('auth-form-title', styles.title)}>{formProviders[0]}</h5>
+                      <h5 className={clsx('auth-form-title', styles.title)}>{formProviders[0]}</h5>
                     ) : (
-                      <div className={cn('auth-tabs', styles.tabs)}>
+                      <div className={clsx('auth-tabs', styles.tabs)}>
                         {formProviders.map((p) => (
                           <Fragment key={p}>
                             <input
@@ -220,14 +222,14 @@ export default function Auth() {
                               onChange={handleProviderChange}
                               checked={p === view}
                             />
-                            <label className={cn('auth-tabs-item', styles.provider)} htmlFor={`form-provider-${p}`}>
+                            <label className={clsx('auth-tabs-item', styles.provider)} htmlFor={`form-provider-${p}`}>
                               {p.slice(0, 6)}
                             </label>
                           </Fragment>
                         ))}
                       </div>
                     )}
-                    <div className={cn('auth-row', styles.row)}>
+                    <div className={clsx('auth-row', styles.row)}>
                       <Input
                         className="auth-input-username"
                         required
@@ -244,7 +246,7 @@ export default function Auth() {
                       />
                     </div>
                     {view === 'email' && (
-                      <div className={cn('auth-row', styles.row)}>
+                      <div className={clsx('auth-row', styles.row)}>
                         <Input
                           className="auth-input-email"
                           required
diff --git a/frontend/app/components/auth/components/button.tsx b/frontend/app/components/auth/components/button.tsx
index 2af70777..d5b41c56 100644
--- a/frontend/app/components/auth/components/button.tsx
+++ b/frontend/app/components/auth/components/button.tsx
@@ -1,11 +1,9 @@
-import { h, FunctionComponent, JSX, VNode } from 'preact';
-import classnames from 'classnames/bind';
+import { h, JSX, VNode } from 'preact';
+import clsx from 'clsx';
 
 import styles from './button.module.css';
 
-const cx = classnames.bind(styles);
-
-export type ButtonProps = Omit<JSX.HTMLAttributes<HTMLButtonElement>, 'size'> & {
+type Props = Omit<JSX.HTMLAttributes<HTMLButtonElement>, 'size'> & {
   size?: 'small';
   kind?: 'transparent';
   suffix?: VNode;
@@ -13,13 +11,16 @@ export type ButtonProps = Omit<JSX.HTMLAttributes<HTMLButtonElement>, 'size'> &
   selected?: boolean;
 };
 
-const Button: FunctionComponent<ButtonProps> = ({ children, size, kind, suffix, selected, className, ...props }) => {
+export default function Button({ children, size, kind, suffix, selected, className, ...props }: Props) {
   return (
-    <button className={cx(className, styles.button, kind, size, { selected })} {...props}>
+    <button
+      className={clsx(className, styles.button, kind && styles[kind], size && styles[size], {
+        [styles.selected]: selected,
+      })}
+      {...props}
+    >
       {children}
       {suffix && <div className={styles.suffix}>{suffix}</div>}
     </button>
   );
-};
-
-export default Button;
+}
diff --git a/frontend/app/components/auth/components/oauth.tsx b/frontend/app/components/auth/components/oauth.tsx
index b900f5c0..6752ae9f 100644
--- a/frontend/app/components/auth/components/oauth.tsx
+++ b/frontend/app/components/auth/components/oauth.tsx
@@ -1,6 +1,6 @@
 import { h, JSX } from 'preact';
 import { useDispatch } from 'react-redux';
-import cn from 'classnames';
+import clsx from 'clsx';
 import { useIntl } from 'react-intl';
 
 import { siteId } from 'common/settings';
@@ -40,18 +40,18 @@ export default function OAuthProviders({ providers }: Props) {
   };
 
   return (
-    <ul className={cn('oauth', styles.root)}>
+    <ul className={clsx('oauth', styles.root)}>
       {providers.map((p) => {
         const { name, icon } = getProviderData(p, theme);
 
         return (
-          <li className={cn('oauth-item', styles.item)}>
+          <li className={clsx('oauth-item', styles.item)}>
             <a
               target="_blank"
               rel="noopener noreferrer"
               href={`${BASE_URL}/auth/${p}/login?from=${location}&site=${siteId}`}
               onClick={handleOathClick}
-              className={cn('oauth-button', styles.button, styles[buttonVariant], styles[p])}
+              className={clsx('oauth-button', styles.button, styles[buttonVariant], styles[p])}
               data-provider-name={name}
               title={intl.formatMessage(messages.oauthTitle, { provider: name })}
             >
diff --git a/frontend/app/components/comment-form/text-expander.tsx b/frontend/app/components/comment-form/text-expander.tsx
index 561372a2..b11a683b 100644
--- a/frontend/app/components/comment-form/text-expander.tsx
+++ b/frontend/app/components/comment-form/text-expander.tsx
@@ -1,7 +1,7 @@
 import '@github/text-expander-element';
 import { h, Fragment, render, FunctionalComponent } from 'preact';
 import { useEffect, useRef } from 'preact/hooks';
-import cx from 'classnames';
+import clsx from 'clsx';
 
 import { StaticStore } from 'common/static-store';
 import { Theme } from 'common/types';
@@ -16,14 +16,17 @@ type Emoji = {
 
 function SuggestionList({ items, theme }: { items: Array<Emoji>; theme: Theme }) {
   const isDarkTheme = theme === `dark`;
-  const suggesterClass = cx(styles.suggester, { [styles.suggesterDark]: isDarkTheme });
-  const suggesterItemClass = cx(styles.suggesterItem, { [styles.suggesterItemDark]: isDarkTheme });
+
   return (
-    <ul className={suggesterClass}>
+    <ul className={clsx(styles.suggester, { [styles.suggesterDark]: isDarkTheme })}>
       {items.map(({ key, emoji }: Emoji) => {
         return (
-          // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
-          <li role="option" className={suggesterItemClass} data-value={key}>
+          <li
+            // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
+            role="option"
+            className={clsx(styles.suggesterItem, { [styles.suggesterItemDark]: isDarkTheme })}
+            data-value={key}
+          >
             <span className={styles.emojiResult}>{emoji}</span> {key}
           </li>
         );
diff --git a/frontend/app/components/input/index.ts b/frontend/app/components/input/index.ts
index 188cbaa0..f376f8cd 100644
--- a/frontend/app/components/input/index.ts
+++ b/frontend/app/components/input/index.ts
@@ -1,2 +1 @@
 export { Input } from './input';
-export type { InputProps } from './input';
diff --git a/frontend/app/components/input/input.tsx b/frontend/app/components/input/input.tsx
index 84cf699f..70a451bc 100644
--- a/frontend/app/components/input/input.tsx
+++ b/frontend/app/components/input/input.tsx
@@ -1,18 +1,18 @@
 import { h, JSX } from 'preact';
-import classnames from 'classnames/bind';
+import clsx from 'clsx';
 
 import styles from './input.module.css';
 
-const cx = classnames.bind(styles);
-
-export type InputProps = {
+type Props = {
   invalid?: boolean;
   type?: string;
   className?: string;
 } & JSX.HTMLAttributes<HTMLInputElement>;
 
-export const Input = ({ children, className, type = 'text', invalid, ...props }: InputProps) => (
-  <input className={cx(className, 'input', { invalid })} type={type} {...props}>
-    {children}
-  </input>
-);
+export function Input({ children, className, type = 'text', invalid, ...props }: Props) {
+  return (
+    <input className={clsx(className, styles.input, { [styles.input]: invalid })} type={type} {...props}>
+      {children}
+    </input>
+  );
+}
diff --git a/frontend/app/components/list-comments/list-comments.tsx b/frontend/app/components/list-comments/list-comments.tsx
index 4a608f27..9399d467 100644
--- a/frontend/app/components/list-comments/list-comments.tsx
+++ b/frontend/app/components/list-comments/list-comments.tsx
@@ -1,6 +1,6 @@
 import { h, FunctionComponent } from 'preact';
 import { useIntl } from 'react-intl';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 import type { Comment as CommentType } from 'common/types';
 import Comment from 'components/comment';
@@ -15,7 +15,7 @@ const ListComments: FunctionComponent<ListCommentsProps> = ({ comments = [] }) =
   const intl = useIntl();
 
   return (
-    <div className={classnames('comments-list', styles.root)}>
+    <div className={clsx('comments-list', styles.root)}>
       {comments.map((comment) => (
         <Comment
           intl={intl}
diff --git a/frontend/app/components/root/root.tsx b/frontend/app/components/root/root.tsx
index d2234462..903174ed 100644
--- a/frontend/app/components/root/root.tsx
+++ b/frontend/app/components/root/root.tsx
@@ -2,7 +2,7 @@ import { h, Component, FunctionComponent, Fragment } from 'preact';
 import { useSelector } from 'react-redux';
 import b from 'bem-react-helper';
 import { IntlShape, useIntl, FormattedMessage, defineMessages } from 'react-intl';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 import type { Sorting } from 'common/types';
 import type { StoreState } from 'store';
@@ -339,7 +339,7 @@ export const ConnectedRoot: FunctionComponent = () => {
   const intl = useIntl();
 
   return (
-    <div className={classnames(b('root', {}, { theme: props.theme }), props.theme)}>
+    <div className={clsx(b('root', {}, { theme: props.theme }), props.theme)}>
       <Root {...props} {...actions} intl={intl} />
       <p className="root__copyright" role="contentinfo">
         <FormattedMessage
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 99fbb183..97e32eb4 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -3833,11 +3833,6 @@
         }
       }
     },
-    "classnames": {
-      "version": "2.2.6",
-      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
-      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
-    },
     "clean-css": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
@@ -3946,6 +3941,11 @@
         }
       }
     },
+    "clsx": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index ea34f877..e4748c65 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -30,7 +30,7 @@
     "@github/text-expander-element": "^2.2.0",
     "@ungap/custom-elements": "^0.1.15",
     "bem-react-helper": "^1.2.2",
-    "classnames": "^2.2.6",
+    "clsx": "^1.1.1",
     "core-js": "^3.9.0",
     "intersection-observer": "^0.12.0",
     "lodash-es": "^4.17.21",