diff --git a/docs/docs/connections/mysql.mdx b/docs/docs/connections/mysql.mdx
index 77227163ef..31c9157587 100644
--- a/docs/docs/connections/mysql.mdx
+++ b/docs/docs/connections/mysql.mdx
@@ -5,7 +5,7 @@ hide_title: true
 slug: /connections/mysql
 ---
 
-import { DocPageHeader } from '@site/src/components/HomepageFeatures/DocPageHeader.tsx';
+import { DocPageHeader } from '@site/src/CustomComponents/DocPageHeader.tsx';
 
 <DocPageHeader
   title="Mysql"
diff --git a/docs/docs/connections/postgres.mdx b/docs/docs/connections/postgres.mdx
index 4d71080df3..0648a8da71 100644
--- a/docs/docs/connections/postgres.mdx
+++ b/docs/docs/connections/postgres.mdx
@@ -5,7 +5,7 @@ hide_title: true
 slug: /connections/postgres
 ---
 
-import { DocPageHeader } from '@site/src/components/HomepageFeatures/DocPageHeader.tsx';
+import { DocPageHeader } from '@site/src/CustomComponents/DocPageHeader.tsx';
 
 <DocPageHeader
   title="Postgres"
diff --git a/docs/docs/connections/s3.mdx b/docs/docs/connections/s3.mdx
index b010de0591..e6bbd5b586 100644
--- a/docs/docs/connections/s3.mdx
+++ b/docs/docs/connections/s3.mdx
@@ -5,7 +5,7 @@ hide_title: true
 slug: /connections/s3
 ---
 
-import { DocPageHeader } from '@site/src/components/HomepageFeatures/DocPageHeader.tsx';
+import { DocPageHeader } from '@site/src/CustomComponents/DocPageHeader.tsx';
 
 <DocPageHeader
   title="S3"
diff --git a/docs/docs/deploy/docker-compose.mdx b/docs/docs/deploy/docker-compose.mdx
index a8023bcef9..6e2f5071d5 100644
--- a/docs/docs/deploy/docker-compose.mdx
+++ b/docs/docs/deploy/docker-compose.mdx
@@ -5,7 +5,7 @@ hide_title: true
 slug: /deploy/docker-compose
 ---
 
-import { DocPageHeader } from '@site/src/components/HomepageFeatures/DocPageHeader.tsx';
+import { DocPageHeader } from '@site/src/CustomComponents/DocPageHeader.tsx';
 
 <DocPageHeader
   title="Deploy with Docker Compose"
diff --git a/docs/docs/deploy/introduction.mdx b/docs/docs/deploy/introduction.mdx
index 291ebe6818..6d660f4288 100644
--- a/docs/docs/deploy/introduction.mdx
+++ b/docs/docs/deploy/introduction.mdx
@@ -5,7 +5,7 @@ hide_title: true
 slug: /deploy/intro
 ---
 
-import { DocPageHeader } from '@site/src/components/HomepageFeatures/DocPageHeader.tsx';
+import { DocPageHeader } from '@site/src/CustomComponents/DocPageHeader.tsx';
 
 <DocPageHeader
   title="Deploy Neosync"
diff --git a/docs/docs/deploy/kubernetes.mdx b/docs/docs/deploy/kubernetes.mdx
index 6b7becc3e2..23e4a6117e 100644
--- a/docs/docs/deploy/kubernetes.mdx
+++ b/docs/docs/deploy/kubernetes.mdx
@@ -5,7 +5,7 @@ hide_title: true
 slug: /deploy/kubernetes
 ---
 
-import { DocPageHeader } from '@site/src/components/HomepageFeatures/DocPageHeader.tsx';
+import { DocPageHeader } from '@site/src/CustomComponents/DocPageHeader.tsx';
 
 <DocPageHeader
   title="Deploy on Kubernetes"
diff --git a/docs/docs/overview/Introduction.mdx b/docs/docs/overview/Introduction.mdx
index 14558fe460..a78264768c 100644
--- a/docs/docs/overview/Introduction.mdx
+++ b/docs/docs/overview/Introduction.mdx
@@ -5,28 +5,16 @@ hide_title: true
 slug: /
 ---
 
