diff --git a/example/src/App.tsx b/example/src/App.tsx
index 3914f81..541ce9d 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -1,10 +1,122 @@
 import React from 'react'
 
-import { ExampleComponent } from 'react-product-configurator'
+import { ProductConfigurator } from 'react-product-configurator'
 import 'react-product-configurator/dist/index.css'
+import {Category} from "../../src";
+
+import CaseDefault from "./img/thumbnail-case.png";
+import CaseRed from "./img/case/case-red.png";
+import CaseBlue from "./img/case/case-blue.png";
+import CaseGreen from "./img/case/case-green.png";
+import BeltDefault from "./img/belt/belt-default.png";
+import BeltRed from "./img/belt/belt-red.png";
+import BeltBlue from "./img/belt/belt-blue.png";
+import BeltGreen from "./img/belt/belt-green.png";
+import HandleDefault from "./img/handle/handle-default.png";
+import HandleRed from "./img/handle/handle-red.png";
+import HandleBlue from "./img/handle/handle-blue.png";
+import HandleGreen from "./img/handle/handle-green.png";
 
 const App = () => {
-  return <ExampleComponent text="Create React Library Example 😄" />
+    let cats: Category[] = [
+        {
+            name: "Case",
+            thumbnail: CaseDefault,
+            layer: 1,
+            items: [
+                    {
+                        name: "Default",
+                        thumbnail: CaseDefault,
+                        price: 10.99,
+                        image: CaseDefault,
+                        default: true
+                    },
+                    {
+                        name: "Red",
+                        thumbnail: CaseRed,
+                        price: 15.99,
+                        image: CaseRed
+                    },
+                    {
+                        name: "Blue",
+                        thumbnail: CaseBlue,
+                        price: 15.99,
+                        image: CaseBlue
+                    },
+                    {
+                        name: "Green",
+                        thumbnail: CaseGreen,
+                        price: 15.99,
+                        image: CaseGreen
+                    }
+                ]
+        },
+        {
+            name: "Belt",
+            thumbnail: BeltDefault,
+            layer: 0,
+            items: [
+                {
+                    name: "Default",
+                    thumbnail: BeltDefault,
+                    price: 10.99,
+                    default: true,
+                    image: BeltDefault
+                },
+                {
+                    name: "Red",
+                    thumbnail: BeltRed,
+                    price: 15.99,
+                    image: BeltRed
+                },
+                {
+                    name: "Blue",
+                    thumbnail: BeltBlue,
+                    price: 15.99,
+                    image: BeltBlue
+                },
+                {
+                    name: "Green",
+                    thumbnail: BeltGreen,
+                    price: 15.99,
+                    image: BeltGreen
+                }
+            ]
+        },
+        {
+            name: "Handle",
+            thumbnail: HandleDefault,
+            layer: 2,
+            items: [
+                {
+                    name: "Default",
+                    thumbnail: HandleDefault,
+                    price: 10.99,
+                    default: true,
+                    image: HandleDefault
+                },
+                {
+                    name: "Red",
+                    thumbnail: HandleRed,
+                    price: 15.99,
+                    image: HandleRed
+                },
+                {
+                    name: "Blue",
+                    thumbnail: HandleBlue,
+                    price: 15.99,
+                    image: HandleBlue
+                },
+                {
+                    name: "Green",
+                    thumbnail: HandleGreen,
+                    price: 15.99,
+                    image: HandleGreen
+                }
+            ]
+        },
+    ];
+    return <ProductConfigurator name="Hi!" categories={cats} />
 }
 
 export default App
diff --git a/example/src/img/belt/belt-blue.png b/example/src/img/belt/belt-blue.png
new file mode 100644
index 0000000..f36ef4c
Binary files /dev/null and b/example/src/img/belt/belt-blue.png differ
diff --git a/example/src/img/belt/belt-default.png b/example/src/img/belt/belt-default.png
new file mode 100644
index 0000000..127c42d
Binary files /dev/null and b/example/src/img/belt/belt-default.png differ
diff --git a/example/src/img/belt/belt-green.png b/example/src/img/belt/belt-green.png
new file mode 100644
index 0000000..5102fd9
Binary files /dev/null and b/example/src/img/belt/belt-green.png differ
diff --git a/example/src/img/belt/belt-red.png b/example/src/img/belt/belt-red.png
new file mode 100644
index 0000000..2628870
Binary files /dev/null and b/example/src/img/belt/belt-red.png differ
diff --git a/example/src/img/case/case-blue.png b/example/src/img/case/case-blue.png
new file mode 100644
index 0000000..ef62235
Binary files /dev/null and b/example/src/img/case/case-blue.png differ
diff --git a/example/src/img/case/case-green.png b/example/src/img/case/case-green.png
new file mode 100644
index 0000000..d14eab3
Binary files /dev/null and b/example/src/img/case/case-green.png differ
diff --git a/example/src/img/case/case-red.png b/example/src/img/case/case-red.png
new file mode 100644
index 0000000..85685dc
Binary files /dev/null and b/example/src/img/case/case-red.png differ
diff --git a/example/src/img/handle/handle-blue.png b/example/src/img/handle/handle-blue.png
new file mode 100644
index 0000000..e5a0249
Binary files /dev/null and b/example/src/img/handle/handle-blue.png differ
diff --git a/example/src/img/handle/handle-default.png b/example/src/img/handle/handle-default.png
new file mode 100644
index 0000000..e9d183f
Binary files /dev/null and b/example/src/img/handle/handle-default.png differ
diff --git a/example/src/img/handle/handle-green.png b/example/src/img/handle/handle-green.png
new file mode 100644
index 0000000..6806615
Binary files /dev/null and b/example/src/img/handle/handle-green.png differ
diff --git a/example/src/img/handle/handle-red.png b/example/src/img/handle/handle-red.png
new file mode 100644
index 0000000..e2adc35
Binary files /dev/null and b/example/src/img/handle/handle-red.png differ
diff --git a/example/src/img/thumbnail-case.png b/example/src/img/thumbnail-case.png
new file mode 100644
index 0000000..b270ecf
Binary files /dev/null and b/example/src/img/thumbnail-case.png differ
diff --git a/example/src/img/thumbnails/blue.png b/example/src/img/thumbnails/blue.png
new file mode 100644
index 0000000..c3d9cfb
Binary files /dev/null and b/example/src/img/thumbnails/blue.png differ
diff --git a/example/src/img/thumbnails/default.png b/example/src/img/thumbnails/default.png
new file mode 100644
index 0000000..fea9d17
Binary files /dev/null and b/example/src/img/thumbnails/default.png differ
diff --git a/example/src/img/thumbnails/green.png b/example/src/img/thumbnails/green.png
new file mode 100644
index 0000000..683b85d
Binary files /dev/null and b/example/src/img/thumbnails/green.png differ
diff --git a/example/src/img/thumbnails/red.png b/example/src/img/thumbnails/red.png
new file mode 100644
index 0000000..5b9339e
Binary files /dev/null and b/example/src/img/thumbnails/red.png differ