diff --git a/src/timelines/RegularToot.tsx b/src/timelines/RegularToot.tsx
index fd5c80d..76a0704 100644
--- a/src/timelines/RegularToot.tsx
+++ b/src/timelines/RegularToot.tsx
@@ -10,23 +10,19 @@ import {
   createContext,
   useContext,
 } from "solid-js";
-import tootStyle from "./toot.module.css";
-import { formatRelative } from "date-fns";
-import Img from "~material/Img.js";
 import { Body2 } from "~material/typography.js";
-import { SmartToySharp, Lock } from "@suid/icons-material";
 import { useTimeSource } from "~platform/timesrc.js";
 import { resolveCustomEmoji } from "../masto/toot.js";
 import { Divider } from "@suid/material";
 import cardStyle from "~material/cards.module.css";
 import MediaAttachmentGrid from "./toots/MediaAttachmentGrid.jsx";
-import { useDateFnLocale } from "~platform/i18n";
 import { makeAcctText, useDefaultSession } from "../masto/clients";
 import TootContent from "./toots/TootContent";
 import BoostIcon from "./toots/BoostIcon";
 import PreviewCard from "./toots/PreviewCard";
 import TootPoll from "./toots/TootPoll";
 import TootActionGroup from "./toots/TootActionGroup.js";
+import TootAuthorGroup from "./toots/TootAuthorGroup.js";
 import "./RegularToot.css";
 
 export type TootEnv = {
@@ -66,63 +62,17 @@ type RegularTootProps = {
 
 export function findRootToot(element: HTMLElement) {
   let current: HTMLElement | null = element;
-  while (current && !current.classList.contains(tootStyle.toot)) {
+  while (current && !current.classList.contains("RegularToot")) {
     current = current.parentElement;
   }
   if (!current) {
     throw Error(
-      `the element must be placed under a element with ${tootStyle.toot}`,
+      `the element must be placed under a element with .RegularToot`,
     );
   }
   return current;
 }
 
-function TootAuthorGroup(
-  props: {
-    status: mastodon.v1.Status;
-    now: Date;
-  } & JSX.HTMLElementTags["div"],
-) {
-  const [managed, rest] = splitProps(props, ["status", "now"]);
-  const toot = () => managed.status;
-  const dateFnLocale = useDateFnLocale();
-
-  return (
-    <div class={tootStyle.tootAuthorGrp} {...rest}>
-      <Img src={toot().account.avatar} class={tootStyle.tootAvatar} />
-      <div class={tootStyle.tootAuthorNameGrp}>
-        <div class={tootStyle.tootAuthorNamePrimary}>
-          <Show when={toot().account.bot}>
-            <SmartToySharp class="acct-mark" aria-label="Bot" />
-          </Show>
-          <Show when={toot().account.locked}>
-            <Lock class="acct-mark" aria-label="Locked" />
-          </Show>
-          <Body2
-            component="span"
-            ref={(e: { innerHTML: string }) => {
-              createRenderEffect(() => {
-                e.innerHTML = resolveCustomEmoji(
-                  toot().account.displayName,
-                  toot().account.emojis,
-                );
-              });
-            }}
-          />
-        </div>
-        <time datetime={toot().createdAt}>
-          {formatRelative(toot().createdAt, managed.now, {
-            locale: dateFnLocale(),
-          })}
-        </time>
-        <span>
-          @{toot().account.username}@{new URL(toot().account.url).hostname}
-        </span>
-      </div>
-    </div>
-  );
-}
-
 /**
  * find bottom-to-top the element with `data-action`.
  */
diff --git a/src/timelines/toot.module.css b/src/timelines/toots/TootAuthorGroup.css
similarity index 85%
rename from src/timelines/toot.module.css
rename to src/timelines/toots/TootAuthorGroup.css
index e666f66..bbef056 100644
--- a/src/timelines/toot.module.css
+++ b/src/timelines/toots/TootAuthorGroup.css
@@ -1,4 +1,4 @@
-.tootAuthorGrp {
+.TootAuthorGroup {
   display: flex;
   align-items: flex-start;
   gap: 8px;
@@ -10,7 +10,7 @@
   }
 }
 
-.tootAuthorNameGrp {
+.TootAuthorGroup > .name-grp {
   display: grid;
   grid-template-columns: 1fr auto;
   color: var(--tutu-color-secondary-text-on-surface);
@@ -30,10 +30,10 @@
   }
 }
 
-.tootAuthorNamePrimary {
+.TootAuthorGroup > .name-grp > .name-primary {
   color: var(--tutu-color-on-surface);
 
-  > :global(.acct-mark) {
+  > .acct-mark {
     font-size: 1.2em;
     color: var(--tutu-color-secondary-text-on-surface);
     vertical-align: sub;
@@ -41,7 +41,7 @@
   }
 }
 
-.tootAvatar {
+.TootAuthorGroup > .avatar {
   width: calc(var(--toot-avatar-size, 40px) - 1px);
   aspect-ratio: 1/1;
   object-fit: contain;
@@ -49,4 +49,4 @@
   overflow: hidden;
   border: 1px solid var(--tutu-color-surface);
   background-color: var(--tutu-color-surface-d);
-}
+}
\ No newline at end of file
diff --git a/src/timelines/toots/TootAuthorGroup.tsx b/src/timelines/toots/TootAuthorGroup.tsx
new file mode 100644
index 0000000..798c9b7
--- /dev/null
+++ b/src/timelines/toots/TootAuthorGroup.tsx
@@ -0,0 +1,57 @@
+import { SmartToySharp, Lock } from "@suid/icons-material";
+import { formatRelative } from "date-fns";
+import type { mastodon } from "masto";
+import { createRenderEffect, Show, splitProps, type JSX } from "solid-js";
+import Img from "~material/Img";
+import { Body2 } from "~material/typography";
+import { useAppLocale } from "~platform/i18n";
+import { resolveCustomEmoji } from "../../masto/toot";
+import "./TootAuthorGroup.css";
+
+function TootAuthorGroup(
+  props: {
+    status: mastodon.v1.Status;
+    now: Date;
+  } & JSX.HTMLElementTags["div"],
+) {
+  const [managed, rest] = splitProps(props, ["status", "now"]);
+  const toot = () => managed.status;
+  const { dateFn: dateFnLocale } = useAppLocale();
+
+  return (
+    <div class="TootAuthorGroup" {...rest}>
+      <Img src={toot().account.avatar} class="avatar" />
+      <div class={"name-grp"}>
+        <div class="name-primary">
+          <Show when={toot().account.bot}>
+            <SmartToySharp class="acct-mark" aria-label="Bot" />
+          </Show>
+          <Show when={toot().account.locked}>
+            <Lock class="acct-mark" aria-label="Locked" />
+          </Show>
+          <Body2
+            component="span"
+            ref={(e: { innerHTML: string }) => {
+              createRenderEffect(() => {
+                e.innerHTML = resolveCustomEmoji(
+                  toot().account.displayName,
+                  toot().account.emojis,
+                );
+              });
+            }}
+          />
+        </div>
+        <time datetime={toot().createdAt}>
+          {formatRelative(toot().createdAt, managed.now, {
+            locale: dateFnLocale(),
+          })}
+        </time>
+        <span>
+          @{toot().account.username}@{new URL(toot().account.url).hostname}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+export default TootAuthorGroup;