-import { DocPageHeader } from '@site/src/components/HomepageFeatures/DocPageHeader.tsx';
-import { HeroImage } from '@site/src/components/HomepageFeatures/HeroImage.tsx';
-import { CustomCardList } from '@site/src/components/HomepageFeatures/CustomCardList.tsx';
-import { CustomCard } from '@site/src/components/HomepageFeatures/CustomCard.tsx';
 import {
-  PiArrowsSplitLight,
-  PiFlaskLight,
-  PiPlugsLight,
-  PiRocketLaunchLight,
-} from 'react-icons/pi';
-import { BsFunnel } from 'react-icons/bs';
-import { FaSync } from 'react-icons/fa';
-import { GrConnect } from 'react-icons/gr';
-import {
-  LightningBoltIcon,
   LayersIcon,
+  LightningBoltIcon,
   LinkBreak1Icon,
   StackIcon,
 } from '@radix-ui/react-icons';
-import { LuNetwork } from 'react-icons/lu';
-
-<DocPageHeader title="Welcome to the Neosync Docs" />
+import { CustomCard } from '@site/src/CustomComponents/CustomCard.tsx';
+import { CustomCardList } from '@site/src/CustomComponents/CustomCardList.tsx';
+import { DocPageHeader } from '@site/src/CustomComponents/DocPageHeader.tsx';
+<DocPageHeader title="Welcome to the Neosync Docs" />;
 
 Neosync is an open-source, developer-first way to create safe, anonymized test data from production data and sync it across all environments for high-quality local, stage and CI testing.
 
diff --git a/docs/docs/overview/platform.mdx b/docs/docs/overview/platform.mdx
index c07b950585..c45fd096fa 100644
--- a/docs/docs/overview/platform.mdx
+++ b/docs/docs/overview/platform.mdx
@@ -5,8 +5,7 @@ hide_title: true
 slug: /platform
 ---
 
-import { DocPageHeader } from '@site/src/components/HomepageFeatures/DocPageHeader.tsx';
-import { HeroImage } from '@site/src/components/HomepageFeatures/HeroImage.tsx';
+import { DocPageHeader } from '@site/src/CustomComponents/DocPageHeader.tsx';
 
 <DocPageHeader title="Platform Overview" />
 
diff --git a/docs/docs/overview/use-cases/anonymization.mdx b/docs/docs/overview/use-cases/anonymization.mdx
index 332079b0d4..5cb6b5c05b 100644
--- a/docs/docs/overview/use-cases/anonymization.mdx
+++ b/docs/docs/overview/use-cases/anonymization.mdx
@@ -5,7 +5,7 @@ hide_title: true
 slug: anonymization
 ---
 
-import { DocPageHeader } from '@site/src/components/HomepageFeatures/DocPageHeader.tsx';
+import { DocPageHeader } from '@site/src/CustomComponents/DocPageHeader.tsx';
 
 <DocPageHeader title="Anonymization" />
 
diff --git a/docs/docs/overview/use-cases/replication.mdx b/docs/docs/overview/use-cases/replication.mdx
index bbcccd6772..a5a4d71b17 100644
--- a/docs/docs/overview/use-cases/replication.mdx
+++ b/docs/docs/overview/use-cases/replication.mdx
@@ -5,7 +5,7 @@ hide_title: true
 slug: replication
 ---
 
-import { DocPageHeader } from '@site/src/components/HomepageFeatures/DocPageHeader.tsx';
+import { DocPageHeader } from '@site/src/CustomComponents/DocPageHeader.tsx';
 
 <DocPageHeader title="Replicate Data" />
 
diff --git a/docs/docs/overview/use-cases/subsetting.mdx b/docs/docs/overview/use-cases/subsetting.mdx
index d6aaf15813..a0b03c8d3d 100644
--- a/docs/docs/overview/use-cases/subsetting.mdx
+++ b/docs/docs/overview/use-cases/subsetting.mdx
@@ -5,7 +5,7 @@ hide_title: true
 slug: subsetting
 ---
 
-import { DocPageHeader } from '@site/src/components/HomepageFeatures/DocPageHeader.tsx';
+import { DocPageHeader } from '@site/src/CustomComponents/DocPageHeader.tsx';
 
 <DocPageHeader title="Subset Data" />
 
diff --git a/docs/docs/overview/use-cases/synthetic-data.mdx b/docs/docs/overview/use-cases/synthetic-data.mdx
index 2ef4b735ed..25bc5a6154 100644
--- a/docs/docs/overview/use-cases/synthetic-data.mdx
+++ b/docs/docs/overview/use-cases/synthetic-data.mdx
@@ -5,7 +5,7 @@ hide_title: true
 slug: synthetic-data
 ---
 
