diff --git a/pages/404/index.js b/pages/404/index.js
index 7aeef96..08a2936 100644
--- a/pages/404/index.js
+++ b/pages/404/index.js
@@ -1,4 +1,4 @@
-let {Component, useParams} = await import('/dist/vader.js')
+let {Component, useParams} = await import('/vader.js')
 
 class Index extends Component{
     constructor(props){
diff --git a/pages/docs/index.js b/pages/docs/index.js
index dd35148..0659e89 100644
--- a/pages/docs/index.js
+++ b/pages/docs/index.js
@@ -1,4 +1,4 @@
-let { Component, useState } = await import('/dist/vader.js')
+let { Component, useState } = await import('/vader.js')
 import { Nav }from '/dist/src/Nav.js' 
 import { Home } from '/dist/src/pages/docs/overview/index.js'
   
@@ -40,14 +40,14 @@ class Index extends Component {
 
                                 <li><a
                                     class='font-semibold'
-                                    onClick="${this.bind(`this.response.setQuery({ page: 'getting-started' }); `, false, false, '6kr7yc3y0vv', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="6kr7yc3y0vv", 
+                                    onClick="${this.bind(`this.response.setQuery({ page: 'getting-started' }); `, false, false, '2rkp1b05cbc', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="2rkp1b05cbc", 
                                 >Getting Started</a></li>
                                 <li class='p-1'><a
                                     class="${`
            ${path == '/docs/getting-started/installation' ? 'font-semibold text-blue-500 font-sans' : ''
                                         }
          `}",
-                                    onClick="${this.bind(`this.response.setQuery({ page: 'getting-started', subpage: 'installation' }); `, false, false, 'rqrsfi5o0ok', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="rqrsfi5o0ok", 
+                                    onClick="${this.bind(`this.response.setQuery({ page: 'getting-started', subpage: 'installation' }); `, false, false, 'ztyjefuzv1', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="ztyjefuzv1", 
                                 >Installation</a></li>
                                 <li class='p-1'><a
                                     class="${`
@@ -55,20 +55,20 @@ class Index extends Component {
            ${path == '/docs/getting-started/project-structure' ? 'font-semibold  text-blue-500 font-sans' : ''
                                         }
          `}",
-                                    onClick="${this.bind(`this.response.setQuery({ page: 'getting-started', subpage: 'project-structure' }); `, false, false, '8b0in2gxykt', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="8b0in2gxykt", 
+                                    onClick="${this.bind(`this.response.setQuery({ page: 'getting-started', subpage: 'project-structure' }); `, false, false, '08hs78caqoji', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="08hs78caqoji", 
                                 >Project Structure</a></li>
                                 
                                 <li class="p-1">
 
                                     <a
                                         class="${`${path == '/docs/getting-started/routing' ? 'font-semibold text-blue-500 font-sans' : ''}`}",
-                                        onClick="${this.bind(`this.response.setQuery({ page: 'getting-started', subpage: 'routing' }); `, false, false, '6p2q5fve0sf', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="6p2q5fve0sf", 
+                                        onClick="${this.bind(`this.response.setQuery({ page: 'getting-started', subpage: 'routing' }); `, false, false, 'vnr0112rdlo', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="vnr0112rdlo", 
                                     >Routing</a></li>
                                 <li class="p-1">
 
 <a
     class="${`${path == '/docs/getting-started/deployment' ? 'font-semibold text-blue-500 font-sans' : ''}`}",
-    onClick="${this.bind(`this.response.setQuery({ page: 'getting-started', subpage: 'deployment' }); `, false, false, '8g33q18le2q', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="8g33q18le2q", 
+    onClick="${this.bind(`this.response.setQuery({ page: 'getting-started', subpage: 'deployment' }); `, false, false, 'urq8uehj7qp', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="urq8uehj7qp", 
 >Deployment</a></li> 
   
                                     
@@ -106,7 +106,7 @@ class Index extends Component {
 
                         <ul class='p-5     fixed    flex flex-col text-sm gap-5'>
                             <li
-                                onClick="${this.bind(`this.response.setQuery({ page: 'getting-started' }); `, false, false, 'z0nfvfwf6n', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="z0nfvfwf6n", 
+                                onClick="${this.bind(`this.response.setQuery({ page: 'getting-started' }); `, false, false, 'ddtt7lvcjie', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="ddtt7lvcjie", 
                                 class='cursor-pointer'
                             >
                                 <a class='flex gap-2 hero'>
@@ -177,7 +177,7 @@ class Index extends Component {
                             ${
                                 path.includes('getting-started') ? `
                                     <li
-                                        onClick="${this.bind(`this.response.setQuery({ page: 'getting-started', subpage: 'installation' }); `, false, false, '525r4761nlk', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="525r4761nlk", 
+                                        onClick="${this.bind(`this.response.setQuery({ page: 'getting-started', subpage: 'installation' }); `, false, false, '9l302q84pxf', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="9l302q84pxf", 
                                         class='cursor-pointer'
                                     >
                                         <a
@@ -197,7 +197,7 @@ class Index extends Component {
                                         </a>
                                     </li>
                                     <li
-                                        onClick="${this.bind(`this.response.setQuery({ page: 'getting-started', subpage: 'project-structure' }); `, false, false, '8llhbsc7wz', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="8llhbsc7wz", 
+                                        onClick="${this.bind(`this.response.setQuery({ page: 'getting-started', subpage: 'project-structure' }); `, false, false, '8qpbu8wrnbd', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="8qpbu8wrnbd", 
                                         class='cursor-pointer'
                                     >
                                         <a class='flex gap-2 hero'>
@@ -212,7 +212,7 @@ class Index extends Component {
                                         </a>
                                     </li>
                                     <li
-                                        onClick="${this.bind(`this.response.setQuery({ page: 'getting-started', subpage: 'routing' }); `, false, false, '3kjuih1gju2', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="3kjuih1gju2", 
+                                        onClick="${this.bind(`this.response.setQuery({ page: 'getting-started', subpage: 'routing' }); `, false, false, 'kx9fnfuj5re', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="kx9fnfuj5re", 
                                         class='cursor-pointer'
                                     >
                                         <a class='flex gap-2 hero'>
@@ -229,7 +229,7 @@ class Index extends Component {
                                         </a>
                                     </li>
                                     <li
-                                        onClick="${this.bind(`this.response.setQuery({ page: 'getting-started', subpage: 'deployment' }); `, false, false, 'mw8rxbnlef', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="mw8rxbnlef", 
+                                        onClick="${this.bind(`this.response.setQuery({ page: 'getting-started', subpage: 'deployment' }); `, false, false, 'kbtws7ioqf9', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="kbtws7ioqf9", 
                                         class='cursor-pointer'
                                     >
                                         <a class='flex gap-2 hero'>
diff --git a/pages/index.js b/pages/index.js
index 59052b4..59a6c6b 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,4 +1,4 @@
-import { Component, useState, strictMount, useRef } from "/dist/vader.js"
+import { Component, useState, strictMount, useRef } from "/vader.js"
 import  {Button} from "/dist/src/button.js" 
 import {Nav }from '/dist/src/Nav.js' 
 import { ComponentExample} from "/dist/src/examples/component.js"
@@ -79,7 +79,7 @@ export default class Index extends Component {
 
                         <button
                             class="btn btn-ghost  shadow border-slate-200 border  hover:bg-white btn-sm w-fit text-center align-middle mx-auto mt-5"
-                            onClick="${this.bind(`setView(view === 'index' ? 'stackblitz' : 'index'); console.log(view); `, false, false, '6lzjjsogrba', "setView,view,embedref,", setView, view, embedref)}", usesEvent="true", eventType="onClick",data-ref="6lzjjsogrba", 
+                            onClick="${this.bind(`setView(view === 'index' ? 'stackblitz' : 'index'); console.log(view); `, false, false, 'pmq1yyr1prc', "setView,view,embedref,", setView, view, embedref)}", usesEvent="true", eventType="onClick",data-ref="pmq1yyr1prc", 
                         >
                             ${
                                 view === 'index' ? 'Click to View Code' : 'Click to View Example Component'
@@ -97,7 +97,7 @@ export default class Index extends Component {
                                     : `
                                         <embed
                                             ref="${embedref.bind}",
-                                            onLoad="${this.bind(``, false, false, 'ksey12ogw', "setLoaded,loaded,", setLoaded, loaded)}", usesEvent="true", eventType="onLoad",data-ref="ksey12ogw", 
+                                            onLoad="${this.bind(``, false, false, '0kjdxrcfucjb', "setLoaded,loaded,", setLoaded, loaded)}", usesEvent="true", eventType="onLoad",data-ref="0kjdxrcfucjb", 
                                             class="h-[600px] w-[600px] rounded  "
                                             src="https://stackblitz.com/edit/web-platform-aanbgw?file=dev%2Fpages%2Findex.jsx&view=editor"
                                             style={{ width: '100%', height: '100%' }}
diff --git a/src/Nav.js b/src/Nav.js
index 72fb1b8..c430741 100644
--- a/src/Nav.js
+++ b/src/Nav.js
@@ -1,4 +1,4 @@
-import { Component } from '/dist/vader.js'
+import { Component } from '/vader.js'
 import {SearchBar}  from './search.js' 
 export class Nav extends Component {
     constructor(props) {
@@ -8,7 +8,7 @@ export class Nav extends Component {
         return `
             <div class="navbar  sticky top-0 z-[9999]    bg-white ">
                 <div class="navbar-start"
-                    onClick="${this.bind(`this.response.redirect('/'); `, false, false, '5uso0vs8dww', "", null)}", usesEvent="true", eventType="onClick",data-ref="5uso0vs8dww", 
+                    onClick="${this.bind(`this.response.redirect('/'); `, false, false, '88xzmtfqgv2', "", null)}", usesEvent="true", eventType="onClick",data-ref="88xzmtfqgv2", 
                 >
 
                     <img
diff --git a/src/button.js b/src/button.js
index 60157bb..14f08af 100644
--- a/src/button.js
+++ b/src/button.js
@@ -1,4 +1,4 @@
-import { Component } from "/dist/vader.js"
+import { Component } from "/vader.js"
  
 export class Button extends Component{
     constructor(props){
@@ -11,7 +11,7 @@ export class Button extends Component{
         return  `
            <button class="${this.props?.class}",
            name='button'
-            onClick="${this.bind(`console.log(this); this.parentNode.response.redirect(this.props?.redirect); `, false, false, 'n2p7ygclaml', "", null)}", usesEvent="true", eventType="onClick",data-ref="n2p7ygclaml", 
+            onClick="${this.bind(`console.log(this); this.parentNode.response.redirect(this.props?.redirect); `, false, false, 'lmfqp4vsa1n', "", null)}", usesEvent="true", eventType="onClick",data-ref="lmfqp4vsa1n", 
            >${this.props?.children}</button>
 
         `
diff --git a/src/collapse.js b/src/collapse.js
index 5f016f2..3b094f6 100644
--- a/src/collapse.js
+++ b/src/collapse.js
@@ -1,4 +1,4 @@
-import { Component, useState } from "/dist/vader.js"
+import { Component, useState } from "/vader.js"
 
 export class Collapse extends Component{
     constructor(props){
@@ -16,7 +16,7 @@ export class Collapse extends Component{
               
              >
                 <button class="${this.props?.class}",
-                 onClick="${this.bind(`setOpen(!open); this.props?.click(this.props?.redirectTo); `, false, false, '28k9qys4cti', "setOpen,open,", setOpen, open)}", usesEvent="true", eventType="onClick",data-ref="28k9qys4cti", >
+                 onClick="${this.bind(`setOpen(!open); this.props?.click(this.props?.redirectTo); `, false, false, '60jnfrlriyj', "setOpen,open,", setOpen, open)}", usesEvent="true", eventType="onClick",data-ref="60jnfrlriyj", >
                     ${this.props?.title}
                  </button>
                 <div 
diff --git a/src/examples/component.js b/src/examples/component.js
index c46b9b3..f263e04 100644
--- a/src/examples/component.js
+++ b/src/examples/component.js
@@ -1,4 +1,4 @@
-import {Component, useState, strictMount, useRef}  from '/dist/vader.js'
+import {Component, useState, strictMount, useRef}  from '/vader.js'
 
 class Video extends Component{
     constructor(props){
@@ -27,7 +27,7 @@ class Video extends Component{
                         ref="${likedRef.bind}",
                         xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="${1.5}", stroke="currentColor" 
                         class="${`w-6 h-6 cursor-pointer ${liked ? 'fill-error stroke-error' : ''}`}",
-                        onClick="${this.bind(`setLiked(!liked, likedRef.bind); `, false, false, 'fssn72isgwg', "setLiked,,liked,likedRef,event,", setLiked, liked, likedRef, event)}", usesEvent="true", eventType="onClick",data-ref="fssn72isgwg", 
+                        onClick="${this.bind(`setLiked(!liked, likedRef.bind); `, false, false, '9bhmzeuce0k', "setLiked,,liked,likedRef,event,", setLiked, liked, likedRef, event)}", usesEvent="true", eventType="onClick",data-ref="9bhmzeuce0k", 
                         >
                             <path strokeLinecap="round" strokeLinejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" />
                         </svg>
@@ -107,7 +107,7 @@ export class ComponentExample extends Component{
                    
                 
                     <input  
-                    onInput="${this.bind(filterVideos, true, false, 'od1tpdeqyz', "e, test", event, videos)}", usesEvent="true", eventType="onInput",data-ref="od1tpdeqyz",       
+                    onInput="${this.bind(filterVideos, true, false, 'gw856tfwt4w', "e, test", event, videos)}", usesEvent="true", eventType="onInput",data-ref="gw856tfwt4w",       
                     type="text" class="input input-bordered rounded-full" placeholder="Search..." />
                 </div>
                 <h1   class='font-bold text-xl  mx-5 p-2' ref="${searchHook.bind}", >${videos.length} Videos</h1>
diff --git a/src/pages/docs/deployment/index.js b/src/pages/docs/deployment/index.js
index d7f90bd..5f374f8 100644
--- a/src/pages/docs/deployment/index.js
+++ b/src/pages/docs/deployment/index.js
@@ -1,4 +1,4 @@
-import { Component } from "/dist/vader.js"
+import { Component } from "/vader.js"
 
 export class Deployment extends Component {
   constructor(props) {
@@ -13,7 +13,7 @@ export class Deployment extends Component {
         <div class="text-sm breadcrumbs">
           <ul>
             <li><a class='no-underline'
-              onClick="${this.bind(`this.props?.swapPage({ page: 'getting-started', subpage: '' }); `, false, false, 'c14egj16cm', "", null)}", usesEvent="true", eventType="onClick",data-ref="c14egj16cm", 
+              onClick="${this.bind(`this.props?.swapPage({ page: 'getting-started', subpage: '' }); `, false, false, 'jyogbu1tvei', "", null)}", usesEvent="true", eventType="onClick",data-ref="jyogbu1tvei", 
             >Getting Started</a></li>
             <li><a class='font-semibold'>Deployment</a></li>
           </ul>
diff --git a/src/pages/docs/hooks/index.js b/src/pages/docs/hooks/index.js
index 3443955..738e0b4 100644
--- a/src/pages/docs/hooks/index.js
+++ b/src/pages/docs/hooks/index.js
@@ -1,4 +1,4 @@
-import {useState, useRef, Component} from '/dist/vader.js'
+import {useState, useRef, Component} from '/vader.js'
 const data = {
   useState: `
   <div>
@@ -36,7 +36,7 @@ class Hooks extends Component {
              <li class='list-inside' >
                <a 
                class='text-blue-500 cursor-pointer hover:underline'
-               onClick="${this.bind(`this.props?.click('/docs/hooks/useState'); `, false, false, 'i8fhg6q8hs9', "", null)}", usesEvent="true", eventType="onClick",data-ref="i8fhg6q8hs9", >
+               onClick="${this.bind(`this.props?.click('/docs/hooks/useState'); `, false, false, 'mgjfc6u94sl', "", null)}", usesEvent="true", eventType="onClick",data-ref="mgjfc6u94sl", >
                   useState
                 </a>  
               </li>
diff --git a/src/pages/docs/overview/index.js b/src/pages/docs/overview/index.js
index fa43f48..20ae969 100644
--- a/src/pages/docs/overview/index.js
+++ b/src/pages/docs/overview/index.js
@@ -1,4 +1,4 @@
-import { Component, useState, useRef } from '/dist/vader.js'
+import { Component, useState, useRef } from '/vader.js'
 import {Routing}  from '/dist/src/pages/docs/routing/index.js' 
 import { Deployment } from '/dist/src/pages/docs/deployment/index.js' 
 class Installation extends Component {
@@ -16,7 +16,7 @@ class Installation extends Component {
         <div class="text-sm breadcrumbs">
           <ul>
             <li><a class='no-underline'
-              onClick="${this.bind(`this.props?.swapPage({ page: 'getting-started', subpage: '' }); `, false, false, 'ynmezjz5bxe', "", null)}", usesEvent="true", eventType="onClick",data-ref="ynmezjz5bxe", 
+              onClick="${this.bind(`this.props?.swapPage({ page: 'getting-started', subpage: '' }); `, false, false, 'k1k4xfhpyn', "", null)}", usesEvent="true", eventType="onClick",data-ref="k1k4xfhpyn", 
             >Getting Started</a></li>
             <li><a class='font-semibold'>Installation</a></li>
           </ul>
@@ -48,7 +48,7 @@ class Installation extends Component {
               </svg>
               <div class="absolute end-5"
                 ref="${copiedRef.bind}",
-                onClick="${this.bind(`navigator.clipboard.writeText('npx vaderjs@latest --build'); setSaved(!saved, copiedRef.bind); setTimeout(() => {; setSaved(false, copiedRef.bind); }, 1000); `, false, false, '1oogdshb6t8', "setSaved,saved,copiedRef,", setSaved, saved, copiedRef)}", usesEvent="true", eventType="onClick",data-ref="1oogdshb6t8", 
+                onClick="${this.bind(`navigator.clipboard.writeText('npx vaderjs@latest --build'); setSaved(!saved, copiedRef.bind); setTimeout(() => {; setSaved(false, copiedRef.bind); }, 1000); `, false, false, '83g1pl2r0fj', "setSaved,saved,copiedRef,", setSaved, saved, copiedRef)}", usesEvent="true", eventType="onClick",data-ref="83g1pl2r0fj", 
               >
                 <div class='hover:bg-base-200 px-[.4rem] py-[.4rem] rounded'>
                   ${
@@ -130,7 +130,7 @@ class Installation extends Component {
               </svg>
               <div class="absolute end-5"
                 ref="${copiedRef.bind}",
-                onClick="${this.bind(`navigator.clipboard.writeText(examples['1']); setSaved(!saved, copiedRef.bind); setTimeout(() => {; setSaved(false, copiedRef.bind); }, 1000); `, false, false, 'kshyl6giafd', "setSaved,saved,copiedRef,", setSaved, saved, copiedRef)}", usesEvent="true", eventType="onClick",data-ref="kshyl6giafd", 
+                onClick="${this.bind(`navigator.clipboard.writeText(examples['1']); setSaved(!saved, copiedRef.bind); setTimeout(() => {; setSaved(false, copiedRef.bind); }, 1000); `, false, false, 'hc2kdrip4xc', "setSaved,saved,copiedRef,", setSaved, saved, copiedRef)}", usesEvent="true", eventType="onClick",data-ref="hc2kdrip4xc", 
               >
                 <div class='hover:bg-base-200 px-[.4rem] py-[.4rem] rounded'>
                   ${
@@ -177,7 +177,7 @@ class Installation extends Component {
                 <div>
 
                   <li class='hover:bg-base-200 rounded'>
-                    <span class='mx-2'><span class='text-yellow-600'>import</span></span> <span class='text-blue-500'>${'{Component, useState}'}</span> <span class='text-yellow-600'>from</span> <span class='text-green-500'>'/dist/vader.js'</span> 
+                    <span class='mx-2'><span class='text-yellow-600'>import</span></span> <span class='text-blue-500'>${'{Component, useState}'}</span> <span class='text-yellow-600'>from</span> <span class='text-green-500'>'/vader.js'</span> 
                   </li>
                   <li class='hover:bg-base-200 rounded'>
                     <span class='mx-2'><span class='text-yellow-600'>class</span> <span class='text-blue-500'>Index</span> <span class='text-yellow-600'>extends</span> <span class='text-purple-500'>Component</span> <span class='text-purple-500'>${'{'}</span></span>
@@ -261,7 +261,7 @@ class Installation extends Component {
           <span
 
             class='font-bold mb-12 hover:opacity-100 cursor-pointer opacity-60 '
-            onClick="${this.bind(`console.log(this); this.props?.swapPage({ page: 'getting-started', subpage: '' }); `, false, false, '0u282cuclfwk', "", null)}", usesEvent="true", eventType="onClick",data-ref="0u282cuclfwk", 
+            onClick="${this.bind(`console.log(this); this.props?.swapPage({ page: 'getting-started', subpage: '' }); `, false, false, 'vg6jv5ryx8n', "", null)}", usesEvent="true", eventType="onClick",data-ref="vg6jv5ryx8n", 
           >Getting Started  </span>
         </div>
         <div class='mt-12 absolute mb-6 end-5  flex flex-col gap-3'>
@@ -271,7 +271,7 @@ class Installation extends Component {
           <span
 
             class='font-bold mb-12 hover:opacity-100 cursor-pointer opacity-60 '
-            onClick="${this.bind(`console.log(this); this.props?.swapPage({ page: 'getting-started', subpage: 'project-structure' }); `, false, false, 'g7g30pinm', "", null)}", usesEvent="true", eventType="onClick",data-ref="g7g30pinm", 
+            onClick="${this.bind(`console.log(this); this.props?.swapPage({ page: 'getting-started', subpage: 'project-structure' }); `, false, false, 'j4ju3y2zdh', "", null)}", usesEvent="true", eventType="onClick",data-ref="j4ju3y2zdh", 
           >Project Structure </span>
         </div>
 
@@ -295,7 +295,7 @@ class ProjectStructure extends Component {
         <div class="text-sm breadcrumbs">
           <ul>
             <li><a class='no-underline'
-              onClick="${this.bind(`this.props?.swapPage({ page: 'getting-started', subpage: '' }); `, false, false, '5k9v0ce9raf', "", null)}", usesEvent="true", eventType="onClick",data-ref="5k9v0ce9raf", 
+              onClick="${this.bind(`this.props?.swapPage({ page: 'getting-started', subpage: '' }); `, false, false, 'utqmg44gmld', "", null)}", usesEvent="true", eventType="onClick",data-ref="utqmg44gmld", 
             >Getting Started</a></li>
             <li><a class='font-semibold'>Page Structure</a></li>
           </ul>
@@ -377,7 +377,7 @@ class ProjectStructure extends Component {
           <span
 
             class='font-bold mb-12 hover:opacity-100 cursor-pointer opacity-60 '
-            onClick="${this.bind(`this.props?.swapPage({ page: 'getting-started', subpage: '' }); `, false, false, '1u57yf34oof', "", null)}", usesEvent="true", eventType="onClick",data-ref="1u57yf34oof", 
+            onClick="${this.bind(`this.props?.swapPage({ page: 'getting-started', subpage: '' }); `, false, false, '754kq5lok34', "", null)}", usesEvent="true", eventType="onClick",data-ref="754kq5lok34", 
           >Getting Started  </span>
         </div>
         <div class='mt-24 absolute mb-6 end-5  flex flex-col gap-3'>
@@ -387,7 +387,7 @@ class ProjectStructure extends Component {
           <span
 
             class='font-bold mb-12 hover:opacity-100 cursor-pointer opacity-60 '
-            onClick="${this.bind(`this.props?.swapPage({ page: 'getting-started', subpage: 'routing' }); `, false, false, 'gci2i52kjgr', "", null)}", usesEvent="true", eventType="onClick",data-ref="gci2i52kjgr", 
+            onClick="${this.bind(`this.props?.swapPage({ page: 'getting-started', subpage: 'routing' }); `, false, false, 'lydu0owwqr', "", null)}", usesEvent="true", eventType="onClick",data-ref="lydu0owwqr", 
           >Routing </span>
         </div>
      </div>
@@ -506,7 +506,7 @@ export class Home extends Component {
                   <span
 
                     class='font-bold cursor-pointer hover:opacity-100 opacity-60 '
-                    onClick="${this.bind(`this.props?.click('getting-started', 'installation'); `, false, false, 'p1oliek9lwk', "", null)}", usesEvent="true", eventType="onClick",data-ref="p1oliek9lwk", 
+                    onClick="${this.bind(`this.props?.click('getting-started', 'installation'); `, false, false, 'o2oqurvmqz', "", null)}", usesEvent="true", eventType="onClick",data-ref="o2oqurvmqz", 
                   >Installation  </span>
                 </div>
               </div>
diff --git a/src/pages/docs/routing/index.js b/src/pages/docs/routing/index.js
index b9e1eeb..8225d16 100644
--- a/src/pages/docs/routing/index.js
+++ b/src/pages/docs/routing/index.js
@@ -1,4 +1,4 @@
-import { Component, useRef, useState } from '/dist/vader.js'
+import { Component, useRef, useState } from '/vader.js'
 
 export class Routing extends Component {
   constructor(props) {
@@ -17,7 +17,7 @@ export class Routing extends Component {
         <div class="text-sm breadcrumbs">
           <ul>
             <li><a class='no-underline'
-              onClick="${this.bind(`this.props?.swapPage({ page: 'getting-started', subpage: '' }); `, false, false, 'woc25hpmcd', "", null)}", usesEvent="true", eventType="onClick",data-ref="woc25hpmcd", 
+              onClick="${this.bind(`this.props?.swapPage({ page: 'getting-started', subpage: '' }); `, false, false, 'rs613olvz0b', "", null)}", usesEvent="true", eventType="onClick",data-ref="rs613olvz0b", 
             >Getting Started</a></li>
             <li><a class='font-semibold'>Routing</a></li>
           </ul>
@@ -35,7 +35,7 @@ export class Routing extends Component {
         <h2 class='text-2xl font-bold'>Pages</h2>
         <p>
           Vaderjs uses a filesystem routing system. That automatically compiles code from the pages directory and appends the route in the main app.js file, based on the file structure.
-          <a onClick="${this.bind(`this.props?.swapPage({ page: 'getting-started', subpage: 'project-structure' }); `, false, false, 'g41erj0ibwk', "", null)}", usesEvent="true", eventType="onClick",data-ref="g41erj0ibwk",  class='text-blue-500 cursor-pointer hover:underline'>Learn more about project structure</a>
+          <a onClick="${this.bind(`this.props?.swapPage({ page: 'getting-started', subpage: 'project-structure' }); `, false, false, 'mmtcc4chg9j', "", null)}", usesEvent="true", eventType="onClick",data-ref="mmtcc4chg9j",  class='text-blue-500 cursor-pointer hover:underline'>Learn more about project structure</a>
         </p>
         <ul class="menu  border border-slate-200 rounded" aria-label='file structure example' title='file structure example'>
           <li><a>index.jsx - <span class='badge bg-base-200 border border-slate-200 rounded'>acme.com#/</span></a></li>
@@ -79,7 +79,7 @@ export class Routing extends Component {
             </svg>
             <div class="absolute end-5 z-[9999]"
 
-              onClick="${this.bind(`setSaved(true, copiedRef.bind); `, false, false, '2q49bvj1uu2', "setSaved,saved,copiedRef,", setSaved, saved, copiedRef)}", usesEvent="true", eventType="onClick",data-ref="2q49bvj1uu2", 
+              onClick="${this.bind(`setSaved(true, copiedRef.bind); `, false, false, 'l0ne052cavj', "setSaved,saved,copiedRef,", setSaved, saved, copiedRef)}", usesEvent="true", eventType="onClick",data-ref="l0ne052cavj", 
             >
               <div
                 ref="${copiedRef.bind}",
@@ -219,7 +219,7 @@ export class Routing extends Component {
               </svg>
               <div class="absolute end-5"
                 ref="${copiedRef.bind}",
-                onClick="${this.bind(`navigator.clipboard.writeText(examples['1']); setSaved(!saved, copiedRef.bind); setTimeout(() => {; setSaved(false, copiedRef.bind); }, 1000); `, false, false, '8as3cf5txk9', "setSaved,saved,copiedRef,", setSaved, saved, copiedRef)}", usesEvent="true", eventType="onClick",data-ref="8as3cf5txk9", 
+                onClick="${this.bind(`navigator.clipboard.writeText(examples['1']); setSaved(!saved, copiedRef.bind); setTimeout(() => {; setSaved(false, copiedRef.bind); }, 1000); `, false, false, 'gjs9q5eq1hk', "setSaved,saved,copiedRef,", setSaved, saved, copiedRef)}", usesEvent="true", eventType="onClick",data-ref="gjs9q5eq1hk", 
               >
                 
               </div>
@@ -332,7 +332,7 @@ export class Routing extends Component {
           <span
 
             class='font-bold mb-12 hover:opacity-100 cursor-pointer opacity-60 '
-            onClick="${this.bind(`this.props?.swapPage({ page: 'getting-started', subpage: 'project-structure' }); `, false, false, 'wluqdxl5ls', "", null)}", usesEvent="true", eventType="onClick",data-ref="wluqdxl5ls", 
+            onClick="${this.bind(`this.props?.swapPage({ page: 'getting-started', subpage: 'project-structure' }); `, false, false, '9nq7eubv96', "", null)}", usesEvent="true", eventType="onClick",data-ref="9nq7eubv96", 
           >Project Structure  </span>
         </div>
         <div class='mt-24 absolute mb-6 end-5  flex flex-col gap-3'>
@@ -342,7 +342,7 @@ export class Routing extends Component {
           <span
 
             class='font-bold mb-12 hover:opacity-100 cursor-pointer opacity-60 '
-            onClick="${this.bind(`this.props?.swapPage({ page: 'getting-started', subpage: 'deployment' }); `, false, false, 'koi5xbur9o', "", null)}", usesEvent="true", eventType="onClick",data-ref="koi5xbur9o", 
+            onClick="${this.bind(`this.props?.swapPage({ page: 'getting-started', subpage: 'deployment' }); `, false, false, 'sosyh6e4ju', "", null)}", usesEvent="true", eventType="onClick",data-ref="sosyh6e4ju", 
           >Deployment  </span>
         </div>
      </div>
diff --git a/src/search.js b/src/search.js
index d22b898..4d81cf9 100644
--- a/src/search.js
+++ b/src/search.js
@@ -1,4 +1,4 @@
-import { Component, strictMount, useReducer } from '/dist/vader.js'
+import { Component, strictMount, useReducer } from '/vader.js'
 
 let data = await fetch('src/searchData/search.json').then(res => res.json())
  
@@ -25,7 +25,7 @@ export class SearchBar extends Component {
         return `
             <div class='xl:flex lg:flex md:flex hidden'>
                 <div
-                    onClick="${this.bind(`document.getElementById('my_modal_5').showModal(); `, false, false, '5yacfob8mkg', "", null)}", usesEvent="true", eventType="onClick",data-ref="5yacfob8mkg", 
+                    onClick="${this.bind(`document.getElementById('my_modal_5').showModal(); `, false, false, 'raaqme15ry8', "", null)}", usesEvent="true", eventType="onClick",data-ref="raaqme15ry8", 
                      
                     class=' flex hero gap-2 rounded-box   input-sm      hover:bg-base-200  text-sm focus:outline-none border-slate-200 border' type='text'
 
@@ -35,7 +35,7 @@ export class SearchBar extends Component {
                     </svg>
                     Search Documentation</div>
             </div>
-            <div onClick="${this.bind(`document.getElementById('my_modal_5').showModal(); `, false, false, 'hvd33h7hfgt', "", null)}", usesEvent="true", eventType="onClick",data-ref="hvd33h7hfgt", 
+            <div onClick="${this.bind(`document.getElementById('my_modal_5').showModal(); `, false, false, '2hn72cv0s3x', "", null)}", usesEvent="true", eventType="onClick",data-ref="2hn72cv0s3x", 
                 class='xl:hidden lg:hidden md:hidden'>
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="${1.5}", stroke="currentColor" class="w-6 h-6">
                     <path strokeLinecap="round" strokeLinejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />