diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index a1c65a1..a905d84 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -45,8 +45,9 @@ export const routes: Routes = [
       ),
   },
   {
-    path: 'catalog/:sub',
-    loadComponent: () => import('./features/placeholder').then((m) => m.PlaceholderPageComponent),
+    path: 'catalog/categories',
+    loadComponent: () =>
+      import('./features/catalog/categories/categories').then((m) => m.CategoriesPageComponent),
   },
   {
     path: 'compatibility/:sub',
diff --git a/src/app/core/models/catetories/categories-default-query.ts b/src/app/core/models/catetories/categories-default-query.ts
new file mode 100644
index 0000000..5c421cf
--- /dev/null
+++ b/src/app/core/models/catetories/categories-default-query.ts
@@ -0,0 +1,7 @@
+export interface CategoryDefaultQuery {
+  page: number | null;
+  name: string | null;
+  active: boolean | null;
+  per_page: number | null;
+  parent_id: string | null;
+}
diff --git a/src/app/core/models/catetories/categories.model.ts b/src/app/core/models/catetories/categories.model.ts
index d37f33c..8258248 100644
--- a/src/app/core/models/catetories/categories.model.ts
+++ b/src/app/core/models/catetories/categories.model.ts
@@ -1,13 +1,50 @@
-export interface CategoryResponse {
+// export interface CategoryResponse {
+//   id: string;
+//   parent_id: null;
+//   name: string;
+//   slug: string;
+//   description: string;
+//   display_order: number;
+//   icon: string;
+//   image: string;
+//   active: boolean;
+//   created_at: string;
+//   updated_at: string;
+// }
+
+export interface CategoryResponse extends Record<string, unknown> {
   id: string;
-  parent_id: null;
+  parent_id: string | null;
   name: string;
   slug: string;
-  description: string;
+  description: string | null;
   display_order: number;
-  icon: string;
-  image: string;
+  icon: string | null;
+  image: string | null;
   active: boolean;
   created_at: string;
   updated_at: string;
+  parent_name?: string;
+}
+
+export interface CreateCategoryPayload {
+  parent_id?: string | null;
+  name: string;
+  slug: string;
+  description?: string | null;
+  display_order?: number;
+  icon?: string | null;
+  image?: string | null;
+  active?: boolean;
+}
+
+export interface UpdateCategoryPayload {
+  parent_id?: string | null;
+  name?: string;
+  slug?: string;
+  description?: string | null;
+  display_order?: number;
+  icon?: string | null;
+  image?: string | null;
+  active?: boolean;
 }
diff --git a/src/app/core/models/catetories/category-options.model.ts b/src/app/core/models/catetories/category-options.model.ts
index daf447c..24b8ded 100644
--- a/src/app/core/models/catetories/category-options.model.ts
+++ b/src/app/core/models/catetories/category-options.model.ts
@@ -2,5 +2,6 @@ import { GeneralOption } from '../generals/general-options-response.model';
 
 export interface CategoryOption extends GeneralOption {
   icon: string;
+  is_parent: boolean;
   description: string;
 }
diff --git a/src/app/core/models/design-system/auto-complete.model.ts b/src/app/core/models/design-system/auto-complete.model.ts
index eca1f62..c3e90e1 100644
--- a/src/app/core/models/design-system/auto-complete.model.ts
+++ b/src/app/core/models/design-system/auto-complete.model.ts
@@ -3,5 +3,6 @@ import { GeneralOption } from '../generals/general-options-response.model';
 export interface AutocompleteOption extends GeneralOption {
   icon: string;
   disabled: boolean;
+  is_parent: boolean;
   description: string;
 }
diff --git a/src/app/core/models/generals/general-delete-response.ts b/src/app/core/models/generals/general-delete-response.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/core/models/list-table/list-table.model.ts b/src/app/core/models/list-table/list-table.model.ts
index c77884f..2ea95f8 100644
--- a/src/app/core/models/list-table/list-table.model.ts
+++ b/src/app/core/models/list-table/list-table.model.ts
@@ -28,7 +28,7 @@ export interface TableAction<T = Record<string, unknown>> {
   colorClass?: string;
   title?: string;
   visible?: (row: T) => boolean;
-  handler: (row: T) => void;
+  handler?: (row: T) => void;
 }
 
 export interface TablePaginationConfig {
diff --git a/src/app/core/services/category-service.ts b/src/app/core/services/category-service.ts
index e92dac4..f83db67 100644
--- a/src/app/core/services/category-service.ts
+++ b/src/app/core/services/category-service.ts
@@ -2,11 +2,16 @@ import { HttpClient } from '@angular/common/http';
 import { inject, Injectable } from '@angular/core';
 import { PaginatedResponse } from '../models/pagination/pagination.model';
 import { environment } from '../../../environments/environment';
-import { CategoryResponse } from '../models/catetories/categories.model';
+import {
+  CategoryResponse,
+  CreateCategoryPayload,
+  UpdateCategoryPayload,
+} from '../models/catetories/categories.model';
 import { buildHttpParams } from './build-http-params';
 import { CategoryOption } from '../models/catetories/category-options.model';
 import { GeneralOptionQuery } from '../models/generals/general-option-query.model';
 import { getAllResponse } from '../models/generals/general-responses-list.model';
+import { CategoryDefaultQuery } from '../models/catetories/categories-default-query';
 
 @Injectable({
   providedIn: 'root',
@@ -16,8 +21,11 @@ export class CategoryService {
   private api = environment.apiUrl;
   private flag = 'category';
 
-  getAll() {
-    return this.http.get<PaginatedResponse<CategoryResponse>>(`${this.api}/${this.flag}`);
+  getAll(filters: CategoryDefaultQuery) {
+    const params = buildHttpParams(filters);
+    return this.http.get<PaginatedResponse<CategoryResponse>>(`${this.api}/${this.flag}`, {
+      params,
+    });
   }
 
   getOptions(filters: GeneralOptionQuery) {
@@ -31,15 +39,15 @@ export class CategoryService {
     return this.http.get<CategoryResponse>(`${this.api}/${this.flag}/${id}`);
   }
 
-  create(data: FormData) {
-    return this.http.post<CategoryResponse>(`${this.api}/${this.flag}`, data);
+  create(data: CreateCategoryPayload) {
+    return this.http.post<getAllResponse<CategoryResponse>>(`${this.api}/${this.flag}`, data);
   }
 
-  update(id: string, data: FormData) {
-    return this.http.post<CategoryResponse>(`${this.api}/${this.flag}/${id}`, data);
+  update(id: string, data: UpdateCategoryPayload) {
+    return this.http.put<getAllResponse<CategoryResponse>>(`${this.api}/${this.flag}/${id}`, data);
   }
 
   delete(id: string) {
-    return this.http.delete<void>(`${this.api}/${this.flag}/${id}`);
+    return this.http.delete<getAllResponse<CategoryResponse>>(`${this.api}/${this.flag}/${id}`);
   }
 }
diff --git a/src/app/core/store/manufacturer-store/manufacturer-store.ts b/src/app/core/store/manufacturer-store/manufacturer-store.ts
index 5811883..af6d7c7 100644
--- a/src/app/core/store/manufacturer-store/manufacturer-store.ts
+++ b/src/app/core/store/manufacturer-store/manufacturer-store.ts
@@ -31,6 +31,7 @@ export class ManufacturerStore extends OptionCacheStore<
           icon: 'chevrons-right',
           hasSubOptions: true,
           description: option.sublabel,
+          is_parent: false,
         })),
       })),
     );
diff --git a/src/app/design-system/data-table/data-table.ts b/src/app/design-system/data-table/data-table.ts
index 2607101..d9e0ee2 100644
--- a/src/app/design-system/data-table/data-table.ts
+++ b/src/app/design-system/data-table/data-table.ts
@@ -166,7 +166,7 @@ export class DataTableComponent<T extends Record<string, unknown>> {
 
   onActionClick(action: TableAction<T>, row: T, event: MouseEvent): void {
     event.stopPropagation();
-    if (action.id) {
+    if (action.handler) {
       action.handler(row);
     }
     console.log('[ON ACTION CLICK]', action, action.id);
diff --git a/src/app/design-system/pagination/pagination.html b/src/app/design-system/pagination/pagination.html
index 2b8850a..3ae817b 100644
--- a/src/app/design-system/pagination/pagination.html
+++ b/src/app/design-system/pagination/pagination.html
@@ -27,7 +27,7 @@
           class="appearance-none pl-2.5 pr-7 py-1 bg-gray-50 dark:bg-slate-700/80 border border-gray-200 dark:border-slate-600 rounded-lg text-xs font-semibold text-gray-800 dark:text-slate-200 focus:outline-none focus:ring-2 focus:ring-[#4F8A6B]/30 hover:border-gray-300 dark:hover:border-slate-500 transition-all cursor-pointer"
           title="Itens por página"
         >
-          @for (opt of pageSizeOptions(); track opt) {
+          @for (opt of optionsSizes(); track opt) {
           <option [value]="opt" [selected]="opt === pageSize()">{{ opt }} por pág.</option>
           }
         </select>
@@ -46,7 +46,7 @@
     <!-- First Page Button -->
     <button
       type="button"
-      [disabled]="currentPage() <= 1"
+      [disabled]="pagination().current_page <= 1"
       (click)="goToPage(1)"
       class="p-1.5 rounded-lg border border-gray-200 dark:border-slate-700 hover:bg-gray-100 dark:hover:bg-slate-700 text-gray-600 dark:text-slate-300 disabled:opacity-35 disabled:cursor-not-allowed disabled:hover:bg-transparent transition-all"
       title="Primeira Página"
@@ -57,8 +57,8 @@
     <!-- Previous Page Button -->
     <button
       type="button"
-      [disabled]="currentPage() <= 1"
-      (click)="goToPage(currentPage() - 1)"
+      [disabled]="pagination().current_page <= 1"
+      (click)="goToPage(pagination().from || 0)"
       class="p-1.5 rounded-lg border border-gray-200 dark:border-slate-700 hover:bg-gray-100 dark:hover:bg-slate-700 text-gray-600 dark:text-slate-300 disabled:opacity-35 disabled:cursor-not-allowed disabled:hover:bg-transparent transition-all"
       title="Página Anterior"
     >
@@ -69,7 +69,7 @@
     <div
       class="sm:hidden px-3 py-1 bg-[#EAF4EE] dark:bg-slate-700 text-[#4F8A6B] dark:text-[#5BAE6A] font-semibold rounded-lg text-xs"
     >
-      {{ currentPage() }} / {{ totalPages() }}
+      {{ pagination().current_page }} / {{ pagination().total }}
     </div>
 
     <!-- Desktop Page Number Buttons -->
@@ -78,7 +78,7 @@
       <button
         type="button"
         (click)="goToPage(item.page!)"
-        [class]="item.page === currentPage()
+        [class]="item.page === pagination().current_page
               ? 'bg-[#4F8A6B] text-white font-bold border-[#4F8A6B] shadow-xs'
               : 'border border-gray-200 dark:border-slate-700 hover:bg-gray-100 dark:hover:bg-slate-700 text-gray-700 dark:text-slate-200 font-medium'"
         class="min-w-[32px] h-[32px] px-2 rounded-lg flex items-center justify-center text-xs transition-all cursor-pointer"
@@ -93,8 +93,8 @@
     <!-- Next Page Button -->
     <button
       type="button"
-      [disabled]="currentPage() >= totalPages()"
-      (click)="goToPage(currentPage() + 1)"
+      [disabled]="pagination().current_page >= pagination().last_page"
+      (click)="goToPage(pagination().current_page + 1)"
       class="p-1.5 rounded-lg border border-gray-200 dark:border-slate-700 hover:bg-gray-100 dark:hover:bg-slate-700 text-gray-600 dark:text-slate-300 disabled:opacity-35 disabled:cursor-not-allowed disabled:hover:bg-transparent transition-all"
       title="Próxima Página"
     >
@@ -104,8 +104,8 @@
     <!-- Last Page Button -->
     <button
       type="button"
-      [disabled]="currentPage() >= totalPages()"
-      (click)="goToPage(totalPages())"
+      [disabled]="pagination().current_page >= pagination().last_page"
+      (click)="goToPage(pagination().last_page)"
       class="p-1.5 rounded-lg border border-gray-200 dark:border-slate-700 hover:bg-gray-100 dark:hover:bg-slate-700 text-gray-600 dark:text-slate-300 disabled:opacity-35 disabled:cursor-not-allowed disabled:hover:bg-transparent transition-all"
       title="Última Página"
     >
@@ -113,7 +113,7 @@
     </button>
 
     <!-- Quick Jump to Page (Optional Input) -->
-    @if (totalPages() > 5) {
+    @if (pagination().last_page > 5) {
     <div
       class="hidden lg:flex items-center gap-1.5 ml-2 pl-2 border-l border-gray-200 dark:border-slate-700"
     >
@@ -121,8 +121,8 @@
       <input
         type="number"
         min="1"
-        [max]="totalPages()"
-        [value]="currentPage()"
+        [max]="pagination().last_page"
+        [value]="pagination().current_page"
         (keydown.enter)="onDirectJump($event)"
         (blur)="onDirectJump($event)"
         class="w-11 px-1.5 py-1 text-center bg-gray-50 dark:bg-slate-700/80 border border-gray-200 dark:border-slate-600 rounded-lg text-xs font-medium text-gray-800 dark:text-slate-200 focus:outline-none focus:ring-1 focus:ring-[#4F8A6B]"
diff --git a/src/app/design-system/pagination/pagination.ts b/src/app/design-system/pagination/pagination.ts
index 6adc295..06922f7 100644
--- a/src/app/design-system/pagination/pagination.ts
+++ b/src/app/design-system/pagination/pagination.ts
@@ -1,5 +1,7 @@
-import { Component, ChangeDetectionStrategy, input, output, computed } from '@angular/core';
+import { Component, ChangeDetectionStrategy, input, output, computed, signal } from '@angular/core';
 import { AppIconComponent } from '../icon/app-icon';
+import { PaginationMeta } from '../../core/models/pagination/pagination.model';
+import { initialValuesPagination } from './utils/initial-values';
 
 export interface PageItem {
   type: 'page' | 'ellipsis';
@@ -15,44 +17,53 @@ export interface PageItem {
   styleUrl: './pagination.css',
 })
 export class PaginationComponent {
-  readonly currentPage = input<number>(1);
-  readonly pageSize = input<number>(10);
-  readonly totalItems = input<number>(0);
   readonly pageSizeOptions = input<number[]>([10, 25, 50, 100]);
   readonly showPageSize = input<boolean>(true);
   readonly showItemRange = input<boolean>(true);
+  readonly pagination = input<PaginationMeta>(initialValuesPagination);
+  readonly optionsSizes = signal<number[]>([5, 10, 25, 50, 100]);
+
+  // Evento Unificado para o Pai
+  readonly paginationChange = output<PaginationMeta>();
+
+  //remover depois
+  readonly currentPage = input<number>();
+  readonly totalItems = input<number>();
 
   readonly pageChange = output<number>();
   readonly pageSizeChange = output<number>();
 
   readonly totalPages = computed(() => {
-    return Math.max(1, Math.ceil(this.totalItems() / this.pageSize()));
+    return this.pagination().last_page;
+  });
+
+  readonly pageSize = computed(() => {
+    return this.pagination().per_page;
   });
 
   readonly startItem = computed(() => {
-    if (this.totalItems() === 0) return 0;
-    return (this.currentPage() - 1) * this.pageSize() + 1;
+    return this.pagination().from;
   });
 
   readonly endItem = computed(() => {
-    return Math.min(this.currentPage() * this.pageSize(), this.totalItems());
+    return this.pagination().to;
   });
 
   readonly startItemFormatted = computed(() => {
-    return this.startItem().toLocaleString('pt-BR');
+    return this.startItem()?.toLocaleString('pt-BR');
   });
 
   readonly endItemFormatted = computed(() => {
-    return this.endItem().toLocaleString('pt-BR');
+    return this.endItem()?.toLocaleString('pt-BR');
   });
 
   readonly totalItemsFormatted = computed(() => {
-    return this.totalItems().toLocaleString('pt-BR');
+    return this.pagination().total.toLocaleString('pt-BR');
   });
 
   readonly visiblePages = computed<PageItem[]>(() => {
     const total = this.totalPages();
-    const current = this.currentPage();
+    const current = this.pagination().current_page;
 
     if (total <= 7) {
       const items: PageItem[] = [];
@@ -90,15 +101,37 @@ export class PaginationComponent {
   });
 
   goToPage(page: number): void {
-    if (page >= 1 && page <= this.totalPages() && page !== this.currentPage()) {
-      this.pageChange.emit(page);
-    }
+    const currentMeta = this.pagination();
+
+    // Evita ir para páginas inválidas ou para a página atual
+    if (page < 1 || page > this.totalPages() || page === currentMeta.current_page) return;
+
+    // Emite o evento individual simples
+    this.pageChange.emit(page);
+
+    // Emite o objeto PaginationMeta atualizado mantendo per_page
+    this.paginationChange.emit({
+      ...currentMeta,
+      current_page: page,
+    });
   }
 
   onPageSizeChange(event: Event): void {
     const size = parseInt((event.target as HTMLSelectElement).value, 10);
-    if (!isNaN(size)) {
+    const currentMeta = this.pagination();
+
+    if (!isNaN(size) && size !== currentMeta.per_page) {
       this.pageSizeChange.emit(size);
+
+      if (currentMeta.current_page !== 1) {
+        this.pageChange.emit(1);
+      }
+
+      this.paginationChange.emit({
+        ...currentMeta,
+        current_page: 1,
+        per_page: size,
+      });
     }
   }
 
@@ -108,7 +141,7 @@ export class PaginationComponent {
     if (!isNaN(val) && val >= 1 && val <= this.totalPages()) {
       this.goToPage(val);
     } else {
-      inputEl.value = this.currentPage().toString();
+      inputEl.value = this.pagination().current_page.toString();
     }
   }
 }
diff --git a/src/app/design-system/pagination/utils/initial-values.ts b/src/app/design-system/pagination/utils/initial-values.ts
new file mode 100644
index 0000000..76b872a
--- /dev/null
+++ b/src/app/design-system/pagination/utils/initial-values.ts
@@ -0,0 +1,10 @@
+export const initialValuesPagination = {
+  current_page: 0,
+  from: 0,
+  last_page: 0,
+  links: [],
+  path: '',
+  per_page: 0,
+  to: 0,
+  total: 0,
+};
diff --git a/src/app/features/catalog/categories/categories.html b/src/app/features/catalog/categories/categories.html
index 023dc9e..05bddbe 100644
--- a/src/app/features/catalog/categories/categories.html
+++ b/src/app/features/catalog/categories/categories.html
@@ -42,20 +42,14 @@
 <div class="w-full">
   <app-data-table
     [columns]="columns"
-    [data]="paginatedCategories()"
+    [data]="allCategories()"
     [actions]="actions"
     [loading]="loading()"
     [roundedBottom]="false"
+    (actionClick)="onActionClick($event)"
   />
 
-  <app-pagination
-    [currentPage]="currentPage()"
-    [pageSize]="pageSize()"
-    [totalItems]="filteredCategories().length"
-    [pageSizeOptions]="[5, 10, 25, 50]"
-    (pageChange)="onPageChange($event)"
-    (pageSizeChange)="onPageSizeChange($event)"
-  />
+  <app-pagination [pagination]="pagination()" (paginationChange)="onPaginationChange($event)" />
 </div>
 
 <!-- Delete Confirmation Dialog -->
@@ -74,6 +68,7 @@
 <app-category-form
   [isOpen]="isFormOpen()"
   [mode]="formMode()"
+  [totalItens]="pagination().total"
   [category]="selectedCategory()"
   [categoriesList]="allCategories()"
   (closeForm)="closeForm()"
diff --git a/src/app/features/catalog/categories/categories.ts b/src/app/features/catalog/categories/categories.ts
index b69ce7e..8aac353 100644
--- a/src/app/features/catalog/categories/categories.ts
+++ b/src/app/features/catalog/categories/categories.ts
@@ -20,6 +20,10 @@ import { ToastService } from '../../../core/services/toast';
 import { CategoryService } from '../../../core/services/category-service';
 import { CategoryResponse } from '../../../core/models/catetories/categories.model';
 import { TableAction, TableColumn } from '../../../core/models/list-table/list-table.model';
+import { categoryTableActions, categoryTableColumns } from '../../../utils/category-table-collums';
+import { CategoryDefaultQuery } from '../../../core/models/catetories/categories-default-query';
+import { PaginationMeta } from '../../../core/models/pagination/pagination.model';
+import { initialValuesPagination } from '../../../design-system/pagination/utils/initial-values';
 
 @Component({
   selector: 'app-categories-page',
@@ -44,12 +48,12 @@ export class CategoriesPageComponent implements OnInit {
   private toastService = inject(ToastService);
   private readonly categoryService = inject(CategoryService);
 
+  private readonly perPage = signal<number>(25);
+  private readonly currentPage = signal<number>(1);
+
   readonly loading = signal<boolean>(false);
   readonly searchQuery = signal<string>('');
   readonly selectedStatus = signal<string>('');
-  readonly currentPage = signal<number>(1);
-  readonly pageSize = signal<number>(10);
-  readonly totalItems = signal<number>(0);
 
   // Category Form Drawer State
   readonly isFormOpen = signal<boolean>(false);
@@ -57,11 +61,12 @@ export class CategoriesPageComponent implements OnInit {
   readonly selectedCategory = signal<CategoryResponse | null>(null);
 
   // Delete Dialog State
+  readonly isDeleting = signal<boolean>(false);
   readonly deleteDialogOpen = signal<boolean>(false);
   readonly selectedCategoryForDelete = signal<CategoryResponse | null>(null);
-  readonly isDeleting = signal<boolean>(false);
 
   readonly allCategories = signal<CategoryResponse[]>([]);
+  readonly pagination = signal<PaginationMeta>(initialValuesPagination);
 
   // Helper map to lookup category names by id for parent resolution
   readonly categoryMap = computed(() => {
@@ -72,91 +77,29 @@ export class CategoriesPageComponent implements OnInit {
     return map;
   });
 
-  readonly columns: TableColumn<CategoryResponse>[] = [
-    {
-      key: 'icon',
-      header: 'Ícone',
-      width: '70px',
-      align: 'center',
-      type: 'icon',
-      iconGetter: (c) => c.icon || 'folder',
-    },
-    { key: 'name', header: 'Nome da Categoria' },
-    {
-      key: 'parent_id',
-      header: 'Categoria Pai',
-      width: '180px',
-      valueGetter: (c) => {
-        if (!c.parent_id) return 'Categoria Raiz';
-        return this.categoryMap().get(c.parent_id) || 'Categoria Pai';
-      },
-    },
-    { key: 'slug', header: 'Slug / URL', width: '160px' },
-    { key: 'display_order', header: 'Ordem', width: '80px', align: 'center' },
-    {
-      key: 'active',
-      header: 'Status',
-      width: '120px',
-      align: 'center',
-      type: 'badge',
-      badgeConfig: (c) => ({
-        text: c.active ? 'Ativo' : 'Inativo',
-        variant: c.active ? 'success' : 'neutral',
-      }),
-    },
-    {
-      key: 'created_at',
-      header: 'Criado em',
-      width: '120px',
-      align: 'center',
-      type: 'date',
-    },
-  ];
+  readonly columns: TableColumn<CategoryResponse>[] = categoryTableColumns;
+  readonly actions: TableAction<CategoryResponse>[] = categoryTableActions;
 
-  readonly actions: TableAction<CategoryResponse>[] = [
-    {
-      id: 'view',
-      label: 'Visualizar',
-      icon: 'eye',
-      colorClass: 'text-gray-400 hover:text-[#5A8DEE] hover:bg-gray-100 dark:hover:bg-slate-700',
-      title: 'Visualizar Detalhes',
-      handler: (c) => this.viewCategory(c),
-    },
-    {
-      id: 'edit',
-      label: 'Editar',
-      icon: 'edit',
-      colorClass: 'text-gray-400 hover:text-[#4F8A6B] hover:bg-gray-100 dark:hover:bg-slate-700',
-      title: 'Editar Categoria',
-      handler: (c) => this.editCategory(c),
-    },
-    {
-      id: 'delete',
-      label: 'Excluir',
-      icon: 'trash-2',
-      colorClass: 'text-gray-400 hover:text-[#D66A6A] hover:bg-gray-100 dark:hover:bg-slate-700',
-      title: 'Excluir Categoria',
-      handler: (c) => this.confirmDelete(c),
-    },
-  ];
+  readonly totalItens = signal<number>(0);
+  query: CategoryDefaultQuery = {
+    name: null,
+    active: null,
+    parent_id: null,
+    page: this.currentPage(),
+    per_page: this.perPage(),
+  };
 
   ngOnInit(): void {
-    this.getPaginationAllCategories();
+    this.getPaginationAllCategories(this.query);
   }
 
-  getPaginationAllCategories(): void {
+  getPaginationAllCategories(filters: CategoryDefaultQuery): void {
     this.loading.set(true);
-    this.categoryService.getAll().subscribe({
+    this.categoryService.getAll(filters).subscribe({
       next: (response) => {
         this.allCategories.set(response.data);
-        if (response.meta) {
-          this.totalItems.set(response.meta.total);
-          this.currentPage.set(response.meta.current_page);
-          this.pageSize.set(response.meta.per_page);
-        } else {
-          this.totalItems.set(response.data.length);
-        }
         this.loading.set(false);
+        this.pagination.set(response.meta);
       },
       error: (error) => {
         this.loading.set(false);
@@ -183,37 +126,52 @@ export class CategoriesPageComponent implements OnInit {
     });
   });
 
-  readonly paginatedCategories = computed(() => {
-    const all = this.filteredCategories();
-    const page = this.currentPage();
-    const size = this.pageSize();
-    const start = (page - 1) * size;
-    return all.slice(start, start + size);
-  });
-
   onSearchChange(query: string): void {
+    this.query = { ...this.query, name: query };
     this.searchQuery.set(query);
-    this.currentPage.set(1);
+    this.getPaginationAllCategories(this.query);
   }
 
   onStatusChange(status: string): void {
+    this.query = { ...this.query, active: status === 'active' };
     this.selectedStatus.set(status);
-    this.currentPage.set(1);
+    this.getPaginationAllCategories(this.query);
   }
 
-  onPageChange(page: number): void {
-    this.currentPage.set(page);
+  onPaginationChange(meta: PaginationMeta): void {
+    this.pagination.set(meta);
+    this.query = {
+      ...this.query,
+      page: meta.current_page,
+      per_page: meta.per_page,
+    };
+    this.getPaginationAllCategories(this.query);
   }
 
-  onPageSizeChange(size: number): void {
-    this.pageSize.set(size);
-    this.currentPage.set(1);
+  onActionClick(event: { actionId: string; row: CategoryResponse }): void {
+    switch (event.actionId) {
+      case 'view':
+        this.viewCategory(event.row);
+        break;
+      case 'edit':
+        this.editCategory(event.row);
+        break;
+      case 'delete':
+        this.confirmDelete(event.row);
+        break;
+    }
   }
 
   resetFilters(): void {
     this.searchQuery.set('');
     this.selectedStatus.set('');
-    this.currentPage.set(1);
+    this.query = {
+      name: null,
+      active: null,
+      parent_id: null,
+      page: this.currentPage(),
+      per_page: this.perPage(),
+    };
     this.toastService.info('Filtros limpos', 'Todos os parâmetros de busca foram resetados.');
   }
 
@@ -241,7 +199,7 @@ export class CategoriesPageComponent implements OnInit {
   }
 
   onCategorySaved(): void {
-    this.getPaginationAllCategories();
+    this.getPaginationAllCategories(this.query);
   }
 
   confirmDelete(cat: CategoryResponse): void {
@@ -255,12 +213,12 @@ export class CategoriesPageComponent implements OnInit {
 
     this.isDeleting.set(true);
     this.categoryService.delete(cat.id).subscribe({
-      next: () => {
+      next: (response) => {
         this.isDeleting.set(false);
         this.deleteDialogOpen.set(false);
-        this.allCategories.update((list) => list.filter((c) => c.id !== cat.id));
+        this.getPaginationAllCategories(this.query);
         this.toastService.success(
-          'Categoria Excluída',
+          response.message,
           `A categoria "${cat.name}" foi removida com sucesso.`,
         );
       },
diff --git a/src/app/features/catalog/categories/category-form/category-form.html b/src/app/features/catalog/categories/category-form/category-form.html
index 0bad9d0..c1b92ef 100644
--- a/src/app/features/catalog/categories/category-form/category-form.html
+++ b/src/app/features/catalog/categories/category-form/category-form.html
@@ -7,11 +7,14 @@
 >
   <!-- Main Form Body -->
   <form (submit)="$event.preventDefault(); onSubmit()" class="space-y-6 pb-4">
-
     <!-- Header Badge & Quick Context -->
-    <div class="flex items-center justify-between p-3.5 rounded-xl bg-slate-50 dark:bg-slate-900/60 border border-gray-100 dark:border-slate-700/80">
+    <div
+      class="flex items-center justify-between p-3.5 rounded-xl bg-slate-50 dark:bg-slate-900/60 border border-gray-100 dark:border-slate-700/80"
+    >
       <div class="flex items-center gap-2.5">
-        <div class="w-9 h-9 rounded-lg bg-emerald-100 dark:bg-[#4F8A6B]/20 text-[#4F8A6B] dark:text-[#5BAE6A] flex items-center justify-center font-bold">
+        <div
+          class="w-9 h-9 rounded-lg bg-emerald-100 dark:bg-[#4F8A6B]/20 text-[#4F8A6B] dark:text-[#5BAE6A] flex items-center justify-center font-bold"
+        >
           <app-icon [name]="icon()" size="w-5 h-5" />
         </div>
         <div>
@@ -26,21 +29,27 @@
 
       <div>
         @if (active()) {
-          <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-bold bg-emerald-100 text-emerald-800 dark:bg-emerald-950/60 dark:text-emerald-300 border border-emerald-200 dark:border-emerald-800/40">
-            <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
-            Ativo
-          </span>
+        <span
+          class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-bold bg-emerald-100 text-emerald-800 dark:bg-emerald-950/60 dark:text-emerald-300 border border-emerald-200 dark:border-emerald-800/40"
+        >
+          <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
+          Ativo
+        </span>
         } @else {
-          <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-600 dark:bg-slate-700 dark:text-slate-300">
-            <span class="w-1.5 h-1.5 rounded-full bg-gray-400"></span>
-            Inativo
-          </span>
+        <span
+          class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-600 dark:bg-slate-700 dark:text-slate-300"
+        >
+          <span class="w-1.5 h-1.5 rounded-full bg-gray-400"></span>
+          Inativo
+        </span>
         }
       </div>
     </div>
 
     <!-- SEÇÃO 1: Identificação Básica -->
-    <div class="bg-white dark:bg-slate-800/80 rounded-xl p-4 border border-gray-200/80 dark:border-slate-700/80 space-y-4">
+    <div
+      class="bg-white dark:bg-slate-800/80 rounded-xl p-4 border border-gray-200/80 dark:border-slate-700/80 space-y-4"
+    >
       <div class="flex items-center gap-2 pb-2 border-b border-gray-100 dark:border-slate-700/60">
         <app-icon name="tag" size="w-4 h-4" class="text-[#4F8A6B] dark:text-[#5BAE6A]" />
         <h4 class="text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-slate-300">
@@ -51,8 +60,12 @@ <h4 class="text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-sl
       <!-- Nome -->
       <div class="space-y-1.5">
         <div class="flex items-center justify-between">
-          <label for="category-name" class="text-xs font-semibold text-gray-800 dark:text-slate-200">
-            Nome da Categoria <span class="text-red-500">*</span>
+          <label
+            for="category-name"
+            class="text-xs font-semibold text-gray-800 dark:text-slate-200"
+          >
+            Nome da Categoria
+            <span class="text-red-500">*</span>
           </label>
           <span class="text-[10px] text-gray-400">{{ name().length }}/255</span>
         </div>
@@ -69,34 +82,40 @@ <h4 class="text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-sl
           class="w-full px-3.5 py-2 text-xs rounded-xl bg-white dark:bg-slate-900 border border-gray-200 dark:border-slate-700 text-gray-900 dark:text-slate-100 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#4F8A6B]/20 focus:border-[#4F8A6B] disabled:bg-gray-50 dark:disabled:bg-slate-800/60 disabled:cursor-not-allowed transition-colors"
         />
         @if (formErrors()['name']) {
-          <p class="text-[11px] text-red-500 font-medium flex items-center gap-1 mt-1">
-            <app-icon name="alert-circle" size="w-3.5 h-3.5" />
-            {{ formErrors()['name'] }}
-          </p>
+        <p class="text-[11px] text-red-500 font-medium flex items-center gap-1 mt-1">
+          <app-icon name="alert-circle" size="w-3.5 h-3.5" />
+          {{ formErrors()['name'] }}
+        </p>
         }
       </div>
 
       <!-- Slug -->
       <div class="space-y-1.5">
         <div class="flex items-center justify-between">
-          <label for="category-slug" class="text-xs font-semibold text-gray-800 dark:text-slate-200">
-            Slug / URL Amigável <span class="text-red-500">*</span>
+          <label
+            for="category-slug"
+            class="text-xs font-semibold text-gray-800 dark:text-slate-200"
+          >
+            Slug / URL Amigável
+            <span class="text-red-500">*</span>
           </label>
           @if (!isReadOnly()) {
-            <button
-              type="button"
-              (click)="toggleAutoSlug()"
-              class="text-[11px] font-medium inline-flex items-center gap-1 transition-colors"
-              [class]="isAutoSlug() ? 'text-[#4F8A6B] dark:text-[#5BAE6A]' : 'text-gray-400 hover:text-gray-600'"
-              title="Alternar sincronização automática com o nome"
-            >
-              <app-icon [name]="isAutoSlug() ? 'link-2' : 'unlink'" size="w-3 h-3" />
-              {{ isAutoSlug() ? 'Gerado automático' : 'Manual' }}
-            </button>
+          <button
+            type="button"
+            (click)="toggleAutoSlug()"
+            class="text-[11px] font-medium inline-flex items-center gap-1 transition-colors"
+            [class]="isAutoSlug() ? 'text-[#4F8A6B] dark:text-[#5BAE6A]' : 'text-gray-400 hover:text-gray-600'"
+            title="Alternar sincronização automática com o nome"
+          >
+            <app-icon [name]="isAutoSlug() ? 'link-2' : 'unlink'" size="w-3 h-3" />
+            {{ isAutoSlug() ? 'Gerado automático' : 'Manual' }}
+          </button>
           }
         </div>
         <div class="relative">
-          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400 text-xs font-mono">
+          <div
+            class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400 text-xs font-mono"
+          >
             /
           </div>
           <input
@@ -113,20 +132,23 @@ <h4 class="text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-sl
           />
         </div>
         @if (formErrors()['slug']) {
-          <p class="text-[11px] text-red-500 font-medium flex items-center gap-1 mt-1">
-            <app-icon name="alert-circle" size="w-3.5 h-3.5" />
-            {{ formErrors()['slug'] }}
-          </p>
+        <p class="text-[11px] text-red-500 font-medium flex items-center gap-1 mt-1">
+          <app-icon name="alert-circle" size="w-3.5 h-3.5" />
+          {{ formErrors()['slug'] }}
+        </p>
         } @else {
-          <p class="text-[10px] text-gray-400 dark:text-slate-500">
-            Usado para compor links permanentes e indexação (SEO). Apenas letras minúsculas, números e hífens.
-          </p>
+        <p class="text-[10px] text-gray-400 dark:text-slate-500">
+          Usado para compor links permanentes e indexação (SEO). Apenas letras minúsculas, números e
+          hífens.
+        </p>
         }
       </div>
     </div>
 
     <!-- SEÇÃO 2: Hierarquia & Ordenação -->
-    <div class="bg-white dark:bg-slate-800/80 rounded-xl p-4 border border-gray-200/80 dark:border-slate-700/80 space-y-4">
+    <div
+      class="bg-white dark:bg-slate-800/80 rounded-xl p-4 border border-gray-200/80 dark:border-slate-700/80 space-y-4"
+    >
       <div class="flex items-center gap-2 pb-2 border-b border-gray-100 dark:border-slate-700/60">
         <app-icon name="layers" size="w-4 h-4" class="text-[#5A8DEE]" />
         <h4 class="text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-slate-300">
@@ -137,7 +159,10 @@ <h4 class="text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-sl
       <div class="grid grid-cols-1 sm:grid-cols-3 gap-3.5">
         <!-- Categoria Pai (parent_id) -->
         <div class="sm:col-span-2 space-y-1.5">
-          <label for="category-parent" class="text-xs font-semibold text-gray-800 dark:text-slate-200">
+          <label
+            for="category-parent"
+            class="text-xs font-semibold text-gray-800 dark:text-slate-200"
+          >
             Categoria Superior / Pai
           </label>
           <div class="relative">
@@ -148,14 +173,16 @@ <h4 class="text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-sl
               (change)="onParentChange($event)"
               class="w-full pl-3 pr-8 py-2 text-xs rounded-xl bg-white dark:bg-slate-900 border border-gray-200 dark:border-slate-700 text-gray-900 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-[#4F8A6B]/20 focus:border-[#4F8A6B] disabled:bg-gray-50 dark:disabled:bg-slate-800/60 disabled:cursor-not-allowed transition-colors appearance-none cursor-pointer"
             >
-              <option value="">(Nenhuma - Categoria Principal / Raiz)</option>
-              @for (pCat of parentCategoryOptions(); track pCat.id) {
-                <option [value]="pCat.id">
-                  {{ pCat.parent_id ? '↳ ' : '• ' }} {{ pCat.name }}
-                </option>
+              <option value="abc">(Nenhuma - Categoria Principal / Raiz)</option>
+              @for (pCat of parentCategoryOptions(); track pCat.value) {
+              <option [value]="pCat.value">
+                {{ !pCat.is_parent ? '↳ ' : '• ' }} {{ pCat.label }}
+              </option>
               }
             </select>
-            <div class="absolute inset-y-0 right-0 pr-2.5 flex items-center pointer-events-none text-gray-400">
+            <div
+              class="absolute inset-y-0 right-0 pr-2.5 flex items-center pointer-events-none text-gray-400"
+            >
               <app-icon name="chevron-down" size="w-4 h-4" />
             </div>
           </div>
@@ -166,13 +193,16 @@ <h4 class="text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-sl
 
         <!-- Ordem de Exibição (display_order) -->
         <div class="space-y-1.5">
-          <label for="category-order" class="text-xs font-semibold text-gray-800 dark:text-slate-200">
+          <label
+            for="category-order"
+            class="text-xs font-semibold text-gray-800 dark:text-slate-200"
+          >
             Ordem de Exibição
           </label>
           <div class="flex items-center">
             <button
               type="button"
-              [disabled]="isReadOnly() || displayOrder() <= 0"
+              [disabled]="isReadOnly() || totalItens() <= 0"
               (click)="decrementDisplayOrder()"
               class="px-2.5 py-2 rounded-l-xl bg-gray-100 dark:bg-slate-700 text-gray-700 dark:text-slate-200 hover:bg-gray-200 dark:hover:bg-slate-600 disabled:opacity-40 disabled:cursor-not-allowed border border-r-0 border-gray-200 dark:border-slate-700 text-xs font-bold"
             >
@@ -181,7 +211,7 @@ <h4 class="text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-sl
             <input
               id="category-order"
               type="number"
-              min="0"
+              [min]="1"
               [value]="displayOrder()"
               [disabled]="isReadOnly()"
               (input)="onDisplayOrderChange($event)"
@@ -197,14 +227,16 @@ <h4 class="text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-sl
             </button>
           </div>
           @if (formErrors()['display_order']) {
-            <p class="text-[10px] text-red-500 mt-1">{{ formErrors()['display_order'] }}</p>
+          <p class="text-[10px] text-red-500 mt-1">{{ formErrors()['display_order'] }}</p>
           }
         </div>
       </div>
     </div>
 
     <!-- SEÇÃO 3: Identidade Visual (Ícone & Imagem) -->
-    <div class="bg-white dark:bg-slate-800/80 rounded-xl p-4 border border-gray-200/80 dark:border-slate-700/80 space-y-4">
+    <div
+      class="bg-white dark:bg-slate-800/80 rounded-xl p-4 border border-gray-200/80 dark:border-slate-700/80 space-y-4"
+    >
       <div class="flex items-center gap-2 pb-2 border-b border-gray-100 dark:border-slate-700/60">
         <app-icon name="image" size="w-4 h-4" class="text-amber-500" />
         <h4 class="text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-slate-300">
@@ -226,7 +258,9 @@ <h4 class="text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-sl
               class="flex items-center gap-2 px-3 py-2 rounded-xl border border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-900 text-gray-900 dark:text-slate-100 hover:bg-gray-100 dark:hover:bg-slate-800 disabled:cursor-not-allowed transition-colors text-xs font-medium w-full justify-between"
             >
               <div class="flex items-center gap-2">
-                <span class="w-6 h-6 rounded-lg bg-emerald-100 dark:bg-[#4F8A6B]/20 text-[#4F8A6B] dark:text-[#5BAE6A] flex items-center justify-center shrink-0">
+                <span
+                  class="w-6 h-6 rounded-lg bg-emerald-100 dark:bg-[#4F8A6B]/20 text-[#4F8A6B] dark:text-[#5BAE6A] flex items-center justify-center shrink-0"
+                >
                   <app-icon [name]="icon()" size="w-4 h-4" />
                 </span>
                 <span class="font-mono text-xs font-semibold">{{ icon() }}</span>
@@ -237,61 +271,70 @@ <h4 class="text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-sl
 
           <!-- Icon Selector Dropdown / Grid -->
           @if (iconPickerOpen()) {
-            <div class="mt-2 p-3 rounded-xl bg-white dark:bg-slate-900 border border-gray-200 dark:border-slate-700 shadow-xl space-y-2.5 animate-in fade-in zoom-in-95 duration-100">
-              <div class="relative">
-                <input
-                  type="text"
-                  [value]="iconSearchQuery()"
-                  (input)="iconSearchQuery.set($any($event.target).value)"
-                  placeholder="Pesquisar ícones..."
-                  class="w-full pl-8 pr-3 py-1.5 text-xs rounded-lg border border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-slate-100 placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-[#4F8A6B]"
-                />
-                <div class="absolute inset-y-0 left-0 pl-2.5 flex items-center pointer-events-none text-gray-400">
-                  <app-icon name="search" size="w-3.5 h-3.5" />
-                </div>
+          <div
+            class="mt-2 p-3 rounded-xl bg-white dark:bg-slate-900 border border-gray-200 dark:border-slate-700 shadow-xl space-y-2.5 animate-in fade-in zoom-in-95 duration-100"
+          >
+            <div class="relative">
+              <input
+                type="text"
+                [value]="iconSearchQuery()"
+                (input)="iconSearchQuery.set($any($event.target).value)"
+                placeholder="Pesquisar ícones..."
+                class="w-full pl-8 pr-3 py-1.5 text-xs rounded-lg border border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-slate-100 placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-[#4F8A6B]"
+              />
+              <div
+                class="absolute inset-y-0 left-0 pl-2.5 flex items-center pointer-events-none text-gray-400"
+              >
+                <app-icon name="search" size="w-3.5 h-3.5" />
               </div>
+            </div>
 
-              <div class="grid grid-cols-4 gap-1.5 max-h-40 overflow-y-auto custom-scrollbar p-1">
-                @for (ic of filteredIcons(); track ic.name) {
-                  <button
-                    type="button"
-                    (click)="selectIcon(ic.name)"
-                    [class]="icon() === ic.name
+            <div class="grid grid-cols-4 gap-1.5 max-h-40 overflow-y-auto custom-scrollbar p-1">
+              @for (ic of filteredIcons(); track ic.name) {
+              <button
+                type="button"
+                (click)="selectIcon(ic.name)"
+                [class]="icon() === ic.name
                       ? 'bg-[#4F8A6B] text-white dark:bg-[#5BAE6A] dark:text-slate-950 font-bold'
                       : 'bg-gray-50 hover:bg-gray-100 dark:bg-slate-800 dark:hover:bg-slate-700 text-gray-700 dark:text-slate-300'"
-                    class="p-2 rounded-lg flex flex-col items-center gap-1 text-[10px] transition-colors cursor-pointer"
-                    [title]="ic.label"
-                  >
-                    <app-icon [name]="ic.name" size="w-4 h-4" />
-                    <span class="truncate max-w-[50px]">{{ ic.name }}</span>
-                  </button>
-                }
-              </div>
+                class="p-2 rounded-lg flex flex-col items-center gap-1 text-[10px] transition-colors cursor-pointer"
+                [title]="ic.label"
+              >
+                <app-icon [name]="ic.name" size="w-4 h-4" />
+                <span class="truncate max-w-[50px]">{{ ic.name }}</span>
+              </button>
+              }
+            </div>
 
-              <!-- Manual Custom Icon Input -->
-              <div class="pt-2 border-t border-gray-100 dark:border-slate-800 flex items-center gap-2">
-                <input
-                  type="text"
-                  [value]="icon()"
-                  (input)="onIconChange($event)"
-                  placeholder="Ou digite o nome do ícone..."
-                  class="flex-1 px-2.5 py-1 text-[11px] font-mono rounded-lg border border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-slate-100"
-                />
-                <button
-                  type="button"
-                  (click)="iconPickerOpen.set(false)"
-                  class="px-2.5 py-1 rounded-lg text-[11px] font-bold bg-[#4F8A6B] text-white"
-                >
-                  OK
-                </button>
-              </div>
+            <!-- Manual Custom Icon Input -->
+            <div
+              class="pt-2 border-t border-gray-100 dark:border-slate-800 flex items-center gap-2"
+            >
+              <input
+                type="text"
+                [value]="icon()"
+                (input)="onIconChange($event)"
+                placeholder="Ou digite o nome do ícone..."
+                class="flex-1 px-2.5 py-1 text-[11px] font-mono rounded-lg border border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-slate-100"
+              />
+              <button
+                type="button"
+                (click)="iconPickerOpen.set(false)"
+                class="px-2.5 py-1 rounded-lg text-[11px] font-bold bg-[#4F8A6B] text-white"
+              >
+                OK
+              </button>
             </div>
+          </div>
           }
         </div>
 
         <!-- URL da Imagem -->
         <div class="space-y-1.5">
-          <label for="category-image" class="text-xs font-semibold text-gray-800 dark:text-slate-200">
+          <label
+            for="category-image"
+            class="text-xs font-semibold text-gray-800 dark:text-slate-200"
+          >
             URL da Imagem / Banner
           </label>
           <div class="relative">
@@ -306,14 +349,14 @@ <h4 class="text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-sl
               class="w-full pl-3 pr-8 py-2 text-xs rounded-xl bg-white dark:bg-slate-900 border border-gray-200 dark:border-slate-700 text-gray-900 dark:text-slate-100 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#4F8A6B]/20 focus:border-[#4F8A6B] disabled:bg-gray-50 dark:disabled:bg-slate-800/60 disabled:cursor-not-allowed transition-colors"
             />
             @if (image() && !isReadOnly()) {
-              <button
-                type="button"
-                (click)="clearImage()"
-                class="absolute inset-y-0 right-0 pr-2.5 flex items-center text-gray-400 hover:text-gray-600"
-                title="Remover Imagem"
-              >
-                <app-icon name="x" size="w-3.5 h-3.5" />
-              </button>
+            <button
+              type="button"
+              (click)="clearImage()"
+              class="absolute inset-y-0 right-0 pr-2.5 flex items-center text-gray-400 hover:text-gray-600"
+              title="Remover Imagem"
+            >
+              <app-icon name="x" size="w-3.5 h-3.5" />
+            </button>
             }
           </div>
           <p class="text-[10px] text-gray-400 dark:text-slate-500">
@@ -324,30 +367,36 @@ <h4 class="text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-sl
 
       <!-- Image Preview Thumbnail (se houver imagem) -->
       @if (image()) {
-        <div class="p-3 rounded-xl bg-gray-50 dark:bg-slate-900/60 border border-gray-200 dark:border-slate-700/80 flex items-center gap-3">
-          <div class="w-12 h-12 rounded-lg bg-gray-200 dark:bg-slate-800 overflow-hidden shrink-0 border border-gray-300 dark:border-slate-700 flex items-center justify-center">
-            <img
-              [src]="image()"
-              alt="Pré-visualização da categoria"
-              referrerpolicy="no-referrer"
-              class="w-full h-full object-cover"
-              (error)="image.set('')"
-            />
-          </div>
-          <div class="flex-1 min-w-0">
-            <span class="text-xs font-semibold text-gray-800 dark:text-slate-200 block truncate">
-              Pré-visualização da Imagem
-            </span>
-            <span class="text-[11px] text-gray-400 dark:text-slate-500 truncate block">
-              {{ image() }}
-            </span>
-          </div>
+      <div
+        class="p-3 rounded-xl bg-gray-50 dark:bg-slate-900/60 border border-gray-200 dark:border-slate-700/80 flex items-center gap-3"
+      >
+        <div
+          class="w-12 h-12 rounded-lg bg-gray-200 dark:bg-slate-800 overflow-hidden shrink-0 border border-gray-300 dark:border-slate-700 flex items-center justify-center"
+        >
+          <img
+            [src]="image()"
+            alt="Pré-visualização da categoria"
+            referrerpolicy="no-referrer"
+            class="w-full h-full object-cover"
+            (error)="image.set('')"
+          />
+        </div>
+        <div class="flex-1 min-w-0">
+          <span class="text-xs font-semibold text-gray-800 dark:text-slate-200 block truncate">
+            Pré-visualização da Imagem
+          </span>
+          <span class="text-[11px] text-gray-400 dark:text-slate-500 truncate block">
+            {{ image() }}
+          </span>
         </div>
+      </div>
       }
     </div>
 
     <!-- SEÇÃO 4: Descrição -->
-    <div class="bg-white dark:bg-slate-800/80 rounded-xl p-4 border border-gray-200/80 dark:border-slate-700/80 space-y-2">
+    <div
+      class="bg-white dark:bg-slate-800/80 rounded-xl p-4 border border-gray-200/80 dark:border-slate-700/80 space-y-2"
+    >
       <div class="flex items-center gap-2 pb-2 border-b border-gray-100 dark:border-slate-700/60">
         <app-icon name="file-text" size="w-4 h-4" class="text-purple-500" />
         <h4 class="text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-slate-300">
@@ -375,14 +424,17 @@ <h4 class="text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-sl
     </div>
 
     <!-- SEÇÃO 5: Status de Publicação -->
-    <div class="bg-white dark:bg-slate-800/80 rounded-xl p-4 border border-gray-200/80 dark:border-slate-700/80">
+    <div
+      class="bg-white dark:bg-slate-800/80 rounded-xl p-4 border border-gray-200/80 dark:border-slate-700/80"
+    >
       <div class="flex items-center justify-between">
         <div>
           <span class="text-xs font-bold text-gray-900 dark:text-slate-100 block">
             Disponibilidade da Categoria
           </span>
           <span class="text-[11px] text-gray-500 dark:text-slate-400 block mt-0.5">
-            {{ active() ? 'Categoria visível no menu de navegação e filtros do catálogo.' : 'Categoria oculta e indisponível para novos produtos.' }}
+            {{ active() ? 'Categoria visível no menu de navegação e filtros do catálogo.' :
+            'Categoria oculta e indisponível para novos produtos.' }}
           </span>
         </div>
 
@@ -403,31 +455,25 @@ <h4 class="text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-sl
         </button>
       </div>
     </div>
-
   </form>
 
   <!-- Drawer Footer Actions -->
   <div footer class="flex items-center justify-end gap-2.5 w-full">
+    <app-button variant="outline" size="sm" (btnClick)="close()" [disabled]="isSubmitting()">
+      {{ isReadOnly() ? 'Fechar' : 'Cancelar' }}
+    </app-button>
+
+    @if (!isReadOnly()) {
     <app-button
-      variant="outline"
+      variant="primary"
       size="sm"
-      (btnClick)="close()"
+      [iconStart]="mode() === 'edit' ? 'check' : 'plus'"
+      [loading]="isSubmitting()"
       [disabled]="isSubmitting()"
+      (btnClick)="onSubmit()"
     >
-      {{ isReadOnly() ? 'Fechar' : 'Cancelar' }}
+      {{ mode() === 'edit' ? 'Salvar Alterações' : 'Cadastrar Categoria' }}
     </app-button>
-
-    @if (!isReadOnly()) {
-      <app-button
-        variant="primary"
-        size="sm"
-        [iconStart]="mode() === 'edit' ? 'check' : 'plus'"
-        [loading]="isSubmitting()"
-        [disabled]="isSubmitting()"
-        (btnClick)="onSubmit()"
-      >
-        {{ mode() === 'edit' ? 'Salvar Alterações' : 'Cadastrar Categoria' }}
-      </app-button>
     }
   </div>
 </app-drawer>
diff --git a/src/app/features/catalog/categories/category-form/category-form.ts b/src/app/features/catalog/categories/category-form/category-form.ts
index 281fa4a..2be9fc1 100644
--- a/src/app/features/catalog/categories/category-form/category-form.ts
+++ b/src/app/features/catalog/categories/category-form/category-form.ts
@@ -6,15 +6,21 @@ import {
   signal,
   computed,
   effect,
-  inject
+  inject,
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ButtonComponent } from '../../../../design-system/button/button';
 import { AppIconComponent } from '../../../../design-system/icon/app-icon';
 import { DrawerComponent } from '../../../../design-system/drawer/drawer';
-import { CategoryService } from '../../../../core/services/category';
 import { ToastService } from '../../../../core/services/toast';
-import { Category, CreateCategoryPayload, UpdateCategoryPayload } from '../../../../core/models/category';
+import { CategoryService } from '../../../../core/services/category-service';
+import {
+  CategoryResponse,
+  CreateCategoryPayload,
+  UpdateCategoryPayload,
+} from '../../../../core/models/catetories/categories.model';
+import { CategoryStore } from '../../../../core/store/category-store/category-store';
+import { AutocompleteOption } from '../../../../core/models/design-system/auto-complete.model';
 
 export interface CategoryFormData {
   parent_id: string | null;
@@ -53,33 +59,30 @@ export const CURATED_CATEGORY_ICONS: CuratedIcon[] = [
   { name: 'droplet', label: 'Fluido / Óleo', category: 'Fluidos' },
   { name: 'wind', label: 'Ar / Climatização', category: 'Arrefecimento' },
   { name: 'gauge', label: 'Pressão / Medição', category: 'Sensores' },
-  { name: 'grid', label: 'Grade / Estrutura', category: 'Carroceria' }
+  { name: 'grid', label: 'Grade / Estrutura', category: 'Carroceria' },
 ];
 
 @Component({
   selector: 'app-category-form',
   standalone: true,
-  imports: [
-    CommonModule,
-    ButtonComponent,
-    AppIconComponent,
-    DrawerComponent
-  ],
+  imports: [CommonModule, ButtonComponent, AppIconComponent, DrawerComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: './category-form.html',
-  styleUrl: './category-form.css'
+  styleUrl: './category-form.css',
 })
 export class CategoryFormComponent {
-  private categoryService = inject(CategoryService);
   private toastService = inject(ToastService);
+  private categoryStore = inject(CategoryStore);
+  private categoryService = inject(CategoryService);
 
   readonly isOpen = input<boolean>(false);
   readonly mode = input<'create' | 'edit' | 'view'>('create');
-  readonly category = input<Category | null>(null);
-  readonly categoriesList = input<Category[]>([]);
+  readonly totalItens = input<number>(0);
+  readonly category = input<CategoryResponse | null>(null);
+  readonly categoriesList = input<CategoryResponse[]>([]);
 
   readonly closeForm = output<void>();
-  readonly categorySaved = output<Category>();
+  readonly categorySaved = output<CategoryResponse>();
 
   // Reactive State Signals
   readonly isSubmitting = signal<boolean>(false);
@@ -105,6 +108,7 @@ export class CategoryFormComponent {
       const open = this.isOpen();
       const cat = this.category();
       const currentMode = this.mode();
+      console.log(['effect'], open, cat, currentMode);
 
       if (open) {
         this.formErrors.set({});
@@ -117,7 +121,7 @@ export class CategoryFormComponent {
             this.name.set(cat.name || '');
             this.slug.set(cat.slug || '');
             this.description.set(cat.description || '');
-            this.displayOrder.set(typeof cat.display_order === 'number' ? cat.display_order : 0);
+            this.displayOrder.set(cat?.display_order || 0);
             this.icon.set(cat.icon || 'folder');
             this.image.set(cat.image || '');
             this.active.set(cat.active !== undefined ? Boolean(cat.active) : true);
@@ -129,7 +133,7 @@ export class CategoryFormComponent {
           this.name.set('');
           this.slug.set('');
           this.description.set('');
-          this.displayOrder.set(this.suggestNextDisplayOrder());
+          this.displayOrder.set(this.totalItens() + 1);
           this.icon.set('folder');
           this.image.set('');
           this.active.set(true);
@@ -141,18 +145,10 @@ export class CategoryFormComponent {
 
   // Parent Category Options filtered to avoid cyclical hierarchy
   readonly parentCategoryOptions = computed(() => {
-    const list = this.categoriesList();
-    const currentCat = this.category();
-    const currentId = currentCat?.id;
-
-    return list.filter((c) => {
-      if (!currentId) return true;
-      // Do not allow selecting self as parent
-      if (c.id === currentId) return false;
-      // Do not allow selecting children of self if hierarchical
-      if (c.parent_id === currentId) return false;
-      return true;
-    });
+    const list = this.categoryStore
+      .optionList()
+      .filter((c: AutocompleteOption) => c.is_parent === true);
+    return list;
   });
 
   // Filtered Curated Icons list
@@ -160,7 +156,10 @@ export class CategoryFormComponent {
     const q = this.iconSearchQuery().toLowerCase().trim();
     if (!q) return CURATED_CATEGORY_ICONS;
     return CURATED_CATEGORY_ICONS.filter(
-      (item) => item.name.toLowerCase().includes(q) || item.label.toLowerCase().includes(q) || item.category.toLowerCase().includes(q)
+      (item) =>
+        item.name.toLowerCase().includes(q) ||
+        item.label.toLowerCase().includes(q) ||
+        item.category.toLowerCase().includes(q),
     );
   });
 
@@ -190,10 +189,7 @@ export class CategoryFormComponent {
   }
 
   private suggestNextDisplayOrder(): number {
-    const list = this.categoriesList();
-    if (list.length === 0) return 1;
-    const max = Math.max(...list.map((c) => c.display_order || 0), 0);
-    return max + 1;
+    return this.totalItens() + 1;
   }
 
   // Event Handlers for Inputs
@@ -231,7 +227,7 @@ export class CategoryFormComponent {
 
   onParentChange(event: Event): void {
     const val = (event.target as HTMLSelectElement).value;
-    this.parentId.set(val === '' ? null : val);
+    this.parentId.set(val === 'abc' ? null : val);
   }
 
   onDescriptionChange(event: Event): void {
@@ -241,7 +237,9 @@ export class CategoryFormComponent {
 
   onDisplayOrderChange(event: Event): void {
     const val = parseInt((event.target as HTMLInputElement).value, 10);
+    console.log('display order:', val);
     this.displayOrder.set(isNaN(val) || val < 0 ? 0 : val);
+    console.log('display order:', this.displayOrder());
   }
 
   incrementDisplayOrder(): void {
@@ -330,7 +328,10 @@ export class CategoryFormComponent {
     }
 
     if (!this.validateForm()) {
-      this.toastService.error('Formulário Inválido', 'Corrija os campos indicados antes de salvar.');
+      this.toastService.error(
+        'Formulário Inválido',
+        'Corrija os campos indicados antes de salvar.',
+      );
       return;
     }
 
@@ -344,15 +345,21 @@ export class CategoryFormComponent {
       display_order: this.displayOrder(),
       icon: this.icon().trim() || 'folder',
       image: this.image().trim() || null,
-      active: this.active()
+      active: this.active(),
     };
 
+    // console.log('ITEMS PARA UPDATE/SAVE', payload);
+    // return;
+
     if (this.mode() === 'edit' && this.category()?.id) {
       const id = this.category()!.id;
       this.categoryService.update(id, payload).subscribe({
         next: (response) => {
           this.isSubmitting.set(false);
-          this.toastService.success('Categoria Atualizada', `A categoria "${response.data.name}" foi salva com sucesso.`);
+          this.toastService.success(
+            'Categoria Atualizada',
+            `A categoria "${response.data.name}" foi salva com sucesso.`,
+          );
           this.categorySaved.emit(response.data);
           this.close();
         },
@@ -363,17 +370,22 @@ export class CategoryFormComponent {
           if (err.error?.errors) {
             const serverErrors: Record<string, string> = {};
             for (const key of Object.keys(err.error.errors)) {
-              serverErrors[key] = Array.isArray(err.error.errors[key]) ? err.error.errors[key][0] : String(err.error.errors[key]);
+              serverErrors[key] = Array.isArray(err.error.errors[key])
+                ? err.error.errors[key][0]
+                : String(err.error.errors[key]);
             }
             this.formErrors.set(serverErrors);
           }
-        }
+        },
       });
     } else {
       this.categoryService.create(payload as CreateCategoryPayload).subscribe({
         next: (response) => {
           this.isSubmitting.set(false);
-          this.toastService.success('Categoria Criada', `A categoria "${response.data.name}" foi cadastrada com sucesso.`);
+          this.toastService.success(
+            'Categoria Criada',
+            `A categoria "${response.data.name}" foi cadastrada com sucesso.`,
+          );
           this.categorySaved.emit(response.data);
           this.close();
         },
@@ -384,11 +396,13 @@ export class CategoryFormComponent {
           if (err.error?.errors) {
             const serverErrors: Record<string, string> = {};
             for (const key of Object.keys(err.error.errors)) {
-              serverErrors[key] = Array.isArray(err.error.errors[key]) ? err.error.errors[key][0] : String(err.error.errors[key]);
+              serverErrors[key] = Array.isArray(err.error.errors[key])
+                ? err.error.errors[key][0]
+                : String(err.error.errors[key]);
             }
             this.formErrors.set(serverErrors);
           }
-        }
+        },
       });
     }
   }
diff --git a/src/app/features/catalog/manufacturer/manufacturer-form/manufacturer-form.css b/src/app/features/catalog/manufacturer/manufacturer-form/manufacturer-form.css
new file mode 100644
index 0000000..e6795b7
--- /dev/null
+++ b/src/app/features/catalog/manufacturer/manufacturer-form/manufacturer-form.css
@@ -0,0 +1 @@
+/* Manufacturer Form specific style tokens if needed */
diff --git a/src/app/features/catalog/manufacturer/manufacturer-form/manufacturer-form.html b/src/app/features/catalog/manufacturer/manufacturer-form/manufacturer-form.html
new file mode 100644
index 0000000..316ab56
--- /dev/null
+++ b/src/app/features/catalog/manufacturer/manufacturer-form/manufacturer-form.html
@@ -0,0 +1,335 @@
+<app-drawer
+  [isOpen]="isOpen()"
+  [title]="formTitle()"
+  [icon]="mode() === 'edit' ? 'edit' : (mode() === 'view' ? 'eye' : 'building')"
+  width="lg"
+  (closeDrawer)="close()"
+>
+  <!-- Main Form Body -->
+  <form (submit)="$event.preventDefault(); onSubmit()" class="space-y-6 pb-4">
+
+    <!-- Header Badge & Quick Context -->
+    <div class="flex items-center justify-between p-3.5 rounded-xl bg-slate-50 dark:bg-slate-900/60 border border-gray-100 dark:border-slate-700/80">
+      <div class="flex items-center gap-3">
+        <!-- Logo or Icon Thumbnail -->
+        <div class="w-10 h-10 rounded-lg bg-emerald-100 dark:bg-[#4F8A6B]/20 text-[#4F8A6B] dark:text-[#5BAE6A] flex items-center justify-center font-bold overflow-hidden border border-emerald-200/60 dark:border-emerald-800/40 shrink-0">
+          @if (image() && !imageLoadError()) {
+            <img
+              [src]="image()"
+              [alt]="name() || 'Fabricante'"
+              referrerpolicy="no-referrer"
+              class="w-full h-full object-contain p-1 bg-white dark:bg-slate-800"
+              (error)="imageLoadError.set(true)"
+            />
+          } @else {
+            <app-icon name="building" size="w-5 h-5" />
+          }
+        </div>
+        <div class="min-w-0">
+          <span class="text-xs font-bold text-gray-900 dark:text-slate-100 block truncate">
+            {{ name() ? name() : 'Novo Fabricante' }}
+          </span>
+          <div class="flex items-center gap-2 mt-0.5">
+            <span class="text-[11px] text-gray-500 dark:text-slate-400 font-mono truncate">
+              {{ slug() ? '/' + slug() : '/slug-do-fabricante' }}
+            </span>
+            @if (website()) {
+              <span class="text-[10px] text-gray-300 dark:text-slate-600">•</span>
+              <a
+                [href]="website()"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="text-[10px] text-[#5A8DEE] hover:underline flex items-center gap-0.5 truncate"
+                title="Visitar website"
+              >
+                {{ website() }}
+                <app-icon name="external-link" size="w-2.5 h-2.5" />
+              </a>
+            }
+          </div>
+        </div>
+      </div>
+
+      <div class="shrink-0 ml-2">
+        @if (active()) {
+          <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-bold bg-emerald-100 text-emerald-800 dark:bg-emerald-950/60 dark:text-emerald-300 border border-emerald-200 dark:border-emerald-800/40">
+            <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
+            Ativo
+          </span>
+        } @else {
+          <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-600 dark:bg-slate-700 dark:text-slate-300">
+            <span class="w-1.5 h-1.5 rounded-full bg-gray-400"></span>
+            Inativo
+          </span>
+        }
+      </div>
+    </div>
+
+    <!-- SEÇÃO 1: Identificação do Fabricante -->
+    <div class="bg-white dark:bg-slate-800/80 rounded-xl p-4 border border-gray-200/80 dark:border-slate-700/80 space-y-4">
+      <div class="flex items-center gap-2 pb-2 border-b border-gray-100 dark:border-slate-700/60">
+        <app-icon name="tag" size="w-4 h-4" class="text-[#4F8A6B] dark:text-[#5BAE6A]" />
+        <h4 class="text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-slate-300">
+          Dados do Fabricante
+        </h4>
+      </div>
+
+      <!-- Nome (max 150) -->
+      <div class="space-y-1.5">
+        <div class="flex items-center justify-between">
+          <label for="manufacturer-name" class="text-xs font-semibold text-gray-800 dark:text-slate-200">
+            Nome do Fabricante / Marca <span class="text-red-500">*</span>
+          </label>
+          <span class="text-[10px] text-gray-400">{{ name().length }}/150</span>
+        </div>
+        <input
+          id="manufacturer-name"
+          type="text"
+          [value]="name()"
+          [disabled]="isReadOnly()"
+          (input)="onNameChange($event)"
+          placeholder="Ex: Bosch, NGK, Mahle, Cofap, Denso"
+          maxlength="150"
+          [class.border-red-500]="formErrors()['name']"
+          [class.focus:border-red-500]="formErrors()['name']"
+          class="w-full px-3.5 py-2 text-xs rounded-xl bg-white dark:bg-slate-900 border border-gray-200 dark:border-slate-700 text-gray-900 dark:text-slate-100 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#4F8A6B]/20 focus:border-[#4F8A6B] disabled:bg-gray-50 dark:disabled:bg-slate-800/60 disabled:cursor-not-allowed transition-colors"
+        />
+        @if (formErrors()['name']) {
+          <p class="text-[11px] text-red-500 font-medium flex items-center gap-1 mt-1">
+            <app-icon name="alert-circle" size="w-3.5 h-3.5" />
+            {{ formErrors()['name'] }}
+          </p>
+        }
+      </div>
+
+      <!-- Slug (max 180) -->
+      <div class="space-y-1.5">
+        <div class="flex items-center justify-between">
+          <label for="manufacturer-slug" class="text-xs font-semibold text-gray-800 dark:text-slate-200">
+            Slug / Identificador URL <span class="text-red-500">*</span>
+          </label>
+          <div class="flex items-center gap-2">
+            <span class="text-[10px] text-gray-400">{{ slug().length }}/180</span>
+            @if (!isReadOnly()) {
+              <button
+                type="button"
+                (click)="toggleAutoSlug()"
+                class="text-[11px] font-medium inline-flex items-center gap-1 transition-colors cursor-pointer"
+                [class]="isAutoSlug() ? 'text-[#4F8A6B] dark:text-[#5BAE6A]' : 'text-gray-400 hover:text-gray-600'"
+                title="Alternar geração automática baseada no nome"
+              >
+                <app-icon [name]="isAutoSlug() ? 'link-2' : 'unlink'" size="w-3 h-3" />
+                {{ isAutoSlug() ? 'Automático' : 'Manual' }}
+              </button>
+            }
+          </div>
+        </div>
+        <div class="relative">
+          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400 text-xs font-mono">
+            /
+          </div>
+          <input
+            id="manufacturer-slug"
+            type="text"
+            [value]="slug()"
+            [disabled]="isReadOnly()"
+            (input)="onSlugChange($event)"
+            placeholder="bosch"
+            maxlength="180"
+            [class.border-red-500]="formErrors()['slug']"
+            [class.focus:border-red-500]="formErrors()['slug']"
+            class="w-full pl-6 pr-3.5 py-2 text-xs font-mono rounded-xl bg-white dark:bg-slate-900 border border-gray-200 dark:border-slate-700 text-gray-900 dark:text-slate-100 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#4F8A6B]/20 focus:border-[#4F8A6B] disabled:bg-gray-50 dark:disabled:bg-slate-800/60 disabled:cursor-not-allowed transition-colors"
+          />
+        </div>
+        @if (formErrors()['slug']) {
+          <p class="text-[11px] text-red-500 font-medium flex items-center gap-1 mt-1">
+            <app-icon name="alert-circle" size="w-3.5 h-3.5" />
+            {{ formErrors()['slug'] }}
+          </p>
+        } @else {
+          <p class="text-[10px] text-gray-400 dark:text-slate-500">
+            Identificador único para rotas e catálogo. Apenas letras minúsculas, números e hífens.
+          </p>
+        }
+      </div>
+    </div>
+
+    <!-- SEÇÃO 2: Logo e Identidade Visual (Image max 500) -->
+    <div class="bg-white dark:bg-slate-800/80 rounded-xl p-4 border border-gray-200/80 dark:border-slate-700/80 space-y-4">
+      <div class="flex items-center gap-2 pb-2 border-b border-gray-100 dark:border-slate-700/60">
+        <app-icon name="image" size="w-4 h-4" class="text-amber-500" />
+        <h4 class="text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-slate-300">
+          Logomarca e Imagem
+        </h4>
+      </div>
+
+      <div class="space-y-1.5">
+        <div class="flex items-center justify-between">
+          <label for="manufacturer-image" class="text-xs font-semibold text-gray-800 dark:text-slate-200">
+            URL da Logomarca (Logo / Imagem)
+          </label>
+          <span class="text-[10px] text-gray-400">{{ image().length }}/500</span>
+        </div>
+        <div class="relative">
+          <input
+            id="manufacturer-image"
+            type="text"
+            [value]="image()"
+            [disabled]="isReadOnly()"
+            (input)="onImageChange($event)"
+            placeholder="https://exemplo.com/logos/fabricante.png"
+            maxlength="500"
+            [class.border-red-500]="formErrors()['image']"
+            [class.focus:border-red-500]="formErrors()['image']"
+            class="w-full pl-3 pr-8 py-2 text-xs rounded-xl bg-white dark:bg-slate-900 border border-gray-200 dark:border-slate-700 text-gray-900 dark:text-slate-100 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#4F8A6B]/20 focus:border-[#4F8A6B] disabled:bg-gray-50 dark:disabled:bg-slate-800/60 disabled:cursor-not-allowed transition-colors"
+          />
+          @if (image() && !isReadOnly()) {
+            <button
+              type="button"
+              (click)="clearImage()"
+              class="absolute inset-y-0 right-0 pr-2.5 flex items-center text-gray-400 hover:text-gray-600 cursor-pointer"
+              title="Remover Imagem"
+            >
+              <app-icon name="x" size="w-3.5 h-3.5" />
+            </button>
+          }
+        </div>
+        @if (formErrors()['image']) {
+          <p class="text-[11px] text-red-500 font-medium flex items-center gap-1 mt-1">
+            <app-icon name="alert-circle" size="w-3.5 h-3.5" />
+            {{ formErrors()['image'] }}
+          </p>
+        } @else {
+          <p class="text-[10px] text-gray-400 dark:text-slate-500">
+            Opcional. Link direto para o logo do fabricante (PNG, SVG ou JPG em alta resolução).
+          </p>
+        }
+      </div>
+
+      <!-- Preview Box -->
+      @if (image()) {
+        <div class="p-3 rounded-xl bg-gray-50 dark:bg-slate-900/60 border border-gray-200 dark:border-slate-700/80 flex items-center gap-3">
+          <div class="w-14 h-14 rounded-lg bg-white dark:bg-slate-800 p-1.5 overflow-hidden shrink-0 border border-gray-200 dark:border-slate-700 flex items-center justify-center">
+            <img
+              [src]="image()"
+              alt="Pré-visualização do fabricante"
+              referrerpolicy="no-referrer"
+              class="w-full h-full object-contain"
+              (error)="imageLoadError.set(true)"
+            />
+          </div>
+          <div class="flex-1 min-w-0">
+            <span class="text-xs font-semibold text-gray-800 dark:text-slate-200 block truncate">
+              Pré-visualização do Logo
+            </span>
+            <span class="text-[11px] text-gray-400 dark:text-slate-500 truncate block mt-0.5 font-mono">
+              {{ image() }}
+            </span>
+          </div>
+        </div>
+      }
+    </div>
+
+    <!-- SEÇÃO 3: Presença Online / Website (Website max 255) -->
+    <div class="bg-white dark:bg-slate-800/80 rounded-xl p-4 border border-gray-200/80 dark:border-slate-700/80 space-y-4">
+      <div class="flex items-center gap-2 pb-2 border-b border-gray-100 dark:border-slate-700/60">
+        <app-icon name="globe" size="w-4 h-4" class="text-[#5A8DEE]" />
+        <h4 class="text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-slate-300">
+          Website Institucional e Contato
+        </h4>
+      </div>
+
+      <div class="space-y-1.5">
+        <div class="flex items-center justify-between">
+          <label for="manufacturer-website" class="text-xs font-semibold text-gray-800 dark:text-slate-200">
+            Endereço do Website (URL)
+          </label>
+          <span class="text-[10px] text-gray-400">{{ website().length }}/255</span>
+        </div>
+        <div class="relative">
+          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
+            <app-icon name="globe" size="w-3.5 h-3.5" />
+          </div>
+          <input
+            id="manufacturer-website"
+            type="url"
+            [value]="website()"
+            [disabled]="isReadOnly()"
+            (input)="onWebsiteChange($event)"
+            placeholder="https://www.fabricante.com.br"
+            maxlength="255"
+            [class.border-red-500]="formErrors()['website']"
+            [class.focus:border-red-500]="formErrors()['website']"
+            class="w-full pl-9 pr-3.5 py-2 text-xs rounded-xl bg-white dark:bg-slate-900 border border-gray-200 dark:border-slate-700 text-gray-900 dark:text-slate-100 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#4F8A6B]/20 focus:border-[#4F8A6B] disabled:bg-gray-50 dark:disabled:bg-slate-800/60 disabled:cursor-not-allowed transition-colors"
+          />
+        </div>
+        @if (formErrors()['website']) {
+          <p class="text-[11px] text-red-500 font-medium flex items-center gap-1 mt-1">
+            <app-icon name="alert-circle" size="w-3.5 h-3.5" />
+            {{ formErrors()['website'] }}
+          </p>
+        } @else {
+          <p class="text-[10px] text-gray-400 dark:text-slate-500">
+            Opcional. Link oficial do fabricante para consulta de especificações técnicas e catálogo.
+          </p>
+        }
+      </div>
+    </div>
+
+    <!-- SEÇÃO 4: Status de Ativação -->
+    <div class="bg-white dark:bg-slate-800/80 rounded-xl p-4 border border-gray-200/80 dark:border-slate-700/80">
+      <div class="flex items-center justify-between">
+        <div>
+          <span class="text-xs font-bold text-gray-900 dark:text-slate-100 block">
+            Status do Fabricante
+          </span>
+          <span class="text-[11px] text-gray-500 dark:text-slate-400 block mt-0.5">
+            {{ active() ? 'Fabricante ativo e elegível para associação a novos produtos e códigos OEM.' : 'Fabricante inativo. Produtos associados continuam no histórico mas o fabricante fica oculto para novos cadastros.' }}
+          </span>
+        </div>
+
+        <button
+          type="button"
+          [disabled]="isReadOnly()"
+          (click)="onActiveToggle()"
+          class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed ml-4"
+          [class]="active() ? 'bg-[#4F8A6B] dark:bg-[#5BAE6A]' : 'bg-gray-200 dark:bg-slate-700'"
+          role="switch"
+          [attr.aria-checked]="active()"
+          aria-label="Alternar status ativo do fabricante"
+        >
+          <span
+            class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow-sm ring-0 transition duration-200 ease-in-out"
+            [class]="active() ? 'translate-x-5' : 'translate-x-0'"
+          ></span>
+        </button>
+      </div>
+    </div>
+
+  </form>
+
+  <!-- Drawer Footer Actions -->
+  <div footer class="flex items-center justify-end gap-2.5 w-full">
+    <app-button
+      variant="outline"
+      size="sm"
+      (btnClick)="close()"
+      [disabled]="isSubmitting()"
+    >
+      {{ isReadOnly() ? 'Fechar' : 'Cancelar' }}
+    </app-button>
+
+    @if (!isReadOnly()) {
+      <app-button
+        variant="primary"
+        size="sm"
+        [iconStart]="mode() === 'edit' ? 'check' : 'plus'"
+        [loading]="isSubmitting()"
+        [disabled]="isSubmitting()"
+        (btnClick)="onSubmit()"
+      >
+        {{ mode() === 'edit' ? 'Salvar Alterações' : 'Cadastrar Fabricante' }}
+      </app-button>
+    }
+  </div>
+</app-drawer>
diff --git a/src/app/features/catalog/manufacturer/manufacturer-form/manufacturer-form.ts b/src/app/features/catalog/manufacturer/manufacturer-form/manufacturer-form.ts
new file mode 100644
index 0000000..bcc73c3
--- /dev/null
+++ b/src/app/features/catalog/manufacturer/manufacturer-form/manufacturer-form.ts
@@ -0,0 +1,306 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  input,
+  output,
+  signal,
+  computed,
+  effect,
+  inject
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ButtonComponent } from '../../../../design-system/button/button';
+import { AppIconComponent } from '../../../../design-system/icon/app-icon';
+import { DrawerComponent } from '../../../../design-system/drawer/drawer';
+import { ManufacturerService } from '../../../../core/services/manufacturer';
+import { ToastService } from '../../../../core/services/toast';
+import {
+  Manufacturer,
+  CreateManufacturerPayload,
+  UpdateManufacturerPayload
+} from '../../../../core/models/manufacturer';
+
+@Component({
+  selector: 'app-manufacturer-form',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ButtonComponent,
+    AppIconComponent,
+    DrawerComponent
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './manufacturer-form.html',
+  styleUrl: './manufacturer-form.css'
+})
+export class ManufacturerFormComponent {
+  private manufacturerService = inject(ManufacturerService);
+  private toastService = inject(ToastService);
+
+  readonly isOpen = input<boolean>(false);
+  readonly mode = input<'create' | 'edit' | 'view'>('create');
+  readonly manufacturer = input<Manufacturer | null>(null);
+
+  readonly closeForm = output<void>();
+  readonly manufacturerSaved = output<Manufacturer>();
+
+  // Reactive State Signals
+  readonly isSubmitting = signal<boolean>(false);
+  readonly isAutoSlug = signal<boolean>(true);
+  readonly imageLoadError = signal<boolean>(false);
+
+  // Form Field Signals matching ManufacturerRequest
+  readonly name = signal<string>('');
+  readonly slug = signal<string>('');
+  readonly image = signal<string>('');
+  readonly website = signal<string>('');
+  readonly active = signal<boolean>(true);
+
+  // Validation Errors
+  readonly formErrors = signal<Record<string, string>>({});
+
+  constructor() {
+    effect(() => {
+      const open = this.isOpen();
+      const mfr = this.manufacturer();
+      const currentMode = this.mode();
+
+      if (open) {
+        this.formErrors.set({});
+        this.imageLoadError.set(false);
+
+        if ((currentMode === 'edit' || currentMode === 'view') && mfr) {
+          this.name.set(mfr.name || '');
+          this.slug.set(mfr.slug || '');
+          this.image.set(mfr.image || '');
+          this.website.set(mfr.website || '');
+          this.active.set(mfr.active !== undefined ? Boolean(mfr.active) : true);
+          this.isAutoSlug.set(false);
+        } else {
+          // Create Mode Reset
+          this.name.set('');
+          this.slug.set('');
+          this.image.set('');
+          this.website.set('');
+          this.active.set(true);
+          this.isAutoSlug.set(true);
+        }
+      }
+    });
+  }
+
+  // Derived Title & Subtitle
+  readonly formTitle = computed(() => {
+    switch (this.mode()) {
+      case 'edit':
+        return 'Editar Fabricante';
+      case 'view':
+        return 'Detalhes do Fabricante';
+      case 'create':
+      default:
+        return 'Novo Fabricante';
+    }
+  });
+
+  readonly isReadOnly = computed(() => this.mode() === 'view');
+
+  // Slug Helper
+  generateSlug(text: string): string {
+    return text
+      .toLowerCase()
+      .normalize('NFD')
+      .replace(/[\u0300-\u036f]/g, '')
+      .replace(/[^a-z0-9]+/g, '-')
+      .replace(/^-+|-+$/g, '')
+      .substring(0, 180);
+  }
+
+  // Event Handlers for Inputs
+  onNameChange(event: Event): void {
+    const value = (event.target as HTMLInputElement).value;
+    this.name.set(value);
+
+    if (this.isAutoSlug()) {
+      const generated = this.generateSlug(value);
+      this.slug.set(generated);
+    }
+
+    if (this.formErrors()['name']) {
+      this.clearFieldError('name');
+    }
+  }
+
+  onSlugChange(event: Event): void {
+    const value = (event.target as HTMLInputElement).value;
+    this.slug.set(value.trim());
+
+    if (this.formErrors()['slug']) {
+      this.clearFieldError('slug');
+    }
+  }
+
+  toggleAutoSlug(): void {
+    if (this.isReadOnly()) return;
+    const newState = !this.isAutoSlug();
+    this.isAutoSlug.set(newState);
+    if (newState && this.name()) {
+      this.slug.set(this.generateSlug(this.name()));
+    }
+  }
+
+  onImageChange(event: Event): void {
+    const val = (event.target as HTMLInputElement).value;
+    this.image.set(val.trim());
+    this.imageLoadError.set(false);
+    if (this.formErrors()['image']) {
+      this.clearFieldError('image');
+    }
+  }
+
+  clearImage(): void {
+    if (this.isReadOnly()) return;
+    this.image.set('');
+    this.imageLoadError.set(false);
+  }
+
+  onWebsiteChange(event: Event): void {
+    const val = (event.target as HTMLInputElement).value;
+    this.website.set(val.trim());
+    if (this.formErrors()['website']) {
+      this.clearFieldError('website');
+    }
+  }
+
+  onActiveToggle(): void {
+    if (this.isReadOnly()) return;
+    this.active.update((v) => !v);
+  }
+
+  private clearFieldError(field: string): void {
+    this.formErrors.update((errs) => {
+      const copy = { ...errs };
+      delete copy[field];
+      return copy;
+    });
+  }
+
+  // Client-side Validation strictly adhering to ManufacturerRequest rules
+  validateForm(): boolean {
+    const errors: Record<string, string> = {};
+    const nameVal = this.name().trim();
+    const slugVal = this.slug().trim();
+    const imageVal = this.image().trim();
+    const websiteVal = this.website().trim();
+
+    if (!nameVal) {
+      errors['name'] = 'O nome do fabricante é obrigatório.';
+    } else if (nameVal.length > 150) {
+      errors['name'] = 'O nome não pode exceder 150 caracteres.';
+    }
+
+    if (!slugVal) {
+      errors['slug'] = 'O slug do fabricante é obrigatório.';
+    } else if (slugVal.length > 180) {
+      errors['slug'] = 'O slug não pode exceder 180 caracteres.';
+    } else if (!/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(slugVal)) {
+      errors['slug'] = 'Formato inválido. Use apenas letras minúsculas, números e hífens.';
+    }
+
+    if (imageVal && imageVal.length > 500) {
+      errors['image'] = 'A URL da imagem não pode exceder 500 caracteres.';
+    }
+
+    if (websiteVal) {
+      if (websiteVal.length > 255) {
+        errors['website'] = 'A URL do website não pode exceder 255 caracteres.';
+      } else if (!/^https?:\/\/.+/i.test(websiteVal)) {
+        errors['website'] = 'O website deve ser uma URL válida iniciando com http:// ou https://.';
+      }
+    }
+
+    this.formErrors.set(errors);
+    return Object.keys(errors).length === 0;
+  }
+
+  // Submit Handler
+  onSubmit(): void {
+    if (this.isReadOnly()) {
+      this.close();
+      return;
+    }
+
+    if (!this.validateForm()) {
+      this.toastService.error('Formulário Inválido', 'Corrija os campos indicados antes de salvar.');
+      return;
+    }
+
+    this.isSubmitting.set(true);
+
+    const payload: CreateManufacturerPayload | UpdateManufacturerPayload = {
+      name: this.name().trim(),
+      slug: this.slug().trim(),
+      image: this.image().trim() || null,
+      website: this.website().trim() || null,
+      active: this.active()
+    };
+
+    if (this.mode() === 'edit' && this.manufacturer()?.id) {
+      const id = this.manufacturer()!.id;
+      this.manufacturerService.update(id, payload).subscribe({
+        next: (response) => {
+          this.isSubmitting.set(false);
+          this.toastService.success(
+            'Fabricante Atualizado',
+            `O fabricante "${response.data.name}" foi salvo com sucesso.`
+          );
+          this.manufacturerSaved.emit(response.data);
+          this.close();
+        },
+        error: (err) => {
+          this.isSubmitting.set(false);
+          const msg = err.error?.message || err.message || 'Erro ao atualizar fabricante.';
+          this.toastService.error('Falha ao Salvar', msg);
+          if (err.error?.errors) {
+            const serverErrors: Record<string, string> = {};
+            for (const key of Object.keys(err.error.errors)) {
+              serverErrors[key] = Array.isArray(err.error.errors[key])
+                ? err.error.errors[key][0]
+                : String(err.error.errors[key]);
+            }
+            this.formErrors.set(serverErrors);
+          }
+        }
+      });
+    } else {
+      this.manufacturerService.create(payload as CreateManufacturerPayload).subscribe({
+        next: (response) => {
+          this.isSubmitting.set(false);
+          this.toastService.success(
+            'Fabricante Criado',
+            `O fabricante "${response.data.name}" foi cadastrado com sucesso.`
+          );
+          this.manufacturerSaved.emit(response.data);
+          this.close();
+        },
+        error: (err) => {
+          this.isSubmitting.set(false);
+          const msg = err.error?.message || err.message || 'Erro ao criar fabricante.';
+          this.toastService.error('Falha ao Salvar', msg);
+          if (err.error?.errors) {
+            const serverErrors: Record<string, string> = {};
+            for (const key of Object.keys(err.error.errors)) {
+              serverErrors[key] = Array.isArray(err.error.errors[key])
+                ? err.error.errors[key][0]
+                : String(err.error.errors[key]);
+            }
+            this.formErrors.set(serverErrors);
+          }
+        }
+      });
+    }
+  }
+
+  close(): void {
+    this.closeForm.emit();
+  }
+}
diff --git a/src/app/features/catalog/manufacturer/manufacturers.css b/src/app/features/catalog/manufacturer/manufacturers.css
new file mode 100644
index 0000000..c30d59f
--- /dev/null
+++ b/src/app/features/catalog/manufacturer/manufacturers.css
@@ -0,0 +1 @@
+/* Manufacturers Page Styles */
diff --git a/src/app/features/catalog/manufacturer/manufacturers.html b/src/app/features/catalog/manufacturer/manufacturers.html
new file mode 100644
index 0000000..f33405c
--- /dev/null
+++ b/src/app/features/catalog/manufacturer/manufacturers.html
@@ -0,0 +1,123 @@
+<!-- Page Header -->
+<app-page-header
+  title="Fabricantes e Marcas"
+  subtitle="Gerenciamento de marcas parceiras, logomarcas, slugs e presença institucional no catálogo."
+  [breadcrumbs]="[
+    { label: 'Catálogo', route: '/catalog/products' },
+    { label: 'Fabricantes' }
+  ]"
+>
+  <div actions class="flex items-center gap-2">
+    <app-button variant="primary" size="sm" iconStart="plus" (btnClick)="newManufacturer()">
+      Novo Fabricante
+    </app-button>
+  </div>
+</app-page-header>
+
+<!-- Quick KPI Summary Strip -->
+<div class="grid grid-cols-1 sm:grid-cols-3 gap-3 mb-4">
+  <div class="bg-white dark:bg-slate-800 rounded-xl p-3.5 border border-gray-200/80 dark:border-slate-700/80 flex items-center justify-between shadow-2xs">
+    <div class="flex items-center gap-3">
+      <div class="w-8 h-8 rounded-lg bg-slate-100 dark:bg-slate-700 text-gray-700 dark:text-slate-300 flex items-center justify-center">
+        <app-icon name="building" size="w-4 h-4" />
+      </div>
+      <div>
+        <span class="text-[11px] font-medium text-gray-500 dark:text-slate-400 block">Total de Fabricantes</span>
+        <span class="text-sm font-bold text-gray-900 dark:text-slate-100">{{ totalCount() }} cadastrados</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="bg-white dark:bg-slate-800 rounded-xl p-3.5 border border-gray-200/80 dark:border-slate-700/80 flex items-center justify-between shadow-2xs">
+    <div class="flex items-center gap-3">
+      <div class="w-8 h-8 rounded-lg bg-emerald-100 dark:bg-[#4F8A6B]/20 text-[#4F8A6B] dark:text-[#5BAE6A] flex items-center justify-center">
+        <app-icon name="check-circle" size="w-4 h-4" />
+      </div>
+      <div>
+        <span class="text-[11px] font-medium text-gray-500 dark:text-slate-400 block">Fabricantes Ativos</span>
+        <span class="text-sm font-bold text-gray-900 dark:text-slate-100">{{ activeCount() }} marcas ativas</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="bg-white dark:bg-slate-800 rounded-xl p-3.5 border border-gray-200/80 dark:border-slate-700/80 flex items-center justify-between shadow-2xs">
+    <div class="flex items-center gap-3">
+      <div class="w-8 h-8 rounded-lg bg-blue-100 dark:bg-[#5A8DEE]/20 text-[#5A8DEE] flex items-center justify-center">
+        <app-icon name="globe" size="w-4 h-4" />
+      </div>
+      <div>
+        <span class="text-[11px] font-medium text-gray-500 dark:text-slate-400 block">Com Website Oficial</span>
+        <span class="text-sm font-bold text-gray-900 dark:text-slate-100">{{ withWebsiteCount() }} verificados</span>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Filter Toolbar -->
+<app-toolbar>
+  <div start class="flex-1 grid grid-cols-1 sm:grid-cols-2 gap-3 w-full">
+    <app-search-input
+      [value]="searchQuery()"
+      (valueChange)="onSearchChange($event)"
+      placeholder="Filtrar por nome, slug ou website..."
+    />
+
+    <app-select
+      [value]="selectedStatus()"
+      (valueChange)="onStatusChange($event)"
+      [options]="[
+        { label: 'Todos os Status', value: '' },
+        { label: 'Ativo', value: 'active' },
+        { label: 'Inativo', value: 'inactive' }
+      ]"
+      placeholder="Todos os Status"
+    />
+  </div>
+
+  <div end class="flex items-center gap-2">
+    <app-button variant="ghost" size="sm" iconStart="refresh-cw" (btnClick)="resetFilters()">
+      Limpar
+    </app-button>
+  </div>
+</app-toolbar>
+
+<!-- Table + Integrated Pagination Container -->
+<div class="w-full">
+  <app-data-table
+    [columns]="columns"
+    [data]="paginatedManufacturers()"
+    [actions]="actions"
+    [loading]="loading()"
+    [roundedBottom]="false"
+  />
+
+  <app-pagination
+    [currentPage]="currentPage()"
+    [pageSize]="pageSize()"
+    [totalItems]="filteredManufacturers().length"
+    [pageSizeOptions]="[5, 10, 25, 50]"
+    (pageChange)="onPageChange($event)"
+    (pageSizeChange)="onPageSizeChange($event)"
+  />
+</div>
+
+<!-- Delete Confirmation Dialog -->
+<app-confirm-dialog
+  [isOpen]="deleteDialogOpen()"
+  title="Excluir Fabricante do Catálogo"
+  [message]="'Tem certeza de que deseja remover o fabricante ' + (selectedManufacturerForDelete()?.name || '') + '?'"
+  type="danger"
+  confirmText="Excluir Fabricante"
+  cancelText="Cancelar"
+  (confirmAction)="executeDelete()"
+  (cancelAction)="deleteDialogOpen.set(false)"
+/>
+
+<!-- Manufacturer Create / Edit / View Drawer Form -->
+<app-manufacturer-form
+  [isOpen]="isFormOpen()"
+  [mode]="formMode()"
+  [manufacturer]="selectedManufacturer()"
+  (closeForm)="closeForm()"
+  (manufacturerSaved)="onManufacturerSaved()"
+/>
diff --git a/src/app/features/catalog/manufacturer/manufacturers.ts b/src/app/features/catalog/manufacturer/manufacturers.ts
new file mode 100644
index 0000000..82f1d14
--- /dev/null
+++ b/src/app/features/catalog/manufacturer/manufacturers.ts
@@ -0,0 +1,257 @@
+import { Component, ChangeDetectionStrategy, signal, computed, inject, OnInit } from '@angular/core';
+import { PageHeaderComponent } from '../../design-system/page-header/page-header';
+import { ToolbarComponent } from '../../design-system/toolbar/toolbar';
+import { SearchInputComponent } from '../../design-system/input/search-input';
+import { SelectComponent } from '../../design-system/select/select';
+import { ButtonComponent } from '../../design-system/button/button';
+import { DataTableComponent } from '../../design-system/data-table/data-table';
+import { PaginationComponent } from '../../design-system/pagination/pagination';
+import { ConfirmDialogComponent } from '../../design-system/dialog/confirm-dialog';
+import { AppIconComponent } from '../../design-system/icon/app-icon';
+import { ManufacturerFormComponent } from './components/manufacturer-form/manufacturer-form';
+import { ToastService } from '../../core/services/toast';
+import { ManufacturerService } from '../../core/services/manufacturer';
+import { Manufacturer } from '../../core/models/manufacturer';
+import { TableColumn, TableAction } from '../../core/models/table-config';
+
+@Component({
+  selector: 'app-manufacturers-page',
+  standalone: true,
+  imports: [
+    PageHeaderComponent,
+    ToolbarComponent,
+    SearchInputComponent,
+    SelectComponent,
+    ButtonComponent,
+    DataTableComponent,
+    PaginationComponent,
+    ConfirmDialogComponent,
+    AppIconComponent,
+    ManufacturerFormComponent
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './manufacturers.html',
+  styleUrl: './manufacturers.css'
+})
+export class ManufacturersPageComponent implements OnInit {
+  private toastService = inject(ToastService);
+  private manufacturerService = inject(ManufacturerService);
+
+  readonly loading = signal<boolean>(false);
+  readonly searchQuery = signal<string>('');
+  readonly selectedStatus = signal<string>('');
+  readonly currentPage = signal<number>(1);
+  readonly pageSize = signal<number>(10);
+  readonly totalItems = signal<number>(0);
+
+  // Form Drawer State
+  readonly isFormOpen = signal<boolean>(false);
+  readonly formMode = signal<'create' | 'edit' | 'view'>('create');
+  readonly selectedManufacturer = signal<Manufacturer | null>(null);
+
+  // Delete Dialog State
+  readonly deleteDialogOpen = signal<boolean>(false);
+  readonly selectedManufacturerForDelete = signal<Manufacturer | null>(null);
+  readonly isDeleting = signal<boolean>(false);
+
+  readonly allManufacturers = signal<Manufacturer[]>([]);
+
+  readonly columns: TableColumn<Manufacturer>[] = [
+    {
+      key: 'image',
+      header: 'Logo',
+      width: '70px',
+      align: 'center',
+      type: 'icon',
+      iconGetter: () => 'building'
+    },
+    { key: 'name', header: 'Fabricante / Marca' },
+    { key: 'slug', header: 'Slug / URL', width: '160px' },
+    {
+      key: 'website',
+      header: 'Website Oficial',
+      width: '240px',
+      valueGetter: (m: Manufacturer) => m.website || '—'
+    },
+    {
+      key: 'active',
+      header: 'Status',
+      width: '120px',
+      align: 'center',
+      type: 'badge',
+      badgeConfig: (m: Manufacturer) => ({
+        text: m.active ? 'Ativo' : 'Inativo',
+        variant: m.active ? 'success' : 'neutral'
+      })
+    },
+    {
+      key: 'created_at',
+      header: 'Criado em',
+      width: '120px',
+      align: 'center',
+      type: 'date'
+    }
+  ];
+
+  readonly actions: TableAction<Manufacturer>[] = [
+    {
+      id: 'view',
+      label: 'Visualizar',
+      icon: 'eye',
+      colorClass: 'text-gray-400 hover:text-[#5A8DEE] hover:bg-gray-100 dark:hover:bg-slate-700',
+      title: 'Visualizar Detalhes',
+      handler: (m) => this.viewManufacturer(m)
+    },
+    {
+      id: 'edit',
+      label: 'Editar',
+      icon: 'edit',
+      colorClass: 'text-gray-400 hover:text-[#4F8A6B] hover:bg-gray-100 dark:hover:bg-slate-700',
+      title: 'Editar Fabricante',
+      handler: (m) => this.editManufacturer(m)
+    },
+    {
+      id: 'delete',
+      label: 'Excluir',
+      icon: 'trash-2',
+      colorClass: 'text-gray-400 hover:text-[#D66A6A] hover:bg-gray-100 dark:hover:bg-slate-700',
+      title: 'Excluir Fabricante',
+      handler: (m) => this.confirmDelete(m)
+    }
+  ];
+
+  // Quick KPI Signals
+  readonly totalCount = computed(() => this.allManufacturers().length);
+  readonly activeCount = computed(() => this.allManufacturers().filter(m => m.active).length);
+  readonly withWebsiteCount = computed(() => this.allManufacturers().filter(m => !!m.website).length);
+
+  ngOnInit(): void {
+    this.loadManufacturers();
+  }
+
+  loadManufacturers(): void {
+    this.loading.set(true);
+    this.manufacturerService.getAll().subscribe({
+      next: (response) => {
+        this.allManufacturers.set(response.data);
+        if (response.meta) {
+          this.totalItems.set(response.meta.total);
+          this.currentPage.set(response.meta.current_page);
+          this.pageSize.set(response.meta.per_page);
+        } else {
+          this.totalItems.set(response.data.length);
+        }
+        this.loading.set(false);
+      },
+      error: (error) => {
+        this.loading.set(false);
+        this.toastService.error('Erro ao buscar fabricantes', error.message || 'Falha ao carregar lista de fabricantes.');
+      }
+    });
+  }
+
+  readonly filteredManufacturers = computed(() => {
+    const q = this.searchQuery().toLowerCase().trim();
+    const st = this.selectedStatus();
+
+    return this.allManufacturers().filter(m => {
+      const matchesQ =
+        !q ||
+        m.name.toLowerCase().includes(q) ||
+        m.slug.toLowerCase().includes(q) ||
+        (m.website || '').toLowerCase().includes(q);
+
+      const matchesSt = !st || (st === 'active' ? m.active : !m.active);
+      return matchesQ && matchesSt;
+    });
+  });
+
+  readonly paginatedManufacturers = computed(() => {
+    const all = this.filteredManufacturers();
+    const page = this.currentPage();
+    const size = this.pageSize();
+    const start = (page - 1) * size;
+    return all.slice(start, start + size);
+  });
+
+  onSearchChange(query: string): void {
+    this.searchQuery.set(query);
+    this.currentPage.set(1);
+  }
+
+  onStatusChange(status: string): void {
+    this.selectedStatus.set(status);
+    this.currentPage.set(1);
+  }
+
+  onPageChange(page: number): void {
+    this.currentPage.set(page);
+  }
+
+  onPageSizeChange(size: number): void {
+    this.pageSize.set(size);
+    this.currentPage.set(1);
+  }
+
+  resetFilters(): void {
+    this.searchQuery.set('');
+    this.selectedStatus.set('');
+    this.currentPage.set(1);
+    this.toastService.info('Filtros limpos', 'Todos os parâmetros de busca foram resetados.');
+  }
+
+  newManufacturer(): void {
+    this.selectedManufacturer.set(null);
+    this.formMode.set('create');
+    this.isFormOpen.set(true);
+  }
+
+  editManufacturer(mfr: Manufacturer): void {
+    this.selectedManufacturer.set(mfr);
+    this.formMode.set('edit');
+    this.isFormOpen.set(true);
+  }
+
+  viewManufacturer(mfr: Manufacturer): void {
+    this.selectedManufacturer.set(mfr);
+    this.formMode.set('view');
+    this.isFormOpen.set(true);
+  }
+
+  closeForm(): void {
+    this.isFormOpen.set(false);
+    this.selectedManufacturer.set(null);
+  }
+
+  onManufacturerSaved(): void {
+    this.loadManufacturers();
+  }
+
+  confirmDelete(mfr: Manufacturer): void {
+    this.selectedManufacturerForDelete.set(mfr);
+    this.deleteDialogOpen.set(true);
+  }
+
+  executeDelete(): void {
+    const mfr = this.selectedManufacturerForDelete();
+    if (!mfr) return;
+
+    this.isDeleting.set(true);
+    this.manufacturerService.delete(mfr.id).subscribe({
+      next: () => {
+        this.isDeleting.set(false);
+        this.deleteDialogOpen.set(false);
+        this.allManufacturers.update(list => list.filter(m => m.id !== mfr.id));
+        this.toastService.success(
+          'Fabricante Excluído',
+          `O fabricante "${mfr.name}" foi removido com sucesso.`
+        );
+      },
+      error: (err) => {
+        this.isDeleting.set(false);
+        this.deleteDialogOpen.set(false);
+        this.toastService.error('Erro ao excluir', err.message || 'Falha ao remover fabricante.');
+      }
+    });
+  }
+}
diff --git a/src/app/features/catalog/products/product-create/product-create.ts b/src/app/features/catalog/products/product-create/product-create.ts
index 80eac71..675042e 100644
--- a/src/app/features/catalog/products/product-create/product-create.ts
+++ b/src/app/features/catalog/products/product-create/product-create.ts
@@ -133,6 +133,7 @@ export class ProductCreateComponent implements OnInit {
           icon: c.icon || 'folder',
           description: c.description,
           disabled: false,
+          is_parent: false,
         }));
         this.fetchedCategories.set(opts);
         this.categoryLoading.set(false);
@@ -269,6 +270,7 @@ export class ProductCreateComponent implements OnInit {
           sublabel: c.sublabel,
           icon: c.icon || 'folder',
           description: c.description,
+          is_parent: false,
         }));
         this.fetchedCategories.set(opts);
         this.categoryLoading.set(false);
@@ -288,6 +290,7 @@ export class ProductCreateComponent implements OnInit {
           sublabel: m.sublabel,
           icon: 'folder',
           description: '',
+          is_parent: false,
         }));
         this.fetchedManufacturers.set(opts);
         this.manufacturerLoading.set(false);
diff --git a/src/app/features/catalog/products/product-form/administration-tab/administration-tab.html b/src/app/features/catalog/products/product-form/administration-tab/administration-tab.html
index 055b956..d88f39b 100644
--- a/src/app/features/catalog/products/product-form/administration-tab/administration-tab.html
+++ b/src/app/features/catalog/products/product-form/administration-tab/administration-tab.html
@@ -121,7 +121,6 @@ <h3 class="text-base font-bold text-gray-900 dark:text-slate-100 flex items-cent
     <div class="mt-4 pt-3 border-t border-gray-100 dark:border-slate-700/60">
       <app-pagination
         [currentPage]="suppliersPage()"
-        [pageSize]="suppliersPageSize()"
         [totalItems]="suppliers().length"
         (pageChange)="suppliersPage.set($event)"
         (pageSizeChange)="suppliersPageSize.set($event)"
@@ -255,7 +254,6 @@ <h3 class="text-base font-bold text-gray-900 dark:text-slate-100 flex items-cent
     <div class="mt-4 pt-3 border-t border-gray-100 dark:border-slate-700/60">
       <app-pagination
         [currentPage]="notesPage()"
-        [pageSize]="notesPageSize()"
         [totalItems]="productNotes().length"
         (pageChange)="notesPage.set($event)"
         (pageSizeChange)="notesPageSize.set($event)"
diff --git a/src/app/features/catalog/products/product-form/compatibility-tab/compatibility-tab.html b/src/app/features/catalog/products/product-form/compatibility-tab/compatibility-tab.html
index e260f2b..110226f 100644
--- a/src/app/features/catalog/products/product-form/compatibility-tab/compatibility-tab.html
+++ b/src/app/features/catalog/products/product-form/compatibility-tab/compatibility-tab.html
@@ -250,7 +250,6 @@ <h3 class="text-base font-bold text-gray-900 dark:text-slate-100 flex items-cent
     <div class="mt-4 pt-3 border-t border-gray-100 dark:border-slate-700/60">
       <app-pagination
         [currentPage]="oemPagination().page"
-        [pageSize]="oemPagination().per_page"
         [totalItems]="oemTotalItens()"
         (pageChange)="onOemPageChange($event)"
         (pageSizeChange)="onOemPageSizeChange($event)"
@@ -339,7 +338,6 @@ <h3 class="text-base font-bold text-gray-900 dark:text-slate-100 flex items-cent
     <div class="mt-4 pt-3 border-t border-gray-100 dark:border-slate-700/60">
       <app-pagination
         [currentPage]="productCodesPage()"
-        [pageSize]="productCodesPageSize()"
         [totalItems]="productCodes().length"
         (pageChange)="productCodesPage.set($event)"
         (pageSizeChange)="productCodesPageSize.set($event)"
@@ -444,7 +442,6 @@ <h3 class="text-base font-bold text-gray-900 dark:text-slate-100 flex items-cent
     <div class="mt-4 pt-3 border-t border-gray-100 dark:border-slate-700/60">
       <app-pagination
         [currentPage]="equivalentPage()"
-        [pageSize]="equivalentPageSize()"
         [totalItems]="equivalentProducts().length"
         (pageChange)="equivalentPage.set($event)"
         (pageSizeChange)="equivalentPageSize.set($event)"
@@ -559,13 +556,14 @@ <h3 class="text-base font-bold text-gray-900 dark:text-slate-100 flex items-cent
 
     @if (vehicleApplications().length > 0) {
     <div class="mt-4 pt-3 border-t border-gray-100 dark:border-slate-700/60">
-      <app-pagination
+      <p>pagination</p>
+      <!-- <app-pagination
         [currentPage]="vehiclePage()"
         [pageSize]="vehiclePageSize()"
         [totalItems]="vehicleApplications().length"
         (pageChange)="vehiclePage.set($event)"
         (pageSizeChange)="vehiclePageSize.set($event)"
-      />
+      /> -->
     </div>
     }
   </div>
diff --git a/src/app/features/catalog/products/products.html b/src/app/features/catalog/products/products.html
index 3a0aa84..1622c0b 100644
--- a/src/app/features/catalog/products/products.html
+++ b/src/app/features/catalog/products/products.html
@@ -119,13 +119,20 @@ <h3 class="text-xl font-bold text-gray-900 dark:text-slate-100 mt-1">184</h3>
   />
 
   <app-pagination
+    [pagination]="pagination()"
+    [pageSizeOptions]="[5, 10, 25, 50]"
+    (pageChange)="onPageChange($event)"
+    (pageSizeChange)="onPageSizeChange($event)"
+  />
+
+  <!-- <app-pagination
     [currentPage]="currentPage()"
     [pageSize]="pageSize()"
     [totalItems]="filteredProducts().length"
     [pageSizeOptions]="[5, 10, 25, 50]"
     (pageChange)="onPageChange($event)"
     (pageSizeChange)="onPageSizeChange($event)"
-  />
+  /> -->
 </div>
 
 <!-- Delete Confirmation Dialog -->
diff --git a/src/app/features/catalog/products/products.ts b/src/app/features/catalog/products/products.ts
index 6677be4..def890e 100644
--- a/src/app/features/catalog/products/products.ts
+++ b/src/app/features/catalog/products/products.ts
@@ -21,6 +21,8 @@ import { ProductResponse } from '../../../core/models/products/product-response.
 import { ProductService } from '../../../core/services/product-service';
 import { TableAction, TableColumn } from '../../../core/models/list-table/list-table.model';
 import { productTableActions, productTableColumns } from '../../../utils/product-table-collum';
+import { PaginationMeta } from '../../../core/models/pagination/pagination.model';
+import { initialValuesPagination } from '../../../design-system/pagination/utils/initial-values';
 
 export interface ProductItem extends Record<string, unknown> {
   id: string;
@@ -72,6 +74,7 @@ export class ProductsPageComponent implements OnInit {
 
   readonly columns: TableColumn<ProductResponse>[] = productTableColumns;
   readonly actions: TableAction<ProductResponse>[] = productTableActions;
+  readonly pagination = signal<PaginationMeta>(initialValuesPagination);
 
   readonly filteredProducts = computed(() => {
     const q = this.searchQuery().toLowerCase().trim();
@@ -111,6 +114,7 @@ export class ProductsPageComponent implements OnInit {
         } else {
           this.totalItems.set(response.data.length);
         }
+        this.pagination.set(response.meta);
         this.loading.set(false);
       },
       error: (error) => {
diff --git a/src/app/features/placeholder.html b/src/app/features/placeholder.html
index e73a7dd..c06ca21 100644
--- a/src/app/features/placeholder.html
+++ b/src/app/features/placeholder.html
@@ -6,7 +6,7 @@
 >
   <div actions class="flex items-center gap-2">
     <app-button variant="outline" size="sm" iconStart="download" (btnClick)="onAction('Exportar')">
-      Exportar Relatório
+      Exportar Relatório33
     </app-button>
     <app-button variant="primary" size="sm" iconStart="plus" (btnClick)="onAction('Novo Cadastro')">
       {{ pageDetails().buttonText }}
@@ -41,12 +41,12 @@
     (deleteRow)="onAction('Excluir')"
   />
 
-  <app-pagination
+  <!-- <app-pagination
     [currentPage]="currentPage()"
     [pageSize]="pageSize()"
     [totalItems]="filteredData().length"
     [pageSizeOptions]="[5, 10, 25]"
     (pageChange)="currentPage.set($event)"
     (pageSizeChange)="onPageSizeChange($event)"
-  />
+  /> -->
 </div>
diff --git a/src/app/features/placeholder.ts b/src/app/features/placeholder.ts
index cd7557c..2e3c978 100644
--- a/src/app/features/placeholder.ts
+++ b/src/app/features/placeholder.ts
@@ -5,7 +5,6 @@ import { ToolbarComponent } from '../design-system/toolbar/toolbar';
 import { SearchInputComponent } from '../design-system/input/search-input';
 import { ButtonComponent } from '../design-system/button/button';
 import { DataTableComponent, ColumnDef } from '../design-system/data-table/data-table';
-import { PaginationComponent } from '../design-system/pagination/pagination';
 import { ToastService } from '../core/services/toast';
 
 export interface PlaceholderRowItem extends Record<string, unknown> {
@@ -25,7 +24,6 @@ export interface PlaceholderRowItem extends Record<string, unknown> {
     SearchInputComponent,
     ButtonComponent,
     DataTableComponent,
-    PaginationComponent,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: './placeholder.html',
diff --git a/src/app/utils/category-table-collums.ts b/src/app/utils/category-table-collums.ts
new file mode 100644
index 0000000..79bb323
--- /dev/null
+++ b/src/app/utils/category-table-collums.ts
@@ -0,0 +1,59 @@
+import { CategoryResponse } from '../core/models/catetories/categories.model';
+import { TableAction, TableColumn } from '../core/models/list-table/list-table.model';
+
+export const categoryTableColumns: TableColumn<CategoryResponse>[] = [
+  { key: 'name', header: 'Nome da Categoria' },
+  {
+    key: 'parent_id',
+    header: 'Categoria Pai',
+    width: '180px',
+    valueGetter: (c) => {
+      if (!c.parent_id) return 'Categoria Raiz';
+      return c.parent_id;
+    },
+  },
+  { key: 'slug', header: 'Slug / URL', width: '160px' },
+  { key: 'display_order', header: 'Ordem', width: '80px', align: 'center' },
+  {
+    key: 'active',
+    header: 'Status',
+    width: '120px',
+    align: 'center',
+    type: 'badge',
+    badgeConfig: (c) => ({
+      text: c.active ? 'Ativo' : 'Inativo',
+      variant: c.active ? 'success' : 'neutral',
+    }),
+  },
+  {
+    key: 'created_at',
+    header: 'Criado em',
+    width: '120px',
+    align: 'center',
+    type: 'date',
+  },
+];
+
+export const categoryTableActions: TableAction<CategoryResponse>[] = [
+  {
+    id: 'view',
+    label: 'Visualizar',
+    icon: 'eye',
+    colorClass: 'text-gray-400 hover:text-[#5A8DEE] hover:bg-gray-100 dark:hover:bg-slate-700',
+    title: 'Visualizar Detalhes',
+  },
+  {
+    id: 'edit',
+    label: 'Editar',
+    icon: 'edit',
+    colorClass: 'text-gray-400 hover:text-[#4F8A6B] hover:bg-gray-100 dark:hover:bg-slate-700',
+    title: 'Editar Categoria',
+  },
+  {
+    id: 'delete',
+    label: 'Excluir',
+    icon: 'trash-2',
+    colorClass: 'text-gray-400 hover:text-[#D66A6A] hover:bg-gray-100 dark:hover:bg-slate-700',
+    title: 'Excluir Categoria',
+  },
+];