diff --git a/frontend/e2e/helpers/form-builder.ts b/frontend/e2e/helpers/form-builder.ts
index fcbd4b1..d5af874 100644
--- a/frontend/e2e/helpers/form-builder.ts
+++ b/frontend/e2e/helpers/form-builder.ts
@@ -266,12 +266,9 @@ export class FormBuilderPage {
   }
 
   async addField(fieldType: string) {
-    // Each card shows the field type name as visible text
-    const card = this.sidebar()
-      .getByText(fieldType, { exact: true })
-      .locator("..");
-    await card.hover();
-    await card.getByRole("button").click();
+    await this.sidebar()
+      .getByRole("button", { name: fieldType, exact: true })
+      .click();
   }
 
   // The canvas shows "Click on fields to add them…" when empty
diff --git a/frontend/e2e/specs/add-fields-palette.spec.ts b/frontend/e2e/specs/add-fields-palette.spec.ts
new file mode 100644
index 0000000..03c65e5
--- /dev/null
+++ b/frontend/e2e/specs/add-fields-palette.spec.ts
@@ -0,0 +1,87 @@
+import { test, expect } from "../fixtures/test-data.fixture";
+import { FormBuilderPage } from "../helpers/form-builder";
+
+test.describe("Add Fields palette", () => {
+  test("renders palette items as buttons without live input previews", async ({
+    page,
+    createForm,
+  }) => {
+    const formId = await createForm();
+    const builder = new FormBuilderPage(page);
+    await builder.goto(formId);
+
+    const sidebar = page.locator(
+      '[data-form-builder-component="form-builder-sidebar"]'
+    );
+
+    // Palette items are buttons, named after the fieldtype
+    await expect(
+      sidebar.getByRole("button", { name: "Data", exact: true })
+    ).toBeVisible();
+    await expect(
+      sidebar.getByRole("button", { name: "Email", exact: true })
+    ).toBeVisible();
+    await expect(
+      sidebar.getByRole("button", { name: "Phone", exact: true })
+    ).toBeVisible();
+
+    // No autofillable inputs inside palette buttons (regression: previously
+    // each palette card mounted a live FormControl, which triggered browser
+    // autofill on type=email / type=tel / type=password).
+    const emailBtn = sidebar.getByRole("button", {
+      name: "Email",
+      exact: true,
+    });
+    await expect(emailBtn.locator("input")).toHaveCount(0);
+
+    const phoneBtn = sidebar.getByRole("button", {
+      name: "Phone",
+      exact: true,
+    });
+    await expect(phoneBtn.locator("input")).toHaveCount(0);
+  });
+
+  test("search filters palette items", async ({ page, createForm }) => {
+    const formId = await createForm();
+    const builder = new FormBuilderPage(page);
+    await builder.goto(formId);
+
+    const sidebar = page.locator(
+      '[data-form-builder-component="form-builder-sidebar"]'
+    );
+
+    await expect(
+      sidebar.getByRole("button", { name: "Data", exact: true })
+    ).toBeVisible();
+    await expect(
+      sidebar.getByRole("button", { name: "Phone", exact: true })
+    ).toBeVisible();
+
+    await sidebar.getByPlaceholder("Search Fields").fill("date");
+
+    // "Date", "Date Time", "Date Range" remain (case-insensitive substring)
+    await expect(
+      sidebar.getByRole("button", { name: "Date", exact: true })
+    ).toBeVisible();
+    // Unrelated types are filtered out
+    await expect(
+      sidebar.getByRole("button", { name: "Phone", exact: true })
+    ).toHaveCount(0);
+    await expect(
+      sidebar.getByRole("button", { name: "Data", exact: true })
+    ).toHaveCount(0);
+  });
+
+  test("clicking a palette item adds the field to the canvas", async ({
+    page,
+    createForm,
+  }) => {
+    const formId = await createForm();
+    const builder = new FormBuilderPage(page);
+    await builder.goto(formId);
+
+    await expect(builder.canvasEmptyState()).toBeVisible();
+    await builder.addField("Email");
+    await expect(builder.canvasEmptyState()).not.toBeVisible();
+  });
+});
diff --git a/frontend/src/components/FormBuilderSidebar.vue b/frontend/src/components/FormBuilderSidebar.vue
index 28f6fc9..d0afd6e 100644
--- a/frontend/src/components/FormBuilderSidebar.vue
+++ b/frontend/src/components/FormBuilderSidebar.vue
@@ -1,56 +1,108 @@
 <script setup lang="ts">
 import { Settings, Plus, StretchHorizontal } from "@lucide/vue";
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import { Tooltip } from "frappe-ui";
 import AddFieldsSection from "@/components/builder/sidebar/AddFieldsSection.vue";
 import SettingsSection from "@/components/builder/sidebar/SettingsSection.vue";
 import DocTypeFieldsSection from "@/components/builder/sidebar/DoctypeFieldsSection.vue";
 
