diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx
index 73d31c1749..2fd9cb5730 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx
@@ -1,8 +1,9 @@
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
-import { BiSearch } from 'react-icons/bi'
+import { BiSearch, BiSolidMagicWand } from 'react-icons/bi'
import {
Box,
+ Button,
Divider,
Flex,
Icon,
@@ -14,6 +15,7 @@ import {
TabPanels,
Tabs,
Text,
+ Tooltip,
} from '@chakra-ui/react'
import { Tab } from '~components/Tabs'
@@ -30,6 +32,22 @@ import {
PaymentsInputPanel,
} from './field-panels'
+const MagicFormBuilderButton = ({ ...styleProps }) => (
+
+
+
+)
+
const FieldSearchBar = ({
searchValue,
onChange,
@@ -37,16 +55,19 @@ const FieldSearchBar = ({
searchValue: string
onChange: (e: React.ChangeEvent) => void
}) => (
-
-
-
-
-
-
+ <>
+
+
+
+
+
+
+
+ >
)
export const FieldListDrawer = (): JSX.Element => {