diff --git a/packages/Webkul/Admin/src/DataGrids/Setting/TypeDataGrid.php b/packages/Webkul/Admin/src/DataGrids/Setting/TypeDataGrid.php
index ea5fedfd5..986abba25 100644
--- a/packages/Webkul/Admin/src/DataGrids/Setting/TypeDataGrid.php
+++ b/packages/Webkul/Admin/src/DataGrids/Setting/TypeDataGrid.php
@@ -52,15 +52,17 @@ public function prepareColumns(): void
     public function prepareActions(): void
     {
         $this->addAction([
+            'index'  => 'edit',
             'icon'   => 'icon-edit',
             'title'  => trans('admin::app.settings.roles.index.datagrid.edit'),
             'method' => 'GET',
             'url'    => function ($row) {
-                return route('admin.settings.types.edit', $row->id);
+                return route('admin.settings.types.update', $row->id);
             },
         ]);
 
         $this->addAction([
+            'index'  => 'delete',
             'icon'   => 'icon-delete',
             'title'  => trans('admin::app.settings.roles.index.datagrid.delete'),
             'method' => 'DELETE',
diff --git a/packages/Webkul/Admin/src/Http/Controllers/Setting/TypeController.php b/packages/Webkul/Admin/src/Http/Controllers/Setting/TypeController.php
index 08a7009d4..ec84abfcf 100755
--- a/packages/Webkul/Admin/src/Http/Controllers/Setting/TypeController.php
+++ b/packages/Webkul/Admin/src/Http/Controllers/Setting/TypeController.php
@@ -4,7 +4,6 @@
 
 use Illuminate\Http\JsonResponse;
 use Illuminate\Support\Facades\Event;
-use Illuminate\Support\Facades\Validator;
 use Illuminate\View\View;
 use Webkul\Admin\DataGrids\Setting\TypeDataGrid;
 use Webkul\Admin\Http\Controllers\Controller;
@@ -33,52 +32,41 @@ public function index(): View|JsonResponse
 
     /**
      * Store a newly created type in storage.
-     *
-     * @return \Illuminate\Http\Response
      */
-    public function store()
+    public function store(): JsonResponse
     {
-        $validator = Validator::make(request()->all(), [
-            'name' => 'required|unique:lead_types,name',
+        $this->validate(request(), [
+            'name' => ['required', 'unique:lead_types,name'],
         ]);
 
-        if ($validator->fails()) {
-            session()->flash('error', trans('admin::app.settings.types.name-exists'));
-
-            return redirect()->back();
-        }
-
         Event::dispatch('settings.type.create.before');
 
-        $type = $this->typeRepository->create(request()->all());
+        $type = $this->typeRepository->create(request()->only(['name']));
 
         Event::dispatch('settings.type.create.after', $type);
 
-        session()->flash('success', trans('admin::app.settings.types.create-success'));
-
-        return redirect()->route('admin.settings.types.index');
+        return new JsonResponse([
+            'data'    => $type,
+            'message' => trans('admin::app.settings.types.index.create-success'),
+        ]);
     }
 
     /**
      * Show the form for editing the specified type.
-     *
-     * @param  int  $id
-     * @return \Illuminate\View\View
      */
-    public function edit($id)
+    public function edit(int $id): View|JsonResponse
     {
         $type = $this->typeRepository->findOrFail($id);
 
-        return view('admin::settings.types.edit', compact('type'));
+        return new JsonResponse([
+            'data' => $type,
+        ]);
     }
 
     /**
      * Update the specified type in storage.
-     *
-     * @param  int  $id
-     * @return \Illuminate\Http\Response
      */
-    public function update($id)
+    public function update(int $id): JsonResponse
     {
         $this->validate(request(), [
             'name' => 'required|unique:lead_types,name,'.$id,
@@ -86,43 +74,37 @@ public function update($id)
 
         Event::dispatch('settings.type.update.before', $id);
 
-        $type = $this->typeRepository->update(request()->all(), $id);
+        $type = $this->typeRepository->update(request()->only(['name']), $id);
 
         Event::dispatch('settings.type.update.after', $type);
 
-        session()->flash('success', trans('admin::app.settings.types.update-success'));
-
-        return redirect()->route('admin.settings.types.index');
+        return new JsonResponse([
+            'data'    => $type,
+            'message' => trans('admin::app.settings.types.index.update-success'),
+        ]);
     }
 
     /**
      * Remove the specified type from storage.
-     *
-     * @param  int  $id
-     * @return \Illuminate\Http\Response
      */
-    public function destroy($id)
+    public function destroy(int $id): JsonResponse
     {
         $type = $this->typeRepository->findOrFail($id);
 
         try {
             Event::dispatch('settings.type.delete.before', $id);
 
-            $this->typeRepository->delete($id);
+            $type->delete($id);
 
             Event::dispatch('settings.type.delete.after', $id);
 
-            return response()->json([
-                'message' => trans('admin::app.settings.types.delete-success'),
+            return new JsonResponse([
+                'message' => trans('admin::app.settings.types.index.delete-success'),
             ], 200);
         } catch (\Exception $exception) {
-            return response()->json([
-                'message' => trans('admin::app.settings.types.delete-failed'),
+            return new JsonResponse([
+                'message' => trans('admin::app.settings.types.index.delete-failed'),
             ], 400);
         }
-
-        return response()->json([
-            'message' => trans('admin::app.settings.types.delete-failed'),
-        ], 400);
     }
 }
diff --git a/packages/Webkul/Admin/src/Http/routes.php b/packages/Webkul/Admin/src/Http/routes.php
index 9fb07b6cc..2dd12473a 100644
--- a/packages/Webkul/Admin/src/Http/routes.php
+++ b/packages/Webkul/Admin/src/Http/routes.php
@@ -352,18 +352,6 @@
                     Route::delete('{id}', 'SourceController@destroy')->name('admin.settings.sources.delete');
                 });
 
-                // Lead Types Routes
-                Route::prefix('types')->group(function () {
-                    Route::get('', 'TypeController@index')->name('admin.settings.types.index');
-
-                    Route::post('create', 'TypeController@store')->name('admin.settings.types.store');
-
-                    Route::get('edit/{id?}', 'TypeController@edit')->name('admin.settings.types.edit');
-
-                    Route::put('edit/{id}', 'TypeController@update')->name('admin.settings.types.update');
-
-                    Route::delete('{id}', 'TypeController@destroy')->name('admin.settings.types.delete');
-                });
 
                 // Email Templates Routes
                 Route::prefix('email-templates')->group(function () {
diff --git a/packages/Webkul/Admin/src/Providers/AdminServiceProvider.php b/packages/Webkul/Admin/src/Providers/AdminServiceProvider.php
index cb35a63ef..9d2f37768 100644
--- a/packages/Webkul/Admin/src/Providers/AdminServiceProvider.php
+++ b/packages/Webkul/Admin/src/Providers/AdminServiceProvider.php
@@ -8,6 +8,7 @@
 use Illuminate\Support\Facades\Blade;
 use Illuminate\Support\ServiceProvider;
 use Webkul\Admin\Http\Middleware\Locale;
+use Illuminate\Support\Facades\Route;
 
 class AdminServiceProvider extends ServiceProvider
 {
@@ -18,6 +19,8 @@ public function boot(Router $router): void
     {
         include __DIR__.'/../Http/helpers.php';
 
+        Route::middleware('web')->group(__DIR__.'/../Routes/web.php');
+
         $this->loadRoutesFrom(__DIR__.'/../Http/routes.php');
 
         $this->loadMigrationsFrom(__DIR__.'/../Database/Migrations');
diff --git a/packages/Webkul/Admin/src/Resources/lang/en/app.php b/packages/Webkul/Admin/src/Resources/lang/en/app.php
index d4dd5297e..676b856c2 100644
--- a/packages/Webkul/Admin/src/Resources/lang/en/app.php
+++ b/packages/Webkul/Admin/src/Resources/lang/en/app.php
@@ -146,9 +146,11 @@
                     'id'          => 'ID',
                     'name'        => 'Name',
                 ],
+
                 'edit' => [
                     'title' => 'Edit Group',
                 ],
+
                 'create' => [
                     'name'        => 'Name',
                     'title'       => 'Create Group',
@@ -157,6 +159,79 @@
                 ],
             ],
         ],
+
+        'roles' => [
+            'index' => [
+                'create-btn' => 'Create Roles',
+                'title'      => 'Roles',
+                'settings'   => 'Settings',
+                'datagrid'   => [
+                    'all'             => 'All',
+                    'custom'          => 'Custom',
+                    'delete'          => 'Delete',
+                    'description'     => 'Description',
+                    'edit'            => 'Edit',
+                    'id'              => 'ID',
+                    'name'            => 'Name',
+                    'permission-type' => 'Permission Type',
+                ],
+            ],
+
+            'create' => [
+                'access-control' => 'Access Control',
+                'all'            => 'All',
+                'back-btn'       => 'Back',
+                'custom'         => 'Custom',
+                'description'    => 'Description',
+                'general'        => 'General',
+                'name'           => 'Name',
+                'permissions'    => 'Permissions',
+                'save-btn'       => 'Save Role',
+                'title'          => 'Create Role',
+            ],
+
+            'edit' => [
+                'access-control' => 'Access Control',
+                'all'            => 'All',
+                'back-btn'       => 'Back',
+                'custom'         => 'Custom',
+                'description'    => 'Description',
+                'general'        => 'General',
+                'name'           => 'Name',
+                'permissions'    => 'Permissions',
+                'save-btn'       => 'Save Role',
+                'title'          => 'Edit Role',
+            ],
+        ],
+
+        'types' => [
+            'index' => [
+                'create-btn'     => 'Create Type',
+                'title'          => 'Types',
+                'create-success' => 'Type created successfully.',
+                'update-success' => 'Type updated successfully.',
+                'delete-success' => 'Type deleted successfully.',
+                'delete-failed'  => 'Type can not be deleted.',
+
+                'datagrid' => [
+                    'delete'      => 'Delete',
+                    'description' => 'Description',
+                    'edit'        => 'Edit',
+                    'id'          => 'ID',
+                    'name'        => 'Name',
+                ],
+
+                'create' => [
+                    'name'     => 'Name',
+                    'save-btn' => 'Save Type',
+                    'title'    => 'Create Type',
+                ],
+
+                'edit' => [
+                    'title' => 'Edit Type',
+                ],
+            ],
+        ],
     ],
 
     // ----------------------------------------------------------------Old version locale ----------------------------------
diff --git a/packages/Webkul/Admin/src/Resources/views/settings/types/index.blade.php b/packages/Webkul/Admin/src/Resources/views/settings/types/index.blade.php
index e5e773370..6d8283f1a 100644
--- a/packages/Webkul/Admin/src/Resources/views/settings/types/index.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/settings/types/index.blade.php
@@ -1,72 +1,260 @@
-@extends('admin::layouts.master')
+<x-admin::layouts>
+    <x-slot:title>
+        @lang('admin::app.settings.types.index.title')
+    </x-slot>
 
-@section('page_title')
-    {{ __('admin::app.settings.types.title') }}
-@stop
+    <v-types-settings>
+        <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">
+                    <!-- Breadcrumbs -->
+                    <x-admin::breadcrumbs name="settings.types" />
+                </div>
+    
+                <div class="text-xl font-bold dark:text-gray-300">
+                    @lang('admin::app.settings.types.index.title')
+                </div>
+            </div>
+    
+            <div class="flex items-center gap-x-2.5">
+                <!-- Create button for Leads Type -->
+                <div class="flex items-center gap-x-2.5">
+                    <a
+                        href="{{ route('admin.settings.groups.create') }}"
+                        class="primary-button"
+                    >
+                        @lang('admin::app.settings.types.index.create-btn')
+                    </a>
+                </div>
+            </div>
+        </div>
+    
+        <!-- DataGrid Shimmer -->
+        <x-admin::shimmer.datagrid />
+    </v-types-settings>
 
-@section('content-wrapper')
-    <div class="content full-page">
-        <table-component data-src="{{ route('admin.settings.types.index') }}">
-            <template v-slot:table-header>
-                <h1>
-                    {!! view_render_event('admin.settings.types.index.header.before') !!}
+    @pushOnce('scripts')
+        <script
+            type="text/x-template"
+            id="types-settings-template"
+        >
+            <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">
+                        <!-- Breadcrumbs -->
+                        <x-admin::breadcrumbs name="settings.types" />
+                    </div>
+        
+                    <div class="text-xl font-bold dark:text-gray-300">
+                        @lang('admin::app.settings.types.index.title')
+                    </div>
+                </div>
+        
+                <div class="flex items-center gap-x-2.5">
+                    <!-- Create button for Leads Type -->
+                    <div class="flex items-center gap-x-2.5">
+                        {!! view_render_event('krayin.admin.settings.types.index.create-button.before') !!}
+        
+                        <!-- Create button for Leads Type -->
+                        <x-admin::button
+                            button-type="button"
+                            class="primary-button justify-center"
+                            :title="trans('admin::app.settings.types.index.create-btn')"
+                            @click="selectedType=false; $refs.typeUpdateAndCreateModal.toggle()"
+                        />
+        
+                        {!! view_render_event('krayin.admin.settings.types.index.create-button.after') !!}
+                    </div>
+                </div>
+            </div>
 
-                    {{ Breadcrumbs::render('settings.types') }}
+            {!! view_render_event('krayin.admin.settings.types.index.datagrid.before') !!}
+        
+            <!-- Datagrid -->
+            <x-admin::datagrid
+                src="{{ route('admin.settings.types.index') }}"
+                ref="datagrid"
+            >
+                <template #body="{
+                    isLoading,
+                    available,
+                    applied,
+                    selectAll,
+                    sort,
+                    performAction
+                }">
+                    <template v-if="isLoading">
+                        <x-admin::shimmer.datagrid.table.body />
+                    </template>
+        
+                    <template v-else>
+                        <div
+                            v-for="record in available.records"
+                            class="row grid items-center gap-2.5 border-b px-4 py-4 text-gray-600 transition-all hover:bg-gray-50 dark:border-gray-800 dark:text-gray-300 dark:hover:bg-gray-950"
+                            :style="`grid-template-columns: repeat(${gridsCount}, minmax(0, 1fr))`"
+                        >
+                            <!-- Type ID -->
+                            <p>@{{ record.id }}</p>
+        
+                            <!-- Type Name -->
+                            <p>@{{ record.name }}</p>
 
-                    {{ __('admin::app.settings.types.title') }}
+                            <!-- Actions -->
+                            <div class="flex justify-end">
+                                <a @click="selectedType=true; editModal(record.actions.find(action => action.index === 'edit')?.url)">
+                                    <span
+                                        :class="record.actions.find(action => action.index === 'edit')?.icon"
+                                        class="cursor-pointer rounded-md p-1.5 text-2xl transition-all hover:bg-gray-200 dark:hover:bg-gray-800 max-sm:place-self-center"
+                                    >
+                                    </span>
+                                </a>
+    
+                                <a @click="performAction(record.actions.find(action => action.index === 'delete'))">
+                                    <span
+                                        :class="record.actions.find(action => action.index === 'delete')?.icon"
+                                        class="cursor-pointer rounded-md p-1.5 text-2xl transition-all hover:bg-gray-200 dark:hover:bg-gray-800 max-sm:place-self-center"
+                                    >
+                                    </span>
+                                </a>
+                            </div>
+                        </div>
+                    </template>
+                </template>
+            </x-admin::datagrid>
 
-                    {!! view_render_event('admin.settings.types.index.header.after') !!}
-                </h1>
-            </template>
+            {!! view_render_event('krayin.admin.settings.groups.index.datagrid.after') !!}
+            
+            <x-admin::form
+                v-slot="{ meta, errors, handleSubmit }"
+                as="div"
+                ref="modalForm"
+            >
+                <form @submit="handleSubmit($event, updateOrCreate)">
+                    {!! view_render_event('krayin.admin.settings.groups.create_form_controls.before') !!}
 
-            @if (bouncer()->hasPermission('settings.lead.types.create'))
-                <template v-slot:table-action>
-                    <button class="btn btn-md btn-primary" @click="openModal('addTypeModal')">{{ __('admin::app.settings.types.create-title') }}</button>
-                </template>
-            @endif
-        <table-component>
-    </div>
+                    <x-admin::modal ref="typeUpdateAndCreateModal">
+                        <!-- Modal Header -->
+                        <x-slot:header>
+                            <p class="text-lg font-bold text-gray-800 dark:text-white">
+                                @{{ 
+                                    selectedType
+                                    ? "@lang('admin::app.settings.types.index.edit.title')" 
+                                    : "@lang('admin::app.settings.types.index.create.title')"
+                                }}
+                            </p>
+                        </x-slot>
 
-    <form action="{{ route('admin.settings.types.store') }}" method="POST" @submit.prevent="onSubmit">
-        <modal id="addTypeModal" :is-open="modalIds.addTypeModal">
-            <h3 slot="header-title">{{ __('admin::app.settings.types.create-title') }}</h3>
+                        <!-- Modal Content -->
+                        <x-slot:content>
+                            {!! view_render_event('krayin.admin.settings.types.content.before') !!}
 
-            <div slot="header-actions">
-                {!! view_render_event('admin.settings.types.create.form_buttons.before') !!}
+                            <x-admin::form.control-group.control
+                                type="hidden"
+                                name="id"
+                            />
 
-                <button class="btn btn-sm btn-secondary-outline" @click="closeModal('addTypeModal')">{{ __('admin::app.settings.types.cancel') }}</button>
+                            <x-admin::form.control-group>
+                                <x-admin::form.control-group.label class="required">
+                                    @lang('admin::app.settings.types.index.create.name')
+                                </x-admin::form.control-group.label>
 
-                <button type="submit" class="btn btn-sm btn-primary">{{ __('admin::app.settings.types.save-btn-title') }}</button>
+                                <x-admin::form.control-group.control
+                                    type="text"
+                                    id="name"
+                                    name="name"
+                                    rules="required"
+                                    :label="trans('admin::app.settings.types.index.create.name')"
+                                    :placeholder="trans('admin::app.settings.types.index.create.name')"
+                                />
 
-                {!! view_render_event('admin.settings.types.create.form_buttons.after') !!}
-            </div>
+                                <x-admin::form.control-group.error control-name="name" />
+                            </x-admin::form.control-group>
 
-            <div slot="body">
-                {!! view_render_event('admin.settings.types.create.form_controls.before') !!}
+                            {!! view_render_event('krayin.admin.settings.types.content.after') !!}
+                        </x-slot>
 
-                @csrf()
+                        <!-- Modal Footer -->
+                        <x-slot:footer>
+                            <x-admin::button
+                                button-type="submit"
+                                class="primary-button justify-center"
+                                :title="trans('admin::app.settings.types.index.create.save-btn')"
+                                ::loading="isProcessing"
+                                ::disabled="isProcessing"
+                            />
+                        </x-slot>
+                    </x-admin::modal>
 
-                <div class="form-group" :class="[errors.has('name') ? 'has-error' : '']">
-                    <label class="required">
-                        {{ __('admin::app.layouts.name') }}
-                    </label>
+                    {!! view_render_event('krayin.admin.settings.groups.create_form_controls.after') !!}
+                </form>
+            </x-admin::form>
+        </script>
 
-                    <input
-                        type="text"
-                        name="name"
-                        class="control"
-                        placeholder="{{ __('admin::app.layouts.name') }}"
-                        v-validate="'required'"
-                        data-vv-as="{{ __('admin::app.layouts.name') }}"
-                    />
+        <script type="module">
+            app.component('v-types-settings', {
+                template: '#types-settings-template',
+        
+                data() {
+                    return {
+                        isProcessing: false,
+                    };
+                },
+        
+                computed: {
+                    gridsCount() {
+                        let count = this.$refs.datagrid.available.columns.length;
 
-                    <span class="control-error" v-if="errors.has('name')">
-                        @{{ errors.first('name') }}
-                    </span>
-                </div>
+                        if (this.$refs.datagrid.available.actions.length) {
+                            ++count;
+                        }
 
-                {!! view_render_event('admin.settings.types.create.form_controls.after') !!}
-            </div>
-        </modal>
-    </form>
-@stop
+                        if (this.$refs.datagrid.available.massActions.length) {
+                            ++count;
+                        }
+
+                        return count;
+                    },
+                },
+
+                methods: {
+                    updateOrCreate(params, {resetForm, setErrors}) {
+                        this.isProcessing = true;
+
+                        this.$axios.post(params.id ? `{{ route('admin.settings.types.update', '') }}/${params.id}` : "{{ route('admin.settings.types.store') }}", {
+                            ...params,
+                            _method: params.id ? 'put' : 'post'
+                        },
+
+                        ).then(response => {
+                            this.isProcessing = false;
+
+                            this.$refs.typeUpdateAndCreateModal.toggle();
+
+                            this.$emitter.emit('add-flash', { type: 'success', message: response.data.message });
+
+                            this.$refs.datagrid.get();
+
+                            resetForm();
+                        }).catch(error => {
+                            this.isProcessing = false;
+
+                            if (error.response.status === 422) {
+                                setErrors(error.response.data.errors);
+                            }
+                        });
+                    },
+                    
+                    editModal(url) {
+                        this.$axios.get(url)
+                            .then(response => {
+                                this.$refs.modalForm.setValues(response.data.data);
+                                
+                                this.$refs.typeUpdateAndCreateModal.toggle();
+                            })
+                            .catch(error => {});
+                    },
+                },
+            });
+        </script>
+    @endPushOnce
+</x-admin::layouts>
diff --git a/packages/Webkul/Admin/src/Routes/settings-routes.php b/packages/Webkul/Admin/src/Routes/settings-routes.php
new file mode 100644
index 000000000..a0665951c
--- /dev/null
+++ b/packages/Webkul/Admin/src/Routes/settings-routes.php
@@ -0,0 +1,26 @@
+<?php
+
+use Illuminate\Support\Facades\Route;
+use Webkul\Admin\Http\Controllers\Setting\TypeController;
+
+/**
+ * Settings routes.
+ */
+Route::group(['middleware' => ['admin_locale'], 'prefix' => config('app.admin_path')], function () {
+    Route::prefix('settings')->group(function () {
+        /**
+         * Type routes.
+         */
+        Route::controller(TypeController::class)->prefix('types')->group(function () {
+            Route::get('', 'index')->name('admin.settings.types.index');
+
+            Route::post('create', 'store')->name('admin.settings.types.store');
+
+            Route::get('edit/{id?}', 'edit')->name('admin.settings.types.edit');
+
+            Route::put('edit/{id}', 'update')->name('admin.settings.types.update');
+
+            Route::delete('{id}', 'destroy')->name('admin.settings.types.delete');
+        });
+    });
+});
diff --git a/packages/Webkul/Admin/src/Routes/web.php b/packages/Webkul/Admin/src/Routes/web.php
new file mode 100644
index 000000000..62409428e
--- /dev/null
+++ b/packages/Webkul/Admin/src/Routes/web.php
@@ -0,0 +1,7 @@
+<?php
+
+/**
+ * Settings routes.
+ */
+require 'settings-routes.php';
+