diff --git a/playground/counter.tsx b/playground/counter.tsx
index 6bbd235..0235907 100644
--- a/playground/counter.tsx
+++ b/playground/counter.tsx
@@ -1,6 +1,8 @@
 import * as React from "react"
 import { Button } from "../src.new/button.js"
-import { Embed } from "../src.new/embed.js"
+import { EmbedField } from "../src.new/embed/embed-field.js"
+import { EmbedTitle } from "../src.new/embed/embed-title.js"
+import { Embed } from "../src.new/embed/embed.js"
 
 export function Counter() {
   const [count, setCount] = React.useState(0)
@@ -11,10 +13,12 @@ export function Counter() {
       this button was clicked {count} times
       {embedVisible && (
         <Embed>
-          <Embed.Title>the counter</Embed.Title>
-          <Embed.Field name="is it even?">
-            {count % 2 === 0 ? "yes" : "no"}
-          </Embed.Field>
+          <EmbedTitle>the counter</EmbedTitle>
+          {count > 0 && (
+            <EmbedField name="is it even?">
+              {count % 2 === 0 ? "yes" : "no"}
+            </EmbedField>
+          )}
         </Embed>
       )}
       {embedVisible && (
diff --git a/src.new/embed.tsx b/src.new/embed.tsx
deleted file mode 100644
index 480d45b..0000000
--- a/src.new/embed.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import type { MessageEmbedOptions, MessageOptions } from "discord.js"
-import React from "react"
-import { ReacordElement } from "./element.js"
-import { Node } from "./node.js"
-
-export type EmbedProps = {
-  description?: string
-  url?: string
-  timestamp?: Date
-  color?: number
-  footer?: {
-    text: string
-    iconURL?: string
-  }
-  image?: {
-    url: string
-  }
-  thumbnail?: {
-    url: string
-  }
-  author?: {
-    name: string
-    url?: string
-    iconURL?: string
-  }
-  children?: React.ReactNode
-}
-
-export function Embed(props: EmbedProps) {
-  return (
-    <ReacordElement props={props} createNode={() => new EmbedNode(props)}>
-      {props.children}
-    </ReacordElement>
-  )
-}
-
-class EmbedNode extends Node<EmbedProps> {
-  override modifyMessageOptions(options: MessageOptions): void {
-    const embed = { ...this.props }
-    for (const child of this.children) {
-      if (child instanceof EmbedChildNode) {
-        child.modifyEmbedOptions(embed)
-      }
-    }
-
-    options.embeds ??= []
-    options.embeds.push(embed)
-  }
-}
-
-abstract class EmbedChildNode<Props> extends Node<Props> {
-  abstract modifyEmbedOptions(options: MessageEmbedOptions): void
-}
-
-export type EmbedTitleProps = {
-  children: string
-  url?: string
-}
-
-Embed.Title = function Title(props: EmbedTitleProps) {
-  return (
-    <ReacordElement
-      props={props}
-      createNode={() => new EmbedTitleNode(props)}
-    />
-  )
-}
-
-class EmbedTitleNode extends EmbedChildNode<EmbedTitleProps> {
-  override modifyEmbedOptions(options: MessageEmbedOptions): void {
-    options.title = this.props.children
-    options.url = this.props.url
-  }
-}
-
-export type EmbedFieldProps = {
-  name: string
-  inline?: boolean
-  children: string
-}
-
-Embed.Field = function Field(props: EmbedFieldProps) {
-  return (
-    <ReacordElement
-      props={props}
-      createNode={() => new EmbedFieldNode(props)}
-    />
-  )
-}
-
-class EmbedFieldNode extends EmbedChildNode<EmbedFieldProps> {
-  override modifyEmbedOptions(options: MessageEmbedOptions): void {
-    options.fields ??= []
-    options.fields.push({
-      name: this.props.name,
-      value: this.props.children,
-      inline: this.props.inline,
-    })
-  }
-}
diff --git a/src.new/embed/embed-child.ts b/src.new/embed/embed-child.ts
new file mode 100644
index 0000000..a4c04c3
--- /dev/null
+++ b/src.new/embed/embed-child.ts
@@ -0,0 +1,6 @@
+import type { MessageEmbedOptions } from "discord.js"
+import { Node } from "../node.js"
+
+export abstract class EmbedChildNode<Props> extends Node<Props> {
+  abstract modifyEmbedOptions(options: MessageEmbedOptions): void
+}
diff --git a/src.new/embed/embed-field.tsx b/src.new/embed/embed-field.tsx
new file mode 100644
index 0000000..02f8b33
--- /dev/null
+++ b/src.new/embed/embed-field.tsx
@@ -0,0 +1,30 @@
+import { MessageEmbedOptions } from "discord.js"
+import React from "react"
+import { ReacordElement } from "../element.jsx"
+import { EmbedChildNode } from "./embed-child.js"
+
+export type EmbedFieldProps = {
+  name: string
+  inline?: boolean
+  children: string
+}
+
+export function EmbedField(props: EmbedFieldProps) {
+  return (
+    <ReacordElement
+      props={props}
+      createNode={() => new EmbedFieldNode(props)}
+    />
+  )
+}
+
+class EmbedFieldNode extends EmbedChildNode<EmbedFieldProps> {
+  override modifyEmbedOptions(options: MessageEmbedOptions): void {
+    options.fields ??= []
+    options.fields.push({
+      name: this.props.name,
+      value: this.props.children,
+      inline: this.props.inline,
+    })
+  }
+}
diff --git a/src.new/embed/embed-title.tsx b/src.new/embed/embed-title.tsx
new file mode 100644
index 0000000..9bc3b32
--- /dev/null
+++ b/src.new/embed/embed-title.tsx
@@ -0,0 +1,25 @@
+import { MessageEmbedOptions } from "discord.js"
+import React from "react"
+import { ReacordElement } from "../element.jsx"
+import { EmbedChildNode } from "./embed-child.js"
+
+export type EmbedTitleProps = {
+  children: string
+  url?: string
+}
+
+export function EmbedTitle(props: EmbedTitleProps) {
+  return (
+    <ReacordElement
+      props={props}
+      createNode={() => new EmbedTitleNode(props)}
+    />
+  )
+}
+
+class EmbedTitleNode extends EmbedChildNode<EmbedTitleProps> {
+  override modifyEmbedOptions(options: MessageEmbedOptions): void {
+    options.title = this.props.children
+    options.url = this.props.url
+  }
+}
diff --git a/src.new/embed/embed.tsx b/src.new/embed/embed.tsx
new file mode 100644
index 0000000..db5e7a1
--- /dev/null
+++ b/src.new/embed/embed.tsx
@@ -0,0 +1,50 @@
+import type { MessageOptions } from "discord.js"
+import React from "react"
+import { ReacordElement } from "../element.js"
+import { Node } from "../node.js"
+import { EmbedChildNode } from "./embed-child.js"
+
+export type EmbedProps = {
+  description?: string
+  url?: string
+  timestamp?: Date
+  color?: number
+  footer?: {
+    text: string
+    iconURL?: string
+  }
+  image?: {
+    url: string
+  }
+  thumbnail?: {
+    url: string
+  }
+  author?: {
+    name: string
+    url?: string
+    iconURL?: string
+  }
+  children?: React.ReactNode
+}
+
+export function Embed(props: EmbedProps) {
+  return (
+    <ReacordElement props={props} createNode={() => new EmbedNode(props)}>
+      {props.children}
+    </ReacordElement>
+  )
+}
+
+class EmbedNode extends Node<EmbedProps> {
+  override modifyMessageOptions(options: MessageOptions): void {
+    const embed = { ...this.props }
+    for (const child of this.children) {
+      if (child instanceof EmbedChildNode) {
+        child.modifyEmbedOptions(embed)
+      }
+    }
+
+    options.embeds ??= []
+    options.embeds.push(embed)
+  }
+}