diff --git a/src/app/models/Generics.model.ts b/src/app/models/Generics.model.ts
index c77f143..40e3457 100644
--- a/src/app/models/Generics.model.ts
+++ b/src/app/models/Generics.model.ts
@@ -1,4 +1,15 @@
 export interface ProdForm {
     isCreate: boolean;
     product_id: number;
+};
+export interface BreadcrumbItems {
+    icon?: string;
+    route?: string;
+    label?: string;
+};
+
+export interface MenuList {
+    label: string;
+    router: string;
+    icon: string;
 }
\ No newline at end of file
diff --git a/src/app/pages/categories/components/category-edit/category-edit.component.ts b/src/app/pages/categories/components/category-edit/category-edit.component.ts
index 0baecba..ef9848a 100644
--- a/src/app/pages/categories/components/category-edit/category-edit.component.ts
+++ b/src/app/pages/categories/components/category-edit/category-edit.component.ts
@@ -1,9 +1,10 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { CategoryFormComponent } from '../category-form/category-form.component';
 
 import { CardModule } from 'primeng/card';
 import { ButtonModule } from 'primeng/button';
 import { InputTextModule } from 'primeng/inputtext';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-category-edit',
@@ -17,9 +18,15 @@ import { InputTextModule } from 'primeng/inputtext';
   templateUrl: './category-edit.component.html',
   styleUrl: './category-edit.component.scss'
 })
-export class CategoryEditComponent {
+export class CategoryEditComponent implements OnInit {
 
   errorFielfd: boolean = true;
   title_component: string = "Adicionar nova categoria";
 
+  constructor(
+  ) { }
+
+  ngOnInit(): void {
+  }
+
 }
diff --git a/src/app/pages/categories/components/category-form/category-form.component.html b/src/app/pages/categories/components/category-form/category-form.component.html
index b73ca97..3244b8c 100644
--- a/src/app/pages/categories/components/category-form/category-form.component.html
+++ b/src/app/pages/categories/components/category-form/category-form.component.html
@@ -1,15 +1,18 @@
 <div class="grid px-3">
     <div class="col-12 lg:col-6 md:col-6 lg:w-6 md:w-full sm:w-full">
-        <div class="flex flex-column gap-2">
-            <label for="productName">Nome da categoria</label>
-            <input pInputText id="productName" aria-describedby="product-name" placeholder="Eletronicos" />
-        </div>
+        <form [formGroup]="categoryForm">
+            <div class="flex flex-column gap-2">
+                <label for="categoryName">Nome da categoria</label>
+                <input formControlName="name" pInputText id="categoryName" aria-describedby="category-name"
+                    placeholder="Eletronicos" />
+            </div>
+        </form>
     </div>
     <div class="col-12 lg:col-6 md:col-6 h-100 lg:w-6 md:w-full sm:w-full">
         <div class="d-flex justify-content-center w-full align-items-center">
             <div class="flex flex-column gap-2">
-                <label for="productName">Slug</label>
-                <input pInputText id="productName" aria-describedby="product-name" placeholder="eletronicos" />
+                <label for="categorySlug">Status</label>
+                <p-dropdown [style]="{'width':'100%'}" [options]="status" [(ngModel)]="selectedStatus" optionLabel="name" dataKey="name" placeholder="Status" />
             </div>
         </div>
     </div>
@@ -18,7 +21,7 @@
         <div class="d-flex justify-content-center w-full align-items-center">
             <div class="flex flex-column gap-2">
                 <div class="box-upload">
-                    Aqui ficará um editor de texto
+                    EDITOR DE TEXTO
                 </div>
             </div>
         </div>
@@ -27,13 +30,13 @@
     <div class="col-12">
         <div class="d-flex justify-content-center w-full align-items-center">
             <div class="box-upload">
-                upload
+                ÁREA DE UPLOAD
             </div>
         </div>
     </div>
 </div>
 
 <div class="flex justify-content-end gap-3 mt-1 px-3">
-    <p-button label="Cancelar" severity="secondary" />
+    <p-button label="Cancelar" severity="secondary" [routerLink]="['/dashboard/categories']" />
     <p-button icon="pi pi-save" label="Salvar" />
 </div>
\ No newline at end of file
diff --git a/src/app/pages/categories/components/category-form/category-form.component.scss b/src/app/pages/categories/components/category-form/category-form.component.scss
index 8e93bbd..397b18e 100644
--- a/src/app/pages/categories/components/category-form/category-form.component.scss
+++ b/src/app/pages/categories/components/category-form/category-form.component.scss
@@ -5,4 +5,8 @@
     display: flex;
     align-items: center;
     justify-content: center;
+}
+
+label {
+    color: var(--red-600);
 }
\ No newline at end of file
diff --git a/src/app/pages/categories/components/category-form/category-form.component.ts b/src/app/pages/categories/components/category-form/category-form.component.ts
index 407bc8b..a7a9c38 100644
--- a/src/app/pages/categories/components/category-form/category-form.component.ts
+++ b/src/app/pages/categories/components/category-form/category-form.component.ts
@@ -1,19 +1,98 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { InputTextModule } from 'primeng/inputtext';
 import { FileUploadModule } from 'primeng/fileupload';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { CategoriesService } from '../../../../services/categories/categories.service';
+import { Category } from '../../../../models/Category.model';
+import { StatusService } from '../../../../services/status/status.service';
+import { Status } from '../../../../models/Status.model';
+import { DropdownModule } from 'primeng/dropdown';
+import { ProgressSpinnerModule } from 'primeng/progressspinner';
 
 @Component({
   selector: 'app-category-form',
   standalone: true,
   imports: [
     InputTextModule,
-    FileUploadModule
+    FileUploadModule,
+    ReactiveFormsModule,
+    DropdownModule,
+    FormsModule,
+    ProgressSpinnerModule,
+    RouterLink
   ],
   templateUrl: './category-form.component.html',
   styleUrl: './category-form.component.scss'
 })