-const sidebarSections = ref([
+const sidebarSections = [
     {
-        id: 0,
+        id: "settings",
         label: "Settings",
         icon: Settings,
         section: SettingsSection,
     },
     {
-        id: 1,
+        id: "add-fields",
         label: "Add Fields",
         icon: Plus,
         section: AddFieldsSection,
     },
     {
-        id: 2,
+        id: "doctype-fields",
         label: "DocType Fields",
         icon: StretchHorizontal,
         section: DocTypeFieldsSection,
     },
-]);
+];
 
-const activeSection = ref(sidebarSections.value[1]);
+const activeSection = ref(
+    sidebarSections.find((s) => s.id === "add-fields") ?? sidebarSections[0]
+);
+
+const tabId = (id: string) => `form-builder-tab-${id}`;
+const panelId = (id: string) => `form-builder-panel-${id}`;
+const activeTabId = computed(() => tabId(activeSection.value.id));
+const activePanelId = computed(() => panelId(activeSection.value.id));
 </script>
 <template>
     <div
-        class="form-builder-sidebar bg-primary h-[calc(100vh-3rem)] w-72 border-r sticky top-0 overflow-y-auto flex"
+        class="form-builder-sidebar bg-surface-white h-[calc(100dvh-3rem)] w-72 border-r border-outline-gray-1 sticky top-0 overflow-y-auto flex"
         data-form-builder-component="form-builder-sidebar"
     >
-        <div class="h-full bg-inherit flex flex-col gap-2 p-2 border-r">
+        <div
+            role="tablist"
+            aria-label="Form builder sections"
+            aria-orientation="vertical"
+            class="h-full bg-inherit flex flex-col gap-2 p-2 border-r border-outline-gray-1"
+        >
             <Tooltip
                 v-for="section in sidebarSections"
                 :key="section.id"
                 :text="section.label"
                 placement="right"
             >
-                <Button
-                    size="md"
-                    @click="activeSection = section"
-                    :variant="activeSection === section ? 'subtle' : 'ghost'"
-                    :icon="section.icon"
-                />
+                <div class="relative">
+                    <span
+                        v-if="activeSection.id === section.id"
+                        aria-hidden="true"
+                        class="absolute left-0 top-1/2 -translate-y-1/2 h-5 w-0.5 rounded-full bg-surface-gray-7"
+                    />
+                    <Button
+                        size="md"
+                        role="tab"
+                        :id="tabId(section.id)"
+                        :aria-label="section.label"
+                        :aria-selected="activeSection.id === section.id"
+                        :aria-controls="panelId(section.id)"
+                        @click="activeSection = section"
+                        :variant="activeSection.id === section.id ? 'subtle' : 'ghost'"
+                        :icon="section.icon"
+                    />
+                </div>
             </Tooltip>
         </div>
-        <div class="flex flex-col gap-4 w-full p-4 overflow-x-hidden">
-            <component :is="activeSection.section" />
+        <div
+            role="tabpanel"
+            :id="activePanelId"
+            :aria-labelledby="activeTabId"
+            tabindex="0"
+            class="flex flex-col gap-4 w-full p-4 overflow-x-hidden focus:outline-none"
+        >
+            <Transition name="section-fade" mode="out-in">
+                <component :is="activeSection.section" :key="activeSection.id" />
+            </Transition>
         </div>
     </div>
 </template>
