diff --git a/src/app/core/components/navigation/navigation.component.html b/src/app/core/components/navigation/navigation.component.html
index 37c5929..255fba1 100644
--- a/src/app/core/components/navigation/navigation.component.html
+++ b/src/app/core/components/navigation/navigation.component.html
@@ -1,11 +1,16 @@
 <div class="navigation-container">
   <vcl-navigation
-    *ngIf="categories$ | async"
     layout="horizontal"
     class="row justify-content-center"
     style="text-align: center"
   >
-    <vcl-navigation-item>
+    <vcl-navigation-item *ngFor="let category of categories$ | async">
+      <vcl-navigation-label class="navigation-item">
+        {{ category.name }}
+      </vcl-navigation-label>
+    </vcl-navigation-item>
+
+    <!--<vcl-navigation-item >
       <vcl-navigation-label class="navigation-item">
         {{ "Navigation.NewIn" | translate }}
       </vcl-navigation-label>
@@ -19,7 +24,8 @@
       <vcl-navigation-label class="navigation-item">
         {{ "Navigation.Shoes" | translate }}
       </vcl-navigation-label>
-    </vcl-navigation-item>
+    </vcl-navigation-item> -->
+
     <!--<vcl-navigation-item>
       <vcl-navigation-label>
         {{ 'Navigation.Accessories' | translate }}
diff --git a/src/app/core/components/navigation/navigation.component.ts b/src/app/core/components/navigation/navigation.component.ts
index e790c71..a73356a 100644
--- a/src/app/core/components/navigation/navigation.component.ts
+++ b/src/app/core/components/navigation/navigation.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
+import { map } from 'rxjs';
 import { ProductCategoryService } from 'src/app/features/products/services/product-category.service';
 
 @Component({
@@ -8,7 +9,9 @@ import { ProductCategoryService } from 'src/app/features/products/services/produ
   styleUrls: ['./navigation.component.scss'],
 })
 export class NavigationComponent {
-  categories$ = this.productCategoryService.category$;
+  categories$ = this.productCategoryService.category$.pipe(
+    map((cat) => cat.filter((cat) => cat.parent === null))
+  );
 
   constructor(
     private router: Router,
diff --git a/src/app/features/products/services/product-category.service.ts b/src/app/features/products/services/product-category.service.ts
index 41a8a06..be52cef 100644
--- a/src/app/features/products/services/product-category.service.ts
+++ b/src/app/features/products/services/product-category.service.ts
@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
-import { catchError, of, tap } from 'rxjs';
+import { catchError, map, of, tap } from 'rxjs';
 import {
+  IoRestorecommerceProductCategoryProductCategory,
   IoRestorecommerceResourcebaseFilterOperation,
   IoRestorecommerceResourcebaseFilterOpOperator,
   ProductCategoryQueryGQL,
@@ -24,11 +25,12 @@ export class ProductCategoryService {
                 operation: IoRestorecommerceResourcebaseFilterOperation.In,
                 value: 'r-ug',
               },
-              {
-                field: 'parent.parent_id',
-                value: '',
-                operation: IoRestorecommerceResourcebaseFilterOperation.Eq,
-              },
+              // Parent items are items with parent as null: The filter for this doesn't work.
+              // {
+              //   field: 'parent.parent_id',
+              //   value: '',
+              //   operation: IoRestorecommerceResourcebaseFilterOperation.Eq,
+              // },
             ],
             operator: IoRestorecommerceResourcebaseFilterOpOperator.And,
           },
@@ -36,6 +38,12 @@ export class ProductCategoryService {
       },
     })
     .pipe(
+      map((response) =>
+        response.data.catalog.product_category.Read.details.items.map(
+          (item) =>
+            item.payload as IoRestorecommerceProductCategoryProductCategory
+        )
+      ),
       tap((data) => console.log('category data', data)),
       catchError((err) => {
         console.log('Error:', err);