diff --git a/README.md b/README.md
index 3ba2e7b..816a302 100644
--- a/README.md
+++ b/README.md
@@ -7,6 +7,8 @@
 
 🤷‍♂️ zero-dependency, 🤏 tiny JS base class for creating reactive custom elements easily ✨
 
+![counter example code snippet](https://raw.githubusercontent.com/ayoayco/web-component-base/main/assets/IMG_0682.png)
+
 When you extend the `WebComponent` class for your component, you only have to define the `template` and `properties`. Any change in any property value will automatically cause just the component UI to render.
 
 The result is a reactive UI on property changes. [View on CodePen ↗](https://codepen.io/ayoayco-the-styleful/pen/ZEwoNOz?editors=1010)
diff --git a/assets/IMG_0682.png b/assets/IMG_0682.png
new file mode 100644
index 0000000..2697f72
Binary files /dev/null and b/assets/IMG_0682.png differ
diff --git a/assets/IMG_0683.png b/assets/IMG_0683.png
new file mode 100644
index 0000000..7210a7f
Binary files /dev/null and b/assets/IMG_0683.png differ
diff --git a/assets/IMG_0684.png b/assets/IMG_0684.png
new file mode 100644
index 0000000..aa64cf3
Binary files /dev/null and b/assets/IMG_0684.png differ