+
+<style scoped>
+.section-fade-enter-active {
+    transition: opacity 120ms ease-out;
+}
+.section-fade-leave-active {
+    transition: opacity 120ms ease-in;
+}
+.section-fade-enter-from,
+.section-fade-leave-to {
+    opacity: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .section-fade-enter-active,
+    .section-fade-leave-active {
+        transition: none;
+    }
+}
+</style>
diff --git a/frontend/src/components/builder/sidebar/AddFieldsSection.vue b/frontend/src/components/builder/sidebar/AddFieldsSection.vue
index 3ae838d..3b0af22 100644
--- a/frontend/src/components/builder/sidebar/AddFieldsSection.vue
+++ b/frontend/src/components/builder/sidebar/AddFieldsSection.vue
@@ -1,22 +1,14 @@
 <script setup lang="ts">
 import { ref, computed } from "vue";
-import { formFields, FormFields } from "@/utils/form_fields";
-import { Fieldtype } from "@/types/formfield";
-import { FormControl, Button } from "frappe-ui";
+import { formFields, type FormFields } from "@/utils/form_fields";
+import { FormControl } from "frappe-ui";
 import { useEditForm } from "@/stores/editForm";
-import RenderField from "@/components/RenderField.vue";
-import type { Component } from "vue";
 
 const search = ref("");
-const componentMap = formFields.reduce((acc: Record<string, Component>, field: FormFields) => {
-    acc[field.name] = field.component;
-    return acc;
-}, {});
 
