diff --git a/bundle.js b/bundle.js
index d1341a0..34ce634 100644
--- a/bundle.js
+++ b/bundle.js
@@ -1,6 +1,8 @@
 (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
 
 },{}],2:[function(require,module,exports){
+arguments[4][1][0].apply(exports,arguments)
+},{"dup":1}],3:[function(require,module,exports){
 (function (__filename){(function (){
 const STATE = require('./STATE')
 const statedb = STATE(__filename)
@@ -3136,9 +3138,7 @@ function fallback_module () {
 }
 
 }).call(this)}).call(this,"/node_modules/graph-explorer/lib/graph_explorer.js")
-},{"./STATE":1}],3:[function(require,module,exports){
-arguments[4][1][0].apply(exports,arguments)
-},{"dup":1}],4:[function(require,module,exports){
+},{"./STATE":2}],4:[function(require,module,exports){
 (function (__filename){(function (){
 const STATE = require('STATE')
 const statedb = STATE(__filename)
@@ -3492,7 +3492,7 @@ function fallback_module() {
 }
 
 }).call(this)}).call(this,"/src/node_modules/action_bar/action_bar.js")
-},{"STATE":3,"actions":5,"quick_actions":15,"steps_wizard":18}],5:[function(require,module,exports){
+},{"STATE":1,"actions":5,"quick_actions":15,"steps_wizard":18}],5:[function(require,module,exports){
 (function (__filename){(function (){
 const STATE = require('STATE')
 const statedb = STATE(__filename)
@@ -3814,7 +3814,7 @@ function fallback_module() {
 }
 
 }).call(this)}).call(this,"/src/node_modules/actions/actions.js")
-},{"STATE":3}],6:[function(require,module,exports){
+},{"STATE":1}],6:[function(require,module,exports){
 (function (__filename){(function (){
 const STATE = require('STATE')
 const statedb = STATE(__filename)
@@ -4149,7 +4149,7 @@ function fallback_module () {
   }
 }
 }).call(this)}).call(this,"/src/node_modules/console_history/console_history.js")
-},{"STATE":3}],7:[function(require,module,exports){
+},{"STATE":1}],7:[function(require,module,exports){
 (function (__filename){(function (){
 const STATE = require('STATE')
 const statedb = STATE(__filename)
@@ -4336,7 +4336,7 @@ function fallback_module () {
 }
 
 }).call(this)}).call(this,"/src/node_modules/form_input.js")
-},{"STATE":3}],8:[function(require,module,exports){
+},{"STATE":1}],8:[function(require,module,exports){
 module.exports = graphdb
 
 function graphdb (entries) {
@@ -4578,7 +4578,7 @@ function fallback_module () {
   }
 }
 }).call(this)}).call(this,"/src/node_modules/graph_explorer_wrapper/index.js")
-},{"./graphdb":8,"STATE":3,"graph-explorer":2}],10:[function(require,module,exports){
+},{"./graphdb":8,"STATE":1,"graph-explorer":3}],10:[function(require,module,exports){
 module.exports = { resource }
 
 function resource (timeout = 1000) {
@@ -4797,7 +4797,7 @@ function fallback_module () {
 }
 
 }).call(this)}).call(this,"/src/node_modules/input_test.js")
