diff --git a/packages/richtext-slate/src/field/RichText.tsx b/packages/richtext-slate/src/field/RichText.tsx
index 952024cf2..d7c304213 100644
--- a/packages/richtext-slate/src/field/RichText.tsx
+++ b/packages/richtext-slate/src/field/RichText.tsx
@@ -13,25 +13,15 @@ import { withHistory } from 'slate-history'
 import { Editable, Slate, withReact } from 'slate-react'
 
 import type { FormFieldBase } from '../../../ui/src/forms/fields/shared'
-import type {
-  ElementNode,
-  RichTextCustomLeaf,
-  RichTextElement,
-  RichTextLeaf,
-  TextNode,
-} from '../types'
+import type { ElementNode, RichTextElement, RichTextLeaf, TextNode } from '../types'
 
 import { withCondition } from '../../../ui/src/forms/withCondition'
 import { defaultRichTextValue } from '../data/defaultValue'
 import { richTextValidate } from '../data/validation'
-import elementTypes from './elements'
 import listTypes from './elements/listTypes'
-import enablePlugins from './enablePlugins'
 import hotkeys from './hotkeys'
 import './index.scss'
-import leafTypes from './leaves'
 import toggleLeaf from './leaves/toggle'
-import mergeCustomFunctions from './mergeCustomFunctions'
 import withEnterBreakOut from './plugins/withEnterBreakOut'
 import withHTML from './plugins/withHTML'
 import { LeafButtonProvider } from './providers/LeafButtonProvider'
