diff --git a/components/s-button.html b/components/s-button.js
similarity index 85%
rename from components/s-button.html
rename to components/s-button.js
index 1f4fd77..4e1b28e 100644
--- a/components/s-button.html
+++ b/components/s-button.js
@@ -1,6 +1,5 @@
-<script>
-
-    document.registerElement('s-button', class extends SlimBaseElement {
++(function() {
+    Slim('s-button', class extends SlimBaseElement {
 
         get updateOnAttributes() {
             return ['onclick', 'text']
@@ -25,6 +24,4 @@
 
 
     })
-
-
-</script>
\ No newline at end of file
+}())
\ No newline at end of file
diff --git a/components/s-container.js b/components/s-container.js
index 3a5214e..eb00cc7 100644
--- a/components/s-container.js
+++ b/components/s-container.js
@@ -1,6 +1,6 @@
 +(function() {
 
-    document.registerElement('s-container', class extends SlimBaseElement {
+    Slim('s-container', class extends SlimBaseElement {
 
         onAttributeChanged(attribute, oldVal, newVal) {
             switch (attribute) {
diff --git a/components/s-input.html b/components/s-input.js
similarity index 93%
rename from components/s-input.html
rename to components/s-input.js
index c98ac7e..0628faa 100644
--- a/components/s-input.html
+++ b/components/s-input.js
@@ -1,5 +1,5 @@
-<script>
-    document.registerElement('s-input', class extends SlimBaseElement {
+;(function(){
+    Slim('s-input', class extends SlimBaseElement {
 
         get updateOnAttributes() {
             return ['onchange',
@@ -49,4 +49,4 @@
         }
 
     })
-</script>
\ No newline at end of file
+})()
\ No newline at end of file
diff --git a/components/s-repeat.html b/components/s-repeat.js
similarity index 88%
rename from components/s-repeat.html
rename to components/s-repeat.js
index dcafd17..b67bfbc 100644
--- a/components/s-repeat.html
+++ b/components/s-repeat.js
@@ -1,8 +1,6 @@
-<script type="text/javascript">
+  +(function() {
 
-    +(function() {
-
-        document.registerElement('s-repeat', class SlimRepeat extends SlimBaseElement {
+        Slim('s-repeat', class SlimRepeat extends SlimBaseElement {
 
             afterRender() {
                 this.update()
@@ -39,5 +37,4 @@
                 }
             }
         })
-    })() 
-</script>
\ No newline at end of file
+    })()
\ No newline at end of file
diff --git a/components/s-states.js b/components/s-states.js
index 16b0f7f..1edc0e6 100644
--- a/components/s-states.js
+++ b/components/s-states.js
@@ -2,7 +2,7 @@
 
     const template = `<div currentState=""></div>`
 
-    document.registerElement('s-states', class extends SlimBaseElement {
+    Slim('s-states', class extends SlimBaseElement {
 
         get updateOnAttributes() {
             return ['current-state']
diff --git a/example/Components/button-demo.html b/example/Components/button-demo.html
index ef06b41..6ab58a2 100644
--- a/example/Components/button-demo.html
+++ b/example/Components/button-demo.html
@@ -1,4 +1,4 @@
-<link rel="import" href="../../components/s-button.html"/>
+<link rel="import" href="../../components/s-button.js"/>
 <script>
 
 
diff --git a/example/Components/index.html b/example/Components/index.html
index ca59343..61fbfd9 100644
--- a/example/Components/index.html
+++ b/example/Components/index.html
@@ -8,9 +8,9 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.23/webcomponents.min.js"></script>
 
     <script src="../../SlimElement.js"></script>
-    <link rel="import" href="../../components/s-button.html" />
-    <link rel="import" href="../../components/s-input.html" />
-    <link rel="import" href="../../components/s-repeat.html" />
+    <link rel="import" href="../../components/s-button.js" />
+    <link rel="import" href="../../components/s-input.js" />
+    <link rel="import" href="../../components/s-repeat.js" />
     <link rel="import" href="./button-demo.html" />
     <link rel="import" href="./repeat-demo.html" />
     <link rel="import" href="./repeat-item.html" />
@@ -27,8 +27,9 @@
 
         body {
             padding: 0;
+            margin: 0;
+            margin-bottom: 5em;
             font-size: 1.5em;
-            padding-top: 6em;
             background-color: #5aa99e;
             font-family: "Roboto Slab", Sans-serif;
         }
@@ -44,6 +45,17 @@
             align-items: center;
             justify-content: space-around;
             padding: 2em;
+            margin: 0em;
+            margin-bottom: 4em;
+        }
+
+        h6 p {
+            text-align: left;
+            padding-left: 1.6em;
+        }
+
+        h6 img {
+            margin-left: 5em;
         }
 
         h2, h3, h4, h5 {
@@ -79,20 +91,34 @@
             letter-spacing: 0.015em;
             background-color: lightblue;
         }
+
+        span.license {
+            font-family: Sans-serif;
+            position: fixed;
+            bottom: 0;
+            text-align: center;
+            width: 100%;
+            display: inline-block;
+            background-color: white;
+            padding: 0.5em;
+            font-size: 0.8em;
+        }
     </style>
 
 </head>
 <body>
+<span class="license">© 2016 Avichay Eyal. All code provided is open source under the MIT License</span>
 <a href="https://github.com/eavichay/slim-web-components" target="_blank"><img style="position: fixed; top: 0; left: 0; border: 0;" src="https://camo.githubusercontent.com/567c3a48d796e2fc06ea80409cc9dd82bf714434/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png"></a>
 
 <s-container id="main-container" layout="vertical">
 
     <h6>
     <img src="./slim.js.logo.png" width="168px" height="56px"/>
+        <p>With es6 and slim you could write native web components double-time with no hassle of using external libraries that affect your workflow</p>
     </h6>
     <h1>SLIM is your PRODUCTIVE way</h1>
     <h1>for writing NATIVE web components</h1>
-    <p>With es6 and slim you could write native web components double-time with no hassle of using external libraries that affect your workflow</p>
+
     <h2>Featuring</h2>
     <ul>
         <li>Lightweight and fast (~1KB minified)</li>
diff --git a/example/Components/repeat-demo.html b/example/Components/repeat-demo.html
index 35722c9..bd3e585 100644
--- a/example/Components/repeat-demo.html
+++ b/example/Components/repeat-demo.html
@@ -1,6 +1,6 @@
 <script>
 
-    document.registerElement('repeat-demo', class extends SlimBaseElement {
+    Slim('repeat-demo', class extends SlimBaseElement {
 
         get myItems() {
             return this._myItems;
diff --git a/example/Kanban/KanbanDemo.html b/example/Kanban/KanbanDemo.html
index 08a1c56..7340d8e 100644
--- a/example/Kanban/KanbanDemo.html
+++ b/example/Kanban/KanbanDemo.html
@@ -5,7 +5,7 @@
     <title>Kanban Demo - SlimJS</title>
 
     <link rel="import" href="../../SlimElement.js" />
-    <link rel="import" href="../../components/s-repeat.html" />
+    <link rel="import" href="../../components/s-repeat.js" />
     <script src="../../components/s-container.js"></script>
 
     <script src="KanbanModel.js"></script>
diff --git a/example/States/index.html b/example/States/index.html
index 42e2900..1308c0e 100644
--- a/example/States/index.html
+++ b/example/States/index.html
@@ -19,7 +19,7 @@
 
 
 </s-states>
-<button onclick="nextState()" value="next..."></button>
+<input type="button" onclick="nextState()" value="next..."></input>
 
 <script>
 
diff --git a/example/Todo/TodoDemo.html b/example/Todo/TodoDemo.html
index 038ab30..4e2a6ed 100644
--- a/example/Todo/TodoDemo.html
+++ b/example/Todo/TodoDemo.html
@@ -7,7 +7,7 @@
     <link rel="import" href="../../SlimElement.js"/>
     <script src="TodoModel.js"></script>
 
-    <link rel="import" href="../../components/s-repeat.html">
+    <link rel="import" href="../../components/s-repeat.js">
     <script src="../../components/s-container.js"></script>
     <script src="./todo-new-task-input.js"></script>
     <script src="./todo-task-list.js"></script>