diff --git a/addon/components/admin/product-category.hbs b/addon/components/admin/product-category.hbs
index 414b6945..7819d8cb 100644
--- a/addon/components/admin/product-category.hbs
+++ b/addon/components/admin/product-category.hbs
@@ -5,24 +5,27 @@
     <div class="mt-3">
         <ul>
             {{#each this.categories as |category|}}
-                    <div class="flex justify-between items-center border-b border-gray-700 py-2">
-                        <span>{{category.name}}</span>
-                        <div class="flex items-center space-x-2">
-                            <Button @type="info" @size="sm" @icon="eye" @text="Add subcategories" @onClick={{fn this.addSubCategory category}} />
-                            <Button @type="danger" @size="sm" @icon="trash" @text="Delete" @onClick={{fn this.deleteCategory category}} />
-                        </div>
+                <div class="flex justify-between items-center border-b border-gray-700 py-2">
+                    <span>{{category.name}}</span>
+                    <div class="flex items-center space-x-2">
+                        <Button @type="info" @size="sm" @icon="eye" @text="Add subcategories" @onClick={{fn this.addSubCategory category}} />
+                        <Button @type="danger" @size="sm" @icon="trash" @text="Delete" @onClick={{fn this.deleteCategory category}} />
                     </div>
-                {{#each this.categories as |subCategory|}}
-                    {{#if (and (eq subCategory.parent.id category.id) (not (eq subCategory.id category.id)))}}
-                        <div class="ml-4 flex justify-between items-center border-b border-gray-700 py-2">
-                            <span>{{subCategory.name}}</span>
-                            <div class="flex items-center space-x-2">
-                                <Button @type="info" @size="sm" @icon="eye" @text="Add subcategories" @onClick={{fn this.addSubCategory subCategory}} />
-                                <Button @type="danger" @size="sm" @icon="trash" @text="Delete" @onClick={{fn this.deleteCategory subCategory}} />
+                </div>
+
+                {{#if category.subcategories}}
+                    <ul class="ml-4">
+                        {{#each category.subcategories as |subCategory|}}
+                            <div class="flex justify-between items-center border-b border-gray-700 py-2">
+                                <li>{{subCategory.name}}</li>
+                                <div class="flex items-center space-x-2">
+                                    <Button @type="info" @size="sm" @icon="eye" @text="Add subcategories" @onClick={{fn this.addSubCategory subCategory}} />
+                                    <Button @type="danger" @size="sm" @icon="trash" @text="Delete" @onClick={{fn this.deleteCategory subCategory}} />
+                                </div>
                             </div>
-                        </div>
-                    {{/if}}
-                {{/each}}
+                        {{/each}}
+                    </ul>
+                {{/if}}
             {{/each}}
         </ul>
     </div>
diff --git a/addon/components/admin/product-category.js b/addon/components/admin/product-category.js
index f7c3e1e4..27ec16de 100644
--- a/addon/components/admin/product-category.js
+++ b/addon/components/admin/product-category.js
@@ -3,6 +3,7 @@ import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 import { dasherize } from '@ember/string';
+
 export default class AdminProductCategoryComponent extends Component {
     @service store;
     @service modalsManager;
@@ -19,7 +20,7 @@ export default class AdminProductCategoryComponent extends Component {
     constructor() {
         super(...arguments);
         this.category = this.args.category;
-        this.fetchCategories();
+        this.fetchCategoryHierarchy();
     }
 
     @action async addCategory() {
@@ -57,22 +58,28 @@ export default class AdminProductCategoryComponent extends Component {
 
                 return category.save().then(() => {
                     this.notifications.success('New product category created.');
-                    return this.fetchCategories();
+                    return this.fetchCategoryHierarchy();
                 });
             },
         });
     }
 
-    @action async fetchCategories() {
-        this.categories = await this.store.query('category', {
+    @action async fetchCategoryHierarchy() {
+        const allCategories = await this.store.query('category', {
             for: 'pallet_product',
+            with_subcategories: true,
+        });
+
+        this.categories = allCategories.filter((category) => !category.parent);
+        this.categories.forEach((parentCategory) => {
+            parentCategory.subcategories = allCategories.filter((subcategory) => subcategory.parent?.id === parentCategory.id);
         });
     }
 
-    @action async addSubCategory(category) {
+    @action async addSubCategory(parentCategory) {
         const subCategory = this.store.createRecord('category', {
+            parent: parentCategory,
             for: 'pallet_product',
-            parent: category,
         });
 
         this.modalsManager.show('modals/create-product-category', {
@@ -86,13 +93,13 @@ export default class AdminProductCategoryComponent extends Component {
                 this.fetch.uploadFile.perform(
                     file,
                     {
-                        path: `uploads/${subCategory.company_uuid}/product-category-icon/${dasherize(subCategory.name ?? this.currentUser.companyId)}`,
-                        subject_uuid: subCategory.id,
+                        path: `uploads/${category.company_uuid}/product-category-icon/${dasherize(category.name ?? this.currentUser.companyId)}`,
+                        subject_uuid: category.id,
                         subject_type: `category`,
                         type: `category_icon`,
                     },
                     (uploadedFile) => {
-                        subCategory.setProperties({
+                        category.setProperties({
                             icon_file_uuid: uploadedFile.id,
                             icon_url: uploadedFile.url,
                             icon: uploadedFile,
@@ -106,12 +113,10 @@ export default class AdminProductCategoryComponent extends Component {
                 try {
                     await subCategory.save();
                     this.notifications.success('New subcategory created.');
-                    await this.fetchCategories();
+                    await this.fetchCategoryHierarchy();
                 } catch (error) {
                     this.notifications.error('Error creating subcategory.');
                     console.error('Error creating subcategory:', error);
-                } finally {
-                    modal.stopLoading();
                 }
             },
         });
@@ -124,7 +129,7 @@ export default class AdminProductCategoryComponent extends Component {
             try {
                 await category.destroyRecord();
                 this.notifications.success('Category deleted successfully.');
-                await this.fetchCategories();
+                await this.fetchCategoryHierarchy();
             } catch (error) {
                 this.notifications.error('Error deleting category.');
                 console.error('Error deleting category:', error);