diff --git a/app/Http/Controllers/Admin/CategoryController.php b/app/Http/Controllers/Admin/CategoryController.php
new file mode 100644
index 0000000..20c3d28
--- /dev/null
+++ b/app/Http/Controllers/Admin/CategoryController.php
@@ -0,0 +1,126 @@
+<?php
+
+namespace App\Http\Controllers\Admin;
+
+use App\Http\Controllers\Controller;
+use BalajiDharma\LaravelAdminCore\Requests\StoreCategoryRequest;
+use BalajiDharma\LaravelAdminCore\Requests\UpdateCategoryRequest;
+use BalajiDharma\LaravelCategory\Models\CategoryType;
+use BalajiDharma\LaravelCategory\Models\Category;
+use Illuminate\Support\Facades\Auth;
+use Inertia\Inertia;
+
+class CategoryController extends Controller
+{
+    public function __construct()
+    {
+        $this->middleware('can:category list', ['only' => ['index', 'show']]);
+        $this->middleware('can:category create', ['only' => ['create', 'store']]);
+        $this->middleware('can:category edit', ['only' => ['edit', 'update']]);
+        $this->middleware('can:category delete', ['only' => ['destroy']]);
+    }
+
+    /**
+     * Display a listing of the resource.
+     *
+     * @return \Inertia\Response
+     */
+    public function index(CategoryType $type)
+    {
+        $items = (new Category)->toTree($type->id, true);
+
+        return Inertia::render('Admin/Category/Item/Index', [
+            'categoryType' => $type,
+            'items' => $items,
+            'can' => [
+                'create' => Auth::user()->can('category create'),
+                'edit' => Auth::user()->can('category edit'),
+                'delete' => Auth::user()->can('category delete'),
+            ]
+        ]);
+    }
+
+        /**
+     * Show the form for creating a new resource.
+     *
+     * @return \Inertia\Response
+     */
+    public function create(CategoryType $type)
+    {
+        $itemOptions = Category::selectOptions($type->id, null, true);
+        return Inertia::render('Admin/Category/Item/Create', [
+            'categoryType' => $type,
+            'itemOptions' => $itemOptions
+        ]);
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     *
+     * @param  StoreCategoryRequest  $request
+     * @param  \BalajiDharma\LaravelCategory\Models\CategoryType $type
+     * @return \Illuminate\Http\RedirectResponse
+     */
+    public function store(StoreCategoryRequest $request, CategoryType $type)
+    {
+        if(!$request->has('enabled')) {
+            $request['enabled'] = false;
+        }
+
+        $type->categories()->create($request->all());
+
+        return redirect()->route('category.type.item.index', $type->id)
+                        ->with('message', 'Category created successfully.');
+    }
+
+    /**
+     * Show the form for editing the specified resource.
+     *
+     * @param  \BalajiDharma\LaravelCategory\Models\CategoryType $type
+     * @return \Inertia\Response
+     */
+    public function edit(CategoryType $type, Category $item)
+    {
+        $itemOptions = Category::selectOptions($type->id, $item->parent_id ?? $item->id);
+        return Inertia::render('Admin/Category/Item/Edit', [
+            'categoryType' => $type,
+            'item' => $item,
+            'itemOptions' => $itemOptions
+        ]);
+    }
+
+    /**
+     * Update the specified resource in storage.
+     *
+     * @param  UpdateCategoryRequest  $request
+     * @param  \BalajiDharma\LaravelCategory\Models\CategoryType $type
+     * @param  \BalajiDharma\LaravelCategory\Models\Category $item
+     * @return \Illuminate\Http\RedirectResponse
+     */
+    public function update(UpdateCategoryRequest $request, CategoryType $type, Category $item)
+    {
+        if(!$request->has('enabled')) {
+            $request['enabled'] = false;
+        }
+
+        $item->update($request->all());
+
+        return redirect()->route('category.type.item.index', $type->id)
+                        ->with('message', 'Category updated successfully.');
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     *
+     * @param  \BalajiDharma\LaravelCategory\Models\CategoryType $type
+     * @param  \BalajiDharma\LaravelCategory\Models\Category $typeItem
+     * @return \Illuminate\Http\RedirectResponse
+     */
+    public function destroy(CategoryType $type, Category $item)
+    {
+        $item->delete();
+
+        return redirect()->route('category.type.item.index', $type->id)
+                        ->with('message', __('Category deleted successfully'));
+    }
+}
\ No newline at end of file
diff --git a/app/Http/Controllers/Admin/CategoryTypeController.php b/app/Http/Controllers/Admin/CategoryTypeController.php
new file mode 100644
index 0000000..474f867
--- /dev/null
+++ b/app/Http/Controllers/Admin/CategoryTypeController.php
@@ -0,0 +1,139 @@
+<?php
+
+namespace App\Http\Controllers\Admin;
+
+use App\Http\Controllers\Controller;
+use BalajiDharma\LaravelCategory\Models\CategoryType;
+use BalajiDharma\LaravelAdminCore\Requests\StoreCategoryTypeRequest;
+use BalajiDharma\LaravelAdminCore\Requests\UpdateCategoryTypeRequest;
+use Illuminate\Support\Facades\Auth;
+use Inertia\Inertia;
+
+class CategoryTypeController extends Controller
+{
+    public function __construct()
+    {
+        $this->middleware('can:category.type list', ['only' => ['index']]);
+        $this->middleware('can:category.type create', ['only' => ['create', 'store']]);
+        $this->middleware('can:category.type edit', ['only' => ['edit', 'update']]);
+        $this->middleware('can:category.type delete', ['only' => ['destroy']]);
+    }
+
+    /**
+     * Display a listing of the resource.
+     *
+     * @return \Inertia\Response
+     */
+    public function index()
+    {
+        $categoryTypes = (new CategoryType)->newQuery();
+
+        if (request()->has('search')) {
+            $categoryTypes->where('name', 'Like', '%'.request()->input('search').'%');
+        }
+
+        if (request()->query('sort')) {
+            $attribute = request()->query('sort');
+            $sort_order = 'ASC';
+            if (strncmp($attribute, '-', 1) === 0) {
+                $sort_order = 'DESC';
+                $attribute = substr($attribute, 1);
+            }
+            $categoryTypes->orderBy($attribute, $sort_order);
+        } else {
+            $categoryTypes->latest();
+        }
+
+        $categoryTypes = $categoryTypes->paginate(5)->onEachSide(2);
+
+        return Inertia::render('Admin/Category/Type/Index', [
+            'categoryTypes' => $categoryTypes,
+            'filters' => request()->all('search'),
+            'can' => [
+                'create' => Auth::user()->can('category.type create'),
+                'edit' => Auth::user()->can('category.type edit'),
+                'delete' => Auth::user()->can('category.type delete'),
+                'manage' => Auth::user()->can('category index'),
+            ]
+        ]);
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     *
+     * @return \Inertia\Response
+     */
+    public function create()
+    {
+        return Inertia::render('Admin/Category/Type/Create');
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     *
+     * @param  StoreCategoryTypeRequest  $request
+     * @return \Illuminate\Http\RedirectResponse
+     */
+    public function store(StoreCategoryTypeRequest $request)
+    {
+        if(!$request->has('is_flat')) {
+            $request['is_flat'] = false;
+        }
+
+        CategoryType::create([
+            'name' => $request->name,
+            'machine_name' => $request->machine_name,
+            'description' => $request->description,
+            'is_flat' => $request->is_flat,
+        ]);
+
+        return redirect()->route('category.type.index')
+                        ->with('message', 'Category type created successfully.');
+    }
+
+    /**
+     * Show the form for editing the specified resource.
+     *
+     * @param  \BalajiDharma\LaravelCategory\Models\CategoryType  $categoryType
+     * @return \Inertia\Response
+     */
+    public function edit(CategoryType $type)
+    {
+        return Inertia::render('Admin/Category/Type/Edit', [
+            'categoryType' => $type,
+        ]);
+    }
+
+    /**
+     * Update the specified resource in storage.
+     *
+     * @param  UpdateCategoryTypeRequest  $request
+     * @param  \BalajiDharma\LaravelCategory\Models\CategoryType  $categoryType
+     * @return \Illuminate\Http\RedirectResponse
+     */
+    public function update(UpdateCategoryTypeRequest $request, CategoryType $type)
+    {
+        if(!$request->has('is_flat')) {
+            $request['is_flat'] = false;
+        }
+
+        $type->update($request->all());
+
+        return redirect()->route('category.type.index')
+                        ->with('message', 'Category type updated successfully.');
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     *
+     * @param  \BalajiDharma\LaravelCategory\Models\CategoryType  $categoryType
+     * @return \Illuminate\Http\RedirectResponse
+     */
+    public function destroy(CategoryType $type)
+    {
+        $type->delete();
+
+        return redirect()->route('category.type.index')
+                        ->with('message', __('Category type deleted successfully'));
+    }
+}
diff --git a/resources/js/Components/Admin/CategoryItemList.vue b/resources/js/Components/Admin/CategoryItemList.vue
new file mode 100644
index 0000000..5ebe6c6
--- /dev/null
+++ b/resources/js/Components/Admin/CategoryItemList.vue
@@ -0,0 +1,66 @@
+<script setup>
+import { Link } from "@inertiajs/vue3"
+import BaseButton from "@/Components/BaseButton.vue"
+import BaseButtons from "@/Components/BaseButtons.vue"
+import {
+  mdiSquareEditOutline,
+  mdiTrashCan,
+} from "@mdi/js"
+
+const props = defineProps({
+  item: {
+    type: Object,
+    default: () => ({}),
+  },
+  categoryType: {
+    type: Object,
+    default: () => ({}),
+  },
+  can: {
+    type: Object,
+    default: () => ({}),
+  },
+  level: {
+    type: Number,
+    default: 0
+  },
+})
+</script>
+
+<template>
+    <tr :key="item.id">
+        <td data-label="Name">
+            <div :style="{ 'margin-left': level*20 + 'px' }">{{ item.name }}</div>
+        </td>
+        <td data-label="Description">
+            {{ item.description }}
+        </td>
+        <td data-label="Enabled">
+            {{ item.enabled }}
+        </td>
+        <td
+        v-if="can.edit || can.delete"
+        class="before:hidden lg:w-1 whitespace-nowrap"
+        >
+        <BaseButtons type="justify-start lg:justify-end" no-wrap>
+            <BaseButton
+            v-if="can.edit"
+            :route-name="route('category.type.item.edit', {type: categoryType.id, item: item.id})"
+            color="info"
+            :icon="mdiSquareEditOutline"
+            small
+            />
+            <BaseButton
+            v-if="can.delete"
+            color="danger"
+            :icon="mdiTrashCan"
+            small
+            @click="destroy(item.id)"
+            />
+        </BaseButtons>
+        </td>
+    </tr>
+    <template v-for="item in item.children">
+        <CategoryItemList :item="item" :categoryType="categoryType" :can="can" :level="level + 1" />
+    </template>
+</template>
\ No newline at end of file
diff --git a/resources/js/Pages/Admin/Category/Item/Create.vue b/resources/js/Pages/Admin/Category/Item/Create.vue
new file mode 100644
index 0000000..ba73858
--- /dev/null
+++ b/resources/js/Pages/Admin/Category/Item/Create.vue
@@ -0,0 +1,143 @@
+<script setup>
+import { Head, Link, useForm } from "@inertiajs/vue3"
+import {
+  mdiMenu,
+  mdiArrowLeftBoldOutline
+} from "@mdi/js"
+import LayoutAuthenticated from "@/Layouts/LayoutAuthenticated.vue"
+import SectionMain from "@/Components/SectionMain.vue"
+import SectionTitleLineWithButton from "@/Components/SectionTitleLineWithButton.vue"
+import CardBox from "@/Components/CardBox.vue"
+import FormField from '@/Components/FormField.vue'
+import FormControl from '@/Components/FormControl.vue'
+import FormCheckRadioGroup from '@/Components/FormCheckRadioGroup.vue'
+import BaseButton from '@/Components/BaseButton.vue'
+import BaseButtons from '@/Components/BaseButtons.vue'
+
+const props = defineProps({
+  categoryType: {
+    type: Object,
+    default: () => ({}),
+  },
+  itemOptions: {
+    type: Object,
+    default: () => ({}),
+  },
+})
+
+const form = useForm({
+  name: '',
+  description: '',
+  enabled: true,
+  parent_id: '',
+  weight: ''
+})
+
+</script>
+
+<template>
+  <LayoutAuthenticated>
+    <Head title="Create Category" />
+    <SectionMain>
+      <SectionTitleLineWithButton
+        :icon="mdiMenu"
+        title="Add Category"
+        main
+      >
+        <BaseButton
+          :route-name="route('category.type.item.index', categoryType.id)"
+          :icon="mdiArrowLeftBoldOutline"
+          label="Back"
+          color="white"
+          rounded-full
+          small
+        />
+      </SectionTitleLineWithButton>
+      <CardBox
+        form
+        @submit.prevent="form.post(route('category.type.item.store', categoryType.id))"
+      >
+        <FormField
+          label="Name"
+          :class="{ 'text-red-400': form.errors.name }"
+        >
+          <FormControl
+            v-model="form.name"
+            type="text"
+            placeholder="Enter Name"
+            :error="form.errors.name"
+          >
+            <div class="text-red-400 text-sm" v-if="form.errors.name">
+              {{ form.errors.name }}
+            </div>
+          </FormControl>
+        </FormField>
+        <FormField
+          label="Description"
+          :class="{ 'text-red-400': form.errors.description }"
+        >
+          <FormControl
+            v-model="form.description"
+            type="text"
+            placeholder="Enter Description"
+            :error="form.errors.description"
+          >
+            <div class="text-red-400 text-sm" v-if="form.errors.description">
+              {{ form.errors.description }}
+            </div>
+          </FormControl>
+        </FormField>
+        <FormCheckRadioGroup
+          v-model="form.enabled"
+          name="enabled"
+          :options="{ enabled: 'Enabled' }"
+        />
+        <FormField
+          label="Parent Item"
+          :class="{ 'text-red-400': form.errors.parent_id }"
+        >
+          <FormControl
+            v-model="form.parent_id"
+            type="select"
+            placeholder="--ROOT--"
+            :error="form.errors.parent_id"
+            :options="itemOptions"
+          >
+            <div class="text-red-400 text-sm" v-if="form.errors.parent_id">
+              {{ form.errors.parent_id }}
+            </div>
+            <div>
+                The maximum depth for a link and all its children is fixed. Some menu links may not be available as parents if selecting them would exceed this limit.
+            </div>
+          </FormControl>
+        </FormField>
+        <FormField
+          label="Weight"
+          :class="{ 'text-red-400': form.errors.weight }"
+        >
+          <FormControl
+            v-model="form.weight"
+            type="text"
+            placeholder="Enter Weight"
+            :error="form.errors.weight"
+          >
+            <div class="text-red-400 text-sm" v-if="form.errors.weight">
+              {{ form.errors.weight }}
+            </div>
+          </FormControl>
+        </FormField>
+        <template #footer>
+          <BaseButtons>
+            <BaseButton
+              type="submit"
+              color="info"
+              label="Submit"
+              :class="{ 'opacity-25': form.processing }"
+              :disabled="form.processing"
+            />
+          </BaseButtons>
+        </template>
+      </CardBox>
+    </SectionMain>
+  </LayoutAuthenticated>
+</template>
diff --git a/resources/js/Pages/Admin/Category/Item/Edit.vue b/resources/js/Pages/Admin/Category/Item/Edit.vue
new file mode 100644
index 0000000..94fb567
--- /dev/null
+++ b/resources/js/Pages/Admin/Category/Item/Edit.vue
@@ -0,0 +1,148 @@
+<script setup>
+import { Head, useForm } from "@inertiajs/vue3"
+import {
+  mdiMenu,
+  mdiArrowLeftBoldOutline
+} from "@mdi/js"
+import LayoutAuthenticated from "@/Layouts/LayoutAuthenticated.vue"
+import SectionMain from "@/Components/SectionMain.vue"
+import SectionTitleLineWithButton from "@/Components/SectionTitleLineWithButton.vue"
+import CardBox from "@/Components/CardBox.vue"
+import FormField from '@/Components/FormField.vue'
+import FormControl from '@/Components/FormControl.vue'
+import FormCheckRadioGroup from '@/Components/FormCheckRadioGroup.vue'
+import BaseButton from '@/Components/BaseButton.vue'
+import BaseButtons from '@/Components/BaseButtons.vue'
+
+const props = defineProps({
+  categoryType: {
+    type: Object,
+    default: () => ({}),
+  },
+  item: {
+    type: Object,
+    default: () => ({}),
+  },
+  itemOptions: {
+    type: Object,
+    default: () => ({}),
+  },
+})
+
+
+const form = useForm({
+  _method: 'put',
+  name: props.item.name,
+  description: props.item.description,
+  enabled: props.item.enabled,
+  parent_id: props.item.parent_id,
+  weight: props.item.weight
+})
+</script>
+
+<template>
+  <LayoutAuthenticated>
+    <Head title="Update Category" />
+    <SectionMain>
+      <SectionTitleLineWithButton
+        :icon="mdiMenu"
+        title="Update Category"
+        main
+      >
+        <BaseButton
+          :route-name="route('category.type.item.index', categoryType.id)"
+          :icon="mdiArrowLeftBoldOutline"
+          label="Back"
+          color="white"
+          rounded-full
+          small
+        />
+      </SectionTitleLineWithButton>
+      <CardBox
+        form
+        @submit.prevent="form.post(route('category.type.item.update', {type: props.categoryType.id, item:props.item.id}))"
+      >
+        <FormField
+          label="Name"
+          :class="{ 'text-red-400': form.errors.name }"
+        >
+          <FormControl
+            v-model="form.name"
+            type="text"
+            placeholder="Enter Name"
+            :error="form.errors.name"
+          >
+            <div class="text-red-400 text-sm" v-if="form.errors.name">
+              {{ form.errors.name }}
+            </div>
+          </FormControl>
+        </FormField>
+        <FormField
+          label="Description"
+          :class="{ 'text-red-400': form.errors.description }"
+        >
+          <FormControl
+            v-model="form.description"
+            type="text"
+            placeholder="Enter Description"
+            :error="form.errors.description"
+          >
+            <div class="text-red-400 text-sm" v-if="form.errors.description">
+              {{ form.errors.description }}
+            </div>
+          </FormControl>
+        </FormField>
+        <FormCheckRadioGroup
+          v-model="form.enabled"
+          name="enabled"
+          :options="{ enabled: 'Enabled' }"
+        />
+        <FormField
+          label="Parent Item"
+          :class="{ 'text-red-400': form.errors.parent_id }"
+        >
+          <FormControl
+            v-model="form.parent_id"
+            type="select"
+            placeholder="--ROOT--"
+            :error="form.errors.parent_id"
+            :options="itemOptions"
+          >
+            <div class="text-red-400 text-sm" v-if="form.errors.parent_id">
+              {{ form.errors.parent_id }}
+            </div>
+            <div>
+                The maximum depth for a link and all its children is fixed. Some menu links may not be available as parents if selecting them would exceed this limit.
+            </div>
+          </FormControl>
+        </FormField>
+        <FormField
+          label="Weight"
+          :class="{ 'text-red-400': form.errors.weight }"
+        >
+          <FormControl
+            v-model="form.weight"
+            type="text"
+            placeholder="Enter Weight"
+            :error="form.errors.weight"
+          >
+            <div class="text-red-400 text-sm" v-if="form.errors.weight">
+              {{ form.errors.weight }}
+            </div>
+          </FormControl>
+        </FormField>
+        <template #footer>
+          <BaseButtons>
+            <BaseButton
+              type="submit"
+              color="info"
+              label="Submit"
+              :class="{ 'opacity-25': form.processing }"
+              :disabled="form.processing"
+            />
+          </BaseButtons>
+        </template>
+      </CardBox>
+    </SectionMain>
+  </LayoutAuthenticated>
+</template>
diff --git a/resources/js/Pages/Admin/Category/Item/Index.vue b/resources/js/Pages/Admin/Category/Item/Index.vue
new file mode 100644
index 0000000..d573752
--- /dev/null
+++ b/resources/js/Pages/Admin/Category/Item/Index.vue
@@ -0,0 +1,144 @@
+<script setup>
+import { Head, useForm } from "@inertiajs/vue3"
+import {
+  mdiLink,
+  mdiPlus,
+  mdiAlertBoxOutline,
+  mdiArrowLeftBoldOutline
+} from "@mdi/js"
+import LayoutAuthenticated from "@/Layouts/LayoutAuthenticated.vue"
+import SectionMain from "@/Components/SectionMain.vue"
+import SectionTitleLineWithButton from "@/Components/SectionTitleLineWithButton.vue"
+import BaseButton from "@/Components/BaseButton.vue"
+import CardBox from "@/Components/CardBox.vue"
+import BaseButtons from "@/Components/BaseButtons.vue"
+import NotificationBar from "@/Components/NotificationBar.vue"
+import CategoryItemList from "@/Components/Admin/CategoryItemList.vue"
+
+const props = defineProps({
+  items: {
+    type: Object,
+    default: () => ({}),
+  },
+  categoryType: {
+    type: Object,
+    default: () => ({}),
+  },
+  can: {
+    type: Object,
+    default: () => ({}),
+  },
+})
+
+const formDelete = useForm({})
+
+function destroy(id) {
+  if (confirm("Are you sure you want to delete?")) {
+    formDelete.delete(route("category.type.item.destroy", {type: props.categoryType.id, item: id}))
+  }
+}
+
+</script>
+
+<template>
+  <LayoutAuthenticated>
+    <Head title="Categories" />
+    <SectionMain>
+      <SectionTitleLineWithButton
+        :icon="mdiLink"
+        title="Categories"
+        main
+      >
+        <BaseButtons type="justify-start lg:justify-end" no-wrap>
+          <BaseButton
+            :route-name="route('category.type.index')"
+            :icon="mdiArrowLeftBoldOutline"
+            label="Back"
+            color="white"
+            rounded-full
+            small
+          />
+          <BaseButton
+            v-if="can.delete"
+            :route-name="route('category.type.item.create', categoryType.id)"
+            :icon="mdiPlus"
+            label="Add"
+            color="info"
+            rounded-full
+            small
+          />
+        </BaseButtons>
+      </SectionTitleLineWithButton>
+      <NotificationBar
+        :key="Date.now()"
+        v-if="$page.props.flash.message"
+        color="success"
+        :icon="mdiAlertBoxOutline"
+      >
+        {{ $page.props.flash.message }}
+      </NotificationBar>
+      <CardBox class="mb-6" has-table>
+        <table class="border-collapse w-full border border-slate-400 dark:border-slate-500 bg-white dark:bg-slate-800 text-sm shadow-sm">
+          <tbody>
+            <tr>
+              <td
+                class="
+                  p-4
+                  pl-8
+                  text-slate-500
+                  dark:text-slate-400
+                  hidden
+                  lg:block
+                "
+              >
+                Name
+              </td>
+              <td data-label="Name">
+                {{ categoryType.name }}
+              </td>
+            </tr>
+            <tr>
+              <td
+                class="
+                  p-4
+                  pl-8
+                  text-slate-500
+                  dark:text-slate-400
+                  hidden
+                  lg:block
+                "
+              >
+                Machine name
+              </td>
+              <td data-label="Machine Name">
+                {{ categoryType.machine_name }}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <table>
+          <thead>
+            <tr>
+              <th>
+                Name
+              </th>
+              <th>
+                Description
+              </th>
+              <th>
+                Enable
+              </th>
+              <th v-if="can.edit || can.delete">Actions</th>
+            </tr>
+          </thead>
+
+          <tbody>
+            <template v-for="item in items">
+              <CategoryItemList :item="item" :categoryType="categoryType" :can="can" :level=0 />
+            </template>
+          </tbody>
+        </table>
+      </CardBox>
+    </SectionMain>
+  </LayoutAuthenticated>
+</template>
diff --git a/resources/js/Pages/Admin/Category/Type/Create.vue b/resources/js/Pages/Admin/Category/Type/Create.vue
new file mode 100644
index 0000000..f76b28b
--- /dev/null
+++ b/resources/js/Pages/Admin/Category/Type/Create.vue
@@ -0,0 +1,105 @@
+<script setup>
+import { Head, Link, useForm } from "@inertiajs/vue3"
+import {
+  mdiMenu,
+  mdiArrowLeftBoldOutline
+} from "@mdi/js"
+import LayoutAuthenticated from "@/Layouts/LayoutAuthenticated.vue"
+import SectionMain from "@/Components/SectionMain.vue"
+import SectionTitleLineWithButton from "@/Components/SectionTitleLineWithButton.vue"
+import CardBox from "@/Components/CardBox.vue"
+import FormField from '@/Components/FormField.vue'
+import FormControl from '@/Components/FormControl.vue'
+import BaseButton from '@/Components/BaseButton.vue'
+import BaseButtons from '@/Components/BaseButtons.vue'
+
+const form = useForm({
+  name: '',
+  machine_name: '',
+  description: ''
+
+})
+</script>
+
+<template>
+  <LayoutAuthenticated>
+    <Head title="Create Category Type" />
+    <SectionMain>
+      <SectionTitleLineWithButton
+        :icon="mdiMenu"
+        title="Add Category Type"
+        main
+      >
+        <BaseButton
+          :route-name="route('category.type.index')"
+          :icon="mdiArrowLeftBoldOutline"
+          label="Back"
+          color="white"
+          rounded-full
+          small
+        />
+      </SectionTitleLineWithButton>
+      <CardBox
+        form
+        @submit.prevent="form.post(route('category.type.store'))"
+      >
+        <FormField
+          label="Name"
+          :class="{ 'text-red-400': form.errors.name }"
+        >
+          <FormControl
+            v-model="form.name"
+            type="text"
+            placeholder="Enter Name"
+            :error="form.errors.name"
+          >
+            <div class="text-red-400 text-sm" v-if="form.errors.name">
+              {{ form.errors.name }}
+            </div>
+          </FormControl>
+        </FormField>
+        <FormField
+          label="Machine Name"
+          :class="{ 'text-red-400': form.errors.machine_name }"
+        >
+          <FormControl
+            v-model="form.machine_name"
+            type="text"
+            placeholder="Enter Machine Name"
+            :error="form.errors.name"
+          >
+            <div class="text-red-400 text-sm" v-if="form.errors.machine_name">
+              {{ form.errors.machine_name }}
+            </div>
+          </FormControl>
+        </FormField>
+        <FormField
+          label="Description"
+          :class="{ 'text-red-400': form.errors.description }"
+        >
+          <FormControl
+            v-model="form.description"
+            type="text"
+            placeholder="Enter Description"
+            :error="form.errors.description"
+          >
+            <div class="text-red-400 text-sm" v-if="form.errors.description">
+              {{ form.errors.description }}
+            </div>
+          </FormControl>
+        </FormField>
+        <template #footer>
+          <BaseButtons>
+            <BaseButton
+              type="submit"
+              color="info"
+              label="Submit"
+              :class="{ 'opacity-25': form.processing }"
+              :disabled="form.processing"
+            />
+          </BaseButtons>
+        </template>
+      </CardBox>
+    </SectionMain>
+  </LayoutAuthenticated>
+</template>
diff --git a/resources/js/Pages/Admin/Category/Type/Edit.vue b/resources/js/Pages/Admin/Category/Type/Edit.vue
new file mode 100644
index 0000000..d340b69
--- /dev/null
+++ b/resources/js/Pages/Admin/Category/Type/Edit.vue
@@ -0,0 +1,101 @@
+<script setup>
+import { Head, Link, useForm } from "@inertiajs/vue3"
+import {
+  mdiMenu,
+  mdiArrowLeftBoldOutline
+} from "@mdi/js"
+import LayoutAuthenticated from "@/Layouts/LayoutAuthenticated.vue"
+import SectionMain from "@/Components/SectionMain.vue"
+import SectionTitleLineWithButton from "@/Components/SectionTitleLineWithButton.vue"
+import CardBox from "@/Components/CardBox.vue"
+import FormField from '@/Components/FormField.vue'
+import FormControl from '@/Components/FormControl.vue'
+import BaseButton from '@/Components/BaseButton.vue'
+import BaseButtons from '@/Components/BaseButtons.vue'
+
+const props = defineProps({
+  categoryType: {
+    type: Object,
+    default: () => ({}),
+  },
+})
+
+const form = useForm({
+  _method: 'put',
+  name: props.categoryType.name,
+  description: props.categoryType.description
+})
+</script>
+
+<template>
+  <LayoutAuthenticated>
+    <Head title="Update Category Type" />
+    <SectionMain>
+      <SectionTitleLineWithButton
+        :icon="mdiMenu"
+        title="Update Category Type"
+        main
+      >
+        <BaseButton
+          :route-name="route('category.type.index')"
+          :icon="mdiArrowLeftBoldOutline"
+          label="Back"
+          color="white"
+          rounded-full
+          small
+        />
+      </SectionTitleLineWithButton>
+      <CardBox
+        form
+        @submit.prevent="form.post(route('category.type.update', props.categoryType.id))"
+      >
+        <FormField
+          label="Name"
+          :class="{ 'text-red-400': form.errors.name }"
+        >
+          <FormControl
+            v-model="form.name"
+            type="text"
+            placeholder="Enter Name"
+            :error="form.errors.name"
+          >
+            <div class="text-red-400 text-sm" v-if="form.errors.name">
+              {{ form.errors.name }}
+            </div>
+          </FormControl>
+        </FormField>
+        <FormField
+          label="Machine Name"
+        >
+        <div>{{ props.categoryType.machine_name }}</div>
+        </FormField>
+        <FormField
+          label="Description"
+          :class="{ 'text-red-400': form.errors.description }"
+        >
+          <FormControl
+            v-model="form.description"
+            type="text"
+            placeholder="Enter Description"
+            :error="form.errors.description"
+          >
+            <div class="text-red-400 text-sm" v-if="form.errors.description">
+              {{ form.errors.description }}
+            </div>
+          </FormControl>
+        </FormField>
+        <template #footer>
+          <BaseButtons>
+            <BaseButton
+              type="submit"
+              color="info"
+              label="Submit"
+              :class="{ 'opacity-25': form.processing }"
+              :disabled="form.processing"
+            />
+          </BaseButtons>
+        </template>
+      </CardBox>
+    </SectionMain>
+  </LayoutAuthenticated>
+</template>
diff --git a/resources/js/Pages/Admin/Category/Type/Index.vue b/resources/js/Pages/Admin/Category/Type/Index.vue
new file mode 100644
index 0000000..ed06581
--- /dev/null
+++ b/resources/js/Pages/Admin/Category/Type/Index.vue
@@ -0,0 +1,163 @@
+<script setup>
+import { Head, Link, useForm } from "@inertiajs/vue3"
+import {
+  mdiMenu,
+  mdiPlus,
+  mdiCogOutline,
+  mdiSquareEditOutline,
+  mdiTrashCan,
+  mdiAlertBoxOutline,
+} from "@mdi/js"
+import LayoutAuthenticated from "@/Layouts/LayoutAuthenticated.vue"
+import SectionMain from "@/Components/SectionMain.vue"
+import SectionTitleLineWithButton from "@/Components/SectionTitleLineWithButton.vue"
+import BaseButton from "@/Components/BaseButton.vue"
+import CardBox from "@/Components/CardBox.vue"
+import BaseButtons from "@/Components/BaseButtons.vue"
+import NotificationBar from "@/Components/NotificationBar.vue"
+import Pagination from "@/Components/Admin/Pagination.vue"
+import Sort from "@/Components/Admin/Sort.vue"
+
+const props = defineProps({
+  categoryTypes: {
+    type: Object,
+    default: () => ({}),
+  },
+  filters: {
+    type: Object,
+    default: () => ({}),
+  },
+  can: {
+    type: Object,
+    default: () => ({}),
+  },
+})
+
+const form = useForm({
+  search: props.filters.search,
+})
+
+const formDelete = useForm({})
+
+function destroy(id) {
+  if (confirm("Are you sure you want to delete?")) {
+    formDelete.delete(route("category.type.destroy", id))
+  }
+}
+</script>
+
+<template>
+  <LayoutAuthenticated>
+    <Head title="category Types" />
+    <SectionMain>
+      <SectionTitleLineWithButton
+        :icon="mdiMenu"
+        title="Category Types"
+        main
+      >
+        <BaseButton
+          v-if="can.delete"
+          :route-name="route('category.type.create')"
+          :icon="mdiPlus"
+          label="Add"
+          color="info"
+          rounded-full
+          small
+        />
+      </SectionTitleLineWithButton>
+      <NotificationBar
+        :key="Date.now()"
+        v-if="$page.props.flash.message"
+        color="success"
+        :icon="mdiAlertBoxOutline"
+      >
+        {{ $page.props.flash.message }}
+      </NotificationBar>
+      <CardBox class="mb-6" has-table>
+        <form @submit.prevent="form.get(route('category.type.index'))">
+          <div class="py-2 flex">
+            <div class="flex pl-4">
+              <input
+                type="search"
+                v-model="form.search"
+                class="
+                  rounded-md
+                  shadow-sm
+                  border-gray-300
+                  focus:border-indigo-300
+                  focus:ring
+                  focus:ring-indigo-200
+                  focus:ring-opacity-50
+                "
+                placeholder="Search"
+              />
+              <BaseButton
+                label="Search"
+                type="submit"
+                color="info"
+                class="ml-4 inline-flex items-center px-4 py-2"
+              />
+            </div>
+          </div>
+        </form>
+      </CardBox>
+      <CardBox class="mb-6" has-table>
+        <table>
+          <thead>
+            <tr>
+              <th>
+                <Sort label="Name" attribute="name" />
+              </th>
+              <th>
+                Description
+              </th>
+              <th v-if="can.edit || can.delete || can.manage">Actions</th>
+            </tr>
+          </thead>
+
+          <tbody>
+            <tr v-for="categoryType in categoryTypes.data" :key="categoryType.id">
+              <td data-label="Name">
+                  {{ categoryType.name }}
+              </td>
+               <td data-label="Description">
+                  {{ categoryType.description }}
+              </td>
+              <td
+                v-if="can.edit || can.delete || can.manage"
+                class="before:hidden lg:w-1 whitespace-nowrap"
+              >
+                <BaseButtons type="justify-start lg:justify-end" no-wrap>
+                  <BaseButton
+                    v-if="can.manage"
+                    :route-name="route('category.type.item.index', categoryType.id)"
+                    color="warning"
+                    :icon="mdiCogOutline "
+                    small
+                  />
+                  <BaseButton
+                    v-if="can.edit"
+                    :route-name="route('category.type.edit', categoryType.id)"
+                    color="info"
+                    :icon="mdiSquareEditOutline"
+                    small
+                  />
+                  <BaseButton
+                    v-if="can.delete"
+                    color="danger"
+                    :icon="mdiTrashCan"
+                    small
+                    @click="destroy(categoryType.id)"
+                  />
+                </BaseButtons>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <div class="py-4">
+          <Pagination :data="categoryTypes" />
+        </div>
+      </CardBox>
+    </SectionMain>
+  </LayoutAuthenticated>
+</template>
diff --git a/routes/admin.php b/routes/admin.php
index 0a54196..b6de05d 100644
--- a/routes/admin.php
+++ b/routes/admin.php
@@ -12,6 +12,15 @@
         'show'
     ]);
     Route::resource('menu.item', 'MenuItemController');
+    Route::group([
+        'prefix' => 'category',
+        "as"=>"category."
+    ], function () {
+        Route::resource('type', 'CategoryTypeController')->except([
+            'show'
+        ]);
+        Route::resource('type.item', 'CategoryController');
+    });
     Route::get('edit-account-info', 'UserController@accountInfo')->name('admin.account.info');
     Route::post('edit-account-info', 'UserController@accountInfoStore')->name('admin.account.info.store');
     Route::post('change-password', 'UserController@changePasswordStore')->name('admin.account.password.store');