diff --git a/app/javascript/mastodon/components/account_bio.tsx b/app/javascript/mastodon/components/account_bio/index.tsx
similarity index 79%
rename from app/javascript/mastodon/components/account_bio.tsx
rename to app/javascript/mastodon/components/account_bio/index.tsx
index 75067530c9..a5d8f7aaa7 100644
--- a/app/javascript/mastodon/components/account_bio.tsx
+++ b/app/javascript/mastodon/components/account_bio/index.tsx
@@ -1,9 +1,10 @@
 import classNames from 'classnames';
 
-import { useAppSelector } from '../store';
+import { useAppSelector } from '../../store';
+import { EmojiHTML } from '../emoji/html';
+import { useElementHandledLink } from '../status/handled_link';
 
-import { EmojiHTML } from './emoji/html';
-import { useElementHandledLink } from './status/handled_link';
+import classes from './styles.module.scss';
 
 interface AccountBioProps {
   className?: string;
@@ -12,7 +13,7 @@ interface AccountBioProps {
 }
 
 export const AccountBio: React.FC<AccountBioProps> = ({
-  className,
+  className = classes.bio,
   accountId,
   showDropdown = false,
 }) => {
diff --git a/app/javascript/mastodon/components/account_bio/styles.module.scss b/app/javascript/mastodon/components/account_bio/styles.module.scss
new file mode 100644
index 0000000000..62e64a219a
--- /dev/null
+++ b/app/javascript/mastodon/components/account_bio/styles.module.scss
@@ -0,0 +1,22 @@
+.bio {
+  font-size: 15px;
+  color: var(--color-text-primary);
+  unicode-bidi: plaintext;
+  overflow-wrap: anywhere;
+
+  p {
+    margin-bottom: 20px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  :any-link {
+    color: var(--color-text-status-links);
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}
diff --git a/app/javascript/mastodon/components/account_header/index.tsx b/app/javascript/mastodon/components/account_header/index.tsx
index df2493c7e9..f63672464c 100644
--- a/app/javascript/mastodon/components/account_header/index.tsx
+++ b/app/javascript/mastodon/components/account_header/index.tsx
@@ -148,11 +148,7 @@ export const AccountHeader: React.FC<{
             <div className={classes.bioButtonsWrapper}>
               {me && account.id !== me && <AccountNote accountId={accountId} />}
 
-              <AccountBio
-                showDropdown
-                accountId={accountId}
-                className={classes.bio}
-              />
+              <AccountBio showDropdown accountId={accountId} />
 
               <AccountHeaderFields accountId={accountId} />
 
diff --git a/app/javascript/mastodon/components/account_header/styles.module.scss b/app/javascript/mastodon/components/account_header/styles.module.scss
index 48320a6ea4..5e3ae14dbe 100644
--- a/app/javascript/mastodon/components/account_header/styles.module.scss
+++ b/app/javascript/mastodon/components/account_header/styles.module.scss
@@ -274,29 +274,6 @@ $button-fallback-breakpoint: $button-breakpoint + 55px;
   }
 }
 
-.bio {
-  font-size: 15px;
-  color: var(--color-text-primary);
-  unicode-bidi: plaintext;
-  overflow-wrap: anywhere;
-
-  p {
-    margin-bottom: 20px;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  :any-link {
-    color: var(--color-text-status-links);
-
-    &:hover {
-      text-decoration: none;
-    }
-  }
-}
-
 .familiarFollowers {
   margin-top: 16px;
 }