-import { DocPageHeader } from '@site/src/components/HomepageFeatures/DocPageHeader.tsx';
+import { DocPageHeader } from '@site/src/CustomComponents/DocPageHeader.tsx';
 
 <DocPageHeader title="Synthetic Data" />
 
diff --git a/docs/docs/transformers/custom.mdx b/docs/docs/transformers/custom.mdx
index c8298c58d5..31756994ed 100644
--- a/docs/docs/transformers/custom.mdx
+++ b/docs/docs/transformers/custom.mdx
@@ -5,7 +5,7 @@ hide_title: true
 slug: /transformers/custom
 ---
 
-import { DocPageHeader } from '@site/src/components/HomepageFeatures/DocPageHeader.tsx';
+import { DocPageHeader } from '@site/src/CustomComponents/DocPageHeader.tsx';
 
 <DocPageHeader title="Custom" />
 
diff --git a/docs/docs/transformers/introduction.mdx b/docs/docs/transformers/introduction.mdx
index d1db2ba97f..0bc5a9568f 100644
--- a/docs/docs/transformers/introduction.mdx
+++ b/docs/docs/transformers/introduction.mdx
@@ -5,7 +5,7 @@ hide_title: true
 slug: /transformers/introduction
 ---
 
-import { DocPageHeader } from '@site/src/components/HomepageFeatures/DocPageHeader.tsx';
+import { DocPageHeader } from '@site/src/CustomComponents/DocPageHeader.tsx';
 
 <DocPageHeader title="Transformers" />
 