-const filteredComponents = computed(() => {
-    return Object.keys(componentMap).filter((component) =>
-        component.toLowerCase().includes(search.value.toLowerCase())
-    );
+const filteredFields = computed(() => {
+    const q = search.value.toLowerCase();
+    return formFields.filter((field: FormFields) => field.name.toLowerCase().includes(q));
 });
 
 const editFormStore = useEditForm();
@@ -31,19 +23,24 @@ const editFormStore = useEditForm();
                 variant="outline"
                 placeholder="Search Fields"
             />
-            <div v-for="component in filteredComponents" :key="component">
-                <div
-                    class="p-2 bg-gray-50 w-full rounded flex flex-col gap-2 border border-gray-200 hover:border-gray-400 transition-all relative group"
+            <p v-if="!filteredFields.length" class="text-sm text-gray-500 px-1 py-2">
+                No fields match "{{ search }}"
+            </p>
+            <div v-else class="flex flex-col gap-2">
+                <button
+                    v-for="field in filteredFields"
+                    :key="field.name"
+                    type="button"
+                    class="flex w-full items-center gap-2 px-2.5 py-2 bg-surface-gray-1 rounded border border-outline-gray-1 hover:border-outline-gray-2 hover:bg-surface-gray-2 active:scale-[0.98] active:bg-surface-gray-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-offset-1 transition-all duration-150 text-left"
+                    @click="editFormStore.addField(field.name)"
                 >
-                    <div class="text-sm">{{ component }}</div>
-                    <RenderField class="pointer-events-none" :field="{ fieldtype: component }" />
-                    <Button
-                        class="absolute top-4 -right-2 opacity-0 group-hover:opacity-100 transition-opacity z-10"
-                        variant="outline"
-                        icon="plus"
-                        @click="editFormStore.addField(component as Fieldtype)"
+                    <component
+                        :is="field.icon"
+                        class="w-4 h-4 text-gray-600 shrink-0"
+                        aria-hidden="true"
                     />
-                </div>
+                    <span class="text-sm truncate">{{ field.name }}</span>
+                </button>
             </div>
         </div>
     </div>
diff --git a/frontend/src/config/fieldTypes.ts b/frontend/src/config/fieldTypes.ts
index 59a9a2c..0e93a23 100644
--- a/frontend/src/config/fieldTypes.ts
+++ b/frontend/src/config/fieldTypes.ts
@@ -33,6 +33,30 @@ import {
   TimePicker,
   FormControl,
 } from "frappe-ui";
+import {
+  AlignLeft,
+  AtSign,
+  Calendar,
+  CalendarClock,
+  CalendarRange,
+  Clock,
+  Hash,
+  Heading1,
+  Heading2,
+  Heading3,
+  KeyRound,
+  Link2,
+  List,
+  ListChecks,
+  Paperclip,
+  Phone as PhoneIcon,
+  Pilcrow,
+  SquareCheck,
+  Star,
+  Table as TableIcon,
+  ToggleRight,
+  Type,
+} from "@lucide/vue";
 import Attachment from "@/components/fields/Attachment.vue";
 import Heading from "@/components/fields/Heading.vue";
 import Multiselect from "@/components/fields/multiselect/Multiselect.vue";
@@ -63,6 +87,8 @@ export type FieldTypeDefinition = {
   name: Fieldtype;
   /** Vue component used to render this field in input mode */
   component: Component;
+  /** Lucide icon used in the Add Fields palette */
+  icon: Component;
   /** Default props forwarded to the component */
   props: Record<string, unknown>;
   /** How FieldRenderer lays out the label relative to the input */
@@ -87,6 +113,7 @@ export const FIELD_TYPE_DEFINITIONS: FieldTypeDefinition[] = [
   {
     name: Fieldtype.ATTACH,
     component: Attachment,
+    icon: Paperclip,
     props: {
       variant: "outline",
       filetypes: ["image/*", ".jpg", ".gif", ".pdf"],
@@ -99,6 +126,7 @@ export const FIELD_TYPE_DEFINITIONS: FieldTypeDefinition[] = [
   {
     name: Fieldtype.DATA,
     component: FormControl,
+    icon: Type,
     props: { type: "text", variant: "outline" },
     layout: "default",
     frappeFieldtype: "Data",
@@ -108,6 +136,7 @@ export const FIELD_TYPE_DEFINITIONS: FieldTypeDefinition[] = [
   {
     name: Fieldtype.NUMBER,
     component: FormControl,
+    icon: Hash,
     props: { type: "number", variant: "outline" },
     layout: "default",
     frappeFieldtype: "Int",
@@ -117,6 +146,7 @@ export const FIELD_TYPE_DEFINITIONS: FieldTypeDefinition[] = [
   {
     name: Fieldtype.EMAIL,
     component: FormControl,
+    icon: AtSign,
     props: { type: "email", variant: "outline" },
     layout: "default",
     frappeFieldtype: "Data",
@@ -127,6 +157,7 @@ export const FIELD_TYPE_DEFINITIONS: FieldTypeDefinition[] = [
   {
     name: Fieldtype.DATE,
     component: DatePicker,
+    icon: Calendar,
     props: { variant: "outline", clearable: true, format: "D MMM YYYY" },
     layout: "default",
     frappeFieldtype: "Date",
@@ -136,6 +167,7 @@ export const FIELD_TYPE_DEFINITIONS: FieldTypeDefinition[] = [
   {
     name: Fieldtype.DATE_TIME,
     component: DateTimePicker,
+    icon: CalendarClock,
     props: {
       format: "DD MMM YYYY, hh:mm A",
       clearable: true,
@@ -149,6 +181,7 @@ export const FIELD_TYPE_DEFINITIONS: FieldTypeDefinition[] = [
   {
     name: Fieldtype.DATE_RANGE,
     component: DateRangePicker,
+    icon: CalendarRange,
     props: { clearable: true, variant: "outline", format: "DD MMM 'YY" },
     layout: "default",
     frappeFieldtype: "Data",
@@ -158,6 +191,7 @@ export const FIELD_TYPE_DEFINITIONS: FieldTypeDefinition[] = [
   {
     name: Fieldtype.TIME_PICKER,
     component: TimePicker,
+    icon: Clock,
     props: { variant: "outline", use12Hour: true, clearable: true },
     layout: "default",
     frappeFieldtype: "Time",
@@ -167,6 +201,7 @@ export const FIELD_TYPE_DEFINITIONS: FieldTypeDefinition[] = [
   {
     name: Fieldtype.PASSWORD,
     component: Password,
+    icon: KeyRound,
     props: { variant: "outline" },
     layout: "default",
     frappeFieldtype: "Password",
@@ -176,6 +211,7 @@ export const FIELD_TYPE_DEFINITIONS: FieldTypeDefinition[] = [
   {
     name: Fieldtype.SELECT,
     component: Select,
+    icon: List,
     props: { variant: "outline" },
     layout: "default",
     frappeFieldtype: "Select",
@@ -185,6 +221,7 @@ export const FIELD_TYPE_DEFINITIONS: FieldTypeDefinition[] = [
   {
     name: Fieldtype.PHONE,
     component: Phone,
+    icon: PhoneIcon,
     props: { variant: "outline" },
     layout: "default",
     frappeFieldtype: "Phone",
@@ -194,6 +231,7 @@ export const FIELD_TYPE_DEFINITIONS: FieldTypeDefinition[] = [
   {
     name: Fieldtype.SWITCH,
     component: Switch,
+    icon: ToggleRight,
     props: {},
     layout: "inline",
     frappeFieldtype: "Check",
@@ -203,6 +241,7 @@ export const FIELD_TYPE_DEFINITIONS: FieldTypeDefinition[] = [
   {
     name: Fieldtype.TEXTAREA,
     component: Textarea,
+    icon: AlignLeft,
     props: { variant: "outline" },
     layout: "default",
     frappeFieldtype: "Text",
@@ -212,6 +251,7 @@ export const FIELD_TYPE_DEFINITIONS: FieldTypeDefinition[] = [
   {
     name: Fieldtype.TEXT_EDITOR,
     component: TextEditor,
+    icon: Pilcrow,
     props: {
       editorClass:
         "bg-surface-white w-full rounded-b form-description border rounded-b min-h-24",
@@ -227,6 +267,7 @@ export const FIELD_TYPE_DEFINITIONS: FieldTypeDefinition[] = [
   {
     name: Fieldtype.LINK,
     component: Select,
+    icon: Link2,
     props: { variant: "outline" },
     layout: "default",
     frappeFieldtype: "Link",
@@ -236,6 +277,7 @@ export const FIELD_TYPE_DEFINITIONS: FieldTypeDefinition[] = [
   {
     name: Fieldtype.CHECKBOX,
     component: Checkbox,
+    icon: SquareCheck,
     props: {},
     layout: "inline",
     frappeFieldtype: "Check",
@@ -245,6 +287,7 @@ export const FIELD_TYPE_DEFINITIONS: FieldTypeDefinition[] = [
   {
     name: Fieldtype.RATING,
     component: Rating,
+    icon: Star,
     props: {},
     layout: "default",
     frappeFieldtype: "Rating",
@@ -254,6 +297,7 @@ export const FIELD_TYPE_DEFINITIONS: FieldTypeDefinition[] = [
   {
     name: Fieldtype.TABLE,
     component: Table,
+    icon: TableIcon,
     props: {
       options: {
         emptyState: {
@@ -270,6 +314,7 @@ export const FIELD_TYPE_DEFINITIONS: FieldTypeDefinition[] = [
   {
     name: Fieldtype.MULTISELECT,
     component: Multiselect,
+    icon: ListChecks,
     props: {},
     layout: "description-first",
     frappeFieldtype: "JSON",
@@ -280,6 +325,7 @@ export const FIELD_TYPE_DEFINITIONS: FieldTypeDefinition[] = [
   {
     name: Fieldtype.HEADING_1,
     component: Heading,
+    icon: Heading1,
     props: {},
     layout: "heading",
     frappeFieldtype: "HTML",
@@ -289,6 +335,7 @@ export const FIELD_TYPE_DEFINITIONS: FieldTypeDefinition[] = [
   {
     name: Fieldtype.HEADING_2,
     component: Heading,
+    icon: Heading2,
     props: {},
     layout: "heading",
     frappeFieldtype: "HTML",
@@ -298,6 +345,7 @@ export const FIELD_TYPE_DEFINITIONS: FieldTypeDefinition[] = [
   {
     name: Fieldtype.HEADING_3,
     component: Heading,
+    icon: Heading3,
     props: {},
     layout: "heading",
     frappeFieldtype: "HTML",