-export class CategoryFormComponent {
+export class CategoryFormComponent implements OnInit {
 
+  status: Status[] = [];
+  loading: boolean = false;
+  categoryForm!: FormGroup;
+  selectedStatus: Status | undefined;
 
-  onUpload(evt: any) { }
+  constructor(
+    private fb: FormBuilder,
+    private statusService: StatusService,
+    private actvRoute: ActivatedRoute,
+    private catService: CategoriesService,
+  ) { }
+
+  ngOnInit(): void {
+    this.actvRoute.queryParams.subscribe((p: any) => {
+      console.log('PARAMS CATEGORY', p);
+      if (p['action'] === 'update') {
+        setTimeout(() => {
+          this.categoryById(+p['category']);
+        }, 1500);
+      }
+    });
+
+    this.initForm();
+    this.getAllStatus();
+  }
+
+  initForm() {
+    this.categoryForm = this.fb.group({
+      name: ['']
+    });
+  }
+
+  getAllStatus() {
+    this.statusService.getAllStatus().subscribe({
+      next: (data) => {
+        let statusFiltered: Status[] = [];
+        data.forEach((item: Status) => {
+          if (item.enabled.includes("categories")) {
+            statusFiltered.push(item);
+          }
+        });
+        this.status = statusFiltered;
+        console.log('GET ALL STATUS DATA:', data, this.status);
+      },
+      error: (err) => {
+        console.log('GET ALL STATUS ERR:', err);
+      }
+    });
+  }
+
+  categoryById(catgory_id: number) {
+    this.catService.getCategoriesById(catgory_id).subscribe({
+      next: (data) => {
+        console.log('PRODUCT BY ID DATA:', data);
+        this.updateFormCategory(data);
+      },
+      error: (err) => {
+        console.log('PRODUCT BY ID ERR:', err);
+      }
+    });
+  }
+
+  updateFormCategory(category: Category) {
+    this.categoryForm.patchValue({
+      name: category.name
+    });
+    this.selectedStatus = category.status
+  }
 }
diff --git a/src/app/pages/categories/components/category-list/category-list.component.html b/src/app/pages/categories/components/category-list/category-list.component.html
index 85bd521..51f761f 100644
--- a/src/app/pages/categories/components/category-list/category-list.component.html
+++ b/src/app/pages/categories/components/category-list/category-list.component.html
@@ -1,14 +1,13 @@
 <div class="grid nested-grid mt-2 mb-3">
-    <div class="col-7">
-        <app-breadcrumb />
+    <div class="col-12 lg:col-7 md:col-12 sm:col-12">
+        <app-breadcrumb [items]="breadcrumb" />
     </div>
-    <div class="col-2">
+    <div class="col-12 lg:col-2 md:col-7 sm:col-12">
         <p-dropdown [style]="{'width':'100%'}" [options]="status" [(ngModel)]="selectedStatus" optionLabel="name"
             placeholder="Status" />
     </div>
-    <div class="col-3 text-center">
-        <p-button [style]="{'width':'auto'}" label="Adicionar categoria" severity="secondary" class="w-full"
-            [routerLink]="['edit']" />
+    <div class="col-12 lg:col-3 md:col-5 sm:col-12 text-center sm:px-3">
+        <p-button label="Adicionar categoria" severity="secondary" class="w-full" styleClass="w-full" [routerLink]="['edit']" [queryParams]="{ action: 'create' }" />
     </div>
 </div>
 <div class="px-3">
@@ -39,15 +38,14 @@
             <tr>
                 <td>{{ category.id }}</td>
                 <td>
-                    <p-avatar [image]="category.image"
-                        styleClass="mr-2" size="large" shape="circle" />
+                    <p-avatar [image]="category.image" styleClass="mr-2" size="large" shape="circle" />
                 </td>
                 <td>{{ category.name }}</td>
                 <td>{{ category.qt_products }}</td>
                 <td> <span [ngClass]="['status-' + category.status.slug]">{{ category.status.name }}</span> </td>
                 <td class="flex justify-content-center">
                     <p-button icon="pi pi-trash" label="Excluir" class="mr-1" severity="secondary" />
-                    <p-button icon="pi pi-pencil" label="Editar" />
+                    <p-button icon="pi pi-pencil" label="Editar"  [routerLink]="['edit']" [queryParams]="{ category: category.id, action: 'update' }" />
                 </td>
             </tr>
         </ng-template>
diff --git a/src/app/pages/categories/components/category-list/category-list.component.ts b/src/app/pages/categories/components/category-list/category-list.component.ts
index 70064d3..b8f0275 100644
--- a/src/app/pages/categories/components/category-list/category-list.component.ts
+++ b/src/app/pages/categories/components/category-list/category-list.component.ts
@@ -1,8 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { NgClass } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { RouterLink } from '@angular/router';
-import { BreadcrumbComponent } from '../../../components/breadcrumb/breadcrumb.component';
+import { Router, RouterLink } from '@angular/router';
 
 import { ButtonModule } from 'primeng/button';
 import { Table, TableModule } from 'primeng/table';
@@ -13,12 +12,10 @@ import { Category } from '../../../../models/Category.model';
 import { HttpClient } from '@angular/common/http';
 import { AvatarModule } from 'primeng/avatar';
 import { AvatarGroupModule } from 'primeng/avatargroup';
-
-interface Status {
-  id: number;
-  name: string;
-  slug: string;
-}
+import { BreadcrumbItems } from '../../../../models/Generics.model';
+import { BreadcrumbComponent } from '../../../components/breadcrumb/breadcrumb.component';
+import { StatusService } from '../../../../services/status/status.service';
+import { Status } from '../../../../models/Status.model';
 
 @Component({
   selector: 'app-category-list',
@@ -33,22 +30,51 @@ export class CategoryListComponent implements OnInit {
   searchValue: string | undefined;
   selectedStatus: Status | undefined;
 
-  category: Category[] = [];
-
   status: Status[] = [];
+  category: Category[] = [];
+  breadcrumb: BreadcrumbItems[] = [];
 
   constructor(
+    private router: Router,
     private http: HttpClient,
+    private statusService: StatusService,
     private catService: CategoriesService
   ) { }
 
   ngOnInit(): void {
-    this.http.get<Status[]>('http://localhost:3000/status').subscribe({
+    this.allCategories();
+    this.getAllStatus();
+    this.checkUrl();
+  }
+
+  getAllStatus() {
+    this.statusService.getAllStatus().subscribe({
       next: (data) => {
-        this.status = data;
+        let statusFiltered: Status[] = [];
+        data.forEach((item: Status) => {
+          if (item.enabled.includes("categories")) {
+            statusFiltered.push(item);
+          }
+        });
+        this.status = statusFiltered;
+        console.log('GET ALL STATUS DATA:', data, this.status);
+      },
+      error: (err) => {
+        console.log('GET ALL STATUS ERR:', err);
       }
     });
-    this.allCategories();
+  }
+
+  checkUrl() {
+    const route_url = this.router.url;
+    const urlParts = route_url.split('/');
+    let parts: any[] = [];
+    urlParts.shift();
+
+    urlParts.forEach((item: string) => {
+      parts.push({ label: item });
+    });
+    this.breadcrumb = parts;
   }
 
   allCategories() {
diff --git a/src/app/pages/components/breadcrumb/breadcrumb.component.html b/src/app/pages/components/breadcrumb/breadcrumb.component.html
index 6b148df..b36fa55 100644
--- a/src/app/pages/components/breadcrumb/breadcrumb.component.html
+++ b/src/app/pages/components/breadcrumb/breadcrumb.component.html
@@ -1 +1 @@
-<p-breadcrumb class="max-w-full" [model]="items" [home]="home" />
\ No newline at end of file
+<p-breadcrumb class="max-w-full capitalize" [model]="items" [home]="home" />
\ No newline at end of file
diff --git a/src/app/pages/components/breadcrumb/breadcrumb.component.ts b/src/app/pages/components/breadcrumb/breadcrumb.component.ts
index 6600d23..957c3e8 100644
--- a/src/app/pages/components/breadcrumb/breadcrumb.component.ts
+++ b/src/app/pages/components/breadcrumb/breadcrumb.component.ts
@@ -1,11 +1,8 @@
-import { Component } from '@angular/core';
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { log } from 'console';
+import { MenuItem } from 'primeng/api';
 import { BreadcrumbModule } from 'primeng/breadcrumb';
-
-interface MenuItem {
-  icon?: string;
-  route?: string;
-  label?: string;
-};
+import { BreadcrumbItems } from '../../../models/Generics.model';
 
 interface Home {
   icon: string;
@@ -19,15 +16,17 @@ interface Home {
   templateUrl: './breadcrumb.component.html',
   styleUrl: './breadcrumb.component.scss'
 })
-export class BreadcrumbComponent {
+export class BreadcrumbComponent implements OnChanges {
+
+  @Input() items: BreadcrumbItems[] = [];
+
+  home: Home = { icon: 'pi pi-home', routerLink: '/dashboard' };
+  // items: BreadcrumbItems[] = [];
 
-  home: Home = { icon: 'pi pi-home', routerLink: '/' };
-  items: MenuItem[] = [
-    { label: 'Electronics' },
-    { label: 'Computer' },
-    { label: 'Accessories' },
-    { label: 'Keyboard' },
-    { label: 'Wireless' }
-  ];
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['breadcrumb']) {
+      this.items = changes['breadcrumb'].currentValue;
+    }
+  }
 
 }
diff --git a/src/app/pages/components/thumbnail/thumbnail-products/thumbnail-products.component.html b/src/app/pages/components/thumbnail/thumbnail-products/thumbnail-products.component.html
index 255a7bc..696e86f 100644
--- a/src/app/pages/components/thumbnail/thumbnail-products/thumbnail-products.component.html
+++ b/src/app/pages/components/thumbnail/thumbnail-products/thumbnail-products.component.html
@@ -7,7 +7,7 @@
     </p> -->
     <ng-template pTemplate="footer">
         <div class="flex gap-3 mt-1">
-            <p-button label="Remover" severity="secondary" class="w-full" styleClass="w-full" />
+            <p-button label="Remover" severity="secondary" class="w-full" styleClass="w-full" [routerLink]="['/dashboard/products']" />
             <p-button label="Editar" [routerLink]="['edit']" [queryParams]="{ product: products.id, action: 'update' }" class="w-full" styleClass="w-full" />
         </div>
     </ng-template>
diff --git a/src/app/pages/components/thumbnail/thumbnail-products/thumbnail-products.component.scss b/src/app/pages/components/thumbnail/thumbnail-products/thumbnail-products.component.scss
index da2f18a..dd61cfe 100644
--- a/src/app/pages/components/thumbnail/thumbnail-products/thumbnail-products.component.scss
+++ b/src/app/pages/components/thumbnail/thumbnail-products/thumbnail-products.component.scss
@@ -14,5 +14,7 @@
 }
 
 ::ng-deep .p-card .p-card-title {
-    height: 95px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }
\ No newline at end of file
diff --git a/src/app/pages/components/upload-preview/upload-preview.component.html b/src/app/pages/components/upload-preview/upload-preview.component.html
index 997355e..92248a3 100644
--- a/src/app/pages/components/upload-preview/upload-preview.component.html
+++ b/src/app/pages/components/upload-preview/upload-preview.component.html
@@ -3,7 +3,7 @@
     <h3 class="uploaded mb-4 text-center">Imagens selecionadas</h3>
     <div class="grid">
         @for (preview of previews; track $index) {
-        <div class="col-6">
+        <div class="col-12 ld:col-6 md:col-6">
             <div class="show-files-box border w-100" style="background: #FFF;">
                 <div class="left">
                     <img [src]="preview.url" class="preview-image" width="80px" />
@@ -14,9 +14,9 @@ <h3 class="uploaded mb-4 text-center">Imagens selecionadas</h3>
                     </div>
                 </div>
             </div>
-            <div class="rigth">
+            <!-- <div class="rigth">
                 <span class="check-file"><i class="ri-check-line"></i></span>
-            </div>
+            </div> -->
         </div>
         }
     </div>
diff --git a/src/app/pages/dashboard/dash-content/dash-content.component.html b/src/app/pages/dashboard/dash-content/dash-content.component.html
index bf622b4..9ec67b7 100644
--- a/src/app/pages/dashboard/dash-content/dash-content.component.html
+++ b/src/app/pages/dashboard/dash-content/dash-content.component.html
@@ -1,7 +1,7 @@
-<div class="overflow-hidden">
-    <div class="flex">
-        <div class="lg:col-9 md:col-12 sm:col-12 h-card">
-            <p-card header="Simple Card" [style]="{ height: '450px' }">
+<div class="flex justify-content-center mt-3">
+    <div class="container w-11">
+        <div class="order">
+            <p-card header="Simple Card" styleClass="h-auto lg:h-full md:h-full">
                 <p>
                     Lorem ipsum dolor sit amet...
                 </p>
@@ -20,26 +20,14 @@
                 <p-divider />
             </p-card>
         </div>
-        <div class="lg:col-3 md:col-12 sm:col-12">
-            <div class="flex justify-content-between flex-column h-full m-cards">
-                <p-card header="Simple Card">
-                    <p class="m-0">
-                        Lorem ipsum dolor sit amet...
-                    </p>
-                </p-card>
-
-                <p-card header="Simple Card">
-                    <p class="m-0">
-                        Lorem ipsum dolor sit amet...
-                    </p>
-                </p-card>
-
-                <p-card header="Simple Card">
-                    <p class="m-0">
-                        Lorem ipsum dolor sit amet...
-                    </p>
-                </p-card>
-            </div>
+        <div class="mini-cards" styleClass="h-full">
+            @for (item of dashOrders; track $index) {
+            <p-card [header]="item.title" class="mr-1 mb-1">
+                <p class="m-0">
+                    {{item.info}}
+                </p>
+            </p-card>
+            }
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/app/pages/dashboard/dash-content/dash-content.component.scss b/src/app/pages/dashboard/dash-content/dash-content.component.scss
index e69de29..681e9fa 100644
--- a/src/app/pages/dashboard/dash-content/dash-content.component.scss
+++ b/src/app/pages/dashboard/dash-content/dash-content.component.scss
@@ -0,0 +1,61 @@
+.cards {
+    display: flex;
+    justify-content: space-between;
+}
+
+.container {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    gap: 20px;
+}
+
+.order {
+    grid-area: order;
+}
+
+.mini-cards {
+    grid-area: mini-cards;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.container {
+    grid-template-areas:
+        'order mini-cards';
+}
+
+@media (max-width: 992px) {
+
+    .container {
+        grid-template-columns: 1fr;
+        grid-template-areas:
+            'mini-cards'
+            'order';
+    }
+
+    .mini-cards {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+    }
+
+    .mini-card {
+        flex: 0 0 auto;
+        max-width: none;
+    }
+}
+
+@media (max-width: 767px) {
+
+    .mini-cards {
+        flex: 0 0 auto;
+        flex-direction: column;
+        width: 100%;
+    }
+
+    .mini-card {
+        flex: 0 0 auto;
+        max-width: none;
+    }
+}
\ No newline at end of file
diff --git a/src/app/pages/dashboard/dash-content/dash-content.component.ts b/src/app/pages/dashboard/dash-content/dash-content.component.ts
index aebfbd2..706b2d1 100644
--- a/src/app/pages/dashboard/dash-content/dash-content.component.ts
+++ b/src/app/pages/dashboard/dash-content/dash-content.component.ts
@@ -3,14 +3,30 @@ import { Component } from '@angular/core';
 import { CardModule } from 'primeng/card';
 import { ButtonModule } from 'primeng/button';
 import { DividerModule } from 'primeng/divider';
+import { NgStyle } from '@angular/common';
 
 @Component({
   selector: 'app-dash-content',
   standalone: true,
-  imports: [CardModule, ButtonModule, DividerModule],
+  imports: [CardModule, ButtonModule, DividerModule, NgStyle],
   templateUrl: './dash-content.component.html',
   styleUrl: './dash-content.component.scss'
 })
 export class DashContentComponent {
 
+  dashOrders: any[] = [
+    {
+      title: "Simple Card 1",
+      info: "Lorem ipsum dolor sit amet 1111..."
+    },
+    {
+      title: "Simple Card 2",
+      info: "Lorem ipsum dolor sit amet 2222..."
+    },
+    {
+      title: "Simple Card 3",
+      info: "Lorem ipsum dolor sit amet 3333..."
+    }
+  ]
+
 }
diff --git a/src/app/pages/dashboard/dash-default/dash-default.component.html b/src/app/pages/dashboard/dash-default/dash-default.component.html
index b77ac90..aa184e6 100644
--- a/src/app/pages/dashboard/dash-default/dash-default.component.html
+++ b/src/app/pages/dashboard/dash-default/dash-default.component.html
@@ -1,85 +1,87 @@
-<div class="sidebar_menu">
-
-    <div class="logo" [ngClass]="{ 'sidebar-open': isSidebarOpen }">
-        <i class='pi pi-android'></i>
-        <div class="text_logo">Imports</div>
-    </div>
-
-    <ul class="nav_item">
-
-        <li>
-            <a [routerLink]="['/dashboard']">
-                <i class='pi pi-th-large'></i>
-                <span class="item_name">Dashboard</span>
-            </a>
-            <span class="menu_btn">Dashboard</span>
-        </li>
-
-        <li>
-            <a [routerLink]="['/dashboard/customers']">
-                <i class='pi pi-users'></i>
-                <span class="item_name">Clientes</span>
-            </a>
-            <span class="menu_btn">Clientes</span>
-        </li>
-
-        <li>
-            <a [routerLink]="['/dashboard/products']">
-                <i class='pi pi-box'></i>
-                <span class="item_name">Produtos</span>
-            </a>
-            <span class="menu_btn">Produtos</span>
-        </li>
-
-        <li>
-            <a [routerLink]="['/dashboard/categories']">
-                <i class='pi pi-comment'></i>
-                <span class="item_name">Categorias</span>
-            </a>
-            <span class="menu_btn">Categorias</span>
-        </li>
-
-        <li>
-            <a href="#">
-                <i class='pi pi-refresh'></i>
-                <span class="item_name">Updates</span>
-            </a>
-            <span class="menu_btn">Updates</span>
-        </li>
-
-        <li>
-            <a href="#">
-                <i class='pi pi-hammer'></i>
-                <span class="item_name">Plug-ins</span>
-            </a>
-            <span class="menu_btn">Plug-ins</span>
-        </li>
-
-        <li>
-            <a href="#">
-                <i class='pi pi-bell'></i>
-                <span class="item_name">Notifications</span>
-            </a>
-            <span class="menu_btn">Notifications</span>
-        </li>
-
-        <li class="details">
-            <div class="child_details">
-                <img src="https://br.web.img3.acsta.net/pictures/15/06/15/15/34/437410.jpg" alt="">
-                <div class="name_roll">
-                    <div class="name">Suraj kumar</div>
-                    <div class="roll">Developer</div>
-                </div>
+<p-sidebar #sidebarRef [(visible)]="sidebarVisible">
+    <ng-template pTemplate="headless">
+        <div class="flex flex-column h-full">
+            <div class="flex align-items-center justify-content-between px-4 pt-3 flex-shrink-0 mb-3">
+                <span class="inline-flex align-items-center gap-2">
+                    <svg width="33" height="35" viewBox="0 0 33 35" fill="none" xmlns="http://www.w3.org/2000/svg"
+                        class="block mx-auto">
+                        <path
+                            d="M15.1934 0V0V0L0.0391235 5.38288L2.35052 25.3417L15.1934 32.427V32.427V32.427L28.0364 25.3417L30.3478 5.38288L15.1934 0Z"
+                            fill="var(--primary-color)" />
+                        <mask id="mask0_1_36" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0"
+                            width="31" height="33">
+                            <path
+                                d="M15.1934 0V0V0L0.0391235 5.38288L2.35052 25.3417L15.1934 32.427V32.427V32.427L28.0364 25.3417L30.3478 5.38288L15.1934 0Z"
+                                fill="var(--primary-color-text)" />
+                        </mask>
+                        <g mask="url(#mask0_1_36)">
+                            <path fill-rule="evenodd" clip-rule="evenodd"
+                                d="M15.1935 0V3.5994V3.58318V20.0075V20.0075V32.427V32.427L28.0364 25.3417L30.3478 5.38288L15.1935 0Z"
+                                fill="var(--primary-color)" />
+                        </g>
+                        <path
+                            d="M19.6399 15.3776L18.1861 15.0547L19.3169 16.6695V21.6755L23.1938 18.4458V12.9554L21.4169 13.6013L19.6399 15.3776Z"
+                            fill="var(--primary-color-text)" />
+                        <path
+                            d="M10.5936 15.3776L12.0474 15.0547L10.9166 16.6695V21.6755L7.03966 18.4458V12.9554L8.81661 13.6013L10.5936 15.3776Z"
+                            fill="var(--primary-color-text)" />
+                        <path fill-rule="evenodd" clip-rule="evenodd"
+                            d="M11.3853 16.9726L12.6739 15.0309L13.4793 15.5163H16.7008L17.5061 15.0309L18.7947 16.9726V24.254L17.8283 25.7103L16.7008 26.843H13.4793L12.3518 25.7103L11.3853 24.254V16.9726Z"
+                            fill="var(--primary-color-text)" />
+                        <path d="M19.3168 24.7437L21.4168 22.6444V20.5451L19.3168 22.3214V24.7437Z"
+                            fill="var(--primary-color-text)" />
+                        <path d="M10.9166 24.7437L8.81662 22.6444V20.5451L10.9166 22.3214V24.7437Z"
+                            fill="var(--primary-color-text)" />
+                        <path fill-rule="evenodd" clip-rule="evenodd"
+                            d="M13.0167 5.68861L11.7244 8.7568L13.8244 14.8932H14.7936V5.68861H13.0167ZM15.4397 5.68861V14.8932H16.5706L18.5091 8.7568L17.2167 5.68861H15.4397Z"
+                            fill="var(--primary-color-text)" />
+                        <path
+                            d="M13.8244 14.8932L6.87813 12.3094L5.90888 8.27235L11.8859 8.7568L13.9859 14.8932H13.8244Z"
+                            fill="var(--primary-color-text)" />
+                        <path
+                            d="M16.5706 14.8932L23.5169 12.3094L24.4861 8.27235L18.3476 8.7568L16.4091 14.8932H16.5706Z"
+                            fill="var(--primary-color-text)" />
+                        <path d="M18.8321 8.27235L22.2245 7.94938L19.9629 5.68861H17.7013L18.8321 8.27235Z"
+                            fill="var(--primary-color-text)" />
+                        <path d="M11.4013 8.27235L8.00893 7.94938L10.2705 5.68861H12.5321L11.4013 8.27235Z"
+                            fill="var(--primary-color-text)" />
+                    </svg>
+                    <span class="font-semibold text-2xl text-primary">Your Logo</span>
+                </span>
+                <span>
+                    <p-button type="button" icon="pi pi-times" rounded="true" outlined="true" styleClass="h-2rem w-2rem"
+                        (click)="sidebarVisible = false"></p-button>
+                </span>
             </div>
-            <i class='pi pi-arrow-circle-right' id="log_out"></i>
-        </li>
-    </ul>
-
-</div>
-
-<section class="dashboard_text">
-    <app-header (showAndHideMenu)="crtlMenu($event)" />
-    <div class="p-2 w-full">
-        <router-outlet />
-    </div>
-</section>
\ No newline at end of file
+            <div class="overflow-y-auto">
+                <ul class="list-none p-3 m-0">
+                    <li>
+                        <ul class="list-none p-0 m-0 overflow-hidden">
+                            @for (item of menu; track $index) {
+                            <li>
+                                <a [routerLink]="item.router" pRipple (click)="sidebarVisible = false"
+                                    class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                    <i [class]="item.icon"></i>
+                                    <span class="font-medium"> {{ item.label }} </span>
+                                </a>
+                            </li>
+                            }
+                        </ul>
+                    </li>
+                </ul>
+            </div>
+            <div class="mt-auto">
+                <hr class="mb-3 mx-3 border-top-1 border-none surface-border" />
+                <a pRipple
+                    class="m-3 flex align-items-center cursor-pointer p-3 gap-2 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                    <p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png"
+                        shape="circle" />
+                    <span class="font-bold">Amy Elsner</span>
+                </a>
+            </div>
+        </div>
+    </ng-template>
+</p-sidebar>
+<!-- <p-button (click)="sidebarVisible = true" icon="pi pi-arrow-right"></p-button> -->
+<app-header (showAndHideMenu)="crtlMenu($event)" />
+<router-outlet />
\ No newline at end of file
diff --git a/src/app/pages/dashboard/dash-default/dash-default.component.scss b/src/app/pages/dashboard/dash-default/dash-default.component.scss
index 58bfc34..1dd4364 100644
--- a/src/app/pages/dashboard/dash-default/dash-default.component.scss
+++ b/src/app/pages/dashboard/dash-default/dash-default.component.scss
@@ -1,291 +1,21 @@
-ul, ol {
+ul,
+ol {
     padding: 0 !important;
 }
 
-.sidebar_menu {
-    position: fixed;
-    left: 0;
-    top: 0;
-    height: 100%;
-    width: 78px;
-    background: #D91A2A;
-    padding: 6px 14px;
-    z-index: 99;
-    transition: all 0.5s ease;
-}
-
-.sidebar_menu .logo {
-    height: 60px;
-    display: flex;
-    align-items: center;
-    position: relative;
-}
-
-.sidebar_menu .logo .text_logo {
-    color: #fff;
-    font-size: 20px;
-    font-weight: 600;
-    opacity: 0;
-    transition: all 0.5s ease;
-}
-
-.sidebar_menu.open {
-    width: 260px;
-}
-
-.sidebar-open {
-    width: 260px;
-}
-
-.sidebar_menu .logo #button {
-    position: absolute;
-    top: 50%;
-    right: 0;
-    transform: translateY(-50%);
-    font-size: 22px;
-    transition: all 0.4s ease;
-    font-size: 23px;
-    text-align: center;
-    cursor: pointer;
-    transition: all 0.5s ease;
-}
-
-.sidebar_menu .logo .icon {
-    opacity: 0;
-    transition: all 0.5s ease;
-}
-
-.sidebar_menu.open .logo .icon,
-.sidebar_menu.open .logo .text_logo {
-    opacity: 1;
-}
-
-
-.sidebar_menu.open .logo #button {
-    text-align: right;
-}
-
-.sidebar_menu i {
-    color: #fff;
-    height: 60px;
-    min-width: 50px;
-    font-size: 28px;
-    text-align: center;
-    line-height: 60px;
-}
-
-.sidebar_menu .nav_item {
-    margin-top: 20px;
-    height: 100%;
-}
-
-.sidebar_menu li {
-    position: relative;
-    margin: 8px 0;
-    list-style: none;
-}
-
-.sidebar_menu li .menu_btn {
-    position: absolute;
-    top: -20px;
-    left: calc(100% + 15px);
-    z-index: 3;
-    background: #fff;
-    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.382);
-    padding: 6px 12px;
-    border-radius: 6px;
-    font-size: 15px;
-    font-weight: 400;
-    opacity: 0;
-    white-space: nowrap;
-    pointer-events: none;
-    transition: 0s;
-}
-
-.sidebar_menu li:hover .menu_btn {
-    opacity: 1;
-    pointer-events: auto;
-    transition: all 0.4s ease;
-    top: 50%;
-    transform: translateY(-50%);
-}
-
-.sidebar_menu.open li .menu_btn {
-    display: none;
-}
-
-.sidebar_menu input {
-    font-size: 15px;
-    color: rgba(0, 0, 0, 0.382);
-    font-weight: 400;
-    outline: none;
-    height: 50px;
-    width: 100%;
-    width: 50px;
-    border: none;
-    border-radius: 17px;
-    transition: all 0.5s ease;
-    background: #f3cfff;
-}
-
-.sidebar_menu.open input {
-    padding: 0 0px 0 60px;
-    width: 100%;
-}
-
-.sidebar_menu .bx-search {
-    position: absolute;
-    top: 50%;
-    left: 0;
-    transform: translateY(-50%);
-    font-size: 22px;
-    background: #D91A2A;
-    color: #F2F2F2;
-}
-
-.sidebar_menu.open .bx-search:hover {
-    background: #D91A2A;
-    color: #F2F2F2;
-}
-
-.sidebar_menu .bx-search:hover {
-    background: #F2F2F2;
-    color: #D91A2A;
-}
-
-.sidebar_menu li a {
-    display: flex;
-    height: 100%;
-    width: 100%;
-    border-radius: 17px;
-    align-items: center;
+a {
     text-decoration: none;
-    transition: all 0.4s ease;
-    background: #D91A2A;
-}
-
-.sidebar_menu li a:hover {
-    background: #F2F2F2;
-}
-
-.sidebar_menu li a .item_name {
-    color: #fff;
-    font-size: 15px;
-    font-weight: 400;
-    white-space: nowrap;
-    opacity: 0;
-    pointer-events: none;
-    transition: 0.4s;
-}
-
-.sidebar_menu.open li a .item_name {
-    opacity: 1;
-    pointer-events: auto;
+    color: #000;
 }
 
-.sidebar_menu li a:hover .item_name,
-.sidebar_menu li a:hover i {
-    transition: all 0.5s ease;
-    color: #D91A2A;
-}
-
-.sidebar_menu li i {
-    height: 50px;
-    line-height: 50px;
-    font-size: 18px;
-    border-radius: 17px;
-}
-
-.sidebar_menu li.details {
-    position: fixed;
-    height: 60px;
-    width: 78px;
-    left: 0;
-    bottom: -8px;
-    padding: 10px 14px;
-    background: #D91A2A;
-    transition: all 0.5s ease;
-    overflow: hidden;
-}
-
-.sidebar_menu.open li.details {
-    width: 250px;
-}
-
-.sidebar_menu li .child_details {
-    display: flex;
-    align-items: center;
-    flex-wrap: nowrap;
-}
-
-.sidebar_menu li img {
-    height: 45px;
-    width: 45px;
-    object-fit: cover;
-    border-radius: 14px;
-    margin-right: 10px;
-}
-
-.sidebar_menu li.details .name,
-.sidebar_menu li.details .roll {
-    font-size: 15px;
-    font-weight: 400;
-    color: #fff;
-    white-space: nowrap;
-}
-
-.sidebar_menu li.details .roll {
-    font-size: 12px;
-}
-
-.sidebar_menu .details #log_out {
-    position: absolute;
-    top: 50%;
-    right: 0;
-    transform: translateY(-50%);
-    background: #D91A1A;
-    width: 100%;
-    height: 60px;
-    line-height: 60px;
-    border-radius: 0px;
-    transition: all 0.5s ease;
-}
-
-.sidebar_menu.open .details #log_out {
-    width: 50px;
-    background: none;
-}
-
-.dashboard_text {
-    position: relative;
-    background: #f3f2f2;
-    min-height: 100vh;
-    top: 0;
-    left: 80px;
-    width: calc(100% - 80px);
-    transition: all 0.5s ease;
-    z-index: 2;
-}
-
-.sidebar_menu.open~.dashboard_text {
-    left: 260px;
-    width: calc(100% - 260px);
-}
-
-.dashboard_text .child_text {
-    display: inline-block;
-    color: #ae1e97;
-    font-size: 22px;
-    font-weight: 450;
-    margin: 14px;
+li {
+    list-style: none;
 }
 
-@media (max-width: 420px) {
-    .sidebar_menu li .menu_btn {
-        display: none;
+:host ::ng-deep {
+    .p-sidebar {
+        // background-color: #D91A1A;
+        padding: 6px 14px;
+        transition: all 0.5s ease;
     }
-}
-
-.pi-bars {
-    font-size: 36px;
 }
\ No newline at end of file
diff --git a/src/app/pages/dashboard/dash-default/dash-default.component.ts b/src/app/pages/dashboard/dash-default/dash-default.component.ts
index 5dd6ea8..0691483 100644
--- a/src/app/pages/dashboard/dash-default/dash-default.component.ts
+++ b/src/app/pages/dashboard/dash-default/dash-default.component.ts
@@ -9,41 +9,53 @@ import { ToolbarModule } from 'primeng/toolbar';
 import { StyleClassModule } from 'primeng/styleclass';
 import { HeaderComponent } from '../../components/header/header.component';
 import { RouterLink, RouterOutlet } from '@angular/router';
+import { MenuList } from '../../../models/Generics.model';
 
 
 @Component({
   selector: 'app-dash-default',
   standalone: true,
-  imports: [RouterLink, RouterOutlet, HeaderComponent, SidebarModule, ButtonModule, AvatarModule, RippleModule, StyleClassModule, NgClass, ToolbarModule],
+  imports: [
+    RouterLink,
+    RouterOutlet,
+    HeaderComponent,
+    SidebarModule,
+    ButtonModule,
+    AvatarModule,
+    RippleModule,
+    StyleClassModule,
+    NgClass,
+    ToolbarModule
+  ],
   templateUrl: './dash-default.component.html',
   styleUrl: './dash-default.component.scss'
 })
 export class DashDefaultComponent {
 
   isSidebarOpen: boolean = false;
-
-  toggleSidebar() {
-    this.isSidebarOpen = !this.isSidebarOpen;
-    this.menuBtnChange();
-    const sidebarMenu = document.querySelector(".sidebar_menu");
-    if (sidebarMenu) {
-      sidebarMenu.classList.toggle("open", this.isSidebarOpen);
+  sidebarVisible: boolean = false;
+
+  menu: MenuList[] = [
+    {
+      label: "Dashboard",
+      router: "/dashboard",
+      icon: "ri-dashboard-line mr-2"
+    },
+    {
+      label: "Produtos",
+      router: "products",
+      icon: "ri-box-3-line mr-2"
+    },
+    {
+      label: "Categorias",
+      router: "categories",
+      icon: "ri-list-unordered mr-2"
     }
-  }
-
-  menuBtnChange() {
-    const closeBtn = document.querySelector("#button");
-    if (closeBtn) {
-      if (this.isSidebarOpen) {
-        closeBtn.classList.replace("pi-arrow-circle-left", "pi-arrow-circle-right");
-      } else {
-        closeBtn.classList.replace("pi-arrow-circle-right", "pi-arrow-circle-left");
-      }
-    }
-  }
+  ];
 
   crtlMenu(evt: any) {
-    this.toggleSidebar();
+    // this.toggleSidebar();
+    this.sidebarVisible = evt;
   }
 
 }
diff --git a/src/app/pages/login/login-default/login-default.component.html b/src/app/pages/login/login-default/login-default.component.html
index aab9934..fc7d69e 100644
--- a/src/app/pages/login/login-default/login-default.component.html
+++ b/src/app/pages/login/login-default/login-default.component.html
@@ -1,17 +1,10 @@
-<!-- <div class="flex">
-    <div class="flex-1 card-center bg-primary font-bold m-2 px-5 py-3 border-round">
-        <img src="../../../../assets/images/login.svg" alt="">
-    </div>
-    <div class="flex-1 card-center bg-primary font-bold m-2 px-5 py-3 border-round">Prime and PrimeFlex</div>
-</div> -->
-
 <div class="overflow-hidden h-screen">
-    <div class="flex">
-        <div class="flex-1 card-center font-bold m-2 px-5 py-3 border-round">
-            <img src="../../../../assets/images/login.svg" alt="">
+    <div class="flex align-items-center p-5">
+        <div class="hidden md:block col-12 lg:col-6 md:col-6 sm:col-6 h-card">
+            <img src="../../../../assets/images/login.svg" class="img-login">
         </div>
-        <div class="flex-1 card-center font-bold m-2 px-5 py-3 border-round">
-            <div class="w-full h-auto w-9">
+        <div class="block col-12 lg:col-6 md:col-12 sm:col-12 h-card">
+            <div class="m-auto h-auto w-full md:w-9 sm:w-full">
                 <router-outlet />
             </div>
         </div>
diff --git a/src/app/pages/login/login-default/login-default.component.scss b/src/app/pages/login/login-default/login-default.component.scss
index d3c8566..779e41a 100644
--- a/src/app/pages/login/login-default/login-default.component.scss
+++ b/src/app/pages/login/login-default/login-default.component.scss
@@ -2,4 +2,8 @@
     display: flex;
     align-items: center;
     justify-content: center;
+}
+
+.img-login {
+    width: 80%;
 }
\ No newline at end of file
diff --git a/src/app/pages/products/components/product-edit/product-edit.component.html b/src/app/pages/products/components/product-edit/product-edit.component.html
index cce2f8e..374cf0d 100644
--- a/src/app/pages/products/components/product-edit/product-edit.component.html
+++ b/src/app/pages/products/components/product-edit/product-edit.component.html
@@ -2,10 +2,10 @@
     <div class="box">
         <h5 class="text-center text-4xl text-color-secondary text-900 mt-2"> {{ title_component }} </h5>
         <div class="grid px-3">
-            <div class="col-12 lg:col-5 md:col-12 lg:w-5 md:w-full sm:w-full">
+            <div class="col-12 lg:col-5 md:col-12 lg:w-6 md:w-full sm: w-full">
                 <app-product-form />
             </div>
-            <div class="lg:col-7 md:col-12 h-100 lg:w-7 md:w-full sm:w-full">
+            <div class="lg:col-7 md:col-12 h-100 lg:w-6 md:w-full sm:w-full w-full">
                 <div class="d-flex justify-content-center w-full align-items-center">
                     <app-uploads />
                 </div>
@@ -13,8 +13,8 @@ <h5 class="text-center text-4xl text-color-secondary text-900 mt-2"> {{ title_co
         </div>
     </div>
 
-    <div class="text-right gap-3 mb-3 mt-1">
-        <p-button label="Cancelar" [routerLink]="['dashboard/products']" severity="secondary" class="w-2" styleClass="w-2" />
-        <p-button label="Editar" [disabled]="!crtlEnableButton" class="w-2 ml-3" styleClass="w-2" />
+    <div class="text-right gap-3 my-3 mt-1">
+        <p-button label="Cancelar" [routerLink]="['dashboard/products']" severity="secondary" class="sm:min-w-min min-w-min" styleClass="sm:min-w-min min-w-min" />
+        <p-button label="Editar" [disabled]="!crtlEnableButton" class="sm:min-w-min min-w-min ml-3" styleClass="sm:min-w-min min-w-min" />
     </div>
 </div>
\ No newline at end of file
diff --git a/src/app/pages/products/components/product-form/product-form.component.html b/src/app/pages/products/components/product-form/product-form.component.html
index 2021223..056dfe9 100644
--- a/src/app/pages/products/components/product-form/product-form.component.html
+++ b/src/app/pages/products/components/product-form/product-form.component.html
@@ -14,16 +14,16 @@
         <textarea formControlName="description" id="productDescription" rows="5" cols="30"
             pInputTextarea></textarea>
     </div>
-    <div class="grid">
-        <div class="col-12 lg:col-6 sm:col-6">
-            <div class="flex flex-column gap-2 mb-3 mt-3 w-full">
+    <div class="grid mt-2">
+        <div class="col-12 lg:col-6 md:col-6 sm:col-12">
+            <div class="flex flex-column gap-2 w-full">
                 <label for="productStatus">Status do produto</label>
                 <p-dropdown id="productStatus" class="w-full" formControlName="status" [options]="status"
                     optionLabel="name" dataKey="name" [style]="{'width': '100%'}" placeholder="Status do produto" />
             </div>
         </div>
-        <div class="col-12 lg:col-6 sm:col-6">
-            <div class="flex flex-column gap-2 mb-3 mt-3 w-full">
+        <div class="col-12 lg:col-6 md:col-6 sm:col-12">
+            <div class="flex flex-column gap-2 w-full">
                 <label for="productCategory">Categoria do produto</label>
                 <p-dropdown id="productCategory" class="w-full" formControlName="category" [options]="category"
                     optionLabel="name" dataKey="name" [style]="{'width': '100%'}" placeholder="Categorias" />
@@ -32,7 +32,7 @@
     </div>
     <div class="grid">
         <div class="col-12 lg:col-6 sm:col-6">
-            <div class="flex flex-column gap-2 mb-3">
+            <div class="flex flex-column gap-2 m-0 lg:mb-3">
                 <label for="productPrice">Preço</label>
                 <input formControlName="price" class="w-full" pInputText id="productPrice"
                     aria-describedby="product-price" placeholder="0.00" />
diff --git a/src/app/pages/products/components/product-list/product-list.component.html b/src/app/pages/products/components/product-list/product-list.component.html
index 2bb8e5e..96180e8 100644
--- a/src/app/pages/products/components/product-list/product-list.component.html
+++ b/src/app/pages/products/components/product-list/product-list.component.html
@@ -1,23 +1,15 @@
 <div class="container px-3">
-    <h2 class="m-0 text-bold-700 ">Products</h2>
-    <!-- <div class="flex align-items-center mt-2 max-w-full">
-        <div class="col-9">
-            <p-breadcrumb class="max-w-full" [model]="items" [home]="home" />
-        </div>
-        <div class=" col-3 text-end pe-5">
-            <p-button label="Adicionar produto" severity="secondary" />
-        </div>
-    </div> -->
+    <h2 class="m-0 text-bold-700 my-3">Products</h2>
     <div class="grid nested-grid">
-        <div class="col-10">
-            <p-breadcrumb class="max-w-full" [model]="items" [home]="home" />
+        <div class="col-12 lg:col-9 md:col-8 sm:col-12">
+            <app-breadcrumb [items]="breadcrumb" />
         </div>
-        <div class="col-2 text-end">
-            <p-button label="Adicionar produto" severity="secondary" class="w-full" [routerLink]="['edit']"
+        <div class="col-12 lg:col-3 md:col-4 sm:col-12 md:text-right sm:text-center px-3">
+            <p-button label="Adicionar produto" severity="secondary" styleClass="w-full" [routerLink]="['edit']"
                 [queryParams]="{ action: 'create' }" />
         </div>
     </div>
-    <div class="flex align-items-center justify-content-end" [style]="{'background': '#FFF', 'font-size': '13px'}">
+    <div class="flex align-items-center justify-content-end shadow-3" [style]="{'background': '#FFF', 'font-size': '13px'}">
         <span class="mx-1 text-color">Itens por página: </span>
         <p-dropdown [options]="options" optionLabel="label" optionValue="value" (onChange)="dropChange($event)" [(ngModel)]="rows" (ngModelChange)="first = 0" />
         <p-paginator [first]="first" [rows]="rows" [totalRecords]="totalRecords" (onPageChange)="onPageChange($event)" [showCurrentPageReport]="true"
@@ -28,4 +20,10 @@ <h2 class="m-0 text-bold-700 ">Products</h2>
         <app-thumbnail-products [products]="product" />
         }
     </div>
+    <div class="flex align-items-center justify-content-end shadow-3 my-3" [style]="{'background': '#FFF', 'font-size': '13px'}">
+        <span class="mx-1 text-color">Itens por página: </span>
+        <p-dropdown [options]="options" optionLabel="label" optionValue="value" (onChange)="dropChange($event)" [(ngModel)]="rows" (ngModelChange)="first = 0" />
+        <p-paginator [first]="first" [rows]="rows" [totalRecords]="totalRecords" (onPageChange)="onPageChange($event)" [showCurrentPageReport]="true"
+            currentPageReportTemplate="{first} - {last} de {totalRecords}" [showPageLinks]="false" [showFirstLastIcon]="false" ></p-paginator>
+    </div>
 </div>
\ No newline at end of file
diff --git a/src/app/pages/products/components/product-list/product-list.component.scss b/src/app/pages/products/components/product-list/product-list.component.scss
index d4316c6..ac9c1d9 100644
--- a/src/app/pages/products/components/product-list/product-list.component.scss
+++ b/src/app/pages/products/components/product-list/product-list.component.scss
@@ -1,5 +1,5 @@
 .grid-products {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
     gap: 30px;
 }
\ No newline at end of file
diff --git a/src/app/pages/products/components/product-list/product-list.component.ts b/src/app/pages/products/components/product-list/product-list.component.ts
index 4d16814..2efc490 100644
--- a/src/app/pages/products/components/product-list/product-list.component.ts
+++ b/src/app/pages/products/components/product-list/product-list.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit, inject } from '@angular/core';
 import { NgClass } from '@angular/common';
-import { RouterLink } from '@angular/router';
+import { Router, RouterLink } from '@angular/router';
 import { FormsModule } from '@angular/forms';
 import { Product } from '../../../../models/Products.model';
 import { ThumbnailProductsComponent } from '../../../components/thumbnail/thumbnail-products/thumbnail-products.component';
@@ -9,6 +9,8 @@ import { ProductsService } from '../../../../services/products/products.service'
 import { ButtonModule } from 'primeng/button';
 import { BreadcrumbModule } from 'primeng/breadcrumb';
 import { PaginatorModule } from 'primeng/paginator';
+import { BreadcrumbComponent } from '../../../components/breadcrumb/breadcrumb.component';
+import { BreadcrumbItems } from '../../../../models/Generics.model';
 
 interface MenuItem {
   icon?: string;
@@ -31,7 +33,8 @@ interface Home {
     FormsModule,
     NgClass,
     ButtonModule,
-    PaginatorModule
+    PaginatorModule,
+    BreadcrumbComponent
   ],
   templateUrl: './product-list.component.html',
   styleUrl: './product-list.component.scss'
@@ -44,30 +47,35 @@ export class ProductListComponent implements OnInit {
   first: number = 1;
   rows: number = 10;
   totalRecords: number = 41;
+  breadcrumb: BreadcrumbItems[] = [];
   options = [
     { label: 5, value: 5 },
     { label: 10, value: 10 },
     { label: 20, value: 20 },
     { label: 120, value: 120 }
   ];
-
-  home: Home = { icon: 'pi pi-home', routerLink: '/' };
-
-  items: MenuItem[] = [
-    { label: 'Electronics' },
-    { label: 'Computer' },
-    { label: 'Accessories' },
-    { label: 'Keyboard' },
-    { label: 'Wireless' }
-  ];
   products: Product[] = [];
 
+  private router = inject(Router);
   private productService = inject(ProductsService);
 
   ngOnInit(): void {
+    this.checkUrl();
     this.getAllProducts();
   }
 
+  checkUrl() {
+    const route_url = this.router.url;
+    const urlParts = route_url.split('/');
+    let parts: any[] = [];
+    urlParts.shift();
+
+    urlParts.forEach((item: string) => {
+      parts.push({ label: item });
+    });
+    this.breadcrumb = parts;
+  }
+
   getAllProducts() {
     this.productService.getAllProducts(this.page, this.perPage).subscribe({
       next: (data) => {
diff --git a/src/app/services/status/status.service.ts b/src/app/services/status/status.service.ts
index d489695..777c953 100644
--- a/src/app/services/status/status.service.ts
+++ b/src/app/services/status/status.service.ts
@@ -9,8 +9,7 @@ import { Status } from '../../models/Status.model';
 })
 export class StatusService {
 
-   // private url: string = environment.BASE_URL;
-   private url: string = 'http://localhost:3000';
+   private url: string = environment.BASE_URL;
    private uri: string = 'api/v1';
    private flag: string = 'status'
  
diff --git a/src/app/utils/sidebar-menu b/src/app/utils/sidebar-menu
new file mode 100644
index 0000000..5c36850
--- /dev/null
+++ b/src/app/utils/sidebar-menu
@@ -0,0 +1,17 @@
+export const listMenu = [
+    {
+        label: "Dashboard",
+        router: "/dashboard",
+        icon: "ri-dashboard-line mr-2"
+    },
+    {
+        label: "Produtos",
+        router: "products",
+        icon: "ri-box-3-line mr-2"
+    },
+    {
+        label: "Categorias",
+        router: "categories",
+        icon: "ri-list-unordered mr-2"
+    }
+]
\ No newline at end of file