-},{"STATE":3}],12:[function(require,module,exports){
+},{"STATE":1}],12:[function(require,module,exports){
 (function (__filename){(function (){
 const STATE = require('STATE')
 const statedb = STATE(__filename)
@@ -5113,7 +5113,7 @@ function fallback_module() {
 }
 
 }).call(this)}).call(this,"/src/node_modules/manager/manager.js")
-},{"STATE":3,"action_bar":4,"program":14}],13:[function(require,module,exports){
+},{"STATE":1,"action_bar":4,"program":14}],13:[function(require,module,exports){
 (function (__filename){(function (){
 const STATE = require('STATE')
 const statedb = STATE(__filename)
@@ -5368,7 +5368,7 @@ function fallback_module () {
 }
 
 }).call(this)}).call(this,"/src/node_modules/menu.js")
-},{"STATE":3}],14:[function(require,module,exports){
+},{"STATE":1}],14:[function(require,module,exports){
 (function (__filename){(function (){
 const STATE = require('STATE')
 const statedb = STATE(__filename)
@@ -5492,7 +5492,7 @@ function fallback_module() {
 }
 
 }).call(this)}).call(this,"/src/node_modules/program/program.js")
-},{"STATE":3,"form_input":7,"input_test":11}],15:[function(require,module,exports){
+},{"STATE":1,"form_input":7,"input_test":11}],15:[function(require,module,exports){
 (function (__filename){(function (){
 const STATE = require('STATE')
 const statedb = STATE(__filename)
@@ -5932,7 +5932,7 @@ function fallback_module() {
 }
 
 }).call(this)}).call(this,"/src/node_modules/quick_actions/quick_actions.js")
-},{"STATE":3}],16:[function(require,module,exports){
+},{"STATE":1}],16:[function(require,module,exports){
 (function (__filename){(function (){
 const STATE = require('STATE')
 const statedb = STATE(__filename)
@@ -6365,7 +6365,7 @@ function fallback_module() {
   }
 }
 }).call(this)}).call(this,"/src/node_modules/quick_editor.js")
-},{"STATE":3,"helpers":10}],17:[function(require,module,exports){
+},{"STATE":1,"helpers":10}],17:[function(require,module,exports){
 (function (__filename){(function (){
 const STATE = require('STATE')
 const statedb = STATE(__filename)
@@ -6715,7 +6715,7 @@ function fallback_module () {
 }
 
 }).call(this)}).call(this,"/src/node_modules/space.js")
-},{"STATE":3,"actions":5,"console_history":6,"graph_explorer_wrapper":9,"tabbed_editor":19}],18:[function(require,module,exports){
+},{"STATE":1,"actions":5,"console_history":6,"graph_explorer_wrapper":9,"tabbed_editor":19}],18:[function(require,module,exports){
 (function (__filename){(function (){
 const STATE = require('STATE')
 const statedb = STATE(__filename)
@@ -6885,7 +6885,7 @@ function fallback_module () {
   }
 }
 }).call(this)}).call(this,"/src/node_modules/steps_wizard/steps_wizard.js")
-},{"STATE":3}],19:[function(require,module,exports){
+},{"STATE":1}],19:[function(require,module,exports){
 (function (__filename){(function (){
 const STATE = require('STATE')
 const statedb = STATE(__filename)
@@ -7279,7 +7279,7 @@ function fallback_module() {
 }
 
 }).call(this)}).call(this,"/src/node_modules/tabbed_editor/tabbed_editor.js")
-},{"STATE":3}],20:[function(require,module,exports){
+},{"STATE":1}],20:[function(require,module,exports){
 (function (__filename){(function (){
 const STATE = require('STATE')
 const statedb = STATE(__filename)
@@ -7491,7 +7491,7 @@ function fallback_module () {
 }
 
 }).call(this)}).call(this,"/src/node_modules/tabs/tabs.js")
-},{"STATE":3}],21:[function(require,module,exports){
+},{"STATE":1}],21:[function(require,module,exports){
 (function (__filename){(function (){
 const state = require('STATE')
 const state_db = state(__filename)
@@ -7674,7 +7674,7 @@ function fallback_module () {
   }
 }
 }).call(this)}).call(this,"/src/node_modules/tabsbar/tabsbar.js")
-},{"STATE":3,"tabs":20,"task_manager":22}],22:[function(require,module,exports){
+},{"STATE":1,"tabs":20,"task_manager":22}],22:[function(require,module,exports){
 (function (__filename){(function (){
 const STATE = require('STATE')
 const statedb = STATE(__filename)
@@ -7767,7 +7767,7 @@ function fallback_module () {
 }
 
 }).call(this)}).call(this,"/src/node_modules/task_manager.js")
-},{"STATE":3}],23:[function(require,module,exports){
+},{"STATE":1}],23:[function(require,module,exports){
 (function (__filename){(function (){
 const STATE = require('STATE')
 const statedb = STATE(__filename)
@@ -7925,7 +7925,7 @@ function fallback_module() {
 }
 
 }).call(this)}).call(this,"/src/node_modules/taskbar/taskbar.js")
-},{"STATE":3,"action_bar":4,"tabsbar":21}],24:[function(require,module,exports){
+},{"STATE":1,"action_bar":4,"tabsbar":21}],24:[function(require,module,exports){
 (function (__filename){(function (){
 const STATE = require('STATE')
 const statedb = STATE(__filename)
@@ -8093,30 +8093,9 @@ function fallback_module () {
 }
 
 }).call(this)}).call(this,"/src/node_modules/theme_widget/theme_widget.js")
-},{"STATE":3,"space":17,"taskbar":23}],25:[function(require,module,exports){
-const prefix = 'https://raw.githubusercontent.com/alyhxn/playproject/main/'
-const init_url = location.hash === '#dev' ? 'web/init.js' : prefix + 'src/node_modules/init.js'
-const args = arguments
-
-const has_save = location.hash.includes('#save')
-const fetch_opts = has_save ? {} : { cache: 'no-store' }
-
-if (!has_save) {
-  localStorage.clear()
-}
-
-fetch(init_url, fetch_opts).then(res => res.text()).then(async source => {
-  const module = { exports: {} }
-  const f = new Function('module', 'require', source)
-  f(module, require)
-  const init = module.exports
-  await init(args, prefix)
-  require('./page') // or whatever is otherwise the main entry of our project
-})
-
-},{"./page":26}],26:[function(require,module,exports){
+},{"STATE":1,"space":17,"taskbar":23}],25:[function(require,module,exports){
 (function (__filename){(function (){
-const STATE = require('../src/node_modules/STATE')
+const STATE = require('STATE')
 const statedb = STATE(__filename)
 const admin_api = statedb.admin()
 const admin_on = {}
@@ -8435,13 +8414,13 @@ async function boot(opts) {
               const files = admin.status.db.read([root, ds_id]).files || []
               result[root][type][name][ds_id] = {}
               files.forEach(file_id => {
-                result[root][type][name][ds_id][file_id] = admin.status.db.read([root, file_id]) 
+                result[root][type][name][ds_id][file_id] = admin.status.db.read([root, file_id])
               })
             })
           })
         })
       })
-      
+
       const editor_id = admin.status.a2i[admin.status.s2i[editor_subs[0].sid]]
       const port = await item.get(editor_id)
       // await io.at(editor_id)
@@ -8639,19 +8618,19 @@ function fallback_module() {
           .components-wrapper-container {
             padding-top: 10px; /* Adjust as needed */
           }
-      
+
           .components-wrapper {
             width: 95%;
             margin: 0 auto;
             padding: 2.5%;
           }
-      
+
           .component-outer-wrapper {
             margin-bottom: 20px;
             padding: 0px 0px 10px 0px;
             transition: background-color 0.3s ease;
           }
-      
+
           .component-name-label {
             background-color:transparent;
             padding: 8px 15px;
@@ -8659,7 +8638,7 @@ function fallback_module() {
             font-weight: bold;
             color: #333;
           }
-      
+
           .component-wrapper {
             position: relative;
             padding: 15px;
@@ -8782,4 +8761,4 @@ function fallback_module() {
 }
 
 }).call(this)}).call(this,"/web/page.js")
-},{"../src/node_modules/STATE":3,"../src/node_modules/action_bar":4,"../src/node_modules/actions":5,"../src/node_modules/console_history":6,"../src/node_modules/graph_explorer_wrapper":9,"../src/node_modules/helpers":10,"../src/node_modules/manager":12,"../src/node_modules/menu":13,"../src/node_modules/quick_actions":15,"../src/node_modules/quick_editor":16,"../src/node_modules/space":17,"../src/node_modules/steps_wizard":18,"../src/node_modules/tabbed_editor":19,"../src/node_modules/tabs":20,"../src/node_modules/tabsbar":21,"../src/node_modules/task_manager":22,"../src/node_modules/taskbar":23,"../src/node_modules/theme_widget":24}]},{},[25]);
+},{"../src/node_modules/action_bar":4,"../src/node_modules/actions":5,"../src/node_modules/console_history":6,"../src/node_modules/graph_explorer_wrapper":9,"../src/node_modules/helpers":10,"../src/node_modules/manager":12,"../src/node_modules/menu":13,"../src/node_modules/quick_actions":15,"../src/node_modules/quick_editor":16,"../src/node_modules/space":17,"../src/node_modules/steps_wizard":18,"../src/node_modules/tabbed_editor":19,"../src/node_modules/tabs":20,"../src/node_modules/tabsbar":21,"../src/node_modules/task_manager":22,"../src/node_modules/taskbar":23,"../src/node_modules/theme_widget":24,"STATE":1}]},{},[25]);
diff --git a/index.html b/index.html
index 18dc4ba..0ac2213 100644
--- a/index.html
+++ b/index.html
@@ -1,10 +1,5 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <meta charset="utf-8">
-        <link rel="icon" href="data:," />
-    </head>
-    <body>
-        <script src="bundle.js#1"></script>
-    </body>
+  <head><meta charset="utf-8"><link rel="icon" href="data:,"></head>
+  <body><script src="index.js"></script></body>
 </html>
