diff --git a/src/client/dd-hub-react/src/_mock/_data.ts b/src/client/dd-hub-react/src/_mock/_data.ts
index e80404e..07cc88e 100644
--- a/src/client/dd-hub-react/src/_mock/_data.ts
+++ b/src/client/dd-hub-react/src/_mock/_data.ts
@@ -1,4 +1,5 @@
 import { Filter } from 'src/api/filter-service';
+import { Product } from 'src/api/product-service';
 
 import {
   _id,
@@ -76,7 +77,7 @@ const COLORS = [
   '#FFC107',
 ];
 
-export const _products = [...Array(24)].map((_, index) => {
+export const _productsTextile = [...Array(24)].map((_, index) => {
   const setIndex = index + 1;
 
   return {
@@ -211,6 +212,19 @@ export const _notifications = [
   },
 ];
 
+export const _products: Product[] = [
+  {
+    id: '1',
+    name: "User Manager",
+    version: "1.0.0"
+  },
+  {
+    id: '2',
+    name: "Envelope Generator",
+    version: "1.0.0"
+  }
+];
+
 export const _filters: Filter[] = [
   { id: 1, label: 'Rechnungsnummer', name: 'invoiceNumber', type: 'VARCHAR' },
   { id: 2, label: 'Kundenname', name: 'customerName', type: 'VARCHAR' },
diff --git a/src/client/dd-hub-react/src/api/product-service.ts b/src/client/dd-hub-react/src/api/product-service.ts
index 36d5c58..3904a3b 100644
--- a/src/client/dd-hub-react/src/api/product-service.ts
+++ b/src/client/dd-hub-react/src/api/product-service.ts
@@ -1,3 +1,5 @@
+import { _products } from "src/_mock";
+
 export type Product = {
     id: string;
     name: string;
@@ -16,16 +18,5 @@ export type Product = {
  */
 export function getProductsAsync(): Promise<Product[]> {
     //TODO: Implement the API call using fetch or axios
-    return Promise.resolve([
-        {
-            id: '1',
-            name: "User Manager",
-            version: "1.0.0"
-        },
-        {
-            id: '2',
-            name: "Envelope Generator",
-            version: "1.0.0"
-        }
-    ]);
+    return Promise.resolve(_products);
 }
\ No newline at end of file