diff --git a/@fiction/admin/settings/ElAccountHeader.vue b/@fiction/admin/settings/ElAccountHeader.vue
index 4f8bbc432..531468f6c 100644
--- a/@fiction/admin/settings/ElAccountHeader.vue
+++ b/@fiction/admin/settings/ElAccountHeader.vue
@@ -3,8 +3,8 @@ import { dayjs, gravatarUrlSync, useService, vue } from '@fiction/core/index.js'
 import ElModal from '@fiction/ui/ElModal.vue'
 import { InputOption } from '@fiction/ui/index.js'
 import ElForm from '@fiction/ui/inputs/ElForm.vue'
+import FormEngine from '@fiction/ui/inputs/FormEngine.vue'
 import type { Card } from '@fiction/site/card'
-import ToolForm from '../tools/ToolForm.vue'
 import ElHeader from './ElHeader.vue'
 import type { FictionAdmin } from '..'
 
@@ -116,7 +116,7 @@ vue.onMounted(() => {
   <div class="px-6 ">
     <ElModal v-if="mode === 'changeEmail'" :vis="mode === 'changeEmail'" modal-class="max-w-lg" @update:vis="mode = 'current'">
       <ElForm @submit="codeSent ? requestChangeEmail() : requestCode()">
-        <ToolForm v-model="form" ui-size="lg" :card :options="toolFormOptions" :disable-group-hide="true" />
+        <FormEngine v-model="form" ui-size="lg" :card :options="toolFormOptions" :disable-group-hide="true" />
       </ElForm>
     </ElModal>
 
diff --git a/@fiction/admin/settings/ElOrgHeader.vue b/@fiction/admin/settings/ElOrgHeader.vue
index 449ce57b1..aa661d342 100644
--- a/@fiction/admin/settings/ElOrgHeader.vue
+++ b/@fiction/admin/settings/ElOrgHeader.vue
@@ -4,11 +4,11 @@ import { gravatarUrlSync } from '@fiction/core/index.js'
 import ElAvatar from '@fiction/ui/common/ElAvatar.vue'
 import ElModal from '@fiction/ui/ElModal.vue'
 import ElForm from '@fiction/ui/inputs/ElForm.vue'
+import FormEngine from '@fiction/ui/inputs/FormEngine.vue'
 import ElIndexGrid from '@fiction/ui/lists/ElIndexGrid.vue'
 import type { ActionItem, IndexItem, Organization } from '@fiction/core/index.js'
 import type { Card } from '@fiction/site/card'
 import type { InputOption } from '@fiction/ui'
-import ToolForm from '../tools/ToolForm.vue'
 import ElHeader from './ElHeader.vue'
 import { newOrgOptions } from './index.js'
 
@@ -104,7 +104,7 @@ vue.onMounted(() => {
   <div class="px-6">
     <ElModal v-if="mode === 'new'" :vis="mode === 'new'" modal-class="max-w-lg" @update:vis="mode = 'current'">
       <ElForm @submit="createNewOrganization()">
-        <ToolForm v-model="newOrgForm" ui-size="lg" :card :options="toolFormOptions" :disable-group-hide="true" />
+        <FormEngine v-model="newOrgForm" ui-size="lg" :card :options="toolFormOptions" :disable-group-hide="true" />
       </ElForm>
     </ElModal>
     <div v-else-if="mode === 'change'" class="p-12">
diff --git a/@fiction/admin/settings/SettingsTool.vue b/@fiction/admin/settings/SettingsTool.vue
index c1942840b..c2593e286 100644
--- a/@fiction/admin/settings/SettingsTool.vue
+++ b/@fiction/admin/settings/SettingsTool.vue
@@ -2,10 +2,10 @@
 import { getNavComponentType, toLabel, toSlug, useService, vue } from '@fiction/core'
 import ElPanel from '@fiction/ui/ElPanel.vue'
 import ElForm from '@fiction/ui/inputs/ElForm.vue'
+import FormEngine from '@fiction/ui/inputs/FormEngine.vue'
 import type { NavItem } from '@fiction/core'
 import type { Card } from '@fiction/site/card'
 import type { InputOption } from '@fiction/ui'
-import ToolForm from '../tools/ToolForm.vue'
 import type { SettingsTool } from '..'
 
 const props = defineProps({
@@ -100,7 +100,7 @@ async function navigate(v: NavItem) {
               <div class="px-6 py-4 mb-6 font-semibold text-lg dark:text-theme-600 text-theme-300">
                 {{ currentPanel.title.value }}
               </div>
-              <ToolForm
+              <FormEngine
                 v-model="currentPanel.val.value"
                 :data-settings-tool="currentPanel.slug"
                 ui-size="lg"
diff --git a/@fiction/admin/tools/ToolForm.vue b/@fiction/admin/tools/ToolForm.vue
index caef7a6d6..315680562 100644
--- a/@fiction/admin/tools/ToolForm.vue
+++ b/@fiction/admin/tools/ToolForm.vue
@@ -3,11 +3,11 @@ import { getNested, localRef, setNested, vue } from '@fiction/core'
 import TransitionSlide from '@fiction/ui/anim/TransitionSlide.vue'
 import ElActions from '@fiction/ui/buttons/ElActions.vue'
 import ElInput from '@fiction/ui/inputs/ElInput.vue'
+import ElToolSep from '@fiction/ui/inputs/ElToolSep.vue'
 import type { ActionItem } from '@fiction/core'
 import type { Card } from '@fiction/site/card'
 import type { InputOption } from '@fiction/ui'
 import type { UiElementSize } from '@fiction/ui/utils'
-import ElToolSep from './ElToolSep.vue'
 
 const props = defineProps({
   options: { type: Array as vue.PropType<InputOption[]>, required: true },
@@ -92,7 +92,7 @@ const cls = vue.computed(() => {
                   :input-props="inputProps"
                   :options="opt.options.value || []"
                   :model-value="modelValue"
-                  :depth="1"
+                  :depth="depth + 1"
                   :base-path="basePath"
                   :card
                   @update:model-value="emit('update:modelValue', $event)"
diff --git a/@fiction/cards/capture/index.ts b/@fiction/cards/capture/index.ts
index 69c4c199d..3de7734f5 100644
--- a/@fiction/cards/capture/index.ts
+++ b/@fiction/cards/capture/index.ts
@@ -43,7 +43,7 @@ const demoUserConfig = {
 const options: InputOption[] = [
   new InputOption({ key: 'presentationMode', label: 'Presentation Mode', input: 'InputSelect', list: ['inline', 'onScroll', 'onLoad'], description: 'Show the card inline with content as a popup on load, or when scrolling.' }),
   standardOption.headers(),
-  new InputOption({ key: 'media', label: 'Image', input: 'InputMediaDisplay' }),
+  new InputOption({ key: 'media', label: 'Image', input: 'InputMedia' }),
   new InputOption({ key: 'dismissText', label: 'Dismiss Text', input: 'InputText', placeholder: 'No thanks', description: 'Dismisses modal in load and modal modes' }),
   new InputOption({ key: 'buttonText', label: 'Button Text', input: 'InputText', placeholder: 'Subscribe', description: 'Text on the subscribe button' }),
   new InputOption({ key: 'thanksText', label: 'Thanks Text', input: 'InputText', placeholder: 'Thanks for subscribing!', description: 'Text on the thank you message' }),
diff --git a/@fiction/cards/footer/index.ts b/@fiction/cards/footer/index.ts
index 84ad02a21..76cb30b7e 100644
--- a/@fiction/cards/footer/index.ts
+++ b/@fiction/cards/footer/index.ts
@@ -1,8 +1,8 @@
-import { standardOption } from '@fiction/cards/inputSets'
 import { vue } from '@fiction/core'
 import { CardTemplate } from '@fiction/site/card'
 import { InputOption } from '@fiction/ui'
 import { z } from 'zod'
+import { standardOption } from '../inputSets'
 import { mediaSchema } from '../schemaSets'
 
 const templateId = 'footer'
@@ -55,7 +55,7 @@ const schema = z.object({
 export type UserConfig = z.infer<typeof schema>
 
 const options: InputOption[] = [
-  new InputOption({ key: 'logo', label: 'Logo', input: 'InputMediaDisplay' }),
+  new InputOption({ key: 'logo', label: 'Logo', input: 'InputLogo' }),
   new InputOption({ key: 'layout', label: 'Layout', input: 'InputSelect', list: layoutKeys }),
   new InputOption({ key: 'tagline', label: 'Tagline', input: 'InputText', description: 'A catchy phrase or description of what you do.' }),
   standardOption.navItems({ key: 'nav', maxDepth: 2, itemNames: ['Column', 'Nav Item', 'Sub Nav Item'] }),
@@ -71,7 +71,7 @@ const options: InputOption[] = [
     new InputOption({ key: 'badges', label: 'Badges', description: 'Add certifications or other graphics to build your authority', input: 'InputList', props: { itemName: 'Badge' }, options: [
       new InputOption({ key: 'name', label: 'Name', input: 'InputText' }),
       new InputOption({ key: 'href', label: 'URL', input: 'InputText' }),
-      new InputOption({ key: 'media', label: 'Media', input: 'InputMediaDisplay' }),
+      new InputOption({ key: 'media', label: 'Media', input: 'InputMedia' }),
       new InputOption({ key: 'target', label: 'Target', input: 'InputSelect', list: ['_blank', '_self'] }),
     ] }),
   ] }),
diff --git a/@fiction/cards/hero/index.ts b/@fiction/cards/hero/index.ts
index ce69b1835..7300a6936 100644
--- a/@fiction/cards/hero/index.ts
+++ b/@fiction/cards/hero/index.ts
@@ -45,7 +45,7 @@ export const options: InputOption[] = [
   standardOption.media({ key: 'splash', label: 'Splash Image' }),
   new InputOption({ key: 'caption', input: 'InputText', label: 'Splash Caption' }),
   new InputOption({ key: 'overlays', input: 'InputList', label: 'Overlays', options: [
-    new InputOption({ key: 'media', label: 'Image', input: 'InputMediaDisplay', props: { formats: { url: true } } }),
+    new InputOption({ key: 'media', label: 'Image', input: 'InputMedia', props: { formats: { url: true } } }),
     new InputOption({ key: 'opacity', label: 'Opacity', input: 'InputNumber' }),
     new InputOption({ key: 'position', label: 'Position', input: 'InputSelect', list: ['top', 'bottom', 'left', 'right', 'center', 'bottomRight', 'topRight', 'bottomLeft', 'topLeft'] as const }),
     new InputOption({ key: 'widthPercent', label: 'Width Percent', input: 'InputRange', props: { min: 10, max: 100 } }),
diff --git a/@fiction/cards/inputSets.ts b/@fiction/cards/inputSets.ts
index db14608a9..8402601e1 100644
--- a/@fiction/cards/inputSets.ts
+++ b/@fiction/cards/inputSets.ts
@@ -6,7 +6,7 @@ import type { InputOptionSettings } from '@fiction/ui/index.js'
 type OptArgs<T extends string = string> = (Partial<InputOptionSettings<T>> & Record<string, unknown>) | undefined
 
 export const standardOption = {
-  media: (_: OptArgs = {}) => new InputOption({ key: 'media', label: 'Image', input: 'InputMediaDisplay', props: { formats: _?.formats }, ..._ }),
+  media: (_: OptArgs = {}) => new InputOption({ key: 'media', label: 'Image', input: 'InputMedia', props: { formats: _?.formats }, ..._ }),
   name: (_: OptArgs = {}) => new InputOption({ key: 'name', label: 'Text', input: 'InputText', ..._ }),
   desc: (_: OptArgs = {}) => new InputOption({ key: 'desc', label: 'Description', input: 'InputTextarea', ..._ }),
   icon: (_: OptArgs = {}) => new InputOption({ key: 'icon', label: 'Icon', input: 'InputSelect', ..._ }),
diff --git a/@fiction/cards/logos/index.ts b/@fiction/cards/logos/index.ts
index dae5b8ce5..7635f8641 100644
--- a/@fiction/cards/logos/index.ts
+++ b/@fiction/cards/logos/index.ts
@@ -27,7 +27,7 @@ const options: InputOption[] = [
   new InputOption({ key: 'items', label: 'Items', input: 'InputList', options: [
     new InputOption({ key: 'name', label: 'Name', input: 'InputText' }),
     new InputOption({ key: 'href', label: 'Link', input: 'InputText' }),
-    new InputOption({ key: 'media', label: 'Image URL', input: 'InputMediaDisplay' }),
+    new InputOption({ key: 'media', label: 'Image URL', input: 'InputMedia' }),
   ] }),
 ]
 
diff --git a/@fiction/cards/magazine/ElMagazine.vue b/@fiction/cards/magazine/ElMagazine.vue
index 5c8a1099b..f56cdfcba 100644
--- a/@fiction/cards/magazine/ElMagazine.vue
+++ b/@fiction/cards/magazine/ElMagazine.vue
@@ -52,7 +52,7 @@ async function loadGlobal() {
 }
 
 async function loadInline() {
-  const ps = uc.value.posts?.items || []
+  const ps = uc.value.posts?.posts || []
   postIndex.value = ps.map(p => new Post({ fictionPosts, ...p }))
 
   if (routeSlug.value) {
@@ -63,7 +63,7 @@ async function loadInline() {
 }
 
 async function load() {
-  if (uc.value.posts?.mode === 'inline') {
+  if (uc.value.posts?.format === 'local') {
     await loadInline()
   }
   else {
diff --git a/@fiction/cards/magazine/index.ts b/@fiction/cards/magazine/index.ts
index e904fd566..d474c895e 100644
--- a/@fiction/cards/magazine/index.ts
+++ b/@fiction/cards/magazine/index.ts
@@ -15,13 +15,13 @@ const schema = z.object({
 export type UserConfig = z.infer<typeof schema> & SiteUserConfig
 
 const options: InputOption[] = [
-  new InputOption({ key: 'scheme.reverse', label: 'Reverse Color Scheme', input: 'InputCheckbox' }),
+  new InputOption({ key: 'posts', label: 'Posts', input: 'InputPosts' }),
 ]
 
 async function getDefaultUserConfig(): Promise<UserConfig> {
   return {
     standard: { spacing: { verticalSpacing: 'none' } },
-    posts: { mode: 'global', limit: 12 },
+    posts: { format: 'global', limit: 12 },
   }
 }
 
@@ -29,8 +29,8 @@ async function getDemoUserConfig(args: { site?: Site }): Promise<UserConfig> {
   const c: UserConfig = {
     standard: { spacing: { verticalSpacing: 'sm' } },
     posts: {
-      mode: 'inline',
-      items: [
+      format: 'local',
+      posts: [
         {
           title: 'Revolutionizing UX: My Journey at Tech Giant',
           subTitle: 'From Concept to Launch',
diff --git a/@fiction/cards/nav/index.ts b/@fiction/cards/nav/index.ts
index 9cc149658..b630e8c87 100644
--- a/@fiction/cards/nav/index.ts
+++ b/@fiction/cards/nav/index.ts
@@ -1,8 +1,8 @@
-import { standardOption } from '@fiction/cards/inputSets'
 import { MediaTypographySchema, vue } from '@fiction/core'
 import { CardTemplate } from '@fiction/site/card'
 import { InputOption } from '@fiction/ui'
 import { z } from 'zod'
+import { standardOption } from '../inputSets'
 import { mediaSchema } from '../schemaSets'
 
 const templateId = 'nav'
diff --git a/@fiction/cards/people/index.ts b/@fiction/cards/people/index.ts
index 471094126..e5ffd26e3 100644
--- a/@fiction/cards/people/index.ts
+++ b/@fiction/cards/people/index.ts
@@ -38,7 +38,7 @@ const options: InputOption[] = [
     new InputOption({ key: 'name', input: 'InputText', label: 'Name' }),
     new InputOption({ key: 'title', input: 'InputText', label: 'Title' }),
     new InputOption({ key: 'desc', input: 'InputText', label: 'Description' }),
-    new InputOption({ key: 'media', input: 'InputMediaDisplay', label: 'Media', props: { formats: { url: true } } }),
+    new InputOption({ key: 'media', input: 'InputMedia', label: 'Media', props: { formats: { url: true } } }),
     new InputOption({ key: 'social', input: 'InputList', label: 'Social', options: [
       new InputOption({ key: 'name', input: 'InputText', label: 'Name' }),
       new InputOption({ key: 'href', input: 'InputText', label: 'Link' }),
diff --git a/@fiction/cards/quote/index.ts b/@fiction/cards/quote/index.ts
index c7e2d5050..7298b64c6 100644
--- a/@fiction/cards/quote/index.ts
+++ b/@fiction/cards/quote/index.ts
@@ -85,10 +85,10 @@ export const templates = [
           new InputOption({ key: 'text', label: 'Quote Text', input: 'InputText' }),
           new InputOption({ key: 'author.name', label: 'Author', input: 'InputText' }),
           new InputOption({ key: 'author.title', label: 'Title', input: 'InputText' }),
-          new InputOption({ key: 'author.image', label: 'Author Image', input: 'InputMediaDisplay' }),
+          new InputOption({ key: 'author.image', label: 'Author Image', input: 'InputMedia' }),
           new InputOption({ key: 'author.href', label: 'Author Link', input: 'InputUrl' }),
           new InputOption({ key: 'org.name', label: 'Organization', input: 'InputText' }),
-          new InputOption({ key: 'org.image', label: 'Organization Image', input: 'InputMediaDisplay' }),
+          new InputOption({ key: 'org.image', label: 'Organization Image', input: 'InputMedia' }),
           new InputOption({ key: 'org.href', label: 'Organization Link', input: 'InputUrl' }),
         ],
       }),
diff --git a/@fiction/cards/story/index.ts b/@fiction/cards/story/index.ts
index ae6697260..9d170e216 100644
--- a/@fiction/cards/story/index.ts
+++ b/@fiction/cards/story/index.ts
@@ -25,7 +25,7 @@ const options: InputOption[] = [
   new InputOption({ key: 'items', label: 'Tour Items', input: 'InputList', props: { itemName: 'paragraph' }, options: [
     new InputOption({ key: 'title', label: 'Title', input: 'InputText' }),
     new InputOption({ key: 'content', label: 'Content', input: 'InputText' }),
-    new InputOption({ key: 'media', label: 'Media', input: 'InputMediaDisplay' }),
+    new InputOption({ key: 'media', label: 'Media', input: 'InputMedia' }),
     new InputOption({ key: 'actions', label: 'Actions', input: 'InputList', options: [
       new InputOption({ key: 'name', label: 'Button Label', input: 'InputText' }),
       new InputOption({ key: 'href', label: 'Button Link', input: 'InputText' }),
diff --git a/@fiction/cards/test/tpl.unit.test.ts b/@fiction/cards/test/tpl.unit.test.ts
index 3732ad595..80e467394 100644
--- a/@fiction/cards/test/tpl.unit.test.ts
+++ b/@fiction/cards/test/tpl.unit.test.ts
@@ -23,9 +23,7 @@ describe('verify template settings config', async () => {
           "hasDemo": false,
           "isPublic": false,
           "templateId": "wrap",
-          "unusedSchema": {
-            "fixedHeader": "boolean",
-          },
+          "unusedSchema": {},
         },
         {
           "hasDemo": false,
diff --git a/@fiction/cards/trek/index.ts b/@fiction/cards/trek/index.ts
index 18e83bd23..41e2213e3 100644
--- a/@fiction/cards/trek/index.ts
+++ b/@fiction/cards/trek/index.ts
@@ -25,7 +25,7 @@ const options: InputOption[] = [
   new InputOption({ key: 'items', label: 'Tour Items', input: 'InputList', props: { itemName: 'Tour Item' }, options: [
     new InputOption({ key: 'title', label: 'Title', input: 'InputText' }),
     new InputOption({ key: 'content', label: 'Content', input: 'InputText' }),
-    new InputOption({ key: 'media', label: 'Media', input: 'InputMediaDisplay' }),
+    new InputOption({ key: 'media', label: 'Media', input: 'InputMedia' }),
     new InputOption({ key: 'actions', label: 'Actions', input: 'InputList', options: [
       new InputOption({ key: 'name', label: 'Button Label', input: 'InputText' }),
       new InputOption({ key: 'href', label: 'Button Link', input: 'InputText' }),
diff --git a/@fiction/core/plugin-email/templates/EmailStandard.vue b/@fiction/core/plugin-email/templates/EmailStandard.vue
index d5761fbfb..4cf4a0125 100644
--- a/@fiction/core/plugin-email/templates/EmailStandard.vue
+++ b/@fiction/core/plugin-email/templates/EmailStandard.vue
@@ -210,7 +210,7 @@ const markdownStyles = {
             <ESection class="mt-12 mb-8 text-left">
               <ESection class="inline-block">
                 <EColumn v-for="(item, i) in actions" :key="i" :class="i === 0 ? '' : 'pl-4'">
-                  <EButton :href="item.href" :class="getButtonClass(item)" class="hover:opacity-80 font-bold select-none" :style="{ whiteSpace: 'nowrap' }" v-html="item.name" />
+                  <EButton :href="item.href" :class="getButtonClass(item)" class="rounded-full hover:opacity-80 font-bold select-none" :style="{ whiteSpace: 'nowrap' }" v-html="item.name" />
                 </EColumn>
               </ESection>
             </ESection>
diff --git a/@fiction/core/schemas/schemas.ts b/@fiction/core/schemas/schemas.ts
index e978a5130..6c4669f8e 100644
--- a/@fiction/core/schemas/schemas.ts
+++ b/@fiction/core/schemas/schemas.ts
@@ -1,5 +1,6 @@
 import { z } from 'zod'
 import type { IconId } from '@fiction/ui/lib/systemIcons.js'
+import { OrFilterGroupSchema } from '../types/endpoint.js'
 import { ColorScaleSchema, colorThemeUser, colorThemeWithInvert } from '../utils/colors.js'
 import type { vue } from '../utils/libraries.js'
 
@@ -181,10 +182,24 @@ export const PostSchema = z.object({
   authors: z.array(UserSchema).optional(),
 })
 
+export const GlobalQuerySchema = z.object({
+  filters: z.array(OrFilterGroupSchema).optional(), // Array of OR filter groups
+  sortBy: z.string().optional(),
+  sortOrder: z.enum(['asc', 'desc']).optional(),
+  search: z.string().optional(),
+  dateRange: z.object({
+    start: z.date().optional(),
+    end: z.date().optional(),
+  }).optional(),
+})
+
+// Updated PostHandlingSchema
 export const PostHandlingSchema = z.object({
-  mode: z.enum(['global', 'inline']).optional(),
+  format: z.enum(['global', 'local']).default('local'),
   limit: z.number().optional(),
-  items: z.array(PostSchema).optional(),
+  posts: z.array(PostSchema).optional(),
+  query: GlobalQuerySchema.optional(),
 })
 
 export type PostObject = z.infer<typeof PostSchema>
+export type PostHandlingObject = z.infer<typeof PostHandlingSchema>
diff --git a/@fiction/core/types/endpoint.ts b/@fiction/core/types/endpoint.ts
index 12c814bc0..78349961e 100644
--- a/@fiction/core/types/endpoint.ts
+++ b/@fiction/core/types/endpoint.ts
@@ -3,14 +3,16 @@ import type express from 'express'
 import type { ErrorCode } from '../utils/error.js'
 import type { UserRoles } from './roles.js'
 
-export const DataFilterSchema = z.object({
+export const AndDataFilterSchema = z.object({
   field: z.string(),
   value: z.union([z.string(), z.number(), z.array(z.union([z.string(), z.number()]))]),
   operator: z.enum(['=', '!=', '>', '<', '>=', '<=', 'like', 'not like', 'in', 'not in']),
 })
 
+export const OrFilterGroupSchema = z.array(AndDataFilterSchema)
+
 // sql where operators.value
-export type DataFilter = z.infer<typeof DataFilterSchema>
+export type DataFilter = z.infer<typeof AndDataFilterSchema>
 
 export type IndexQuery = {
   offset?: number
diff --git a/@fiction/plugins/plugin-send/admin/SidebarEmailEditor.vue b/@fiction/plugins/plugin-send/admin/SidebarEmailEditor.vue
index 9246d2f99..e3e483dda 100644
--- a/@fiction/plugins/plugin-send/admin/SidebarEmailEditor.vue
+++ b/@fiction/plugins/plugin-send/admin/SidebarEmailEditor.vue
@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import ElTool from '@fiction/admin/tools/ElTool.vue'
-import ToolForm from '@fiction/admin/tools/ToolForm.vue'
 import { standardOption } from '@fiction/cards/inputSets.js'
 import { vue } from '@fiction/core'
 import { refineOptions } from '@fiction/site/utils/schema'
 import { InputOption } from '@fiction/ui/index.js'
-
 import ElForm from '@fiction/ui/inputs/ElForm.vue'
+
+import FormEngine from '@fiction/ui/inputs/FormEngine.vue'
 import type { EditorTool } from '@fiction/admin'
 import type { Card } from '@fiction/site'
 import { sendTable } from '../schema.js'
@@ -54,7 +54,7 @@ function updatePost(config: Partial<EmailCampaignConfig>) {
 <template>
   <ElTool :tool="tool">
     <ElForm v-if="email" id="toolForm">
-      <ToolForm
+      <FormEngine
         :model-value="email.toConfig()"
         :options
         :input-props="{ email, card }"
diff --git a/@fiction/plugins/plugin-send/admin/SidebarEmailPreview.vue b/@fiction/plugins/plugin-send/admin/SidebarEmailPreview.vue
index 76c8c7432..48fb355c2 100644
--- a/@fiction/plugins/plugin-send/admin/SidebarEmailPreview.vue
+++ b/@fiction/plugins/plugin-send/admin/SidebarEmailPreview.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import ElTool from '@fiction/admin/tools/ElTool.vue'
-import ToolForm from '@fiction/admin/tools/ToolForm.vue'
 import { vue } from '@fiction/core'
 import { InputOption } from '@fiction/ui/index.js'
 import ElForm from '@fiction/ui/inputs/ElForm.vue'
+import FormEngine from '@fiction/ui/inputs/FormEngine.vue'
 import type { EditorTool } from '@fiction/admin'
 
 import type { Card } from '@fiction/site'
@@ -31,7 +31,7 @@ function updatePost(config: Partial<EmailCampaignConfig>) {
 <template>
   <ElTool :tool="tool">
     <ElForm v-if="email" id="toolForm">
-      <ToolForm
+      <FormEngine
         :model-value="email.toConfig()"
         :options
         :input-props="{ email, card }"
diff --git a/@fiction/plugins/plugin-send/schema.ts b/@fiction/plugins/plugin-send/schema.ts
index 78914c0c4..865c160cc 100644
--- a/@fiction/plugins/plugin-send/schema.ts
+++ b/@fiction/plugins/plugin-send/schema.ts
@@ -1,4 +1,4 @@
-import { Col, DataFilterSchema, FictionDbTable, MediaDisplaySchema, ProgressStatusSchema, standardTable } from '@fiction/core'
+import { AndDataFilterSchema, Col, FictionDbTable, MediaDisplaySchema, ProgressStatusSchema, standardTable } from '@fiction/core'
 import { t as postTableNames } from '@fiction/posts'
 
 import { z } from 'zod'
@@ -37,7 +37,7 @@ export const sendColumns = [
   new Col({ key: 'avatar', sch: () => MediaDisplaySchema, make: ({ s, col }) => s.jsonb(col.k).defaultTo({}) }),
   new Col({ key: 'scheduleMode', sch: ({ z }) => z.enum(['now', 'schedule']), make: ({ s, col }) => s.string(col.k) }),
   new Col({ key: 'scheduledAt', sch: ({ z }) => z.string(), make: ({ s, col }) => s.timestamp(col.k).defaultTo(null) }),
-  new Col({ key: 'filters', sch: ({ z }) => z.array(DataFilterSchema), make: ({ s, col }) => s.jsonb(col.k).defaultTo([]) }),
+  new Col({ key: 'filters', sch: ({ z }) => z.array(AndDataFilterSchema), make: ({ s, col }) => s.jsonb(col.k).defaultTo([]) }),
   new Col({ key: 'counts', sch: () => EmailAnalyticsSchema, make: ({ s, col }) => s.jsonb(col.k).defaultTo({}) }),
   new Col({ key: 'draft', sch: ({ z }) => z.record(z.string(), z.any()), make: ({ s, col }) => s.jsonb(col.k).defaultTo({}) }),
   new Col({ key: 'userConfig', sch: () => EmailUserConfigSchema, make: ({ s, col }) => s.jsonb(col.k).defaultTo({}) }),
diff --git a/@fiction/posts/el/ToolPostMain.vue b/@fiction/posts/el/ToolPostMain.vue
index f5dcced12..1458b2923 100644
--- a/@fiction/posts/el/ToolPostMain.vue
+++ b/@fiction/posts/el/ToolPostMain.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import ElTool from '@fiction/admin/tools/ElTool.vue'
-import ToolForm from '@fiction/admin/tools/ToolForm.vue'
 import { useService, vue } from '@fiction/core'
 import { InputOption } from '@fiction/ui'
 import ElForm from '@fiction/ui/inputs/ElForm.vue'
+import FormEngine from '@fiction/ui/inputs/FormEngine.vue'
 import InputActions from '@fiction/ui/inputs/InputActions.vue'
 import type { EditorTool } from '@fiction/admin'
 import type { ActionItem } from '@fiction/core'
@@ -171,7 +171,7 @@ function updatePost(config: TablePostConfig) {
 <template>
   <ElTool v-if="post" :tool="tool" :actions="actions">
     <ElForm id="toolForm">
-      <ToolForm
+      <FormEngine
         :model-value="post.toConfig()"
         :options
         :input-props="{ post, card }"
diff --git a/@fiction/site/ai/AiSettings.vue b/@fiction/site/ai/AiSettings.vue
index cdd7383f2..d1e4fcfcb 100644
--- a/@fiction/site/ai/AiSettings.vue
+++ b/@fiction/site/ai/AiSettings.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import ToolForm from '@fiction/admin/tools/ToolForm.vue'
 import { vue } from '@fiction/core'
 import { InputOption } from '@fiction/ui'
 import ElForm from '@fiction/ui/inputs/ElForm.vue'
 import ElInput from '@fiction/ui/inputs/ElInput.vue'
+import FormEngine from '@fiction/ui/inputs/FormEngine.vue'
 import { imageStyle } from '../util'
 import type { Site } from '../../site'
 
@@ -58,7 +58,7 @@ async function save() {
 
 <template>
   <ElForm class="space-y-6" @submit="save()">
-    <ToolForm
+    <FormEngine
       :model-value="site.toConfig()"
       :options
       :input-props="{ site }"
diff --git a/@fiction/site/plugin-builder/tools/PageToolMaster.vue b/@fiction/site/plugin-builder/tools/PageToolMaster.vue
index e072bad65..40a1e619f 100644
--- a/@fiction/site/plugin-builder/tools/PageToolMaster.vue
+++ b/@fiction/site/plugin-builder/tools/PageToolMaster.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import ElTool from '@fiction/admin/tools/ElTool.vue'
-import ToolForm from '@fiction/admin/tools/ToolForm.vue'
 import { InputOption } from '@fiction/ui'
 import ElForm from '@fiction/ui/inputs/ElForm.vue'
+import FormEngine from '@fiction/ui/inputs/FormEngine.vue'
 import type { EditorTool } from '@fiction/admin'
 import type { vue } from '@fiction/core'
 import InputManagePages from './InputManagePages.vue'
@@ -15,24 +15,19 @@ const props = defineProps({
   controller: { type: Object as vue.PropType<ToolKeys>, required: true },
 })
 
+const { site, tool, controller } = props
+
 const options: InputOption[] = [
   new InputOption({ key: 'managePages', label: 'Manage Pages', input: 'group', options: [
-    new InputOption({ key: 'managePagesInput', input: InputManagePages }),
+    new InputOption({ key: 'managePagesInput', input: InputManagePages, props: { site, tool } }),
   ] }),
-  // new InputOption({ key: 'manageLayout', label: 'Page Layout', input: 'group', options: [
-  //   new InputOption({ key: 'manageLayoutInput', input: InputManageLayout }),
-  // ] }),
-  // new InputOption({ key: 'addElements', label: 'Add Elements', input: 'group', options: [
-  //   new InputOption({ key: 'addElementsInputs', input: InputAddElements }),
-  // ] }),
-
 ]
 </script>
 
 <template>
   <ElTool :actions="[]" v-bind="props">
     <ElForm>
-      <ToolForm :options :input-props="{ site, tool, controller }" />
+      <FormEngine :options :input-props="{ site, tool, controller }" />
     </ElForm>
   </ElTool>
 </template>
diff --git a/@fiction/site/plugin-builder/tools/ToolCardEdit.vue b/@fiction/site/plugin-builder/tools/ToolCardEdit.vue
index e75028a10..8300fda01 100644
--- a/@fiction/site/plugin-builder/tools/ToolCardEdit.vue
+++ b/@fiction/site/plugin-builder/tools/ToolCardEdit.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import ElTool from '@fiction/admin/tools/ElTool.vue'
 import ElToolBanner from '@fiction/admin/tools/ElToolBanner.vue'
-import ToolForm from '@fiction/admin/tools/ToolForm.vue'
 import { useService, vue } from '@fiction/core'
+import FormEngine from '@fiction/ui/inputs/FormEngine.vue'
 import type { AdminEditorController } from '@fiction/admin'
 import type { FictionSites } from '../..'
 import type { Site } from '../../site'
@@ -29,28 +29,39 @@ function setActiveCardConfig(config: Partial<TableCardConfig>) {
 
 <template>
   <ElTool v-if="site" :tool>
-    <ElToolBanner
-      v-if="!site.editor.value.selectedCardId"
-      class="m-4"
-      title="Make A Selection"
-      sub="Element settings appear here"
-      icon="i-tabler-click"
-    />
-    <ElToolBanner
-      v-else-if="!options.length"
-      class="m-4"
-      title="No Options"
-      sub="This element doesn't have any settings."
-      icon="i-tabler-settings"
-    />
-    <template v-else>
-      <ToolForm
-        :model-value="site.activeCardConfig.value"
-        :options="options"
-        :input-props="{ site }"
-        base-path="userConfig"
-        @update:model-value="setActiveCardConfig($event)"
+    <transition
+      mode="out-in"
+      enter-active-class="ease-out duration-200"
+      enter-from-class="transform scale-80 translate-y-4 opacity-0"
+      enter-to-class="transform translate-y-0 opacity-100"
+      leave-active-class="ease-in duration-200"
+      leave-from-class="transform translate-y-0 opacity-100"
+      leave-to-class="transform scale-80 translate-y-4 opacity-0"
+    >
+      <ElToolBanner
+        v-if="!site.editor.value.selectedCardId"
+        class="m-4"
+        title="Make A Selection"
+        sub="Element settings appear here"
+        icon="i-tabler-click"
       />
-    </template>
+      <ElToolBanner
+        v-else-if="!options.length"
+        class="m-4"
+        title="No Options"
+        sub="This element doesn't have any settings."
+        icon="i-tabler-settings"
+      />
+      <template v-else>
+        <FormEngine
+          :key="site.activeCardConfig.value.cardId"
+          :model-value="site.activeCardConfig.value"
+          :options="options"
+          :input-props="{ site }"
+          base-path="userConfig"
+          @update:model-value="setActiveCardConfig($event)"
+        />
+      </template>
+    </transition>
   </ElTool>
 </template>
diff --git a/@fiction/site/plugin-builder/tools/ToolPageAdd.vue b/@fiction/site/plugin-builder/tools/ToolPageAdd.vue
index 9414e1419..a6ed85c20 100644
--- a/@fiction/site/plugin-builder/tools/ToolPageAdd.vue
+++ b/@fiction/site/plugin-builder/tools/ToolPageAdd.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import ElTool from '@fiction/admin/tools/ElTool.vue'
-import ToolForm from '@fiction/admin/tools/ToolForm.vue'
 import { toSlug, vue } from '@fiction/core'
 import { InputOption } from '@fiction/ui'
 import ElForm from '@fiction/ui/inputs/ElForm.vue'
 import ElInput from '@fiction/ui/inputs/ElInput.vue'
+import FormEngine from '@fiction/ui/inputs/FormEngine.vue'
 import type { AdminEditorController, EditorTool } from '@fiction/admin'
 import { requestManagePage } from '../../utils/region'
 import InputSlug from '../InputSlug.vue'
@@ -73,7 +73,7 @@ async function save() {
     title="Add Page"
   >
     <ElForm @submit="save()">
-      <ToolForm v-model="page" :options :input-props="{ site }" />
+      <FormEngine v-model="page" :options :input-props="{ site }" />
 
       <div class="text-right px-4 py-2">
         <ElInput input="InputSubmit" :loading rounding="full" data-test-id="requestCreateNewPage">
diff --git a/@fiction/site/plugin-builder/tools/ToolPageEdit.vue b/@fiction/site/plugin-builder/tools/ToolPageEdit.vue
index 43947c215..bd7449130 100644
--- a/@fiction/site/plugin-builder/tools/ToolPageEdit.vue
+++ b/@fiction/site/plugin-builder/tools/ToolPageEdit.vue
@@ -1,25 +1,27 @@
 <script lang="ts" setup>
 import ElTool from '@fiction/admin/tools/ElTool.vue'
-import ToolForm from '@fiction/admin/tools/ToolForm.vue'
 import { vue } from '@fiction/core'
 import { InputOption } from '@fiction/ui'
 import ElForm from '@fiction/ui/inputs/ElForm.vue'
 import ElInput from '@fiction/ui/inputs/ElInput.vue'
+import FormEngine from '@fiction/ui/inputs/FormEngine.vue'
 import type { AdminEditorController, EditorTool } from '@fiction/admin'
 import { requestManagePage } from '../../utils/region'
 import InputSlug from '../InputSlug.vue'
 import type { Site } from '../../site'
 import type { ToolKeys } from './tools.js'
 
-const props = defineProps({
-  site: { type: Object as vue.PropType<Site>, required: true },
-  tool: { type: Object as vue.PropType<EditorTool>, required: true },
-  controller: { type: Object as vue.PropType<AdminEditorController<{ toolIds: ToolKeys }>>, required: true },
-})
+const props = defineProps<{
+  site: Site
+  tool: EditorTool
+  controller: AdminEditorController<{ toolIds: ToolKeys }>
+}>()
+
+const { controller, site, tool } = props
 
 const loading = vue.ref(false)
 
-const page = vue.computed(() => props.site.editPageConfig.value)
+const page = vue.computed(() => site.editPageConfig.value)
 
 const options = vue.computed<InputOption[]>(() => {
   return [
@@ -31,10 +33,12 @@ const options = vue.computed<InputOption[]>(() => {
         new InputOption({
           key: 'manageLayoutInput',
           input: vue.defineAsyncComponent(() => import('./InputManageLayout.vue')),
+          props: { site, tool },
         }),
         new InputOption({
           key: 'addElementsInputs',
           input: vue.defineAsyncComponent(() => import('./InputAddElements.vue')),
+          props: { site, tool },
         }),
       ],
     }),
@@ -44,7 +48,7 @@ const options = vue.computed<InputOption[]>(() => {
       input: 'group',
       options: [
         new InputOption({ key: 'title', label: 'Name', input: 'InputText', placeholder: 'Page Name', isRequired: true }),
-        new InputOption({ key: 'slug', label: 'Slug', input: InputSlug, placeholder: 'my-page', isRequired: true }),
+        new InputOption({ key: 'slug', label: 'Slug', input: InputSlug, placeholder: 'my-page', isRequired: true, props: { site } }),
       ],
     }),
     new InputOption({
@@ -62,7 +66,7 @@ const options = vue.computed<InputOption[]>(() => {
 async function save() {
   loading.value = true
   await requestManagePage({
-    site: props.site,
+    site,
     _action: 'upsert',
     regionCard: page.value,
     delay: 400,
@@ -70,7 +74,7 @@ async function save() {
   })
   loading.value = false
 
-  props.controller.useTool({ toolId: 'managePages' })
+  controller.useTool({ toolId: 'managePages' })
 }
 </script>
 
@@ -82,7 +86,7 @@ async function save() {
     title="Edit Page"
   >
     <ElForm @submit="save()">
-      <ToolForm
+      <FormEngine
         v-model="site.editPageConfig.value"
         :options
         :input-props="{ site, tool }"
diff --git a/@fiction/site/plugin-builder/tools/ToolPageGlobal.vue b/@fiction/site/plugin-builder/tools/ToolPageGlobal.vue
index 5b2e87b35..6c493ff38 100644
--- a/@fiction/site/plugin-builder/tools/ToolPageGlobal.vue
+++ b/@fiction/site/plugin-builder/tools/ToolPageGlobal.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import ElTool from '@fiction/admin/tools/ElTool.vue'
-import ToolForm from '@fiction/admin/tools/ToolForm.vue'
 import { toSlug, vue } from '@fiction/core'
 import { InputOption } from '@fiction/ui'
 import ElForm from '@fiction/ui/inputs/ElForm.vue'
 import ElInput from '@fiction/ui/inputs/ElInput.vue'
+import FormEngine from '@fiction/ui/inputs/FormEngine.vue'
 import type { AdminEditorController, EditorTool } from '@fiction/admin'
 import { imageStyle } from '../../util'
 import { saveSite, updateSite } from '../../utils/site'
@@ -116,7 +116,7 @@ const v = vue.computed({
     v-bind="props"
   >
     <ElForm @submit="save()">
-      <ToolForm
+      <FormEngine
         v-model="v"
         :options="options"
         :input-props="{ site }"
diff --git a/@fiction/site/plugin-builder/tools/ToolPagePublish.vue b/@fiction/site/plugin-builder/tools/ToolPagePublish.vue
index 7ac287777..d51a996e8 100644
--- a/@fiction/site/plugin-builder/tools/ToolPagePublish.vue
+++ b/@fiction/site/plugin-builder/tools/ToolPagePublish.vue
@@ -1,11 +1,11 @@
 <script lang="ts" setup>
 import ElTool from '@fiction/admin/tools/ElTool.vue'
-import ToolForm from '@fiction/admin/tools/ToolForm.vue'
 import { useService, vue } from '@fiction/core'
 import { InputOption } from '@fiction/ui'
 import XButton from '@fiction/ui/buttons/XButton.vue'
 import ElModalConfirm from '@fiction/ui/ElModalConfirm.vue'
 import ElForm from '@fiction/ui/inputs/ElForm.vue'
+import FormEngine from '@fiction/ui/inputs/FormEngine.vue'
 import type { AdminEditorController, EditorTool } from '@fiction/admin'
 import type { FictionApp } from '@fiction/core'
 import { tableNames } from '../../tables'
@@ -89,7 +89,7 @@ const showConfirm = vue.ref(false)
     v-bind="props"
   >
     <ElForm @submit="showConfirm = true">
-      <ToolForm v-model="v" :options :input-props="{ site }" />
+      <FormEngine v-model="v" :options :input-props="{ site }" />
 
       <div class="text-right px-4 py-2 border-t border-theme-200 dark:border-theme-600 pt-4 space-x-4 flex justify-between">
         <XButton rounding="full" theme="default" @click="reset()">
diff --git a/@fiction/site/utils/test/schema.unit.test.ts b/@fiction/site/utils/test/schema.unit.test.ts
index d92944165..de68ded61 100644
--- a/@fiction/site/utils/test/schema.unit.test.ts
+++ b/@fiction/site/utils/test/schema.unit.test.ts
@@ -15,7 +15,7 @@ describe('schema tools', () => {
     new InputOption({ key: 'grp', label: 'Group 1', input: 'group', options: [
       new InputOption({ key: 'groupInput', label: 'subText', input: 'InputTextarea' }),
     ] }),
-    new InputOption({ key: 'media', label: 'test', input: 'InputMediaDisplay' }),
+    new InputOption({ key: 'media', label: 'test', input: 'InputMedia' }),
   ]
 
   const schema = z.object({
diff --git a/@fiction/ui/inputs/InputMediaDisplay.vue b/@fiction/ui/.ref/InputMediaDisplay.vue
similarity index 100%
rename from @fiction/ui/inputs/InputMediaDisplay.vue
rename to @fiction/ui/.ref/InputMediaDisplay.vue
diff --git a/@fiction/admin/tools/ElToolSep.vue b/@fiction/ui/inputs/ElToolSep.vue
similarity index 100%
rename from @fiction/admin/tools/ElToolSep.vue
rename to @fiction/ui/inputs/ElToolSep.vue
diff --git a/@fiction/ui/inputs/FormEngine.vue b/@fiction/ui/inputs/FormEngine.vue
new file mode 100644
index 000000000..08afa1f89
--- /dev/null
+++ b/@fiction/ui/inputs/FormEngine.vue
@@ -0,0 +1,127 @@
+<script lang="ts" setup>
+import { getNested, localRef, setNested, vue } from '@fiction/core'
+import type { ActionItem } from '@fiction/core'
+import TransitionSlide from '../anim/TransitionSlide.vue'
+import ElActions from '../buttons/ElActions.vue'
+import ElInput from './ElInput.vue'
+import ElToolSep from './ElToolSep.vue'
+import type { UiElementSize } from '../utils'
+import type { InputOption } from './index.js'
+
+const props = defineProps({
+  options: { type: Array as vue.PropType<InputOption[]>, required: true },
+  loading: { type: Boolean, default: false },
+  modelValue: { type: Object as vue.PropType<Record<string, unknown>>, default: () => {} },
+  depth: { type: Number, default: 0 },
+  basePath: { type: String, default: '' },
+  inputProps: { type: Object as vue.PropType<Record<string, unknown>>, default: () => ({}) },
+  uiSize: { type: String as vue.PropType<UiElementSize>, default: 'md' },
+  actions: { type: Array as vue.PropType<ActionItem[]>, default: () => [] },
+  disableGroupHide: { type: Boolean, default: false },
+})
+
+
+console.log("OPTIONAS", props.options)
+const emit = defineEmits<{
+  (event: 'update:modelValue', payload: Record<string, unknown>): void
+}>()
+
+const menuVisibility = localRef<Record<string, boolean>>({ lifecycle: 'local', def: {}, key: 'toolForm' })
+
+function hide(key: string, val?: boolean) {
+  if (props.disableGroupHide)
+    return
+
+  if (val !== undefined)
+    menuVisibility.value = { ...menuVisibility.value, [key]: val }
+
+  return menuVisibility.value[key]
+}
+
+function getOptionPath(key: string) {
+  return props.basePath ? `${props.basePath}.${key}` : key
+}
+
+const cls = vue.computed(() => {
+  const configs = {
+    md: {
+      groupHeader: 'py-2 px-4 text-xs',
+      groupPad: 'p-4',
+      inputGap: 'gap-4',
+    },
+    lg: {
+      groupHeader: 'py-3 px-5 text-sm',
+      groupPad: 'px-8 lg:px-10 py-6',
+      inputGap: 'gap-6',
+    },
+  }
+
+  return configs[props.uiSize as 'md' | 'lg']
+})
+</script>
+
+<template>
+  <div :data-options-len="options.length">
+    <div class="flex flex-col" :class="cls.inputGap">
+      <div v-for="(opt, i) in options.filter(_ => !_.settings.isHidden)" :key="i">
+        <div
+          v-if="opt.input.value === 'group'"
+          :class="[
+            depth > 0 ? 'border rounded-md ' : '',
+            hide(opt.key.value) ? 'border-theme-300 dark:border-theme-600' : 'border-theme-200 dark:border-theme-700',
+          ]"
+        >
+          <div
+            v-if="opt.label.value"
+            class=" select-none flex justify-between cursor-pointer items-center hover:opacity-90 antialiased"
+            :class="[
+              cls.groupHeader,
+              !hide(opt.key.value) || depth === 0 ? 'border-b ' : '',
+              hide(opt.key.value) ? 'bg-theme-50 dark:bg-theme-700 text-theme-600 dark:text-theme-100 border-primary-200 dark:border-theme-600' : 'border-theme-300/50 dark:border-theme-700 text-theme-500 dark:text-theme-100 hover:bg-theme-50 dark:hover:bg-theme-800 active:bg-theme-100 dark:active:bg-theme-700',
+            ]"
+            @click="hide(opt.key.value, !hide(opt.key.value))"
+          >
+            <div class="font-semibold" v-html="opt.label.value" />
+            <div v-if="opt.key.value && !disableGroupHide" class="text-lg i-tabler-chevron-up transition-all" :class="hide(opt.key.value) ? 'rotate-180' : ''" />
+          </div>
+          <TransitionSlide>
+            <div v-show="!hide(opt.key.value)">
+              <div :class="cls.groupPad">
+                <FormEngine
+                  :ui-size="uiSize"
+                  :input-props="inputProps"
+                  :options="opt.options.value || []"
+                  :model-value="modelValue"
+                  :depth="depth + 1"
+                  :base-path="basePath"
+                  @update:model-value="emit('update:modelValue', $event)"
+                />
+              </div>
+            </div>
+          </TransitionSlide>
+        </div>
+
+        <ElToolSep
+          v-else-if="opt.input.value === 'title'"
+          :text="opt.label.value"
+          class="mb-2"
+          :class="i === 0 ? 'mt-0' : 'mt-8'"
+        />
+        <div v-else :class="opt.settings.uiFormat !== 'naked' && depth === 0 ? 'px-6' : ''" :data-depth="depth">
+          <ElInput
+            v-if="opt.isHidden.value !== true"
+            :ui-size="uiSize"
+            :data-key="opt.key.value"
+            class="setting-input"
+            :input-class="opt.settings.inputClass || 'max-w-md'"
+            v-bind="{ ...inputProps, ...opt.outputProps.value }"
+            :input="opt.input.value"
+            :model-value="getNested({ path: getOptionPath(opt.key.value), data: modelValue })"
+            @update:model-value="emit('update:modelValue', setNested({ path: getOptionPath(opt.key.value), data: modelValue, value: $event }))"
+          />
+        </div>
+      </div>
+    </div>
+    <ElActions :actions class="mt-4 flex items-center justify-center" />
+  </div>
+</template>
diff --git a/@fiction/ui/inputs/InputPosts.vue b/@fiction/ui/inputs/InputPosts.vue
new file mode 100644
index 000000000..c11a56863
--- /dev/null
+++ b/@fiction/ui/inputs/InputPosts.vue
@@ -0,0 +1,206 @@
+<script lang="ts" setup>
+import { vue } from '@fiction/core'
+import type { PostHandlingObject } from '@fiction/core'
+import FormEngine from './FormEngine.vue'
+import { InputOption } from './index.js'
+
+const { modelValue } = defineProps<{ modelValue: PostHandlingObject }>()
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', payload: PostHandlingObject): void
+}>()
+
+const baseOptions: InputOption[] = [
+  new InputOption({
+    key: 'format',
+    label: 'Post Format',
+    input: 'InputSelectCustom',
+    list: [
+      { name: 'Global Post Query', value: 'global' },
+      { name: 'Local (Added Here)', value: 'local' },
+    ],
+  }),
+  new InputOption({
+    key: 'limit',
+    label: 'Per Page Limit',
+    input: 'InputNumber',
+    props: { min: 1 },
+  }),
+]
+
+const filterOptions: InputOption[] = [
+  new InputOption({
+    key: 'field',
+    label: 'Field',
+    input: 'InputSelectCustom',
+    list: [
+      { name: 'Title', value: 'title' },
+      { name: 'Content', value: 'content' },
+      { name: 'Author', value: 'author' },
+      { name: 'Category', value: 'category' },
+      { name: 'Tag', value: 'tag' },
+    ],
+  }),
+  new InputOption({
+    key: 'operator',
+    label: 'Operator',
+    input: 'InputSelectCustom',
+    list: [
+      { name: 'Equals', value: '=' },
+      { name: 'Not Equals', value: '!=' },
+      { name: 'Contains', value: 'like' },
+      { name: 'Not Contains', value: 'not like' },
+      { name: 'In', value: 'in' },
+      { name: 'Not In', value: 'not in' },
+    ],
+  }),
+  new InputOption({
+    key: 'value',
+    label: 'Value',
+    input: 'InputText',
+  }),
+]
+
+const globalQueryOptions: InputOption[] = [
+  new InputOption({
+    key: 'query.filters',
+    label: 'Select by Filters',
+    subLabel: 'Must match any of these filters (OR logic)',
+    description: 'Filters are applied to the global query. If you don\'t want to filter, leave this empty.',
+    input: 'InputList',
+    props: { itemName: 'Filter' },
+    options: [
+      new InputOption({
+        key: 'filters',
+        label: 'Filters',
+        subLabel: 'Must match all of these filters (AND logic)',
+        description: 'These are applied with OR logic. If using AND logic, add a new top level filter.',
+        props: { itemName: 'Filter' },
+        input: 'InputList',
+        options: filterOptions,
+      }),
+    ],
+  }),
+  // new InputOption({
+  //   key: 'advanced',
+  //   label: 'Advanced Options',
+  //   input: 'group',
+  //   options: [
+  //     new InputOption({
+  //       key: 'query.search',
+  //       label: 'Search',
+  //       input: 'InputText',
+  //       props: { placeholder: 'Enter search term' },
+  //     }),
+  //     new InputOption({
+  //       key: 'query.sortBy',
+  //       label: 'Sort By',
+  //       input: 'InputSelectCustom',
+  //       list: [
+  //         { name: 'Date', value: 'date' },
+  //         { name: 'Title', value: 'title' },
+  //         { name: 'Author', value: 'author' },
+  //       ],
+  //     }),
+  //     new InputOption({
+  //       key: 'query.sortOrder',
+  //       label: 'Sort Order',
+  //       input: 'InputSelectCustom',
+  //       list: [
+  //         { name: 'Ascending', value: 'asc' },
+  //         { name: 'Descending', value: 'desc' },
+  //       ],
+  //     }),
+  //   ],
+  // }),
+]
+
+const localPostOptions: InputOption[] = [
+  new InputOption({
+    key: 'title',
+    label: 'Title',
+    input: 'InputText',
+  }),
+  new InputOption({
+    key: 'content',
+    label: 'Content',
+    input: 'InputTextarea',
+  }),
+  new InputOption({
+    key: 'status',
+    label: 'Status',
+    input: 'InputSelectCustom',
+    list: [
+      { name: 'Draft', value: 'draft' },
+      { name: 'Published', value: 'published' },
+      { name: 'Archived', value: 'archived' },
+    ],
+  }),
+  new InputOption({
+    key: 'slug',
+    label: 'Slug',
+    input: 'InputText',
+  }),
+  new InputOption({
+    key: 'tags',
+    label: 'Tags',
+    input: 'InputList',
+    options: [
+      new InputOption({
+        key: 'name',
+        label: 'Tag Name',
+        input: 'InputText',
+      }),
+    ],
+  }),
+  new InputOption({
+    key: 'categories',
+    label: 'Categories',
+    input: 'InputList',
+    options: [
+      new InputOption({
+        key: 'name',
+        label: 'Category Name',
+        input: 'InputText',
+      }),
+    ],
+  }),
+]
+
+const options = vue.computed(() => {
+  const formatOption = baseOptions.find(opt => opt.key.value === 'format')!
+  const limitOption = baseOptions.find(opt => opt.key.value === 'limit')!
+
+  if (modelValue.format === 'global') {
+    return [
+      formatOption,
+      ...globalQueryOptions,
+      limitOption,
+    ]
+  }
+  else {
+    return [
+      formatOption,
+      new InputOption({
+        key: 'posts',
+        label: 'Local Posts',
+        input: 'InputList',
+        options: localPostOptions,
+      }),
+      limitOption,
+    ] as InputOption[]
+  }
+})
+</script>
+
+<template>
+  <div class="border-t border-theme-200 dark:border-theme-700 pt-4">
+    <FormEngine
+      :depth="1"
+      :model-value="modelValue"
+      ui-size="md"
+      :options="options"
+      @update:model-value="emit('update:modelValue', $event as PostHandlingObject)"
+    />
+  </div>
+</template>
diff --git a/@fiction/ui/inputs/index.ts b/@fiction/ui/inputs/index.ts
index e4f7f9055..3c91b116f 100644
--- a/@fiction/ui/inputs/index.ts
+++ b/@fiction/ui/inputs/index.ts
@@ -34,11 +34,11 @@ export const inputs = {
   InputTextarea: { el: def(async () => import('./InputTextarea.vue')) },
   InputWeight: { el: def(async () => import('./InputWeight.vue')) },
   InputNumber: { el: def(async () => import('./InputNumber.vue')) },
+  InputPosts: { el: def(async () => import('./InputPosts.vue')), shape: [] },
   InputLogo: { el: def(async () => import('./InputLogo.vue')), shape: ['url', 'format', 'html', 'el', 'typography.*', 'class', 'iconId'] },
   InputIcon: { el: def(async () => import('./InputIcon.vue')), shape: ['url', 'format', 'html', 'iconId', 'el', 'class'] },
   InputMedia: { el: def(async () => import('./InputMedia.vue')), shape: ['url', 'format', 'html', 'el', 'modify.*', 'iconId', 'class'] },
   InputMediaUpload: { el: def(async () => import('./InputMediaUpload.vue')), shape: ['url'] },
-  InputMediaDisplay: { el: def(async () => import('./InputMediaDisplay.vue')), shape: ['url', 'format', 'html', 'el', 'modify', 'modify.flip'] },
   InputRanking: { el: def(async () => import('./InputRanking.vue')) },
   InputMultipleChoice: { el: def(async () => import('./InputMultipleChoice.vue')) },
   InputRating: { el: def(async () => import('./InputRating.vue')) },
diff --git a/@fiction/ui/inputs/test/TestInputsAll.vue b/@fiction/ui/inputs/test/TestInputsAll.vue
index 5fb3e270b..f5183f56a 100644
--- a/@fiction/ui/inputs/test/TestInputsAll.vue
+++ b/@fiction/ui/inputs/test/TestInputsAll.vue
@@ -104,8 +104,8 @@ function toggleDarkMode() {
         :service="service"
         :options="[
           new InputOption({ label: 'Text', input: 'InputText', key: 'text' }),
-          new InputOption({ label: 'Media Display', input: 'InputMediaDisplay', key: 'media' }),
-          new InputOption({ label: 'Overlays', input: 'InputList', key: 'overlays', options: [new InputOption({ label: 'Media Display', input: 'InputMediaDisplay', key: 'media' })] })]"
+          new InputOption({ label: 'Media Display', input: 'InputMedia', key: 'media' }),
+          new InputOption({ label: 'Overlays', input: 'InputList', key: 'overlays', options: [new InputOption({ label: 'Media Display', input: 'InputMedia', key: 'media' })] })]"
       />
       <TestInput input-name="Overlay" :input-el="inputs.InputOverlay" />