@@ -96,8 +86,9 @@ const RichText: React.FC<
     > = {}
 
     for (const [key, value] of richTextComponentMap) {
-      if (key.startsWith('leaf.button') || key.startsWith('leaf.component')) {
-        const leafName = key.replace('leaf.button', '').replace('leaf.component', '')
+      if (key.startsWith('leaf.button.') || key.startsWith('leaf.component.')) {
+        const leafName = key.replace('leaf.button.', '').replace('leaf.component.', '')
+
         if (!enabledLeaves[leafName]) {
           enabledLeaves[leafName] = {
             name: leafName,
@@ -106,8 +97,8 @@ const RichText: React.FC<
           }
         }
 
-        if (key.startsWith('leaf.button')) enabledLeaves[leafName].Button = value
-        if (key.startsWith('leaf.component')) enabledLeaves[leafName].Leaf = value
+        if (key.startsWith('leaf.button.')) enabledLeaves[leafName].Button = value
+        if (key.startsWith('leaf.component.')) enabledLeaves[leafName].Leaf = value
       }
     }
 
@@ -200,7 +191,7 @@ const RichText: React.FC<
   const renderLeaf = useCallback(
     ({ attributes, children, leaf }) => {
       const matchedLeaves = Object.entries(leaves).filter(([leafName]) => leaf[leafName])
-      console.log(matchedLeaves, leaf)
+
       if (matchedLeaves.length > 0) {
         return matchedLeaves.reduce(
           (result, [, leafConfig], i) => {
@@ -231,7 +222,7 @@ const RichText: React.FC<
 
       return <span {...attributes}>{children}</span>
     },
-    [path, props, schemaPath, richTextComponentMap],
+    [path, props, schemaPath, leaves],
   )
 
   const classes = [
diff --git a/packages/richtext-slate/src/field/leaves/bold/Bold/index.tsx b/packages/richtext-slate/src/field/leaves/bold/Bold/index.tsx
new file mode 100644
index 000000000..ea57d493b
--- /dev/null
+++ b/packages/richtext-slate/src/field/leaves/bold/Bold/index.tsx
@@ -0,0 +1,9 @@
+'use client'
+import React from 'react'
+
+import { useLeaf } from '../../../providers/LeafProvider'
+
+export const Bold = () => {
+  const { attributes, children } = useLeaf()
+  return <strong {...attributes}>{children}</strong>
+}
diff --git a/packages/richtext-slate/src/field/leaves/bold/index.tsx b/packages/richtext-slate/src/field/leaves/bold/index.tsx
index d2fadaca9..f16885e35 100644
--- a/packages/richtext-slate/src/field/leaves/bold/index.tsx
+++ b/packages/richtext-slate/src/field/leaves/bold/index.tsx
@@ -3,13 +3,8 @@ import React from 'react'
 import type { RichTextCustomLeaf } from '../../..'
 
 import BoldIcon from '../../icons/Bold'
-import { useLeaf } from '../../providers/LeafProvider'
 import LeafButton from '../Button'
-
-const Bold = () => {
-  const { attributes, children } = useLeaf()
-  return <strong {...attributes}>{children}</strong>
-}
+import { Bold } from './Bold'
 
 const bold: RichTextCustomLeaf = {
   name: 'bold',
diff --git a/packages/richtext-slate/src/field/leaves/code/Code/index.tsx b/packages/richtext-slate/src/field/leaves/code/Code/index.tsx
new file mode 100644
index 000000000..4df8db6ec
--- /dev/null
+++ b/packages/richtext-slate/src/field/leaves/code/Code/index.tsx
@@ -0,0 +1,9 @@
+'use client'
+import React from 'react'
+
+import { useLeaf } from '../../../providers/LeafProvider'
+
+export const Code = () => {
+  const { attributes, children } = useLeaf()
+  return <code {...attributes}>{children}</code>
+}
diff --git a/packages/richtext-slate/src/field/leaves/code/index.tsx b/packages/richtext-slate/src/field/leaves/code/index.tsx
index ee49f93cb..de436de62 100644
--- a/packages/richtext-slate/src/field/leaves/code/index.tsx
+++ b/packages/richtext-slate/src/field/leaves/code/index.tsx
@@ -3,13 +3,8 @@ import React from 'react'
 import type { RichTextCustomLeaf } from '../../..'
 
 import CodeIcon from '../../icons/Code'
-import { useLeaf } from '../../providers/LeafProvider'
 import LeafButton from '../Button'
-
-const Code = () => {
-  const { attributes, children } = useLeaf()
-  return <code {...attributes}>{children}</code>
-}
+import { Code } from './Code'
 
 const code: RichTextCustomLeaf = {
   name: 'code',
diff --git a/packages/richtext-slate/src/field/leaves/italic/Italic/index.tsx b/packages/richtext-slate/src/field/leaves/italic/Italic/index.tsx
new file mode 100644
index 000000000..576b65d90
--- /dev/null
+++ b/packages/richtext-slate/src/field/leaves/italic/Italic/index.tsx
@@ -0,0 +1,9 @@
+'use client'
+import React from 'react'
+
+import { useLeaf } from '../../../providers/LeafProvider'
+
+export const Italic = () => {
+  const { attributes, children } = useLeaf()
+  return <em {...attributes}>{children}</em>
+}
diff --git a/packages/richtext-slate/src/field/leaves/italic/index.tsx b/packages/richtext-slate/src/field/leaves/italic/index.tsx
index 0b9fddcb4..eca83b0c0 100644
--- a/packages/richtext-slate/src/field/leaves/italic/index.tsx
+++ b/packages/richtext-slate/src/field/leaves/italic/index.tsx
@@ -3,13 +3,8 @@ import React from 'react'
 import type { RichTextCustomLeaf } from '../../..'
 
 import ItalicIcon from '../../icons/Italic'
-import { useLeaf } from '../../providers/LeafProvider'
 import LeafButton from '../Button'
-
-const Italic = () => {
-  const { attributes, children } = useLeaf()
-  return <em {...attributes}>{children}</em>
-}
+import { Italic } from './Italic'
 
 const italic: RichTextCustomLeaf = {
   name: 'italic',
diff --git a/packages/richtext-slate/src/field/leaves/strikethrough/Strikethrough/index.tsx b/packages/richtext-slate/src/field/leaves/strikethrough/Strikethrough/index.tsx
new file mode 100644
index 000000000..a6ec1ccff
--- /dev/null
+++ b/packages/richtext-slate/src/field/leaves/strikethrough/Strikethrough/index.tsx
@@ -0,0 +1,9 @@
+'use client'
+import React from 'react'
+
+import { useLeaf } from '../../../providers/LeafProvider'
+
+export const Strikethrough = () => {
+  const { attributes, children } = useLeaf()
+  return <del {...attributes}>{children}</del>
+}
diff --git a/packages/richtext-slate/src/field/leaves/strikethrough/index.tsx b/packages/richtext-slate/src/field/leaves/strikethrough/index.tsx
index d00f2cd84..81c5fa382 100644
--- a/packages/richtext-slate/src/field/leaves/strikethrough/index.tsx
+++ b/packages/richtext-slate/src/field/leaves/strikethrough/index.tsx
@@ -1,16 +1,10 @@
-'use client'
 import React from 'react'
 
 import type { RichTextCustomLeaf } from '../../..'
 
 import StrikethroughIcon from '../../icons/Strikethrough'
-import { useLeaf } from '../../providers/LeafProvider'
 import LeafButton from '../Button'
-
-const Strikethrough = () => {
-  const { attributes, children } = useLeaf()
-  return <del {...attributes}>{children}</del>
-}
+import { Strikethrough } from './Strikethrough'
 
 const strikethrough: RichTextCustomLeaf = {
   name: 'strikethrough',
diff --git a/packages/richtext-slate/src/field/leaves/underline/Underline/index.tsx b/packages/richtext-slate/src/field/leaves/underline/Underline/index.tsx
new file mode 100644
index 000000000..d92459057
--- /dev/null
+++ b/packages/richtext-slate/src/field/leaves/underline/Underline/index.tsx
@@ -0,0 +1,9 @@
+'use client'
+import React from 'react'
+
+import { useLeaf } from '../../../providers/LeafProvider'
+
+export const Underline = () => {
+  const { attributes, children } = useLeaf()
+  return <u {...attributes}>{children}</u>
+}
diff --git a/packages/richtext-slate/src/field/leaves/underline/index.tsx b/packages/richtext-slate/src/field/leaves/underline/index.tsx
index f36fec070..138aba599 100644
--- a/packages/richtext-slate/src/field/leaves/underline/index.tsx
+++ b/packages/richtext-slate/src/field/leaves/underline/index.tsx
@@ -3,13 +3,8 @@ import React from 'react'
 import type { RichTextCustomLeaf } from '../../..'
 
 import UnderlineIcon from '../../icons/Underline'
-import { useLeaf } from '../../providers/LeafProvider'
 import LeafButton from '../Button'
-
-const Underline = () => {
-  const { attributes, children } = useLeaf()
-  return <u {...attributes}>{children}</u>
-}
+import { Underline } from './Underline'
 
 const underline: RichTextCustomLeaf = {
   name: 'underline',
diff --git a/packages/richtext-slate/tsconfig.json b/packages/richtext-slate/tsconfig.json
index 6972bb9fd..fc75072f7 100644
--- a/packages/richtext-slate/tsconfig.json
+++ b/packages/richtext-slate/tsconfig.json
@@ -20,6 +20,12 @@
     "src/**/*.spec.ts",
     "src/**/*.spec.tsx"
   ],
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.d.ts", "src/**/*.json"],
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.d.ts",
+    "src/**/*.json",
+    "src/field/leaves/italic/Italic"
+  ],
   "references": [{ "path": "../payload" }] // db-mongodb depends on payload
 }
diff --git a/packages/ui/src/forms/fields/RichText/index.tsx b/packages/ui/src/forms/fields/RichText/index.tsx
index bcfb47348..0171a33f9 100644
--- a/packages/ui/src/forms/fields/RichText/index.tsx
+++ b/packages/ui/src/forms/fields/RichText/index.tsx
@@ -1,37 +1,9 @@
-import React, { useMemo } from 'react'
+import React from 'react'
 
-import type { RichTextAdapter } from 'payload/types'
 import { Props } from './types'
 
 const RichText: React.FC<Props> = (props) => {
-  console.log(props)
   return null
-  // // eslint-disable-next-line react/destructuring-assignment
-  // const editor: RichTextAdapter = fieldprops.editor
-
-  // const isLazy = 'LazyFieldComponent' in editor
-
-  // const ImportedFieldComponent: React.FC<any> = useMemo(() => {
-  //   return isLazy
-  //     ? React.lazy(() => {
-  //         return editor.LazyFieldComponent().then((resolvedComponent) => ({
-  //           default: resolvedComponent,
-  //         }))
-  //       })
-  //     : null
-  // }, [editor, isLazy])
-
-  // if (isLazy) {
-  //   return (
-  //     ImportedFieldComponent && (
-  //       <React.Suspense>
-  //         <ImportedFieldComponent {...fieldprops} />
-  //       </React.Suspense>
-  //     )
-  //   )
-  // }
-
-  // return <editor.FieldComponent {...fieldprops} />
 }
 
 export default RichText