diff --git a/docs/docs/transformers/pre-built/email.mdx b/docs/docs/transformers/pre-built/email.mdx
deleted file mode 100644
index e8da41e2e8..0000000000
--- a/docs/docs/transformers/pre-built/email.mdx
+++ /dev/null
@@ -1,12 +0,0 @@
----
-title: Email
-id: email
-hide_title: true
-slug: /transformers/pre-built/email
----
-
-import { DocPageHeader } from '@site/src/components/HomepageFeatures/DocPageHeader.tsx';
-
-<DocPageHeader title="Email" />
-
-## More coming soon!
diff --git a/docs/docs/transformers/pre-built/phone.mdx b/docs/docs/transformers/pre-built/phone.mdx
deleted file mode 100644
index a2f124b46b..0000000000
--- a/docs/docs/transformers/pre-built/phone.mdx
+++ /dev/null
@@ -1,12 +0,0 @@
----
-title: Phone
-id: phone
-hide_title: true
-slug: /transformers/pre-built/phone
----
-
-import { DocPageHeader } from '@site/src/components/HomepageFeatures/DocPageHeader.tsx';
-
-<DocPageHeader title="Phone" />
-
-## More coming soon!
diff --git a/docs/docs/transformers/pre-built/ssn.mdx b/docs/docs/transformers/pre-built/ssn.mdx
deleted file mode 100644
index 50ca32f7b1..0000000000
--- a/docs/docs/transformers/pre-built/ssn.mdx
+++ /dev/null
@@ -1,12 +0,0 @@
----
-title: SSN
-id: ssn
-hide_title: true
-slug: /transformers/pre-built/ssn
----
-
-import { DocPageHeader } from '@site/src/components/HomepageFeatures/DocPageHeader.tsx';
-
-<DocPageHeader title="ssn" />
-
-## More coming soon!
diff --git a/docs/docs/transformers/system/email.mdx b/docs/docs/transformers/system/email.mdx
new file mode 100644
index 0000000000..6159324876
--- /dev/null
+++ b/docs/docs/transformers/system/email.mdx
@@ -0,0 +1,93 @@
+---
+title: Email
+id: email
+hide_title: true
+slug: /transformers/system/email
+---
+
+import { TransformerPageHeader } from '@site/src/CustomComponents/TransformerPageHeader.tsx';
+
+import { DocsTable } from '@site/src/CustomComponents/DocsTable.tsx';
+
+<TransformerPageHeader
+  title="Email"
+  type="string"
+  apiRef="https://github.com/nucleuscloud/neosync/blob/main/worker/internal/benthos/transformers/email.go"
+/>
+
+## Definition
+
+The email transformer can anonymize an existing email address or completely generate a new one. An email is made up of three parts:
+
+`<username>@<domain>.<top-level-domain>`
+
+By default, the transformer randomizes the username, domain and top-level domain while always preserving the email format by retaining the @ and . characters.
+
+For example, the following input value:
+`john@acme.com`
+
+Would produce the following ouput value:
+`ytvub873@ksh0293.com`
+
+You can see we generated new privacy-safe values for the username and the domain. You can update this structure using the configurations below. Lastly, the email transformer takes in a `string` and returns a `string`.
+
+## Configurations
+
+Depending on your validations, you may want to configure the output email. The email transformer has the following configurations:
+
+<DocsTable
+  headers={[
+    'Name',
+    'Description',
+    'Default',
+    'Example Input',
+    'Example Output',
+  ]}
+  rowData={[
+    {
+      data: [
+        'PreserveDomain',
+        'Preserve Domain carries over the input domain to the output email address. This includes the domain and top-level domain.',
+        'false',
+        'john@gmail.com',
+        'fjf2903@gmail.com',
+      ],
+    },
+    {
+      data: [
+        'PreserveLength',
+        'Preserve Length will ensure that the output email address is the same length as the input email address. This includes the domain as well.',
+        'false',
+        'john@gmail.com',
+        'hw98@gmail.com',
+      ],
+    },
+  ]}
+/>
+
+## Examples
+
+There are several ways you can mix-and-match configurations to get different potential email formats. Here are some possible combinations:
+
+<DocsTable
+  headers={[
+    'PreserveLength',
+    'PreserveDomain',
+    'Example Input',
+    'Example Output',
+  ]}
+  rowData={[
+    {
+      data: ['false', 'true', 'joe@gmail.com', 'f98723uh@gmail.com'],
+    },
+    {
+      data: ['true', 'false', 'joe@gmail.com', '9cd@ms0ej.com'],
+    },
+    {
+      data: ['true', 'true', 'joe@gmail.com', 'mDy@bdo3s.com'],
+    },
+    {
+      data: ['false', 'false', 'joe@gmail.com', 'fweq23f@fheuiw78.edu'],
+    },
+  ]}
+/>
diff --git a/docs/docs/transformers/system/phone.mdx b/docs/docs/transformers/system/phone.mdx
new file mode 100644
index 0000000000..87667e94b7
--- /dev/null
+++ b/docs/docs/transformers/system/phone.mdx
@@ -0,0 +1,12 @@
+---
+title: Phone
+id: phone
+hide_title: true
+slug: /transformers/system/phone
+---
+
+import { DocPageHeader } from '@site/src/CustomComponents/DocPageHeader.tsx';
+
+<DocPageHeader title="Phone" />
+
+## More coming soon!
diff --git a/docs/docs/transformers/pre-built/physical-address.mdx b/docs/docs/transformers/system/physical-address.mdx
similarity index 50%
rename from docs/docs/transformers/pre-built/physical-address.mdx
rename to docs/docs/transformers/system/physical-address.mdx
index b009bf19c8..353ace07cd 100644
--- a/docs/docs/transformers/pre-built/physical-address.mdx
+++ b/docs/docs/transformers/system/physical-address.mdx
@@ -2,10 +2,10 @@
 title: Physical Address
 id: physical-address
 hide_title: true
-slug: /transformers/pre-built/physical-address
+slug: /transformers/system/physical-address
 ---
 
-import { DocPageHeader } from '@site/src/components/HomepageFeatures/DocPageHeader.tsx';
+import { DocPageHeader } from '@site/src/CustomComponents/DocPageHeader.tsx';
 
 <DocPageHeader title="Physical Address" />
 
diff --git a/docs/docs/transformers/system/ssn.mdx b/docs/docs/transformers/system/ssn.mdx
new file mode 100644
index 0000000000..a123c54d7a
--- /dev/null
+++ b/docs/docs/transformers/system/ssn.mdx
@@ -0,0 +1,12 @@
+---
+title: SSN
+id: ssn
+hide_title: true
+slug: /transformers/system/ssn
+---
+
+import { DocPageHeader } from '@site/src/CustomComponents/DocPageHeader.tsx';
+
+<DocPageHeader title="ssn" />
+
+## More coming soon!
diff --git a/docs/knip.ts b/docs/knip.ts
index ea4283f546..09bf98a6b8 100644
--- a/docs/knip.ts
+++ b/docs/knip.ts
@@ -4,7 +4,7 @@ const config = {
     'docusaurus.config.js',
     'sidebars.js',
     'static/sync-dark-mode.js',
-    'src/components/HomepageFeatures/**',
+    'src/**',
     'src/theme/**',
   ],
   ignoreDependencies: [
@@ -13,9 +13,13 @@ const config = {
     '@radix-ui/react-icons',
     'autoprefixer',
     'postcss',
+    'node',
+    '@docusaurus/theme-classic',
     'prism-react-renderer',
     'react-icons',
     'tailwindcss',
+    'class-variance-authority',
+    'tailwind-merge',
   ],
   ignoreBinaries: [],
 };
