diff --git a/examples/generic.html b/examples/generic.html
index e86a734..142f2f8 100644
--- a/examples/generic.html
+++ b/examples/generic.html
@@ -17,19 +17,49 @@
       <div class="core items-1">
         <div class="item s" style="transform: translate(-50%, -50%);"></div>
       </div>
-      <div class="ring-3 items-13">
-         <div class=" item m upper surface ">
-          
+      <div class="ring-3 items-4">
+        <div class="arc"></div>
+        <div class="arc"></div>
+        <div class="arc"></div>
+        <div class="arc"></div>
+      </div>
+      <div class="ring-3 items-6">
+         <div class=" item m ">
+          <div class="ring-3 items-4">
+            <div class="arc"></div>
+            <div class="arc"></div>
+            <div class="arc"></div>
+            <div class="arc"></div>
+          </div>
+          <div class="ring-3 items-4">
+            <div class="item s lower">
+              <div class="ring-3 items-3">
+                <div class="arc"></div>
+                <div class="arc"></div>
+                <div class="arc"></div>
+              </div>
+              <div class="ring-3 ">
+                <svg class="z-svg">
+                  <circle class="percent" style="--val: 59; stroke: purple;" /> 
+                </svg>
+                
+              </div>
+              
+            </div>
+            <div class="item s"><div class="label pos-90"><span class="label__text">hole</span></div></div>
+            <div class="item s"></div>
+            <div class="item s"></div>
+          </div>
         </div>
-        <div class="item m upper surface">
+        <div class="item m">
         </div> 
-        <div class="item m upper surface">
+        <div class="item m">
         </div>
-        <div class=" item m upper surface ">
+        <div class=" item m ">
         </div>
-        <div class="item m upper surface">
+        <div class="item m">
         </div> 
-        <div class="item m upper surface">
+        <div class="item m">
         </div>
       </div>
     </div>
diff --git a/examples/watch.html b/examples/watch.html
index e815287..e84bb85 100644
--- a/examples/watch.html
+++ b/examples/watch.html
@@ -24,9 +24,9 @@
   <body>
     <div class="z-container" >
       <div class="core offset-270 ">
-        <hr class="item line hora" style="width: 110px; height: 6px;  border:1px solid red; --angle: 0;  --item-number: 1;">
-        <hr class="item line minuto" style="width: 160px; height: 3px; border:1px solid rgb(157, 2, 247);  --angle: 0;  --item-number: 1;">
-        <hr class="item line segundo" style="width: 210px; height: 1px; border:1px solid rgb(0, 245, 61);  --angle: 0;  --item-number: 1;">
+        <hr class="item line hora" style="width: 110px; height: 6px;  border:1px solid red; --angle: 0;  --item-number: 2;">
+        <hr class="item line minuto" style="width: 160px; height: 3px; border:1px solid rgb(157, 2, 247);  --angle: 0;  --item-number: 2;">
+        <hr class="item line segundo" style="width: 210px; height: 1px; border:1px solid rgb(0, 245, 61);  --angle: 0;  --item-number: 2;">
       </div>
       <div class="ring-1 items-3 offset-270 arc-90">
         <div class="arc"></div>
@@ -54,7 +54,7 @@
       </div>
       <div class="ring-3 items-12 offset-270">
         <svg class="z-svg">
-          <circle class="percent hour"/>   
+          <circle class="percent hour" style="--stroke: 60"/>   
         </svg>
       </div>
       <div class="ring-3">