\ No newline at end of file
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..75eb21c
--- /dev/null
+++ b/index.js
@@ -0,0 +1,5 @@
+const env = { version: 'latest' }
+const arg = { x: 321, y: 543 }
+const url = 'https://playproject.io/datashell/shim.js'
+const src = `${url}?${new URLSearchParams(env)}#${new URLSearchParams(arg)}`
+this.open ? document.body.append(Object.assign(document.createElement('script'), { src })) : importScripts(src)
\ No newline at end of file
diff --git a/package.json b/package.json
index 5677ce3..d4d41fe 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "theme-wiget",
-  "version": "0.0.1",
+  "name": "ui-components",
+  "version": "0.0.2-pre-alpha",
   "description": "An app for debuging and testing website's theme. It is a simple app that allows you to change the theme of a website and see the changes in real time. It has 4 components: action-bar(action-wizard),graph-explorer,tabbed-editor,action-history",
   "homepage": "https://github.com/ddroid/ui-components#readme",
   "bugs": {
@@ -15,10 +15,8 @@
   "type": "commonjs",
   "main": "src/index.js",
   "scripts": {
-    "start": "budo web/boot.js:bundle.js --open --live",
-    "build": "browserify web/boot.js -o bundle.js",
-    "start:act": "budo web/boot.js:bundle.js  --dir ./ --live --open",
-    "build:act": "browserify web/boot.js > bundle.js",
+    "start": "budo web/page.js:bundle.js --dir . --live --open -- -i STATE",
+    "build": "browserify web/page.js -i STATE -o bundle.js",
     "lint": "standardx"
   },
   "devDependencies": {
diff --git a/web/boot.js b/web/boot.js
deleted file mode 100644
index 6749e09..0000000
--- a/web/boot.js
+++ /dev/null
@@ -1,19 +0,0 @@
-const prefix = 'https://raw.githubusercontent.com/alyhxn/playproject/main/'
-const init_url = location.hash === '#dev' ? 'web/init.js' : prefix + 'src/node_modules/init.js'
-const args = arguments
-
-const has_save = location.hash.includes('#save')
-const fetch_opts = has_save ? {} : { cache: 'no-store' }
-
-if (!has_save) {
-  localStorage.clear()
-}
-
-fetch(init_url, fetch_opts).then(res => res.text()).then(async source => {
-  const module = { exports: {} }
-  const f = new Function('module', 'require', source)
-  f(module, require)
-  const init = module.exports
-  await init(args, prefix)
-  require('./page') // or whatever is otherwise the main entry of our project
-})
diff --git a/web/page.js b/web/page.js
index 453e0a8..6797a6e 100644
--- a/web/page.js
+++ b/web/page.js
@@ -1,4 +1,4 @@
-const STATE = require('../src/node_modules/STATE')
+const STATE = require('STATE')
 const statedb = STATE(__filename)
 const admin_api = statedb.admin()
 const admin_on = {}
@@ -317,13 +317,13 @@ async function boot(opts) {
               const files = admin.status.db.read([root, ds_id]).files || []
               result[root][type][name][ds_id] = {}
               files.forEach(file_id => {
-                result[root][type][name][ds_id][file_id] = admin.status.db.read([root, file_id]) 
+                result[root][type][name][ds_id][file_id] = admin.status.db.read([root, file_id])
               })
             })
           })
         })
       })
-      
+
       const editor_id = admin.status.a2i[admin.status.s2i[editor_subs[0].sid]]
       const port = await item.get(editor_id)
       // await io.at(editor_id)
@@ -521,19 +521,19 @@ function fallback_module() {
           .components-wrapper-container {
             padding-top: 10px; /* Adjust as needed */
           }
-      
+
           .components-wrapper {
             width: 95%;
             margin: 0 auto;
             padding: 2.5%;
           }
-      
+
           .component-outer-wrapper {
             margin-bottom: 20px;
             padding: 0px 0px 10px 0px;
             transition: background-color 0.3s ease;
           }
-      
+
           .component-name-label {
             background-color:transparent;
             padding: 8px 15px;
@@ -541,7 +541,7 @@ function fallback_module() {
             font-weight: bold;
             color: #333;
           }
-      
+
           .component-wrapper {
             position: relative;
             padding: 15px;