diff --git a/docs/package-lock.json b/docs/package-lock.json
index 07d0c28dc0..fd91da55cf 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -13,11 +13,13 @@
         "@mdx-js/react": "^1.6.22",
         "@radix-ui/react-icons": "^1.3.0",
         "autoprefixer": "^10.4.16",
+        "class-variance-authority": "^0.7.0",
         "postcss": "^8.4.31",
         "prism-react-renderer": "^1.3.5",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-icons": "^4.11.0",
+        "tailwind-merge": "^2.0.0",
         "tailwindcss": "^3.3.5"
       },
       "devDependencies": {
@@ -2057,9 +2059,9 @@
       "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA=="
     },
     "node_modules/@babel/runtime": {
-      "version": "7.22.15",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.15.tgz",
-      "integrity": "sha512-T0O+aa+4w0u06iNmapipJXMV4HoUir03hpx3/YqXXhu9xim3w+dVphjFWl1OH8NbZHw5Lbm9k45drDkgq2VNNA==",
+      "version": "7.23.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.2.tgz",
+      "integrity": "sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -5150,6 +5152,25 @@
         "node": ">=8"
       }
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.0.tgz",
+      "integrity": "sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==",
+      "dependencies": {
+        "clsx": "2.0.0"
+      },
+      "funding": {
+        "url": "https://joebell.co.uk"
+      }
+    },
+    "node_modules/class-variance-authority/node_modules/clsx": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
+      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/clean-css": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz",
@@ -12740,6 +12761,18 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/tailwind-merge": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.0.0.tgz",
+      "integrity": "sha512-WO8qghn9yhsldLSg80au+3/gY9E4hFxIvQ3qOmlpXnqpDKoMruKfi/56BbbMg6fHTQJ9QD3cc79PoWqlaQE4rw==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.3.5",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.5.tgz",
diff --git a/docs/package.json b/docs/package.json
index 4130488db4..8320bb55f8 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -24,11 +24,13 @@
     "@mdx-js/react": "^1.6.22",
     "@radix-ui/react-icons": "^1.3.0",
     "autoprefixer": "^10.4.16",
