diff --git a/packages/Webkul/Admin/src/Http/Controllers/Settings/WebFormController.php b/packages/Webkul/Admin/src/Http/Controllers/Settings/WebFormController.php
new file mode 100644
index 000000000..f09e800e2
--- /dev/null
+++ b/packages/Webkul/Admin/src/Http/Controllers/Settings/WebFormController.php
@@ -0,0 +1,166 @@
+<?php
+
+namespace Webkul\Admin\Http\Controllers\Settings;
+
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Support\Facades\Event;
+use Illuminate\View\View;
+use Webkul\Admin\Http\Controllers\Controller;
+use Webkul\Attribute\Repositories\AttributeRepository;
+use Webkul\Contact\Repositories\PersonRepository;
+use Webkul\Lead\Repositories\LeadRepository;
+use Webkul\Lead\Repositories\PipelineRepository;
+use Webkul\Lead\Repositories\SourceRepository;
+use Webkul\Lead\Repositories\TypeRepository;
+use Webkul\WebForm\DataGrids\WebFormDataGrid;
+use Webkul\WebForm\Repositories\WebFormRepository;
+
+class WebFormController extends Controller
+{
+    /**
+     * Create a new controller instance.
+     *
+     * @return void
+     */
+    public function __construct(
+        protected AttributeRepository $attributeRepository,
+        protected WebFormRepository $webFormRepository,
+        protected PersonRepository $personRepository,
+        protected LeadRepository $leadRepository,
+        protected PipelineRepository $pipelineRepository,
+        protected SourceRepository $sourceRepository,
+        protected TypeRepository $typeRepository
+    ) {}
+
+    /**
+     * Display a listing of the email template.
+     */
+    public function index(): View|JsonResponse
+    {
+        if (request()->ajax()) {
+            return datagrid(WebFormDataGrid::class)->process();
+        }
+
+        return view('admin::settings.web-forms.index');
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     */
+    public function create(): View
+    {
+        $tempAttributes = $this->attributeRepository->findWhereIn('entity_type', ['persons', 'leads']);
+
+        $attributes = [];
+
+        foreach ($tempAttributes as $attribute) {
+            if ($attribute->entity_type == 'persons'
+                && (
+                    $attribute->code == 'name'
+                    || $attribute->code == 'emails'
+                    || $attribute->code == 'contact_numbers'
+                )
+            ) {
+                $attributes['default'][] = $attribute;
+            } else {
+                $attributes['other'][] = $attribute;
+            }
+        }
+
+        return view('admin::settings.web-forms.create', compact('attributes'));
+    }
+
+    /**
+     * Store a newly created email templates in storage.
+     */
+    public function store(): RedirectResponse
+    {
+        $this->validate(request(), [
+            'title'                  => 'required',
+            'submit_button_label'    => 'required',
+            'submit_success_action'  => 'required',
+            'submit_success_content' => 'required',
+        ]);
+
+        Event::dispatch('settings.web_forms.create.before');
+
+        $data = request()->all();
+
+        $data['create_lead'] = isset($data['create_lead']) ? 1 : 0;
+
+        $webForm = $this->webFormRepository->create($data);
+
+        Event::dispatch('settings.web_forms.create.after', $webForm);
+
+        session()->flash('success', trans('admin::app.settings.webforms.index.create-success'));
+
+        return redirect()->route('admin.settings.web_forms.index');
+    }
+
+    /**
+     * Show the form for editing the specified email template.
+     */
+    public function edit(int $id): View
+    {
+        $webForm = $this->webFormRepository->findOrFail($id);
+
+        $attributes = $this->attributeRepository->findWhere([
+            ['entity_type', 'IN', ['persons', 'leads']],
+            ['id', 'NOTIN', $webForm->attributes()->pluck('attribute_id')->toArray()],
+        ]);
+
+        return view('admin::settings.web-forms.edit', compact('webForm', 'attributes'));
+    }
+
+    /**
+     * Update the specified email template in storage.
+     */
+    public function update(int $id): RedirectResponse
+    {
+        $this->validate(request(), [
+            'title'                  => 'required',
+            'submit_button_label'    => 'required',
+            'submit_success_action'  => 'required',
+            'submit_success_content' => 'required',
+        ]);
+
+        Event::dispatch('settings.web_forms.update.before', $id);
+
+        $data = request()->all();
+
+        $data['create_lead'] = isset($data['create_lead']) ? 1 : 0;
+
+        $webForm = $this->webFormRepository->update($data, $id);
+
+        Event::dispatch('settings.web_forms.update.after', $webForm);
+
+        session()->flash('success', trans('admin::app.settings.webforms.index.update-success'));
+
+        return redirect()->route('admin.settings.web_forms.index');
+    }
+
+    /**
+     * Remove the specified email template from storage.
+     */
+    public function destroy(int $id): JsonResponse
+    {
+        $webForm = $this->webFormRepository->findOrFail($id);
+
+        try {
+            Event::dispatch('settings.web_forms.delete.before', $id);
+
+            $webForm->delete($id);
+
+            Event::dispatch('settings.web_forms.delete.after', $id);
+
+            return response()->json([
+                'message' => trans('admin::app.settings.webforms.index.delete-success'),
+            ], 200);
+        } catch (\Exception $exception) {
+            return response()->json([
+                'message' => trans('admin::app.settings.webforms.index.delete-failed'),
+            ], 400);
+        }
+    }
+}
diff --git a/packages/Webkul/Admin/src/Http/helpers.php b/packages/Webkul/Admin/src/Http/helpers.php
index 25856a30d..4c78896d0 100755
--- a/packages/Webkul/Admin/src/Http/helpers.php
+++ b/packages/Webkul/Admin/src/Http/helpers.php
@@ -1,5 +1,7 @@
 <?php
 
+use Webkul\Admin\Vite as AdminVite;
+
 if (! function_exists('bouncer')) {
     function bouncer()
     {
@@ -7,7 +9,7 @@ function bouncer()
     }
 }
 
-function vite()
+function admin_vite(): AdminVite
 {
-    return app(\Webkul\Core\Vite::class);
+    return app(AdminVite::class);
 }
diff --git a/packages/Webkul/Admin/src/Resources/assets/css/app.css b/packages/Webkul/Admin/src/Resources/assets/css/app.css
index b0f034383..fdafbd92c 100644
--- a/packages/Webkul/Admin/src/Resources/assets/css/app.css
+++ b/packages/Webkul/Admin/src/Resources/assets/css/app.css
@@ -235,7 +235,7 @@
     }
 
     .secondary-button {
-        @apply flex cursor-pointer place-content-center items-center gap-x-1 whitespace-nowrap rounded-md border-2 border-blue-600 bg-white px-3 py-1.5 font-semibold text-blue-600 transition-all hover:bg-[#eff6ff61] focus:bg-[#eff6ff61] dark:border-gray-400 dark:bg-gray-800 dark:text-white dark:hover:opacity-80;
+        @apply flex cursor-pointer place-content-center items-center gap-x-1 whitespace-nowrap rounded-md border-2 border-brandColor bg-white px-3 py-1.5 font-semibold text-brandColor transition-all hover:bg-[#eff6ff61] focus:bg-[#eff6ff61] dark:border-gray-400 dark:bg-gray-800 dark:text-white dark:hover:opacity-80;
     }
 
     .transparent-button {
diff --git a/packages/Webkul/Admin/src/Resources/assets/js/app.js b/packages/Webkul/Admin/src/Resources/assets/js/app.js
index c73a23422..67322ad2f 100644
--- a/packages/Webkul/Admin/src/Resources/assets/js/app.js
+++ b/packages/Webkul/Admin/src/Resources/assets/js/app.js
@@ -104,12 +104,14 @@ import Emitter from "./plugins/emitter";
 import Flatpickr from "./plugins/flatpickr";
 import VeeValidate from "./plugins/vee-validate";
 import CreateElement from "./plugins/createElement";
+import Draggable from "./plugins/draggable";
 import VueCal from "./plugins/vue-cal";
 
 [
     Axios,
     Emitter,
     CreateElement,
+    Draggable,
     Flatpickr,
     VeeValidate,
     VueCal,
diff --git a/packages/Webkul/Admin/src/Resources/assets/js/plugins/draggable.js b/packages/Webkul/Admin/src/Resources/assets/js/plugins/draggable.js
new file mode 100644
index 000000000..a8fc1facf
--- /dev/null
+++ b/packages/Webkul/Admin/src/Resources/assets/js/plugins/draggable.js
@@ -0,0 +1,10 @@
+import Draggable from 'vuedraggable';
+
+export default {
+    install: (app) => {
+        /**
+         * Global component registration;
+         */
+        app.component("draggable", Draggable);
+    },
+};
diff --git a/packages/Webkul/Admin/src/Resources/lang/en/app.php b/packages/Webkul/Admin/src/Resources/lang/en/app.php
index 1f0ecf504..8898e16d6 100644
--- a/packages/Webkul/Admin/src/Resources/lang/en/app.php
+++ b/packages/Webkul/Admin/src/Resources/lang/en/app.php
@@ -491,6 +491,76 @@
             ],
         ],
 
+        'webforms' => [
+            'index' => [
+                'title'          => 'Webforms',
+                'create-btn'     => 'Create Webform',
+                'create-success' => 'Webform created successfully.',
+                'update-success' => 'Webform updated successfully.',
+                'delete-success' => 'Webform deleted successfully.',
+                'delete-failed'  => 'Webform can not be deleted.',
+                'datagrid'       => [
+                    'id'     => 'ID',
+                    'title'  => 'Title',
+                    'edit'   => 'Edit',
+                    'delete' => 'Delete',
+                ],
+            ],
+
+            'create' => [
+                'title'                    => 'Create Webform',
+                'save-btn'                 => 'Save Webform',
+                'submit-success-action'    => 'Submit Success Action',
+                'general'                  => 'General',
+                'create-lead'              => 'Create Lead',
+                'customize-webform'        => 'Customize Webform',
+                'customize-webform-info'   => 'Customize your web form with element colors of your choosing.',
+                'backgroud-color'          => 'Backgroud Color',
+                'form-backgroud-color'     => 'Form Backgroud Color',
+                'form-title-color'         => 'Form Title Color',
+                'form-submit-btn-color'    => 'Form Submit Button Color',
+                'attribute-label-color'    => 'Attribute Label Color',
+                'attributes'               => 'Attributes',
+                'attributes-info'          => 'Add custom attributes to the form.',
+                'add-attribute-btn'        => 'Add Attribute Button',
+                'description'              => 'Description',
+                'submit-button-label'      => 'Submit Button Label',
+                'form-background-color'    => 'Form Backgroud Color',
+                'form-submit-button-color' => 'Form Submit Button Color',
+                'display-custom-message'   => 'Display custom message',
+            ],
+
+            'edit' => [
+                'title'                    => 'Edit Webform',
+                'embed'                    => 'Embded',
+                'preview'                  => 'Preview',
+                'save-btn'                 => 'Save Webform',
+                'submit-success-action'    => 'Submit Success Action',
+                'general'                  => 'General',
+                'create-lead'              => 'Create Lead',
+                'customize-webform'        => 'Customize Webform',
+                'customize-webform-info'   => 'Customize your web form with element colors of your choosing.',
+                'backgroud-color'          => 'Backgroud Color',
+                'form-backgroud-color'     => 'Form Backgroud Color',
+                'form-title-color'         => 'Form Title Color',
+                'form-background-color'    => 'Form Backgroud Color',
+                'form-submit-btn-color'    => 'Form Submit Button Color',
+                'attribute-label-color'    => 'Attribute Label Color',
+                'attributes'               => 'Attributes',
+                'attributes-info'          => 'Add custom attributes to the form.',
+                'add-attribute-btn'        => 'Add Attribute Button',
+                'description'              => 'Description',
+                'submit-button-label'      => 'Submit Button Label',
+                'redirect-to-url'          => 'Redirect To URL',
+                'copied'                   => 'Copied',
+                'copy'                     => 'Copy',
+                'public-url'               => 'Public URL',
+                'code-snippet'             => 'Code Snippet',
+                'form-submit-button-color' => 'Form Submit Button Color',
+                'display-custom-message'   => 'Display custom message',
+            ],
+        ],
+
         'email-template' => [
             'index' => [
                 'create-btn'     => 'Create Email Template',
diff --git a/packages/Webkul/Admin/src/Resources/views/components/layouts/anonymous.blade.php b/packages/Webkul/Admin/src/Resources/views/components/layouts/anonymous.blade.php
index 194ed4c38..a8ee61086 100644
--- a/packages/Webkul/Admin/src/Resources/views/components/layouts/anonymous.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/components/layouts/anonymous.blade.php
@@ -35,7 +35,7 @@
     @stack('meta')
 
     {{
-        vite()->set(['src/Resources/assets/css/app.css', 'src/Resources/assets/js/app.js'])
+        admin_vite()->set(['src/Resources/assets/css/app.css', 'src/Resources/assets/js/app.js'])
     }}
 
     <link
diff --git a/packages/Webkul/Admin/src/Resources/views/components/layouts/header/index.blade.php b/packages/Webkul/Admin/src/Resources/views/components/layouts/header/index.blade.php
index 071352aa3..4aa06afa3 100644
--- a/packages/Webkul/Admin/src/Resources/views/components/layouts/header/index.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/components/layouts/header/index.blade.php
@@ -6,7 +6,7 @@
         <a href="{{ route('admin.dashboard.index') }}">
             <img
                 class="h-10" 
-                src="{{ vite()->asset('images/logo.svg') }}" 
+                src="{{ admin_vite()->asset('images/logo.svg') }}" 
                 alt="{{ config('app.name') }}"
             />
         </a>
diff --git a/packages/Webkul/Admin/src/Resources/views/components/layouts/index.blade.php b/packages/Webkul/Admin/src/Resources/views/components/layouts/index.blade.php
index b70d26723..f197be73b 100644
--- a/packages/Webkul/Admin/src/Resources/views/components/layouts/index.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/components/layouts/index.blade.php
@@ -39,7 +39,7 @@ class="{{ request()->cookie('dark_mode') ? 'dark' : '' }}"
     @stack('meta')
 
     {{
-        vite()->set(['src/Resources/assets/css/app.css', 'src/Resources/assets/js/app.js'])
+        admin_vite()->set(['src/Resources/assets/css/app.css', 'src/Resources/assets/js/app.js'])
     }}
 
     <link
diff --git a/packages/Webkul/Admin/src/Resources/views/sessions/login.blade.php b/packages/Webkul/Admin/src/Resources/views/sessions/login.blade.php
index 63fdeeb3f..9d823aab7 100644
--- a/packages/Webkul/Admin/src/Resources/views/sessions/login.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/sessions/login.blade.php
@@ -16,7 +16,7 @@ class="h-10 w-[110px]"
             @else
                 <img
                     class="w-max" 
-                    src="{{ vite()->asset('images/logo.svg') }}"
+                    src="{{ admin_vite()->asset('images/logo.svg') }}"
                     alt="{{ config('app.name') }}"
                 />
             @endif
diff --git a/packages/Webkul/Admin/src/Resources/views/settings/web-forms/create.blade.php b/packages/Webkul/Admin/src/Resources/views/settings/web-forms/create.blade.php
new file mode 100644
index 000000000..ff74db4b2
--- /dev/null
+++ b/packages/Webkul/Admin/src/Resources/views/settings/web-forms/create.blade.php
@@ -0,0 +1,668 @@
+<x-admin::layouts>
+    <x-slot:title>
+        @lang('admin::app.settings.webforms.create.title')
+    </x-slot>
+
+    <x-admin::form :action="route('admin.settings.web_forms.store')">
+        <div class="flex items-center justify-between rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300">
+            <div class="flex flex-col gap-2">
+                <div class="flex cursor-pointer items-center">
+                    <x-admin::breadcrumbs name="settings.web_forms.create" />
+                </div>
+    
+                <div class="text-xl font-bold dark:text-gray-300">
+                    @lang('admin::app.settings.webforms.create.title')
+                </div>
+            </div>
+    
+            <div class="flex items-center gap-x-2.5">
+                <!-- Create button for person -->
+                <div class="flex items-center gap-x-2.5">
+                    <button
+                        type="submit"
+                        class="primary-button"
+                    >
+                        @lang('admin::app.settings.webforms.create.save-btn')
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <v-webform></v-webform>
+    </x-admin::form>
+
+    @pushOnce('scripts')
+        <script 
+            type="text/x-template"
+            id="v-webform-template"
+        >
+            <div class="mt-3.5 flex gap-2.5 max-xl:flex-wrap">
+                <!-- Left sub-component -->
+                <div class="flex flex-1 flex-col gap-2 max-xl:flex-auto">
+                    <!-- Title -->
+                    <div class="box-shadow rounded bg-white p-4 dark:bg-gray-900">
+                        <div class="mb-4 flex items-center justify-between gap-4">
+                            <div class="flex flex-col gap-1">
+                                <p class="text-base font-semibold text-gray-800 dark:text-white">
+                                    @lang('admin::app.settings.webforms.create.title')
+                                </p>
+                            </div>
+                        </div>
+
+                        <!-- Submit success actions -->
+                        <x-admin::form.control-group>
+                            <x-admin::form.control-group.label class="!text-gray-600 required">
+                                @lang('admin::app.settings.webforms.create.submit-success-action')
+                            </x-admin::form.control-group.label>
+
+                            <div class="flex">
+                                <x-admin::form.control-group.control
+                                    type="select"
+                                    name="submit_success_action"
+                                    id="submit_success_action"
+                                    value="message"
+                                    class="!w-1/4 rounded-r-none"
+                                    :label="trans('admin::app.settings.webforms.create.submit-success-action')"
+                                    v-model="submitSuccessAction.value"
+                                >
+                                    <template
+                                        v-for="(option, index) in submitSuccessAction.options"
+                                        :key="index"
+                                    >
+                                        <option
+                                            :value="option.value"
+                                            :text="option.label"
+                                        ></option>
+                                    </template>
+                                </x-admin::form.control-group.control>
+
+                                <x-admin::form.control-group.control
+                                    type="text"
+                                    name="submit_success_content"
+                                    id="submit_success_content"
+                                    class="rounded-l-none"
+                                    rules="required"
+                                    :label="trans('admin::app.settings.webforms.create.submit-success-action')"
+                                    ::placeholder="placeholder"
+                                />
+                            </div>
+                            
+                            <x-admin::form.control-group.error control-name="submit_success_content"/>
+                        </x-admin::form.control-group>
+
+                        <!-- Create Leads -->
+                        <x-admin::form.control-group>
+                            <x-admin::form.control-group.label class="!text-gray-600 required">
+                                @lang('admin::app.settings.webforms.create.create-lead')
+                            </x-admin::form.control-group.label>
+
+                            <label class="relative inline-flex cursor-pointer items-center">
+                                <input  
+                                    type="checkbox"
+                                    name="create_lead"
+                                    :value="1"
+                                    id="create_lead"
+                                    class="peer sr-only"
+                                    v-model="createLead"
+                                >
+            
+                                <div class="peer h-5 w-9 cursor-pointer rounded-full bg-gray-200 after:absolute after:top-0.5 after:h-4 after:w-4 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-blue-300 dark:bg-gray-800 dark:after:border-white dark:after:bg-white dark:peer-checked:bg-gray-950 after:ltr:left-0.5 peer-checked:after:ltr:translate-x-full after:rtl:right-0.5 peer-checked:after:rtl:-translate-x-full"></div>
+                            </label>
+                        </x-admin::form.control-group>
+
+                        <!-- Customize webform -->
+                        <div class="mb-4 flex items-center justify-between gap-4">
+                            <div class="flex flex-col gap-1">
+                                <p class="text-base font-semibold text-gray-800 dark:text-white">
+                                    @lang('admin::app.settings.webforms.create.customize-webform')
+                                </p>
+
+                                <p class="text-sm text-gray-600 dark:text-white">
+                                    @lang('admin::app.settings.webforms.create.customize-webform-info')
+                                </p>
+                            </div>
+                        </div>
+
+                        <!-- Backgroud Color Picker -->
+                        <v-color-picker
+                            name="background_color"
+                            title="@lang('admin::app.settings.webforms.create.backgroud-color')"
+                            value="{{ old('background_color') ?? '#F7F8F9' }}"
+                        >
+                            <x-admin::form.control-group>
+                                <x-admin::form.control-group.label class="!text-gray-600">
+                                    @lang('admin::app.settings.webforms.create.backgroud-color')
+                                </x-admin::form.control-group.label>
+
+                                <x-admin::form.control-group.control
+                                    type="text"
+                                    name="background_color"
+                                    id="background_color"
+                                />
+
+                                <x-admin::form.control-group.error control-name="background_color"/>
+                            </x-admin::form.control-group>
+                        </v-color-picker>
+
+                        <!-- Backgroud Color Picker -->
+                        <v-color-picker
+                            name="form_background_color"
+                            title="@lang('admin::app.settings.webforms.create.form-background-color')"
+                            value="{{ old('form_background_color') ?? '#FFFFFF' }}"
+                        >
+                            <x-admin::form.control-group>
+                                <x-admin::form.control-group.label class="!text-gray-600">
+                                    @lang('admin::app.settings.webforms.create.form-background-color')
+                                </x-admin::form.control-group.label>
+
+                                <x-admin::form.control-group.control
+                                    type="text"
+                                    name="form_background_color"
+                                    id="form_background_color"
+                                    :label="trans('admin::app.settings.webforms.create.form-background-color')"
+                                    :placeholder="trans('admin::app.settings.webforms.create.form-background-color')"
+                                />
+
+                                <x-admin::form.control-group.error control-name="form_background_color"/>
+                            </x-admin::form.control-group>
+                        </v-color-picker>
+
+                        <!-- Backgroud Color Picker -->
+                        <v-color-picker
+                            name="form_title_color"
+                            title="@lang('admin::app.settings.webforms.create.form-title-color')"
+                            value="{{ old('form_title_color') ?? '#263238' }}"
+                        >
+                            <x-admin::form.control-group>
+                                <x-admin::form.control-group.label class="!text-gray-600">
+                                    @lang('admin::app.settings.webforms.create.form-title-color')
+                                </x-admin::form.control-group.label>
+
+                                <x-admin::form.control-group.control
+                                    type="text"
+                                    name="form_title_color"
+                                    id="form_title_color"
+                                    :label="trans('admin::app.settings.webforms.create.form-title-color')"
+                                    :placeholder="trans('admin::app.settings.webforms.create.form-title-color')"
+                                />
+
+                                <x-admin::form.control-group.error control-name="form_title_color"/>
+                            </x-admin::form.control-group>
+                        </v-color-picker>
+
+                        <!-- Form Submit Button Picker -->
+                        <v-color-picker
+                            name="form_submit_button_color"
+                            title="@lang('admin::app.settings.webforms.create.form-submit-btn-color')"
+                            value="{{ old('form_submit_button_color') ?? '#0E90D9' }}"
+                        >
+                            <x-admin::form.control-group>
+                                <x-admin::form.control-group.label class="!text-gray-600">
+                                    @lang('admin::app.settings.webforms.create.form-submit-btn-color')
+                                </x-admin::form.control-group.label>
+
+                                <x-admin::form.control-group.control
+                                    type="text"
+                                    name="form_submit_button_color"
+                                    id="form_submit_button_color"
+                                    :label="trans('admin::app.settings.webforms.create.form-submit-btn-color')"
+                                    :placeholder="trans('admin::app.settings.webforms.create.form-submit-btn-color')"
+                                />
+
+                                <x-admin::form.control-group.error control-name="form_submit_button_color"/>
+                            </x-admin::form.control-group>
+                        </v-color-picker>
+
+                        <!-- Attribute Label Color Picker -->
+                        <v-color-picker
+                            name="attribute_label_color"
+                            title="@lang('admin::app.settings.webforms.create.attribute-label-color')"
+                            value="{{ old('attribute_label_color') ?? '#546E7A' }}"
+                        >
+                            <x-admin::form.control-group>
+                                <x-admin::form.control-group.label class="!text-gray-600">
+                                    @lang('admin::app.settings.webforms.create.attribute-label-color')
+                                </x-admin::form.control-group.label>
+
+                                <x-admin::form.control-group.control
+                                    type="text"
+                                    name="attribute_label_color"
+                                    id="attribute_label_color"
+                                    :label="trans('admin::app.settings.webforms.create.attribute-label-color')"
+                                    :placeholder="trans('admin::app.settings.webforms.create.attribute-label-color')"
+                                />
+
+                                <x-admin::form.control-group.error control-name="attribute_label_color"/>
+                            </x-admin::form.control-group>
+                        </v-color-picker>
+
+
+                         <!-- Attributes -->
+                        <div class="mb-4 flex items-center justify-between gap-4">
+                            <div class="flex flex-col gap-1">
+                                <p class="text-base font-semibold text-gray-800 dark:text-white">
+                                    @lang('admin::app.settings.webforms.create.attributes')
+                                </p>
+
+                                <p class="text-sm text-gray-600 dark:text-white">
+                                    @lang('admin::app.settings.webforms.create.attributes-info')
+                                </p>
+                            </div>
+                        </div>
+
+                        <x-admin::dropdown class="rounded-lg group-hover:visible w-1/5 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400 dark:focus:border-gray-400">
+                            <x-slot:toggle>
+                                <button
+                                    type="button"
+                                    class="primary-button"
+                                >
+                                    @lang('admin::app.settings.webforms.create.add-attribute-btn')
+                                </button>
+                            </x-slot>
+        
+                            <x-slot:menu class="!p-0 dark:border-gray-800 max-h-80 overflow-y-auto">
+                                <template v-if="createLead">
+                                    <div class="font-bold text-lg m-2">@lang('admin::app.settings.webforms.create.persons')</div>
+
+                                    <span
+                                        v-for="attribute in groupedAttributes.persons"
+                                        class="whitespace-no-wrap flex cursor-pointer items-center justify-between gap-1.5 rounded-t px-2 py-2 text-sm text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-950"
+                                        @click="addAttribute(attribute)"
+                                    >
+                                        <div class="items flex items-center gap-1.5">
+                                            @{{ attribute.name }}
+                                        </div>
+                                    </span>
+                                </template>
+
+                                <template v-else>
+                                    <div class="font-bold text-lg m-2">@lang('admin::app.settings.webforms.create.leads')</div>
+
+                                    <span
+                                        v-for="attribute in groupedAttributes.leads"
+                                        class="whitespace-no-wrap flex cursor-pointer items-center justify-between gap-1.5 rounded-t px-2 py-2 text-sm text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-950"
+                                        @click="addAttribute(attribute)"
+                                    >
+                                        <div class="items flex items-center gap-1.5">
+                                            @{{ attribute.name }}
+                                        </div>
+                                    </span>
+                                </template>
+                            </x-slot>
+                        </x-admin::dropdown>
+
+                        <!-- Attributes -->
+                        <draggable
+                            tag="tbody"
+                            ghost-class="draggable-ghost"
+                            handle=".icon-edit"
+                            v-bind="{animation: 200}"
+                            item-key="id"
+                            :list="addedAttributes"
+                        >
+                            <template #item="{ element, index }">
+                                <x-admin::table.thead.tr class="hover:bg-gray-50 dark:hover:bg-gray-950">
+                                    <!-- Draggable Icon -->
+                                    <x-admin::table.td class="!px-0 text-center">
+                                        <i class="icon-edit cursor-grab text-xl transition-all group-hover:text-gray-700"></i>
+
+                                        <input
+                                            type="hidden"
+                                            :value="element['attribute']['id']"
+                                            :name="'attributes[' + element.id + '][attribute_id]'"
+                                        />
+                                    </x-admin::table.td>
+
+                                    <!-- Attribute Name -->
+                                    <x-admin::table.td>
+                                        <x-admin::form.control-group>
+                                            <x-admin::form.control-group.label class="!text-gray-600">
+                                                @{{ element?.name + ' (' + element?.attribute?.entity_type + ')' }}
+                                            </x-admin::form.control-group.label>
+
+                                            <x-admin::form.control-group.control
+                                                type="text"
+                                                ::name="'attributes[' + element.id + '][name]'"
+                                                v-model="element.name"
+                                            />
+
+                                            <x-admin::form.control-group.error ::name="'attributes[' + element.id + '][name]'"/>
+                                        </x-admin::form.control-group>
+    
+                                    </x-admin::table.td>
+
+                                    <!-- Placeholder -->
+                                    <x-admin::table.td>
+                                        <x-admin::form.control-group class="!mt-6">
+                                            <x-admin::form.control-group.control
+                                                type="text"
+                                                ::name="'attributes[' + element.id + '][placeholder]'"
+                                                ::rules="element.attribute.validation"
+                                                ::label="element?.name + ' (' + element?.attribute?.entity_type + ')'"
+                                                ::placeholder="getPlaceholderValue(element)"
+                                            />
+
+                                            <x-admin::form.control-group.error ::name="'attributes[' + element.id + '][placeholder]'"/>
+                                        </x-admin::form.control-group>
+                                    </x-admin::table.td>
+
+                                    <!-- Required or Not -->
+                                    <x-admin::table.td>
+                                        <x-admin::form.control-group class="!mt-6">
+                                            <label :for="'attributes[' + element.id + '][is_required]'">
+                                                <input
+                                                    type="checkbox"
+                                                    :name="'attributes[' + element.id + '][is_required]'"
+                                                    :id="'attributes[' + element.id + '][is_required]'"
+                                                    :value="1"
+                                                    class="peer hidden"
+                                                    :checked="element.is_required"
+                                                    :disabled="element.attribute.is_required ? true : false"
+                                                >
+
+                                                <span
+                                                    class='icon-checkbox-outline peer-checked:icon-checkbox-select cursor-pointer rounded-md text-2xl peer-checked:text-brandColor'
+                                                    :class="{'opacity-50' : element.attribute.is_required}"
+                                                ></span>
+                                            </label>
+                                        </x-admin::form.control-group>
+                                    </x-admin::table.td>
+
+                                    <!-- Actions -->
+                                    <x-admin::table.td>
+                                        <x-admin::form.control-group class="!mt-6">
+                                            <i
+                                                class="icon-delete text-2xl cursor-pointer"
+                                                v-if="element['attribute']['code'] != 'name' && element['attribute']['code'] != 'emails'"
+                                                @click="removeAttribute(element)"
+                                            ></i>
+                                        </x-admin::form.control-group>
+                                    </x-admin::table.td>
+                                </x-admin::table.thead.tr>
+                            </template>
+                        </draggable>
+                    </div>
+                </div>
+
+                <!-- Right sub-component -->
+                <div class="flex w-[360px] max-w-full flex-col gap-2 max-sm:w-full">
+                    <x-admin::accordion>
+                        <x-slot:header>
+                            <div class="flex items-center justify-between">
+                                <p class="p-2.5 text-base font-semibold text-gray-800 dark:text-white">
+                                    @lang('admin::app.settings.webforms.create.general')
+                                </p>
+                            </div>
+                        </x-slot>
+
+                        <x-slot:content>
+                            <!-- Title -->
+                            <x-admin::form.control-group>
+                                <x-admin::form.control-group.label class="!text-gray-600 required">
+                                    @lang('admin::app.settings.webforms.create.title')
+                                </x-admin::form.control-group.label>
+
+                                <x-admin::form.control-group.control
+                                    type="text"
+                                    id="title"
+                                    name="title"
+                                    rules="required"
+                                    :value="old('title')"
+                                    :label="trans('admin::app.settings.webforms.create.title')"
+                                    :placeholder="trans('admin::app.settings.webforms.create.title')"
+                                />
+
+                                <x-admin::form.control-group.error control-name="title" />
+                            </x-admin::form.control-group>
+
+                            <!-- Description -->
+                            <x-admin::form.control-group>
+                                <x-admin::form.control-group.label class="!text-gray-600">
+                                    @lang('admin::app.settings.webforms.create.description')
+                                </x-admin::form.control-group.label>
+
+                                <x-admin::form.control-group.control
+                                    type="textarea"
+                                    id="description"
+                                    name="description"
+                                    :value="old('description')"
+                                    :label="trans('admin::app.settings.webforms.create.description')"
+                                    :placeholder="trans('admin::app.settings.webforms.create.description')"
+                                />
+
+                                <x-admin::form.control-group.error control-name="description" />
+                            </x-admin::form.control-group>
+
+                            <!-- Submit button label -->
+                            <x-admin::form.control-group>
+                                <x-admin::form.control-group.label class="!text-gray-600 required">
+                                    @lang('admin::app.settings.webforms.create.submit-button-label')
+                                </x-admin::form.control-group.label>
+
+                                <x-admin::form.control-group.control
+                                    type="text"
+                                    id="submit_button_label"
+                                    name="submit_button_label"
+                                    rules="required"
+                                    :value="old('submit_button_label')"
+                                    :label="trans('admin::app.settings.webforms.create.submit-button-label')"
+                                    :placeholder="trans('admin::app.settings.webforms.create.submit-button-label')"
+                                />
+
+                                <x-admin::form.control-group.error control-name="submit_button_label" />
+                            </x-admin::form.control-group>
+                        </x-slot>
+                    </x-admin::accordion>
+                </div>
+            </div>
+        </script>
+
+        <script
+            type="text/x-template"
+            id="v-color-picker"
+        >
+            <x-admin::form.control-group>
+                <x-admin::form.control-group.label class="!text-gray-600 required">
+                    @{{ title }}
+                </x-admin::form.control-group.label>
+
+                <div class="flex">
+                    <x-admin::form.control-group.control
+                        type="text"
+                        ::name="name"
+                        ::id="name"
+                        class="rounded-r-none"
+                        rules="required"
+                        ::label="title"
+                        v-model="color"
+                    />
+
+                    <x-admin::form.control-group.control
+                        type="color"
+                        class="!w-12 !h-10 p-1 rounded-l-none"
+                        name="color"
+                        :label="trans('Submit Success Action')"
+                        ::value="color"
+                        @input="color = $event.target.value"
+                    />
+                </div>
+                
+                <x-admin::form.control-group.error ::name="name"/>
+            </x-admin::form.control-group>
+        </script>
+
+        <script type="module">
+            app.component('v-webform', {
+                template: '#v-webform-template',
+
+                data() {
+                    return {
+                        submitSuccessAction: {
+                            value: 'message',
+
+                            options: [
+                                { value: 'message', label: '@lang('Display custom message')' },
+                                { value: 'redirect', label: '@lang('Redirect to Url')' },
+                            ],
+                        },
+
+                        createLead: false,
+
+                        attributes: @json($attributes['other']),
+
+                        addedAttributes: [],
+
+                        attributeCount: 0,
+                    }
+                },
+
+                watch: {
+                    /**
+                     * Watch for the createLead value and remove the added attributes if the value is true.
+                     * 
+                     * @param {Boolean} newValue
+                     * @param {Boolean} oldValue
+                     * 
+                     * @return {void}
+                     */
+                    createLead(newValue, oldValue) {
+                        if (newValue) {
+                            return;
+                        }
+
+                        this.addedAttributes = this.addedAttributes.filter(attribute => attribute.attribute.entity_type != 'leads');
+                    },
+                },
+
+                computed:{
+                    /**
+                     * Get the placeholder value based on the submit success action value.
+                     * 
+                     * @return {String}
+                     */
+                    placeholder() {
+                        return this.submitSuccessAction.value === 'message' ? '@lang('Enter message to display')' : '@lang('Enter url to redirect')';
+                    },
+
+                    /**
+                     * Get the grouped attributes based on the entity type.
+                     * 
+                     * @return {Object}
+                     */
+                    groupedAttributes() {
+                        return this.attributes.reduce((r, a) => {
+                            r[a.entity_type] = [...r[a.entity_type] || [], a];
+                            return r;
+                        }, {});
+                    },
+                },
+
+                created () {
+                    @json($attributes['default']).forEach(function (attribute, key) {
+                        this.addedAttributes.push({
+                            'id': 'attribute_' + this.attributeCount++,
+                            'name': attribute.name,
+                            'is_required': attribute.is_required,
+                            'attribute': attribute,
+                        });
+                    }, this);
+                },
+
+                methods: {
+                    /**
+                     * Add the attribute to the added attributes list.
+                     * 
+                     * @param {Object} attribute
+                     * 
+                     * @return {void}
+                     */
+                    addAttribute(attribute) {
+                        this.addedAttributes.push({
+                            id: 'attribute_' + this.attributeCount++,
+                            name: attribute.name,
+                            is_required: attribute.is_required,
+                            attribute: attribute,
+                        });
+
+                        const index = this.attributes.indexOf(attribute);
+                        if (index > -1) {
+                            this.attributes.splice(index, 1);
+                        }
+                    },
+
+                    /**
+                     * Remove the attribute from the added attributes list.
+                     * 
+                     * @param {Object} attribute
+                     * 
+                     * @return {void}
+                     */
+                    removeAttribute(attribute) {
+                        this.attributes.push(attribute.attribute);
+
+                        const index = this.addedAttributes.indexOf(attribute);
+                        if (index > -1) {
+                            this.addedAttributes.splice(index, 1);
+                        }
+                    },
+
+                    /**
+                     * Get the placeholder value based on the attribute type.
+                     * 
+                     * @param {Object} attribute
+                     * 
+                     * @return {String}
+                     */
+                    getPlaceholderValue(attribute) {
+                        if (attribute.type == 'select'
+                            || attribute.type == 'multiselect'
+                            || attribute.type == 'checkbox'
+                            || attribute.type == 'boolean'
+                            || attribute.type == 'lookup'
+                            || attribute.type == 'datetime'
+                            || attribute.type == 'date'
+                        ) {
+                            return "@lang('web_form::app.choose-value')";
+                        } else if (attribute.type == 'file') {
+                            return "@lang('web_form::app.select-file')";
+                        } else if (attribute.type == 'image') {
+                            return "@lang('web_form::app.select-image')";
+                        } else {
+                            return "@lang('web_form::app.enter-value')";
+                        }
+                    },
+                },
+            });
+        </script>
+
+        <script type="module">
+            app.component('v-color-picker', {
+                template: '#v-color-picker',
+
+                props: {
+                    name: {
+                        type: String,
+                        required: true,
+                    },
+
+                    value: {
+                        type: String,
+                        required: true,
+                        default: '#ffffff',
+                    },
+
+                    title: {
+                        type: String,
+                        required: true,
+                    },
+                },
+
+                data() {
+                    return {
+                        color: this.value,
+                    };
+                },
+            });
+        </script>
+    @endPushOnce
+</x-admin::layouts>
diff --git a/packages/Webkul/Admin/src/Resources/views/settings/web-forms/edit.blade.php b/packages/Webkul/Admin/src/Resources/views/settings/web-forms/edit.blade.php
new file mode 100644
index 000000000..d6a25b93e
--- /dev/null
+++ b/packages/Webkul/Admin/src/Resources/views/settings/web-forms/edit.blade.php
@@ -0,0 +1,767 @@
+<x-admin::layouts>
+    <x-slot:title>
+        @lang('admin::app.settings.webforms.edit.title')
+    </x-slot>
+
+    <x-admin::form
+        :action="route('admin.settings.web_forms.update', $webForm->id)"
+        method="PUT"
+    >
+        <div class="flex items-center justify-between rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300">
+            <div class="flex flex-col gap-2">
+                <div class="flex cursor-pointer items-center">
+                    <x-admin::breadcrumbs
+                        name="settings.web_forms.edit" 
+                        :entity="$webForm"
+                    />
+                </div>
+    
+                <div class="text-xl font-bold dark:text-gray-300">
+                    @lang('admin::app.settings.webforms.edit.title')
+                </div>
+            </div>
+    
+            <div class="flex items-center gap-x-2.5">
+                <!-- Edit button for person -->
+                <div class="flex items-center gap-x-2.5">
+                    <button
+                        type="button"
+                        class="secondary-button"
+                        @click="$refs.embed.openModal()"
+                    >
+                        @lang('admin::app.settings.webforms.edit.embed')
+                    </button>
+
+                    <a
+                        href="{{ route('admin.settings.web_forms.preview', $webForm->form_id) }}"
+                        target="_blank"
+                        class="secondary-button"
+                    >
+                        @lang('admin::app.settings.webforms.edit.preview')
+                    </a>
+
+                    <button
+                        type="submit"
+                        class="primary-button"
+                    >
+                        @lang('admin::app.settings.webforms.edit.save-btn')
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Webform view component -->
+        <v-webform ref="embed"></v-webform>
+    </x-admin::form>
+
+    @pushOnce('scripts')
+        <script 
+            type="text/x-template"
+            id="v-webform-template"
+        >
+            <div class="mt-3.5 flex gap-2.5 max-xl:flex-wrap">
+                <!-- Left sub-component -->
+                <div class="flex flex-1 flex-col gap-2 max-xl:flex-auto">
+                    <!-- Title -->
+                    <div class="box-shadow rounded bg-white p-4 dark:bg-gray-900">
+                        <div class="mb-4 flex items-center justify-between gap-4">
+                            <div class="flex flex-col gap-1">
+                                <p class="text-base font-semibold text-gray-800 dark:text-white">
+                                    @lang('admin::app.settings.webforms.edit.title')
+                                </p>
+                            </div>
+                        </div>
+
+                        <!-- Submit success actions -->
+                        <x-admin::form.control-group>
+                            <x-admin::form.control-group.label class="!text-gray-600 required">
+                                @lang('admin::app.settings.webforms.edit.submit-success-action')
+                            </x-admin::form.control-group.label>
+
+                            <div class="flex">
+                                <x-admin::form.control-group.control
+                                    type="select"
+                                    name="submit_success_action"
+                                    id="submit_success_action"
+                                    value="message"
+                                    class="!w-1/4 rounded-r-none"
+                                    :label="trans('admin::app.settings.webforms.edit.submit-success-action')"
+                                    v-model="submitSuccessAction.value"
+                                >
+                                    <template
+                                        v-for="(option, index) in submitSuccessAction.options"
+                                        :key="index"
+                                    >
+                                        <option
+                                            :value="option.value"
+                                            :text="option.label"
+                                        ></option>
+                                    </template>
+                                </x-admin::form.control-group.control>
+
+                                <x-admin::form.control-group.control
+                                    type="text"
+                                    name="submit_success_content"
+                                    id="submit_success_content"
+                                    :value="old('submit_success_content') ?? $webForm->submit_success_content"
+                                    class="rounded-l-none"
+                                    rules="required"
+                                    label="Submit Success Content"
+                                    ::placeholder="placeholder"
+                                />
+                            </div>
+                            
+                            <x-admin::form.control-group.error control-name="submit_success_content"/>
+                        </x-admin::form.control-group>
+
+                        <!-- Create Leads -->
+                        <x-admin::form.control-group>
+                            <x-admin::form.control-group.label class="!text-gray-600 required">
+                                @lang('admin::app.settings.webforms.edit.create-lead')
+                            </x-admin::form.control-group.label>
+
+                            <label class="relative inline-flex cursor-pointer items-center">
+                                
+                                <input  
+                                    type="checkbox"
+                                    name="create_lead"
+                                    id="create_lead"
+                                    class="peer sr-only"
+                                    v-model="createLead"
+                                >
+            
+                                <div class="peer h-5 w-9 cursor-pointer rounded-full bg-gray-200 after:absolute after:top-0.5 after:h-4 after:w-4 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-blue-300 dark:bg-gray-800 dark:after:border-white dark:after:bg-white dark:peer-checked:bg-gray-950 after:ltr:left-0.5 peer-checked:after:ltr:translate-x-full after:rtl:right-0.5 peer-checked:after:rtl:-translate-x-full"></div>
+                            </label>
+                        </x-admin::form.control-group>
+
+                        <!-- Customize webform -->
+                        <div class="mb-4 flex items-center justify-between gap-4">
+                            <div class="flex flex-col gap-1">
+                                <p class="text-base font-semibold text-gray-800 dark:text-white">
+                                    @lang('admin::app.settings.webforms.edit.customize-webform')
+                                </p>
+
+                                <p class="text-sm text-gray-600 dark:text-white">
+                                    @lang('admin::app.settings.webforms.edit.customize-webform-info')
+                                </p>
+                            </div>
+                        </div>
+
+                        <!-- Backgroud Color Picker -->
+                        <v-color-picker
+                            name="background_color"
+                            title="@lang('admin::app.settings.webforms.edit.backgroud-color')"
+                            value="{{ old('background_color') ?? $webForm->background_color }}"
+                        >
+                            <x-admin::form.control-group>
+                                <x-admin::form.control-group.label class="!text-gray-600">
+                                    @lang('admin::app.settings.webforms.edit.backgroud-color')
+                                </x-admin::form.control-group.label>
+
+                                <x-admin::form.control-group.control
+                                    type="text"
+                                    name="background_color"
+                                    id="background_color"
+                                />
+
+                                <x-admin::form.control-group.error control-name="background_color"/>
+                            </x-admin::form.control-group>
+                        </v-color-picker>
+
+                        <!-- Backgroud Color Picker -->
+                        <v-color-picker
+                            name="form_background_color"
+                            title="@lang('admin::app.settings.webforms.edit.form-background-color')"
+                            value="{{ old('form_background_color') ?? $webForm->form_background_color }}"
+                        >
+                            <x-admin::form.control-group>
+                                <x-admin::form.control-group.label class="!text-gray-600">
+                                    @lang('admin::app.settings.webforms.edit.form-background-color')
+                                </x-admin::form.control-group.label>
+
+                                <x-admin::form.control-group.control
+                                    type="text"
+                                    name="form_background_color"
+                                    id="form_background_color"
+                                />
+
+                                <x-admin::form.control-group.error control-name="form_background_color"/>
+                            </x-admin::form.control-group>
+                        </v-color-picker>
+
+                        <!-- Backgroud Color Picker -->
+                        <v-color-picker
+                            name="form_title_color"
+                            title="@lang('admin::app.settings.webforms.edit.form-title-color')"
+                            value="{{ old('form_title_color') ?? $webForm->form_title_color }}"
+                        >
+                            <x-admin::form.control-group>
+                                <x-admin::form.control-group.label class="!text-gray-600">
+                                    @lang('admin::app.settings.webforms.edit.form-title-color')
+                                </x-admin::form.control-group.label>
+
+                                <x-admin::form.control-group.control
+                                    type="text"
+                                    name="form_title_color"
+                                    id="form_title_color"
+                                />
+
+                                <x-admin::form.control-group.error control-name="form_title_color"/>
+                            </x-admin::form.control-group>
+                        </v-color-picker>
+
+                        <!-- Form Submit Button Picker -->
+                        <v-color-picker
+                            name="form_submit_button_color"
+                            title="@lang('admin::app.settings.webforms.edit.form-submit-button-color')"
+                            value="{{ old('form_submit_button_color') ?? $webForm->form_submit_button_color }}"
+                        >
+                            <x-admin::form.control-group>
+                                <x-admin::form.control-group.label class="!text-gray-600">
+                                    @lang('admin::app.settings.webforms.edit.form-submit-button-color')
+                                </x-admin::form.control-group.label>
+
+                                <x-admin::form.control-group.control
+                                    type="text"
+                                    name="form_submit_button_color"
+                                    id="form_submit_button_color"
+                                />
+
+                                <x-admin::form.control-group.error control-name="form_submit_button_color"/>
+                            </x-admin::form.control-group>
+                        </v-color-picker>
+
+                        <!-- Attribute Label Color Picker -->
+                        <v-color-picker
+                            name="attribute_label_color"
+                            title="@lang('admin::app.settings.webforms.edit.attribute-label-color')"
+                            value="{{ old('attribute_label_color') ?? $webForm->attribute_label_color }}"
+                        >
+                            <x-admin::form.control-group>
+                                <x-admin::form.control-group.label class="!text-gray-600">
+                                    @lang('admin::app.settings.webforms.edit.attribute-label-color')
+                                </x-admin::form.control-group.label>
+
+                                <x-admin::form.control-group.control
+                                    type="text"
+                                    name="attribute_label_color"
+                                    id="attribute_label_color"
+                                />
+
+                                <x-admin::form.control-group.error control-name="attribute_label_color"/>
+                            </x-admin::form.control-group>
+                        </v-color-picker>
+
+
+                         <!-- Attributes -->
+                        <div class="mb-4 flex items-center justify-between gap-4">
+                            <div class="flex flex-col gap-1">
+                                <p class="text-base font-semibold text-gray-800 dark:text-white">
+                                    @lang('admin::app.settings.webforms.edit.attributes')
+                                </p>
+
+                                <p class="text-sm text-gray-600 dark:text-white">
+                                    @lang('admin::app.settings.webforms.edit.attributes-info')
+                                </p>
+                            </div>
+                        </div>
+
+                        <x-admin::dropdown class="rounded-lg group-hover:visible w-1/5 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400 dark:focus:border-gray-400">
+                            <x-slot:toggle>
+                                <button
+                                    type="button"
+                                    class="primary-button"
+                                >
+                                    @lang('admin::app.settings.webforms.edit.add-attribute-btn')
+                                </button>
+                            </x-slot>
+        
+                            <x-slot:menu class="!p-0 dark:border-gray-800 max-h-80 overflow-y-auto">
+                                <template v-if="createLead">
+                                    <div class="font-bold text-lg m-2">@lang('admin::app.settings.webforms.edit.person')</div>
+
+                                    <span
+                                        v-for="attribute in groupedAttributes.persons"
+                                        class="whitespace-no-wrap flex cursor-pointer items-center justify-between gap-1.5 rounded-t px-2 py-2 text-sm text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-950"
+                                        @click="addAttribute(attribute)"
+                                    >
+                                        <div class="items flex items-center gap-1.5">
+                                            @{{ attribute.name }}
+                                        </div>
+                                    </span>
+                                </template>
+
+                                <template v-else>
+                                    <div class="font-bold text-lg m-2">@lang('admin::app.settings.webforms.edit.leads')</div>
+
+                                    <span
+                                        v-for="attribute in groupedAttributes.leads"
+                                        class="whitespace-no-wrap flex cursor-pointer items-center justify-between gap-1.5 rounded-t px-2 py-2 text-sm text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-950"
+                                        @click="addAttribute(attribute)"
+                                    >
+                                        <div class="items flex items-center gap-1.5">
+                                            @{{ attribute.name }}
+                                        </div>
+                                    </span>
+                                </template>
+                            </x-slot>
+                        </x-admin::dropdown>
+
+                        <!-- Attributes -->
+                        <draggable
+                            tag="tbody"
+                            ghost-class="draggable-ghost"
+                            handle=".icon-edit"
+                            v-bind="{animation: 200}"
+                            item-key="id"
+                            :list="addedAttributes"
+                        >
+                            <template #item="{ element, index }">
+                                <x-admin::table.thead.tr class="hover:bg-gray-50 dark:hover:bg-gray-950">
+                                    <!-- Draggable Icon -->
+                                    <x-admin::table.td class="!px-0 text-center">
+                                        <i class="icon-edit cursor-grab text-xl transition-all group-hover:text-gray-700"></i>
+
+                                        <input
+                                            type="hidden"
+                                            :value="element['attribute']['id']"
+                                            :name="'attributes[' + element.id + '][attribute_id]'"
+                                        />
+                                    </x-admin::table.td>
+
+                                    <!-- Attribute Name -->
+                                    <x-admin::table.td>
+                                        <x-admin::form.control-group>
+                                            <x-admin::form.control-group.label class="!text-gray-600">
+                                                @{{ element?.name + ' (' + element?.attribute?.entity_type + ')' }}
+                                            </x-admin::form.control-group.label>
+
+                                            <x-admin::form.control-group.control
+                                                type="text"
+                                                ::name="'attributes[' + element.id + '][name]'"
+                                                v-model="element.name"
+                                            />
+
+                                            <x-admin::form.control-group.error ::name="'attributes[' + element.id + '][name]'"/>
+                                        </x-admin::form.control-group>
+    
+                                    </x-admin::table.td>
+
+                                    <!-- Placeholder -->
+                                    <x-admin::table.td>
+                                        <x-admin::form.control-group class="!mt-6">
+                                            <x-admin::form.control-group.control
+                                                type="text"
+                                                ::name="'attributes[' + element.id + '][placeholder]'"
+                                                ::rules="element.attribute.validation"
+                                                ::label="element?.name + ' (' + element?.attribute?.entity_type + ')'"
+                                                ::placeholder="getPlaceholderValue(element)"
+                                                v-model="element.placeholder"
+                                            />
+
+                                            <x-admin::form.control-group.error ::name="'attributes[' + element.id + '][placeholder]'"/>
+                                        </x-admin::form.control-group>
+                                    </x-admin::table.td>
+
+                                    <!-- Required or Not -->
+                                    <x-admin::table.td>
+                                        <x-admin::form.control-group class="!mt-6">
+                                            <label :for="'attributes[' + element.id + '][is_required]'">
+                                                <input
+                                                    type="checkbox"
+                                                    :name="'attributes[' + element.id + '][is_required]'"
+                                                    :id="'attributes[' + element.id + '][is_required]'"
+                                                    :value="1"
+                                                    class="peer hidden"
+                                                    :checked="element.is_required"
+                                                    :disabled="element.attribute.is_required ? true : false"
+                                                >
+
+                                                <span
+                                                    class='icon-checkbox-outline peer-checked:icon-checkbox-select cursor-pointer rounded-md text-2xl peer-checked:text-brandColor'
+                                                    :class="{'opacity-50' : element.attribute.is_required}"
+                                                ></span>
+                                            </label>
+                                        </x-admin::form.control-group>
+                                    </x-admin::table.td>
+
+                                    <!-- Actions -->
+                                    <x-admin::table.td>
+                                        <x-admin::form.control-group class="!mt-6">
+                                            <i
+                                                class="icon-delete text-2xl cursor-pointer"
+                                                v-if="element['attribute']['code'] != 'name' && element['attribute']['code'] != 'emails'"
+                                                @click="removeAttribute(element)"
+                                            ></i>
+                                        </x-admin::form.control-group>
+                                    </x-admin::table.td>
+                                </x-admin::table.thead.tr>
+                            </template>
+                        </draggable>
+                    </div>
+                </div>
+
+                <!-- Right sub-component -->
+                <div class="flex w-[360px] max-w-full flex-col gap-2 max-sm:w-full">
+                    <x-admin::accordion>
+                        <x-slot:header>
+                            <div class="flex items-center justify-between">
+                                <p class="p-2.5 text-base font-semibold text-gray-800 dark:text-white">
+                                    @lang('admin::app.settings.webforms.edit.general')
+                                </p>
+                            </div>
+                        </x-slot>
+
+                        <x-slot:content>
+                            <!-- Title -->
+                            <x-admin::form.control-group>
+                                <x-admin::form.control-group.label class="!text-gray-600 required">
+                                    @lang('admin::app.settings.webforms.edit.title')
+                                </x-admin::form.control-group.label>
+
+                                <x-admin::form.control-group.control
+                                    type="text"
+                                    id="title"
+                                    name="title"
+                                    rules="required"
+                                    :value="old('title') ?? $webForm->title"
+                                    :label="trans('admin::app.settings.webforms.edit.title')"
+                                    :placeholder="trans('admin::app.settings.webforms.edit.title')"
+                                />
+
+                                <x-admin::form.control-group.error control-name="title" />
+                            </x-admin::form.control-group>
+
+                            <!-- Description -->
+                            <x-admin::form.control-group>
+                                <x-admin::form.control-group.label class="!text-gray-600">
+                                    @lang('admin::app.settings.webforms.edit.description')
+                                </x-admin::form.control-group.label>
+
+                                <x-admin::form.control-group.control
+                                    type="textarea"
+                                    id="description"
+                                    name="description"
+                                    :value="old('description') ?? $webForm->description"
+                                    :label="trans('admin::app.settings.webforms.edit.description')"
+                                    :placeholder="trans('admin::app.settings.webforms.edit.description')"
+                                />
+
+                                <x-admin::form.control-group.error control-name="description" />
+                            </x-admin::form.control-group>
+
+                            <!-- Submit button label -->
+                            <x-admin::form.control-group>
+                                <x-admin::form.control-group.label class="!text-gray-600 required">
+                                    @lang('admin::app.settings.webforms.edit.submit-button-label')
+                                </x-admin::form.control-group.label>
+
+                                <x-admin::form.control-group.control
+                                    type="text"
+                                    id="submit_button_label"
+                                    name="submit_button_label"
+                                    :value="old('submit_button_label') ?? $webForm->submit_button_label"
+                                    rules="required"
+                                    :label="trans('admin::app.settings.webforms.edit.submit-button-label')"
+                                    :placeholder="trans('admin::app.settings.webforms.edit.submit-button-label')"
+                                />
+
+                                <x-admin::form.control-group.error control-name="submit_button_label" />
+                            </x-admin::form.control-group>
+                        </x-slot>
+                    </x-admin::accordion>
+                </div>
+
+                <x-admin::modal ref="embed">
+                    <!-- Modal Header -->
+                    <x-slot:header>
+                        <p class="text-lg font-bold text-gray-800 dark:text-white">
+                            @lang('admin::app.settings.webforms.edit.preview')
+                        </p>
+                    </x-slot>
+
+                    <!-- Modal Content -->
+                    <x-slot:content class="!border-b-0">
+                        <x-admin::form.control-group>
+                            <x-admin::form.control-group.label class="required">
+                                @lang('admin::app.settings.webforms.edit.public-url')
+                            </x-admin::form.control-group.label>
+
+                            <x-admin::form.control-group.control
+                                type="text"
+                                id="publicUrl"
+                                name="publicUrl"
+                                rules="required"
+                                :value="route('admin.settings.web_forms.preview', $webForm->form_id)"
+                                :label="trans('admin::app.settings.webforms.edit.public-url')"
+                                :placeholder="trans('admin::app.settings.webforms.edit.public-url')"
+                            />
+
+                            <span
+                                id="publicUrlBtn"
+                                class="text-xs font-normal text-brandColor cursor-pointer hover:text-sky-600 hover:underline"
+                                @click="copyToClipboard('#publicUrl','#publicUrlBtn')"
+                            >
+                                @lang('admin::app.settings.webforms.edit.copy')
+                            </span>
+                        </x-admin::form.control-group>
+
+                        <x-admin::form.control-group>
+                            <x-admin::form.control-group.label class="required">
+                                @lang('admin::app.settings.webforms.edit.code-snippet')
+                            </x-admin::form.control-group.label>
+
+                            <input
+                                type="text"
+                                id="codeSnippet"
+                                name="codeSnippet"
+                                class="w-full rounded border border-gray-200 px-2.5 py-2 text-sm font-normal text-gray-800 transition-all hover:border-gray-400 focus:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400 dark:focus:border-gray-400"
+                                value="{{ '<script src="'.route('admin.settings.web_forms.form_js', $webForm->form_id).'"></sript>' }}"
+                            />
+
+                            <span
+                                id="coeSnippt"
+                                class="text-xs font-normal text-brandColor cursor-pointer hover:text-sky-600 hover:underline"
+                                @click="copyToClipboard('#codeSnippet','#coeSnippt')"
+                            >
+                                @lang('admin::app.settings.webforms.edit.copy')
+                            </span>
+                        </x-admin::form.control-group>
+                    </x-slot>
+                </x-admin::modal>
+            </div>
+        </script>
+
+        <script
+            type="text/x-template"
+            id="v-color-picker"
+        >
+            <x-admin::form.control-group>
+                <x-admin::form.control-group.label class="!text-gray-600 required">
+                    @{{ title }}
+                </x-admin::form.control-group.label>
+
+                <div class="flex">
+                    <x-admin::form.control-group.control
+                        type="text"
+                        ::name="name"
+                        ::id="name"
+                        class="rounded-r-none"
+                        rules="required"
+                        ::label="title"
+                        v-model="color"
+                    />
+
+                    <x-admin::form.control-group.control
+                        type="color"
+                        class="!w-12 !h-10 p-1 rounded-l-none"
+                        name="color"
+                        :label="trans('Submit Success Action')"
+                        ::value="color"
+                        @input="color = $event.target.value"
+                    />
+                </div>
+                
+                <x-admin::form.control-group.error ::name="name"/>
+            </x-admin::form.control-group>
+        </script>
+
+        <script type="module">
+            app.component('v-webform', {
+                template: '#v-webform-template',
+
+                data() {
+                    return {
+                        submitSuccessAction: {
+                            value: "{{ old('submit_success_action') ?? $webForm->submit_success_action }}",
+
+                            options: [
+                                { value: 'message', label: '@lang('admin::app.settings.webforms.edit.display-custom-messsage')' },
+                                { value: 'redirect', label: '@lang('admin::app.settings.webforms.edit.redirect-to-url')' },
+                            ],
+                        },
+
+                        createLead: Boolean({{ (old('create_lead') ?? $webForm->create_lead) ? true : false }}),
+
+                        attributes: @json($attributes),
+
+                        addedAttributes: @json($webForm->attributes()->with('attribute')->get()),
+
+                        attributeCount: 0,
+                    }
+                },
+
+                watch: {
+                    /**
+                     * Watch for the createLead value and remove the added attributes if the value is true.
+                     * 
+                     * @param {Boolean} newValue
+                     * @param {Boolean} oldValue
+                     * 
+                     * @return {void}
+                     */
+                    createLead(newValue, oldValue) {
+                        if (newValue) {
+                            return;
+                        }
+
+                        this.addedAttributes = this.addedAttributes.filter(attribute => attribute.attribute.entity_type != 'leads');
+                    },
+                },
+
+                computed:{
+                    /**
+                     * Get the placeholder value based on the submit success action value.
+                     * 
+                     * @return {String}
+                     */
+                    placeholder() {
+                        return this.submitSuccessAction.value === 'message' ? '@lang('Enter message to display')' : '@lang('Enter url to redirect')';
+                    },
+
+                    /**
+                     * Get the grouped attributes based on the entity type.
+                     * 
+                     * @return {Object}
+                     */
+                    groupedAttributes() {
+                        return this.attributes.reduce((r, a) => {
+                            r[a.entity_type] = [...r[a.entity_type] || [], a];
+                            return r;
+                        }, {});
+                    },
+                },
+
+                methods: {
+                    /**
+                     * Copy the value to the clipboard.
+                     * 
+                     * @param {String} ref
+                     * @param {String} btn
+                     * 
+                     * @return {void}
+                     */
+                    copyToClipboard(ref, btn) {
+                        const element = document.querySelector(ref);
+
+                        const btnElement = document.querySelector(btn);
+
+                        element.select();
+
+                        document.execCommand('copy');
+
+                        btnElement.textContent = "@lang('admin::app.settings.webforms.edit.copied')!";
+
+                        setTimeout(() => btnElement.textContent = "Copy", 1000);
+                    },
+
+                    /**
+                     * Open the modal based on the type.
+                     * 
+                     * @param {String} type
+                     * 
+                     * @return {void}
+                     */
+                    openModal() {
+                        this.$refs.embed.toggle();
+                    },
+
+                    /**
+                     * Add the attribute to the added attributes list.
+                     * 
+                     * @param {Object} attribute
+                     * 
+                     * @return {void}
+                     */
+                    addAttribute(attribute) {
+                        this.addedAttributes.push({
+                            id: 'attribute_' + this.attributeCount++,
+                            name: attribute.name,
+                            is_required: attribute.is_required,
+                            attribute: attribute,
+                        });
+
+                        const index = this.attributes.indexOf(attribute);
+                        
+                        if (index > -1) {
+                            this.attributes.splice(index, 1);
+                        }
+                    },
+
+                    /**
+                     * Remove the attribute from the added attributes list.
+                     * 
+                     * @param {Object} attribute
+                     * 
+                     * @return {void}
+                     */
+                    removeAttribute(attribute) {
+                        this.attributes.push(attribute.attribute);
+
+                        const index = this.addedAttributes.indexOf(attribute);
+
+                        if (index > -1) {
+                            this.addedAttributes.splice(index, 1);
+                        }
+                    },
+
+                    /**
+                     * Get the placeholder value based on the attribute type.
+                     * 
+                     * @param {Object} attribute
+                     * 
+                     * @return {String}
+                     */
+                    getPlaceholderValue(attribute) {
+                        if (attribute.type == 'select'
+                            || attribute.type == 'multiselect'
+                            || attribute.type == 'checkbox'
+                            || attribute.type == 'boolean'
+                            || attribute.type == 'lookup'
+                            || attribute.type == 'datetime'
+                            || attribute.type == 'date'
+                        ) {
+                            return "@lang('web_form::app.choose-value')";
+                        } else if (attribute.type == 'file') {
+                            return "@lang('web_form::app.select-file')";
+                        } else if (attribute.type == 'image') {
+                            return "@lang('web_form::app.select-image')";
+                        } else {
+                            return "@lang('web_form::app.enter-value')";
+                        }
+                    },
+                },
+            });
+        </script>
+
+        <script type="module">
+            app.component('v-color-picker', {
+                template: '#v-color-picker',
+
+                props: {
+                    name: {
+                        type: String,
+                        required: true,
+                    },
+
+                    value: {
+                        type: String,
+                        required: true,
+                        default: '#ffffff',
+                    },
+
+                    title: {
+                        type: String,
+                        required: true,
+                    },
+                },
+
+                data() {
+                    return {
+                        color: this.value,
+                    };
+                },
+            });
+        </script>
+    @endPushOnce
+</x-admin::layouts>
diff --git a/packages/Webkul/WebForm/src/Resources/views/settings/web-forms/index.blade.php b/packages/Webkul/Admin/src/Resources/views/settings/web-forms/index.blade.php
similarity index 89%
rename from packages/Webkul/WebForm/src/Resources/views/settings/web-forms/index.blade.php
rename to packages/Webkul/Admin/src/Resources/views/settings/web-forms/index.blade.php
index 2be27703e..1efd5b9a8 100644
--- a/packages/Webkul/WebForm/src/Resources/views/settings/web-forms/index.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/settings/web-forms/index.blade.php
@@ -1,6 +1,6 @@
 <x-admin::layouts>
     <x-slot:title>
-        @lang('Webforms')
+        @lang('admin::app.settings.webforms.index.title')
     </x-slot>
 
     <v-webform>
@@ -12,7 +12,7 @@
                 </div>
     
                 <div class="text-xl font-bold dark:text-gray-300">
-                    @lang('Webforms')
+                    @lang('admin::app.settings.webforms.index.title')
                 </div>
             </div>
     
@@ -23,7 +23,7 @@
                         type="button"
                         class="primary-button"
                     >
-                        @lang('Create Webform')
+                        @lang('admin::app.settings.webforms.index.create-btn')
                     </button>
                 </div>
             </div>
@@ -46,7 +46,7 @@ class="primary-button"
                     </div>
         
                     <div class="text-xl font-bold dark:text-gray-300">
-                        @lang('Webforms')
+                        @lang('admin::app.settings.webforms.index.title')
                     </div>
                 </div>
 
@@ -59,7 +59,7 @@ class="primary-button"
                             href="{{ route('admin.settings.web_forms.create') }}"
                             class="primary-button"
                         >
-                            @lang('Create Webform')
+                            @lang('admin::app.settings.webforms.index.create-btn')
                         </a>
 
                         {!! view_render_event('krayin.admin.settings.web_forms.index.create_button.after') !!}
@@ -78,7 +78,6 @@ class="primary-button"
         <script type="module">
             app.component('v-webform', {
                 template: '#v-webform-template',
-        
                 data() {
                     return {};
                 },
diff --git a/packages/Webkul/Admin/src/Routes/settings-routes.php b/packages/Webkul/Admin/src/Routes/settings-routes.php
index 3dea725f0..e4e302509 100644
--- a/packages/Webkul/Admin/src/Routes/settings-routes.php
+++ b/packages/Webkul/Admin/src/Routes/settings-routes.php
@@ -8,6 +8,7 @@
 use Webkul\Admin\Http\Controllers\Settings\TagController;
 use Webkul\Admin\Http\Controllers\Settings\TypeController;
 use Webkul\Admin\Http\Controllers\Settings\UserController;
+use Webkul\Admin\Http\Controllers\Settings\WebFormController;
 use Webkul\Admin\Http\Controllers\Settings\WebhookController;
 use Webkul\Admin\Http\Controllers\Settings\WorkflowController;
 
@@ -63,6 +64,25 @@
             Route::delete('{id}', 'destroy')->name('admin.settings.roles.delete');
         });
 
+        /**
+         * WebForms Routes.
+         */
+        Route::controller(WebFormController::class)->prefix('web-forms')->group(function () {
+            Route::group(['middleware' => ['user']], function () {
+                Route::get('', 'index')->name('admin.settings.web_forms.index');
+
+                Route::get('create', 'create')->name('admin.settings.web_forms.create');
+
+                Route::post('create', 'store')->name('admin.settings.web_forms.store');
+
+                Route::get('edit/{id?}', 'edit')->name('admin.settings.web_forms.edit');
+
+                Route::put('edit/{id}', 'update')->name('admin.settings.web_forms.update');
+
+                Route::delete('{id}', 'destroy')->name('admin.settings.web_forms.delete');
+            });
+        });
+
         /**
          * Workflows Routes.
          */
diff --git a/packages/Webkul/Core/src/Vite.php b/packages/Webkul/Admin/src/Vite.php
similarity index 97%
rename from packages/Webkul/Core/src/Vite.php
rename to packages/Webkul/Admin/src/Vite.php
index 5bed3511c..f0b452ba1 100644
--- a/packages/Webkul/Core/src/Vite.php
+++ b/packages/Webkul/Admin/src/Vite.php
@@ -1,6 +1,6 @@
 <?php
 
-namespace Webkul\Core;
+namespace Webkul\Admin;
 
 use Illuminate\Support\Facades\Vite as BaseVite;
 
diff --git a/packages/Webkul/WebForm/src/DataGrids/WebFormDataGrid.php b/packages/Webkul/WebForm/src/DataGrids/WebFormDataGrid.php
index f61d30ff2..1eb102a79 100644
--- a/packages/Webkul/WebForm/src/DataGrids/WebFormDataGrid.php
+++ b/packages/Webkul/WebForm/src/DataGrids/WebFormDataGrid.php
@@ -31,14 +31,14 @@ public function prepareColumns(): void
     {
         $this->addColumn([
             'index'    => 'id',
-            'label'    => trans('Id'),
+            'label'    => trans('admin::app.settings.webforms.index.datagrid.id'),
             'type'     => 'string',
             'sortable' => true,
         ]);
 
         $this->addColumn([
             'index'    => 'title',
-            'label'    => trans('Title'),
+            'label'    => trans('admin::app.settings.webforms.index.datagrid.title'),
             'type'     => 'string',
             'sortable' => true,
         ]);
@@ -52,7 +52,7 @@ public function prepareActions(): void
         $this->addAction([
             'index'  => 'view',
             'icon'   => 'icon-edit',
-            'title'  => trans('View'),
+            'title'  => trans('admin::app.settings.webforms.index.datagrid.view'),
             'method' => 'GET',
             'url'    => fn ($row) => route('admin.settings.web_forms.view', $row->id),
         ]);
@@ -60,7 +60,7 @@ public function prepareActions(): void
         $this->addAction([
             'index'  => 'edit',
             'icon'   => 'icon-edit',
-            'title'  => trans('Edit'),
+            'title'  => trans('admin::app.settings.webforms.index.datagrid.edit'),
             'method' => 'GET',
             'url'    => fn ($row) => route('admin.settings.web_forms.edit', $row->id),
         ]);
@@ -68,7 +68,7 @@ public function prepareActions(): void
         $this->addAction([
             'index'  => 'delete',
             'icon'   => 'icon-delete',
-            'title'  => trans('Delete'),
+            'title'  => trans('admin::app.settings.webforms.index.datagrid.delete'),
             'method' => 'DELETE',
             'url'    => fn ($row) => route('admin.settings.web_forms.delete', $row->id),
         ]);
diff --git a/packages/Webkul/WebForm/src/Http/Controllers/WebFormController.php b/packages/Webkul/WebForm/src/Http/Controllers/WebFormController.php
index b192eb0b6..4e6b4d790 100644
--- a/packages/Webkul/WebForm/src/Http/Controllers/WebFormController.php
+++ b/packages/Webkul/WebForm/src/Http/Controllers/WebFormController.php
@@ -3,7 +3,6 @@
 namespace Webkul\WebForm\Http\Controllers;
 
 use Illuminate\Http\JsonResponse;
-use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Response;
 use Illuminate\Support\Facades\Event;
 use Illuminate\View\View;
@@ -15,7 +14,7 @@
 use Webkul\Lead\Repositories\TypeRepository;
 use Webkul\WebForm\Http\Requests\WebForm;
 use Webkul\WebForm\Repositories\WebFormRepository;
-use Webkul\WebForm\DataGrids\WebFormDataGrid;
+
 class WebFormController extends Controller
 {
     /**
@@ -33,143 +32,12 @@ public function __construct(
         protected TypeRepository $typeRepository
     ) {}
 
-    /**
-     * Display a listing of the email template.
-     */
-    public function index(): View|JsonResponse
-    {
-        if (request()->ajax()) {
-            return datagrid(WebFormDataGrid::class)->process();
-        }
-
-        return view('web_form::settings.web-forms.index');
-    }
-
-    /**
-     * Show the form for creating a new resource.
-     */
-    public function create(): View
-    {
-        $tempAttributes = $this->attributeRepository->findWhereIn('entity_type', ['persons', 'leads']);
-
-        $attributes = [];
-
-        foreach ($tempAttributes as $attribute) {
-            if ($attribute->entity_type == 'persons'
-                && (
-                    $attribute->code == 'name'
-                    || $attribute->code == 'emails'
-                    || $attribute->code == 'contact_numbers'
-                )
-            ) {
-                $attributes['default'][] = $attribute;
-            } else {
-                $attributes['other'][] = $attribute;
-            }
-        }
-
-        return view('web_form::settings.web-forms.create', compact('attributes'));
-    }
-
-    /**
-     * Store a newly created email templates in storage.
-     */
-    public function store(): RedirectResponse
-    {
-        $this->validate(request(), [
-            'title'                  => 'required',
-            'submit_button_label'    => 'required',
-            'submit_success_action'  => 'required',
-            'submit_success_content' => 'required',
-        ]);
-
-        Event::dispatch('settings.web_forms.create.before');
-
-        $data = request()->all();
-
-        $data['create_lead'] = isset($data['create_lead']) ? 1 : 0;
-
-        $webForm = $this->webFormRepository->create($data);
-
-        Event::dispatch('settings.web_forms.create.after', $webForm);
-
-        session()->flash('success', trans('admin::app.settings.web-forms.create-success'));
-
-        return redirect()->route('admin.settings.web_forms.index');
-    }
-
-    /**
-     * Show the form for editing the specified email template.
-     */
-    public function edit(int $id): View
-    {
-        $webForm = $this->webFormRepository->findOrFail($id);
-
-        $attributes = $this->attributeRepository->findWhere([
-            ['entity_type', 'IN', ['persons', 'leads']],
-            ['id', 'NOTIN', $webForm->attributes()->pluck('attribute_id')->toArray()],
-        ]);
-
-        return view('web_form::settings.web-forms.edit', compact('webForm', 'attributes'));
-    }
-
-    /**
-     * Update the specified email template in storage.
-     */
-    public function update(int $id): RedirectResponse
-    {
-        $this->validate(request(), [
-            'title'                  => 'required',
-            'submit_button_label'    => 'required',
-            'submit_success_action'  => 'required',
-            'submit_success_content' => 'required',
-        ]);
-
-        Event::dispatch('settings.web_forms.update.before', $id);
-
-        $data = request()->all();
-
-        $data['create_lead'] = isset($data['create_lead']) ? 1 : 0;
-
-        $webForm = $this->webFormRepository->update($data, $id);
-
-        Event::dispatch('settings.web_forms.update.after', $webForm);
-
-        session()->flash('success', trans('admin::app.settings.web-forms.update-success'));
-
-        return redirect()->route('admin.settings.web_forms.index');
-    }
-
     /**
      * Remove the specified email template from storage.
      */
-    public function destroy(int $id): JsonResponse
+    public function formJS(string $formId): Response
     {
-        $webForm = $this->webFormRepository->findOrFail($id);
-
-        try {
-            Event::dispatch('settings.web_forms.delete.before', $id);
-
-            $webForm->delete($id);
-
-            Event::dispatch('settings.web_forms.delete.after', $id);
-
-            return response()->json([
-                'message' => trans('admin::app.settings.web-forms.delete-success'),
-            ], 200);
-        } catch (\Exception $exception) {
-            return response()->json([
-                'message' => trans('admin::app.settings.web-forms.delete-failed'),
-            ], 400);
-        }
-    }
-
-    /**
-     * Remove the specified email template from storage.
-     */
-    public function formJS(int $id): Response
-    {
-        $webForm = $this->webFormRepository->findOneByField('form_id', $id);
+        $webForm = $this->webFormRepository->findOneByField('form_id', $formId);
 
         return response()
             ->view('web_form::settings.web-forms.form-js', compact('webForm'))
@@ -264,7 +132,7 @@ public function formStore(int $id): JsonResponse
     /**
      * Remove the specified email template from storage.
      */
-    public function preview(int $id): View
+    public function preview(string $id): View
     {
         $webForm = $this->webFormRepository->findOneByField('form_id', $id);
 
diff --git a/packages/Webkul/WebForm/src/Http/helpers.php b/packages/Webkul/WebForm/src/Http/helpers.php
new file mode 100755
index 000000000..449116b10
--- /dev/null
+++ b/packages/Webkul/WebForm/src/Http/helpers.php
@@ -0,0 +1,8 @@
+<?php
+
+use Webkul\WebForm\Vite as WebFormVite;
+
+function webform_vite(): WebFormVite
+{
+    return app(WebFormVite::class);
+}
diff --git a/packages/Webkul/WebForm/src/Http/routes.php b/packages/Webkul/WebForm/src/Http/routes.php
deleted file mode 100644
index 3d480a489..000000000
--- a/packages/Webkul/WebForm/src/Http/routes.php
+++ /dev/null
@@ -1,32 +0,0 @@
-<?php
-
-use Illuminate\Support\Facades\Route;
-
-Route::group([
-    'prefix'     => 'admin/web-forms',
-    'namespace'  => 'Webkul\WebForm\Http\Controllers',
-    'middleware' => ['web', 'admin_locale'],
-], function () {
-
-    Route::get('forms/{id}/form.js', 'WebFormController@formJS')->name('admin.settings.web_forms.form_js');
-
-    Route::get('forms/{id}/form.html', 'WebFormController@preview')->name('admin.settings.web_forms.preview');
-
-    Route::post('forms/{id}', 'WebFormController@formStore')->name('admin.settings.web_forms.form_store');
-
-    Route::group(['middleware' => ['user']], function () {
-        Route::get('', 'WebFormController@index')->name('admin.settings.web_forms.index');
-
-        Route::get('form/{id}/form.html', 'WebFormController@view')->name('admin.settings.web_forms.view');
-
-        Route::get('create', 'WebFormController@create')->name('admin.settings.web_forms.create');
-
-        Route::post('create', 'WebFormController@store')->name('admin.settings.web_forms.store');
-
-        Route::get('edit/{id?}', 'WebFormController@edit')->name('admin.settings.web_forms.edit');
-
-        Route::put('edit/{id}', 'WebFormController@update')->name('admin.settings.web_forms.update');
-
-        Route::delete('{id}', 'WebFormController@destroy')->name('admin.settings.web_forms.delete');
-    });
-});
diff --git a/packages/Webkul/WebForm/src/Providers/WebFormServiceProvider.php b/packages/Webkul/WebForm/src/Providers/WebFormServiceProvider.php
index 930b5c696..5a45a26da 100644
--- a/packages/Webkul/WebForm/src/Providers/WebFormServiceProvider.php
+++ b/packages/Webkul/WebForm/src/Providers/WebFormServiceProvider.php
@@ -2,6 +2,7 @@
 
 namespace Webkul\WebForm\Providers;
 
+use Illuminate\Support\Facades\Blade;
 use Illuminate\Support\ServiceProvider;
 
 class WebFormServiceProvider extends ServiceProvider
@@ -11,12 +12,16 @@ class WebFormServiceProvider extends ServiceProvider
      */
     public function boot(): void
     {
-        $this->loadRoutesFrom(__DIR__.'/../Http/routes.php');
+        include __DIR__.'/../Http/helpers.php';
+
+        $this->loadRoutesFrom(__DIR__.'/../Routes/routes.php');
 
         $this->loadTranslationsFrom(__DIR__.'/../Resources/lang', 'web_form');
 
         $this->loadViewsFrom(__DIR__.'/../Resources/views', 'web_form');
 
+        Blade::anonymousComponentPath(__DIR__.'/../Resources/views/components');
+
         $this->loadMigrationsFrom(__DIR__.'/../Database/Migrations');
 
         $this->app->register(ModuleServiceProvider::class);
diff --git a/packages/Webkul/WebForm/src/Resources/assets/js/app.js b/packages/Webkul/WebForm/src/Resources/assets/js/app.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/Webkul/WebForm/src/Resources/assets/js/web-form.js b/packages/Webkul/WebForm/src/Resources/assets/js/web-form.js
deleted file mode 100644
index b1cdfa6b1..000000000
--- a/packages/Webkul/WebForm/src/Resources/assets/js/web-form.js
+++ /dev/null
@@ -1,4 +0,0 @@
-window.$ = window.jQuery = require('jquery');
-require( "jquery-validation" );
-import flatpickr from "flatpickr";
-require('flatpickr/dist/flatpickr.css');
\ No newline at end of file
diff --git a/packages/Webkul/WebForm/src/Resources/views/components/layouts/index.blade.php b/packages/Webkul/WebForm/src/Resources/views/components/layouts/index.blade.php
index 90c7f401d..1e7433e90 100644
--- a/packages/Webkul/WebForm/src/Resources/views/components/layouts/index.blade.php
+++ b/packages/Webkul/WebForm/src/Resources/views/components/layouts/index.blade.php
@@ -1,4 +1,72 @@
-<x-admin::layouts>
-    {{ vite()->set(['src/Resources/assets/css/app.css']) }}
+<!DOCTYPE html>
 
-</x-admin::layouts>
+<html
+    class="{{ request()->cookie('dark_mode') ? 'dark' : '' }}"
+    lang="{{ app()->getLocale() }}"
+    dir="{{ in_array(app()->getLocale(), ['fa', 'ar']) ? 'rtl' : 'ltr' }}"
+>
+
+<head>
+    <title>{{ $title ?? '' }}</title>
+
+    <meta charset="UTF-8">
+
+    <meta
+        http-equiv="X-UA-Compatible"
+        content="IE=edge"
+    >
+    <meta
+        http-equiv="content-language"
+        content="{{ app()->getLocale() }}"
+    >
+
+    <meta
+        name="viewport"
+        content="width=device-width, initial-scale=1"
+    >
+    <meta
+        name="base-url"
+        content="{{ url()->to('/') }}"
+    >
+    <meta
+
+    @stack('meta')
+
+    {{
+        webform_vite()->set(['src/Resources/assets/css/app.css', 'src/Resources/assets/js/app.js'])
+    }}
+
+    <link
+        href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap"
+        rel="stylesheet"
+    />
+
+    <link
+        href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap"
+        rel="stylesheet"
+    />
+
+    <link 
+        href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
+        rel="stylesheet"
+    />
+
+    <link
+        rel="preload"
+        as="image"
+        href="{{ url('cache/logo/bagisto.png') }}"
+    >
+
+    @stack('styles')
+</head>
+
+<body class="h-full font-inter dark:bg-gray-950">
+    <div
+        id="app"
+        class="h-full"
+    >
+        {{ $slot }}
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/packages/Webkul/WebForm/src/Resources/views/settings/web-forms/create.blade.php b/packages/Webkul/WebForm/src/Resources/views/settings/web-forms/create.blade.php
deleted file mode 100644
index e4e604ed4..000000000
--- a/packages/Webkul/WebForm/src/Resources/views/settings/web-forms/create.blade.php
+++ /dev/null
@@ -1,8 +0,0 @@
-<x-admin::layouts>
-    @push('styles')
-        {{
-            vite()->set(['src/Resources/assets/css/app.css'])
-        }}
-    @endpush
-    
-</x-admin::layouts>
diff --git a/packages/Webkul/WebForm/src/Resources/views/settings/web-forms/edit.blade.php b/packages/Webkul/WebForm/src/Resources/views/settings/web-forms/edit.blade.php
deleted file mode 100644
index 60233b054..000000000
--- a/packages/Webkul/WebForm/src/Resources/views/settings/web-forms/edit.blade.php
+++ /dev/null
@@ -1,563 +0,0 @@
-@extends('admin::layouts.master')
-
-@section('page_title')
-    {{ __('web_form::app.edit-title') }}
-@stop
-
-@push('css')
-    <style>
-        .pre {
-            margin-top: 10px;
-            padding: 10px;
-            background-color: #ebeff3;
-            border: 1px solid #cfd7df;
-            width: 100%;
-            display: block;
-            word-break: break-all;
-        }
-
-        .copy-input{
-            display:flex;
-            align-items:center;
-        }
-
-        .copy-button{
-            width: 23%;
-            margin-top: 4px;
-        }
-    </style>
-@endpush
-
-@section('content-wrapper')
-
-    <div class="content full-page adjacent-center">
-        {!! view_render_event('admin.settings.web_forms.edit.header.before', ['webForm' => $webForm]) !!}
-
-        <div class="page-header">
-
-            {{ Breadcrumbs::render('settings.web_forms.edit', $webForm) }}
-
-            <div class="page-title">
-                <h1>{{ __('web_form::app.edit-title') }}</h1>
-            </div>
-        </div>
-
-        {!! view_render_event('admin.settings.web_forms.edit.header.after', ['webForm' => $webForm]) !!}
-
-        <form method="POST" action="{{ route('admin.settings.web_forms.update', $webForm->id) }}" @submit.prevent="onSubmit">
-            <div class="page-content">
-                <div class="form-container">
-                    <div class="panel">
-                        <div class="panel-header">
-                            {!! view_render_event('admin.settings.web_forms.edit.form_buttons.before', ['webForm' => $webForm]) !!}
-
-                            <button type="submit" class="btn btn-md btn-primary">
-                                {{ __('web_form::app.save-btn-title') }}
-                            </button>
-
-                            <a @click="openModal('embedModal')" style="cursor: pointer">
-                                {{ __('web_form::app.embed') }}
-                            </a>
-
-                            <a href="{{ route('admin.settings.web_forms.preview', $webForm->form_id) }}" target="_blank">
-                                {{ __('web_form::app.preview') }}
-                            </a>
-
-                            <a href="{{ route('admin.settings.web_forms.index') }}">
-                                {{ __('admin::app.layouts.back') }}
-                            </a>
-
-                            {!! view_render_event('admin.settings.web_forms.edit.form_buttons.after', ['webForm' => $webForm]) !!}
-                        </div>
-
-                        <div class="panel-body">
-                            {!! view_render_event('admin.settings.web_forms.edit.form_controls.before', ['webForm' => $webForm]) !!}
-
-                            @csrf()
-
-                            <input name="_method" type="hidden" value="PUT">
-
-                            <web-form-component></web-form-component>
-
-                            {!! view_render_event('admin.settings.web_forms.create.form_controls.after', ['webForm' => $webForm]) !!}
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </form>
-    </div>
-
-    <modal id="embedModal" :is-open="modalIds.embedModal">
-        <h3 slot="header-title">{{ __('web_form::app.code-snippet') }}</h3>
-
-        <div slot="header-actions">
-            <button class="btn btn-sm btn-secondary-outline" @click="closeModal('embedModal')">{{ __('web_form::app.cancel') }}</button>
-        </div>
-
-        <div slot="body">
-
-            <div class="form-group">
-                <label>
-                    {{ __('web_form::app.public-url') }}
-                </label>
-
-                <div class="pre copy-input">
-                    <input
-                        type="text"
-                        class="control"
-                        v-on:focus="$event.target.select()" 
-                        id="publicUrl"
-                        value="{{ route('admin.settings.web_forms.preview', $webForm->form_id) }}"
-                    />
-
-                    <div class="input-group-append copy-button" >
-                        <button
-                            class="btn btn-primary btn-md"
-                            type="button"
-                            id="publicUrlBtn"
-                            title="{{ __('shop::app.customer.account.wishlist.copy-link') }}"
-                            onclick="copyToClipboard('#publicUrl','#publicUrlBtn')"
-                        >
-                        {{ __('web_form::app.copy') }}
-                        </button>
-                    </div>
-                </div>
-            </div>
-
-            <div class="form-group">
-                <label>
-                    {{ __('web_form::app.code-snippet') }}
-                </label>
-
-                <div class="pre copy-input">
-                   
-                   <input
-                       type="text"
-                       class="control"
-                       v-on:focus="$event.target.select()" 
-                       id="codeSnippet"
-                       value='{{ "<script src=" . route('admin.settings.web_forms.form_js', $webForm->form_id) . " crossorigin=\"anonymous\"></script>" }}'
-                   />
-   
-                   <div class="input-group-append copy-button" >
-                       <button
-                           class="btn btn-primary btn-md"
-                           type="button"
-                           id="coeSnippt"
-                           title="{{ __('shop::app.customer.account.wishlist.copy-link') }}"
-                           onclick="copyToClipboard('#codeSnippet','#coeSnippt')"
-                       >
-                       {{ __('web_form::app.copy') }}
-                       </button>
-                   </div>
-               </div>
-            </div>
-
-        </div>
-    </modal>
-@stop
-
-@push('scripts')
-
-    <script type="text/x-template" id="web-form-component-template">
-        <div class="web-form-container">
-            <div class="form-group" :class="[errors.has('title') ? 'has-error' : '']">
-                <label class="required">
-                    {{ __('web_form::app.title') }}
-                </label>
-
-                <input
-                    type="text"
-                    name="title"
-                    class="control"
-                    value="{{ old('title') ?: $webForm->title }}"
-                    v-validate="'required'"
-                    data-vv-as="{{ __('web_form::app.title') }}"
-                />
-
-                <span class="control-error" v-if="errors.has('title')">
-                    @{{ errors.first('title') }}
-                </span>
-            </div>
-
-            <div class="form-group">
-                <label>
-                    {{ __('web_form::app.description') }}
-                </label>
-
-                <textarea name="description" class="control">{{ old('description') ?: $webForm->description }}</textarea>
-            </div>
-
-            <div class="form-group" :class="[errors.has('submit_button_label') ? 'has-error' : '']">
-                <label class="required">
-                    {{ __('web_form::app.submit-button-label') }}
-                </label>
-
-                <input
-                    type="text"
-                    name="submit_button_label"
-                    class="control"
-                    value="{{ old('submit_button_label') ?: $webForm->submit_button_label }}"
-                    v-validate="'required'"
-                    data-vv-as="{{ __('web_form::app.submit_button_label') }}"
-                />
-
-                <span class="control-error" v-if="errors.has('submit_button_label')">
-                    @{{ errors.first('submit_button_label') }}
-                </span>
-            </div>
-
-            <div class="form-group" :class="[errors.has('submit_success_content') ? 'has-error' : '']">
-                <label class="required">
-                    {{ __('web_form::app.submit-success-action') }}
-                </label>
-
-                <div class="form-group input-group">
-                    <div class="input-group-prepend">
-                        <select name="submit_success_action" class="control" v-model="submit_success_action">
-                            <option value="message">
-                                {{ __('web_form::app.display-custom-message') }}
-                            </option>
-
-                            <option value="redirect">
-                                {{ __('web_form::app.redirect-to-url') }}
-                            </option>
-                        </select>
-                    </div>
-
-                    <input
-                        type="text"
-                        name="submit_success_content"
-                        value="{{ old('submit_success_content') ?: $webForm->submit_success_content }}"
-                        class="control"
-                        v-validate="'required'"
-                        :data-vv-as="[submit_success_action == 'message'
-                            ? '{{ __('web_form::app.display-custom-message') }}'
-                            : '{{ __('web_form::app.redirect-to-url') }}'
-                        ]"
-                        :placeholder="[submit_success_action == 'message'
-                            ? '{{ __('web_form::app.enter-message-placeholder') }}'
-                            : '{{ __('web_form::app.enter-url-placeholder') }}'
-                        ]"
-                    />
-                </div>
-
-                <span class="control-error" v-if="errors.has('submit_success_content')">
-                    @{{ errors.first('submit_success_content') }}
-                </span>
-            </div>
-
-            <div class="form-group">
-                <label>
-                    {{ __('web_form::app.create-lead') }}
-                </label>
-
-                <label class="switch">
-                    <input
-                        type="checkbox"
-                        name="create_lead"
-                        class="control"
-                        id="create_lead"
-                        v-model="create_lead"
-                    />
-                    <span class="slider round"></span>
-                </label>
-            </div>
-
-            <div class="panel-separator"></div>
-
-            <div class="web-form-panel">
-                <div class="header">
-                    <label>{{ __('web_form::app.customize-web-form') }}</label>
-                    <p>{{ __('web_form::app.customize-web-form-info') }}</p>
-                </div>
-
-                <div class="form-group">
-                    <label>
-                        {{ __('web_form::app.background-color') }}
-                    </label>
-
-                    <color-picker
-                        name="background_color"
-                        value="{{ old('background_color') ?? $webForm->background_color }}"
-                    ></color-picker>
-                </div>
-
-                <div class="form-group">
-                    <label>
-                        {{ __('web_form::app.form-background-color') }}
-                    </label>
-
-                    <color-picker
-                        name="form_background_color"
-                        value="{{ old('form_background_color') ?? $webForm->form_background_color }}"
-                    ></color-picker>
-                </div>
-
-                <div class="form-group">
-                    <label>
-                        {{ __('web_form::app.form-title-color') }}
-                    </label>
-
-                    <color-picker
-                        name="form_title_color"
-                        value="{{ old('form_title_color') ?? $webForm->form_title_color }}"
-                    ></color-picker>
-                </div>
-
-                <div class="form-group">
-                    <label>
-                      {{ old('form_submit_button_color') }}  {{ __('web_form::app.form-submit-button-color') }}
-                    </label>
-
-                    <color-picker
-                        name="form_submit_button_color"
-                        value="{{ old('form_submit_button_color') ?? $webForm->form_submit_button_color }}"
-                    ></color-picker>
-                </div>
-
-                <div class="form-group">
-                    <label>
-                        {{ __('web_form::app.attribute-label-color') }}
-                    </label>
-
-                    <color-picker
-                        name="attribute_label_color"
-                        value="{{ old('attribute_label_color') ?? $webForm->attribute_label_color }}"
-                    ></color-picker>
-                </div>
-            </div>
-
-            <div class="panel-separator"></div>
-
-            <div class="web-form-panel">
-                <div class="header">
-                    <label>{{ __('web_form::app.attributes') }}</label>
-                    <p>{{ __('web_form::app.attributes-info') }}</p>
-                </div>
-
-                <button type="button" class="btn btn-md btn-primary dropdown-toggle">
-                    {{ __('web_form::app.add-attribute') }}
-                </button>
-
-                <div class="dropdown-list" style="width: 240px">
-                    <div class="dropdown-container">
-                        <ul>
-                            <li>
-                                <span class="">{{ __('web_form::app.persons') }}</span>
-
-                                <ul>
-                                    <li
-                                        v-for='(attribute, index) in grouped_attributes.persons'
-                                        :data-id="attribute.id"
-                                        @click="addAttribute(attribute)"
-                                    >
-                                        @{{ attribute.name }}
-                                    </li>
-                                </ul>
-                            </li>
-
-                            <li v-if="create_lead">
-                                <span class="">{{ __('web_form::app.leads') }}</span>
-
-                                <ul>
-                                    <li
-                                        v-for='(attribute, index) in grouped_attributes.leads'
-                                        :data-id="attribute.id"
-                                        @click="addAttribute(attribute)"
-                                    >
-                                        @{{ attribute.name }}
-                                    </li>
-                                </ul>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-
-                <div class="table web-form-attributes dragable-container" style="overflow-x: unset;">
-                    <table>
-                        <draggable tag="tbody" :list="addedAttributes" draggable=".draggable">
-                            <tr :key="attribute.id" v-for="(attribute, index) in addedAttributes" class="draggable">
-                                <td class="dragable-icon" style="width: 40px">
-                                    <i class="icon align-justify-icon"></i>
-
-                                    <input
-                                        type="hidden"
-                                        :value="attribute['attribute']['id']"
-                                        :name="'attributes[' + attribute.id + '][attribute_id]'"
-                                    />
-                                </td>
-
-                                <td>
-                                    <div class="form-group">
-                                        <label>@{{ attribute['name'] + ' (' + attribute['attribute']['entity_type'] + ')' }}</label>
-
-                                        <input
-                                            type="text"
-                                            :name="'attributes[' + attribute.id + '][name]'"
-                                            class="control"
-                                            v-model="attribute['name']"
-                                        />
-
-                                        <input
-                                            type="hidden"
-                                            :value="index + 1"
-                                            :name="'attributes[' + attribute.id + '][sort_order]'"
-                                        />
-                                    </div>
-                                </td>
-
-                                <td>
-                                    <div class="form-group">
-                                        <input
-                                            type="text"
-                                            :name="'attributes[' + attribute.id + '][placeholder]'"
-                                            class="control"
-                                            v-model="attribute['placeholder']"
-                                            :placeholder="getPlaceholderValue(attribute)"
-                                        />
-                                    </div>
-                                </td>
-
-                                <td>
-                                    <span class="checkbox">
-                                        <input
-                                            type="checkbox"
-                                            :name="'attributes[' + attribute.id + '][is_required]'"
-                                            :id="'is_required_' + attribute.id"
-                                            :checked="attribute.is_required"
-                                            :disabled="attribute.attribute.is_required ? true : false"
-                                            v-model="attribute.is_required"
-                                        />
-
-                                        <label :for="'is_required_' + attribute.id" class="checkbox-view"></label>
-
-                                        {{ __('web_form::app.required') }}
-                                    </span>
-
-                                    <input
-                                        type="hidden"
-                                        :name="'attributes[' + attribute.id + '][is_required]'"
-                                        value="1"
-                                        v-if="attribute.is_required"
-                                    />
-
-                                    <input
-                                        type="hidden"
-                                        :name="'attributes[' + attribute.id + '][is_required]'"
-                                        value="0"
-                                        v-else
-                                    />
-                                </td>
-
-                                <td class="delete-icon" style="width: 40px">
-                                    <i
-                                        class="icon trash-icon"
-                                        v-if="attribute['attribute']['code'] != 'name' && attribute['attribute']['code'] != 'emails'"
-                                        @click="removeAttribute(attribute)"
-                                    ></i>
-                                </td>
-                            </tr>
-                        </draggable>
-                    </table>
-                </div>
-            </div>
-        </div>
-    </script>
-
-    <script type="text/x-template" id="attribute-item-template">
-
-    </script>
-
-    <script>
-        Vue.component('web-form-component', {
-
-            template: '#web-form-component-template',
-
-            inject: ['$validator'],
-
-            data: function() {
-                return {
-                    submit_success_action: "{{ old('submit_success_action') ?: $webForm->submit_success_action }}",
-
-                    create_lead: "{{ (old('create_lead') ?: $webForm->create_lead) ? true : false }}",
-
-                    attributes: @json($attributes),
-
-                    addedAttributes: @json($webForm->attributes()->with('attribute')->get()),
-
-                    attributeCount: 0,
-                }
-            },
-
-            computed: {
-                grouped_attributes: function() {
-                    let groupedAttributes = this.attributes.reduce((r, a) => {
-                        r[a.entity_type] = [...r[a.entity_type] || [], a];
-                        return r;
-                    }, {});
-
-                    return groupedAttributes;
-                },
-            },
-
-            watch: {
-                create_lead: function(newValue, oldValue) {
-                    if (newValue) {
-                        return;
-                    }
-
-                    this.addedAttributes = this.addedAttributes.filter(attribute => attribute.attribute.entity_type != 'leads');
-                }
-            },
-
-            methods: {
-                addAttribute: function (attribute) {
-                    this.addedAttributes.push({
-                        'id': 'attribute_' + this.attributeCount++,
-                        'name': attribute.name,
-                        'is_required': attribute.is_required,
-                        'attribute': attribute,
-                    });
-
-                    const index = this.attributes.indexOf(attribute);
-
-                    Vue.delete(this.attributes, index);
-                },
-
-                removeAttribute: function (attribute) {
-                    this.attributes.push(attribute['attribute']);
-
-                    const index = this.addedAttributes.indexOf(attribute);
-
-                    Vue.delete(this.addedAttributes, index);
-                },
-
-                getPlaceholderValue: function (attribute) {
-                    if (attribute.type == 'select'
-                        || attribute.type == 'multiselect'
-                        || attribute.type == 'checkbox'
-                        || attribute.type == 'boolean'
-                        || attribute.type == 'lookup'
-                        || attribute.type == 'datetime'
-                        || attribute.type == 'date'
-                    ) {
-                        return "{{ __('web_form::app.choose-value') }}";
-                    } else if (attribute.type == 'file') {
-                        return "{{ __('web_form::app.select-file') }}";
-                    } else if (attribute.type == 'image') {
-                        return "{{ __('web_form::app.select-image') }}";
-                    } else {
-                        return "{{ __('web_form::app.enter-value') }}";
-                    }
-                }
-            }
-        });
-
-        function copyToClipboard(ref,btn){
-            $(ref).focus();
-            document.execCommand('copy');
-            $(btn).text("copied!");          
-        }
-    </script>
-@endpush
\ No newline at end of file
diff --git a/packages/Webkul/WebForm/src/Resources/views/settings/web-forms/form-js/form.blade.php b/packages/Webkul/WebForm/src/Resources/views/settings/web-forms/form-js/form.blade.php
index a200b159e..a8ddb4015 100644
--- a/packages/Webkul/WebForm/src/Resources/views/settings/web-forms/form-js/form.blade.php
+++ b/packages/Webkul/WebForm/src/Resources/views/settings/web-forms/form-js/form.blade.php
@@ -1,77 +1,31 @@
-<link rel="stylesheet" href="{{ asset('vendor/webkul/web-form/assets/css/web-form.css') }}">
-
-<style>
-    button.btn {
-        background-color:<?= $webForm->form_submit_button_color ?> !important;
-    }
-
-    h1.web-form-title {
-        color: <?= $webForm->form_title_color ?> !important;
-    }
-
-    .attribute-label {
-        color: <?= $webForm->attribute_label_color ?> !important;
-    }
-
-    form#krayinWebForm {
-        background-color:<?= $webForm->form_background_color ?>;
-    }
-
-    .anonymous-layout-container {
-        background-color:<?= $webForm->background_color ?>;
-    }
-
-    .loaderDiv {
-        z-index: 20;
-        position: absolute;
-        top: 0;
-        left:-5px;
-        width: 100%;
-        height: 100%;
-        background-color: rgba(0,0,0,0.4);
-    }
-
-    .imgSpinner {
-        position: absolute;
-        border: 16px solid #f3f3f3; /* Light grey */
-        border-top: 16px solid #3498db; /* Blue */
-        border-radius: 50%;
-        width: 50px;
-        height: 50px;
-        top: 40%;
-        left:45%;
-        animation: spin 2s linear infinite;
-	}
-	
-	@keyframes spin {
-		0% { transform: rotate(0deg); }
-		100% { transform: rotate(360deg); }
-	}
-</style>
-
-
-<div class="anonymous-layout-container">
-    <div class="center-box">
-        <section id="loaderDiv">
-            <div id="imgSpinner"></div>
-        </section>
-        <div class="adjacent-center">
-            <div class="title-box">
-            <img src="{{ url('vendor/webkul/admin/assets/images/logo.svg') }}" alt="krayin">
-                <h1 class="web-form-title">{{ $webForm->title }}</h1>
-                <p>{{ $webForm->description }}</p>
-            </div>
-
-            <div class="panel">
-                <div class="panel-body">
-                    <div class="alert-wrapper" style="display: none">
-                        <div class="alert success">
-                            <p>This is message</p>
-                            <span class="icon close-white-icon"></span>
-                        </div>
-                    </div>
-
-                    <form id="krayinWebForm" method="post">
+<x-web_form::layouts>
+    <x-slot:title>
+        @lang('Form Preview')
+    </x-slot>
+
+    <div
+        class="flex h-[100vh] items-center justify-center"
+        style="background-color: {{ $webForm->background_color }}"
+    >
+        <div class="flex flex-col items-center gap-5">
+            <!-- Logo -->            
+            <img
+                class="h-10 w-[110px]"
+                src="{{ url('vendor/webkul/admin/assets/images/logo.svg') }}""
+                alt="krayin"
+            />
+
+            <h1 style="color: {{ $webForm->form_title_color }} !important;">{{ $webForm->title }}</h1>
+
+            <p>{{ $webForm->description }}</p>
+
+            <div class="box-shadow flex min-w-[476px] flex-col rounded-lg">
+                <!-- Login Form -->
+                <form 
+                    style="background-color: {{ $webForm->form_background_color }}"
+                    action="{{ route('admin.session.store') }}"
+                >
+                    <div class="p-4 dark:border-gray-800">
                         @foreach ($webForm->attributes as $attribute)
                             @php
                                 $parentAttribute = $attribute->attribute;
@@ -79,20 +33,24 @@
                                 $fieldName = $parentAttribute->entity_type . '[' . $parentAttribute->code . ']';
                             @endphp
 
-                            <div class="form-group {{ $parentAttribute->type }}">
-                                <label class="attribute-label {{ $attribute->is_required ? 'required' : '' }}" for="{{ $attribute->code }}" >
+                            <div class="mt-4 first:mt-0 {{ $parentAttribute->type }}">
+                                <label 
+                                    class="mb-1.5 flex items-center gap-1 text-sm font-normal text-gray-800 dark:text-white {{ $attribute->is_required ? 'required' : '' }}"
+                                    style="color: {{ $webForm->attribute_label_color }} !important;"
+                                    for="{{ $attribute->code }}"
+                                >
                                     {{ $attribute->name ?? $parentAttribute->name }}
                                 </label>
 
                                 @switch($parentAttribute->type)
                                     @case('text')
                                         <input
-                                        type="text"
-                                        name="{{ $fieldName }}"
-                                        class="control"
-                                        placeholder="{{ $attribute->placeholder }}"
-                                        id="{{ $fieldName }}"
-                                        {{ $attribute->is_required ? 'required' : '' }}
+                                            type="text" 
+                                            id="{{ $fieldName }}"
+                                            name="{{ $fieldName }}"
+                                            {{ $attribute->is_required ? 'required' : '' }}
+                                            placeholder="{{ $attribute->placeholder }}"
+                                            class="w-full rounded border border-gray-200 px-2.5 py-2 text-sm font-normal text-gray-800 transition-all hover:border-gray-400 focus:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400 dark:focus:border-gray-400"
                                         />
 
                                         @break;
@@ -100,21 +58,21 @@ class="control"
                                     @case('date')
                                     @case('datetime')
                                         <input
-                                        type="text"
-                                        name="{{ $fieldName }}"
-                                        class="control"
-                                        id="{{ $fieldName }}"
-                                        {{ $attribute->is_required ? 'required' : '' }}
+                                            type="text"
+                                            name="{{ $fieldName }}"
+                                            id="{{ $fieldName }}"
+                                            {{ $attribute->is_required ? 'required' : '' }}
+                                            class="w-full rounded border border-gray-200 px-2.5 py-2 text-sm font-normal text-gray-800 transition-all hover:border-gray-400 focus:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400 dark:focus:border-gray-400"
                                         />
 
                                         @break;
 
                                     @case('textarea')
                                         <textarea
-                                        name="{{ $fieldName }}"
-                                        class="control"
-                                        id="{{ $fieldName }}"
-                                        {{ $attribute->is_required ? 'required' : '' }}
+                                            name="{{ $fieldName }}"
+                                            id="{{ $fieldName }}"
+                                            {{ $attribute->is_required ? 'required' : '' }}
+                                            class="w-full rounded border border-gray-200 px-2.5 py-2 text-sm font-normal text-gray-800 transition-all hover:border-gray-400 focus:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400 dark:focus:border-gray-400"
                                         ></textarea>
 
                                         @break;
@@ -123,29 +81,29 @@ class="control"
                                         <input
                                             type="email"
                                             name="{{ $fieldName }}[0][value]"
-                                            class="control"
                                             placeholder="{{ $attribute->placeholder }}"
                                             id="{{ $fieldName }}"
                                             {{ $attribute->is_required ? 'required' : '' }}
+                                            class="w-full rounded border border-gray-200 px-2.5 py-2 text-sm font-normal text-gray-800 transition-all hover:border-gray-400 focus:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400 dark:focus:border-gray-400"
                                         />
 
                                         <input
-                                        type="hidden"
-                                        name="{{ $fieldName }}[0][label]"
-                                        class="control"
-                                        value="work"
+                                            type="hidden"
+                                            name="{{ $fieldName }}[0][label]"
+                                            class="control"
+                                            value="work"
                                         />
 
                                         @break;
 
                                     @case('phone')
                                         <input
-                                        type="text"
-                                        name="{{ $fieldName }}[0][value]"
-                                        class="control"
-                                        placeholder="{{ $attribute->placeholder }}"
-                                        id="{{ $fieldName }}"
-                                        {{ $attribute->is_required ? 'required' : '' }}
+                                            type="text"
+                                            name="{{ $fieldName }}[0][value]"
+                                            placeholder="{{ $attribute->placeholder }}"
+                                            id="{{ $fieldName }}"
+                                            {{ $attribute->is_required ? 'required' : '' }}
+                                            class="w-full rounded border border-gray-200 px-2.5 py-2 text-sm font-normal text-gray-800 transition-all hover:border-gray-400 focus:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400 dark:focus:border-gray-400"
                                         />
 
                                         <input
@@ -153,17 +111,17 @@ class="control"
                                             name="{{ $fieldName }}[0][label]"
                                             class="control"
                                             value="work"
-                                            />
+                                        />
 
                                         @break;
 
                                     @case('select')
                                     @case('lookup')
                                         <select
-                                        class="control"
-                                        id="{{ $fieldName }}"
-                                        name="{{ $fieldName }}"
-                                        {{ $attribute->is_required ? 'required' : '' }}
+                                            id="{{ $fieldName }}"
+                                            name="{{ $fieldName }}"
+                                            {{ $attribute->is_required ? 'required' : '' }}
+                                            class="w-full rounded border border-gray-200 px-2.5 py-2 text-sm font-normal text-gray-800 transition-all hover:border-gray-400 focus:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400 dark:focus:border-gray-400"
                                         >
                                             @php
                                                 $options = $parentAttribute->lookup_type
@@ -184,7 +142,12 @@ class="control"
                                         @break;
 
                                     @case('multiselect')
-                                        <select class="control" id="{{ $fieldName }}" name="{{ $fieldName }}[]" multiple>
+                                        <select
+                                            id="{{ $fieldName }}"
+                                            name="{{ $fieldName }}[]"
+                                            multiple
+                                            class="w-full rounded border border-gray-200 px-2.5 py-2 text-sm font-normal text-gray-800 transition-all hover:border-gray-400 focus:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400 dark:focus:border-gray-400"
+                                        >
 
                                             @php
                                                 $options = $parentAttribute->lookup_type
@@ -229,17 +192,20 @@ class="control"
                                     @case('file')
                                     @case('image')
                                         <input
-                                        type="file"
-                                        name="{{ $fieldName }}"
-                                            class="control"
+                                            type="file"
+                                            name="{{ $fieldName }}"
                                             id="{{ $fieldName }}"
-                                            style="padding-top: 5px;"
-                                            />
+                                            class="w-full rounded border border-gray-200 px-2.5 py-2 text-sm font-normal text-gray-800 transition-all hover:border-gray-400 focus:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400 dark:focus:border-gray-400"
+                                        />
 
                                         @break;
 
                                     @case('boolean')
-                                        <select class="control" id="{{ $fieldName }}" name="{{ $fieldName }}">
+                                        <select
+                                            class="w-full rounded border border-gray-200 px-2.5 py-2 text-sm font-normal text-gray-800 transition-all hover:border-gray-400 focus:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400 dark:focus:border-gray-400"
+                                            id="{{ $fieldName }}"
+                                            name="{{ $fieldName }}"
+                                        >
                                             <option value="1">Yes</option>
                                             <option value="0">No</option>
                                         </select>
@@ -252,16 +218,20 @@ class="control"
                                 @endswitch
                             </div>
                         @endforeach
+                    </div>
 
-                        <div class="button-group">
-                            <button type="submit" class="btn btn-xl btn-primary">
-                                {{ $webForm->submit_button_label }}
-                            </button>
-                        </div>
-
-                    </form>
-                </div>
+                    <div class="flex items-center justify-center p-4">
+                        <!-- Submit Button -->
+                        <button
+                            type="submit"
+                            style="background-color: {{ $webForm->form_submit_button_color }} !important"
+                            class="flex justify-center w-full bg-brandColor border border-brandColor cursor-pointer focus:opacity-[0.9] font-semibold gap-x-1 hover:opacity-[0.9] items-center place-content-center px-3 py-1.5 rounded-md text-gray-50 transition-all"
+                        >
+                            {{ $webForm->submit_button_label }}
+                        </button>
+                    </div>
+                </form>
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</x-web_form::layouts>
\ No newline at end of file
diff --git a/packages/Webkul/WebForm/src/Routes/routes.php b/packages/Webkul/WebForm/src/Routes/routes.php
new file mode 100644
index 000000000..804729242
--- /dev/null
+++ b/packages/Webkul/WebForm/src/Routes/routes.php
@@ -0,0 +1,16 @@
+<?php
+
+use Illuminate\Support\Facades\Route;
+use Webkul\WebForm\Http\Controllers\WebFormController;
+
+Route::controller(WebFormController::class)->prefix('web-forms')->group(function () {
+    Route::get('forms/{id}/form.js', 'formJS')->name('admin.settings.web_forms.form_js');
+
+    Route::get('forms/{id}/form.html', 'preview')->name('admin.settings.web_forms.preview');
+
+    Route::post('forms/{id}', 'formStore')->name('admin.settings.web_forms.form_store');
+
+    Route::group(['middleware' => ['user']], function () {
+        Route::get('form/{id}/form.html', 'view')->name('admin.settings.web_forms.view');
+    });
+});
diff --git a/packages/Webkul/WebForm/src/Vite.php b/packages/Webkul/WebForm/src/Vite.php
new file mode 100644
index 000000000..af3315a9c
--- /dev/null
+++ b/packages/Webkul/WebForm/src/Vite.php
@@ -0,0 +1,43 @@
+<?php
+
+namespace Webkul\WebForm;
+
+use Illuminate\Support\Facades\Vite as BaseVite;
+
+class Vite
+{
+    protected $hotFile = 'webform-vite.hot';
+
+    protected $buildDirectory = 'webform/build';
+
+    protected $packageAssetDirectory = 'src/Resources/assets';
+
+    /**
+     * Return the asset URL.
+     *
+     * @return string
+     */
+    public function asset(string $filename)
+    {
+        $url = trim($filename, '/');
+
+        $viteUrl = trim($this->packageAssetDirectory, '/').'/'.$url;
+
+        return BaseVite::useHotFile($this->hotFile)
+            ->useBuildDirectory($this->buildDirectory)
+            ->asset($viteUrl);
+    }
+
+    /**
+     * Set bagisto vite.
+     *
+     * @param  mixed  $entryPoints
+     * @return mixed
+     */
+    public function set($entryPoints)
+    {
+        return BaseVite::useHotFile($this->hotFile)
+            ->useBuildDirectory($this->buildDirectory)
+            ->withEntryPoints($entryPoints);
+    }
+}