+    "class-variance-authority": "^0.7.0",
     "postcss": "^8.4.31",
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-icons": "^4.11.0",
+    "tailwind-merge": "^2.0.0",
     "tailwindcss": "^3.3.5"
   },
   "devDependencies": {
diff --git a/docs/sidebars.js b/docs/sidebars.js
index 0302286f96..7bee34c120 100644
--- a/docs/sidebars.js
+++ b/docs/sidebars.js
@@ -112,28 +112,28 @@ const sidebars = {
     },
     {
       type: 'category',
-      label: 'Pre-built',
+      label: 'System',
       collapsible: true,
       collapsed: true,
       items: [
         {
           type: 'doc',
-          id: 'transformers/pre-built/email',
+          id: 'transformers/system/email',
           label: 'Email',
         },
         {
           type: 'doc',
-          id: 'transformers/pre-built/physical-address',
+          id: 'transformers/system/physical-address',
           label: 'Physical Address',
         },
         {
           type: 'doc',
-          id: 'transformers/pre-built/phone',
+          id: 'transformers/system/phone',
           label: 'Phone',
         },
         {
           type: 'doc',
-          id: 'transformers/pre-built/ssn',
+          id: 'transformers/system/ssn',
           label: 'SSN',
         },
       ],
diff --git a/docs/src/components/HomepageFeatures/CustomCard.tsx b/docs/src/CustomComponents/CustomCard.tsx
similarity index 100%
rename from docs/src/components/HomepageFeatures/CustomCard.tsx
rename to docs/src/CustomComponents/CustomCard.tsx
diff --git a/docs/src/components/HomepageFeatures/CustomCardList.tsx b/docs/src/CustomComponents/CustomCardList.tsx
similarity index 100%
rename from docs/src/components/HomepageFeatures/CustomCardList.tsx
rename to docs/src/CustomComponents/CustomCardList.tsx
diff --git a/docs/src/components/HomepageFeatures/DocPageHeader.tsx b/docs/src/CustomComponents/DocPageHeader.tsx
similarity index 100%
rename from docs/src/components/HomepageFeatures/DocPageHeader.tsx
rename to docs/src/CustomComponents/DocPageHeader.tsx
diff --git a/docs/src/CustomComponents/DocsTable.tsx b/docs/src/CustomComponents/DocsTable.tsx
new file mode 100644
index 0000000000..d7ddb798ef
--- /dev/null
+++ b/docs/src/CustomComponents/DocsTable.tsx
@@ -0,0 +1,45 @@
+import React, { ReactElement } from 'react';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '../components/CustomTable';
+
+interface TableData {
+  headers: string[];
+  rowData: RowData[];
+}
+
+interface RowData {
+  data: string[];
+}
+
+export function DocsTable(props: TableData): ReactElement {
+  const { headers, rowData } = props;
+
+  return (
+    <Table className="rounded-lg overflow-hidden border border-gray-400">
+      <TableHeader>
+        <TableRow>
+          {headers.map((header) => (
+            <TableHead key={header}>{header}</TableHead>
+          ))}
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {rowData.map((tableData) => (
+          <TableRow key={tableData.data[0]}>
+            {tableData.data.map((item) => (
+              <TableCell key={item} className="font-medium bg-[#FFFFFF]">
+                {item}
+              </TableCell>
+            ))}
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}
diff --git a/docs/src/components/HomepageFeatures/HeroImage.tsx b/docs/src/CustomComponents/HeroImage.tsx
similarity index 100%
rename from docs/src/components/HomepageFeatures/HeroImage.tsx
rename to docs/src/CustomComponents/HeroImage.tsx
diff --git a/docs/src/components/HomepageFeatures/HeroandGrid.tsx b/docs/src/CustomComponents/HeroandGrid.tsx
similarity index 100%
rename from docs/src/components/HomepageFeatures/HeroandGrid.tsx
rename to docs/src/CustomComponents/HeroandGrid.tsx
diff --git a/docs/src/CustomComponents/TransformerPageHeader.tsx b/docs/src/CustomComponents/TransformerPageHeader.tsx
new file mode 100644
index 0000000000..8c0e928684
--- /dev/null
+++ b/docs/src/CustomComponents/TransformerPageHeader.tsx
@@ -0,0 +1,22 @@
+import Link from '@docusaurus/Link';
+import React from 'react';
+import { Badge } from '../components/Badge';
+
+interface Props {
+  title: string;
+  type: string;
+  apiRef: string;
+}
+
+export const TransformerPageHeader = (props: Props) => {
+  const { title, type, apiRef } = props;
+  return (
+    <div className="transformer-page-header">
+      <div>{title}</div>
+      <Badge>{type}</Badge>
+      <Link href={apiRef} className="flex items-center">
+        <Badge>API reference</Badge>
+      </Link>
+    </div>
+  );
+};
diff --git a/docs/src/components/HomepageFeatures/index.tsx b/docs/src/CustomComponents/index.tsx
similarity index 100%
rename from docs/src/components/HomepageFeatures/index.tsx
rename to docs/src/CustomComponents/index.tsx
index fac351f1b3..a5d8ec86f6 100644
--- a/docs/src/components/HomepageFeatures/index.tsx
+++ b/docs/src/CustomComponents/index.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
 import clsx from 'clsx';
+import React from 'react';
 import styles from './styles.module.css';
 
 type FeatureItem = {
diff --git a/docs/src/components/HomepageFeatures/styles.module.css b/docs/src/CustomComponents/styles.module.css
similarity index 100%
rename from docs/src/components/HomepageFeatures/styles.module.css
rename to docs/src/CustomComponents/styles.module.css
diff --git a/docs/src/components/Badge.tsx b/docs/src/components/Badge.tsx
new file mode 100644
index 0000000000..11c13e19bd
--- /dev/null
+++ b/docs/src/components/Badge.tsx
@@ -0,0 +1,36 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from '../utils';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default:
+          'border border-gray-200 bg-gray-100 text-primary-foreground text',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };
diff --git a/docs/src/components/CustomTable.tsx b/docs/src/components/CustomTable.tsx
new file mode 100644
index 0000000000..f2ae8deaa3
--- /dev/null
+++ b/docs/src/components/CustomTable.tsx
@@ -0,0 +1,127 @@
+import * as React from 'react';
+import { cn } from '../utils';
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="flex  overflow-auto">
+    <table
+      ref={ref}
+      className={cn('caption-bottom text-sm', className)}
+      {...props}
+    />
+  </div>
+));
+Table.displayName = 'Table';
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead
+    ref={ref}
+    className={cn(
+      '[&_tr]:border-b',
+
+      className
+    )}
+    {...props}
+  />
+));
+TableHeader.displayName = 'TableHeader';
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn('[&_tr:last-child]:border-0', className)}
+    {...props}
+  />
+));
+TableBody.displayName = 'TableBody';
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      'border-t bg-muted/50 font-medium [&>tr]:last:border-b-0',
+      className
+    )}
+    {...props}
+  />
+));
+TableFooter.displayName = 'TableFooter';
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
+      className
+    )}
+    {...props}
+  />
+));
+TableRow.displayName = 'TableRow';
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+      className
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = 'TableHead';
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn(
+      'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+      className
+    )}
+    {...props}
+  />
+));
+TableCell.displayName = 'TableCell';
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn('mt-4 text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+TableCaption.displayName = 'TableCaption';
+
+export {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+};
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index 662cc53e4f..503b6e1cbd 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -84,6 +84,10 @@ this is the class for the sidebar categories that section headers
     @apply flex flex-col text-left font-bold text-3xl;
   }
 
+  .transformer-page-header {
+    @apply flex flex-row gap-4 font-bold text-3xl items-center;
+  }
+
   .heroImage {
     @apply py-10;
   }
diff --git a/docs/src/theme/DocSidebarItem/Link/index.js b/docs/src/theme/DocSidebarItem/Link/index.js
index 8d867a6f84..8787c9753a 100644
--- a/docs/src/theme/DocSidebarItem/Link/index.js
+++ b/docs/src/theme/DocSidebarItem/Link/index.js
@@ -102,7 +102,7 @@ export const RenderIcon = (name) => {
       return <FaRegAddressCard />;
     case 'Custom':
       return <GoCode />;
-    case 'Pre-built':
+    case 'System':
       return <IoBuildOutline />;
     case 'Use cases':
       return <BsShieldCheck />;
diff --git a/docs/src/utils.ts b/docs/src/utils.ts
new file mode 100644
index 0000000000..2819a830d2
--- /dev/null
+++ b/docs/src/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/frontend/app/new/transformer/CustomTransformerForms/CustomEmailTransformerForm.tsx b/frontend/app/new/transformer/CustomTransformerForms/CustomEmailTransformerForm.tsx
index 8810c6eb5e..c6e50767db 100644
--- a/frontend/app/new/transformer/CustomTransformerForms/CustomEmailTransformerForm.tsx
+++ b/frontend/app/new/transformer/CustomTransformerForms/CustomEmailTransformerForm.tsx
@@ -50,7 +50,8 @@ export default function CustomEmailTransformerForm(props: Props): ReactElement {
             <div className="space-y-0.5">
               <FormLabel>Preserve Domain</FormLabel>
               <FormDescription>
-                Set the length of the output email to be the same as the input
+                Preserve the input domain including top level domain to the
+                output value
               </FormDescription>
             </div>
             <FormControl>
diff --git a/frontend/app/transformers/Sheetforms/EmailTransformerForm.tsx b/frontend/app/transformers/Sheetforms/EmailTransformerForm.tsx
index 774c4be244..36582cb3d3 100644
--- a/frontend/app/transformers/Sheetforms/EmailTransformerForm.tsx
+++ b/frontend/app/transformers/Sheetforms/EmailTransformerForm.tsx
@@ -82,7 +82,8 @@ export default function EmailTransformerForm(props: Props): ReactElement {
             <div className="space-y-0.5">
               <FormLabel>Preserve Domain</FormLabel>
               <FormDescription>
-                Set the length of the output email to be the same as the input
+                Preserve the input domain including top level domain to the
+                output value
               </FormDescription>
             </div>
             <FormControl>
diff --git a/frontend/package.json b/frontend/package.json
index ea35d4afdd..250b0ee4d6 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev -p 3001",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",