diff --git a/.gitignore b/.gitignore
index 1665271..e209f14 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,6 @@
-
-tmp/
+/tmp/
+node_modules
+index.js.*
+index.pid
+*.table
+*.nosql
diff --git a/controllers/default.js b/controllers/default.js
index 665fc4c..388843b 100755
--- a/controllers/default.js
+++ b/controllers/default.js
@@ -1,16 +1,8 @@
 exports.install = function() {
 
-	ROUTE('/');
-	ROUTE('/services/', view_services);
-	ROUTE('/contact/');
-	ROUTE('/references/');
+	ROUTE('/*');
 
 	// Enables a localization mechanism + compression for all client-side components
 	LOCALIZE('/components/*.html', ['compress']);
 
 };
-
-function view_services() {
-	var self = this;
-	self.view('services');
-}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..ebb08f7
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,24 @@
+{
+	"name": "emptyproject",
+	"version": "1.0.0",
+	"lockfileVersion": 3,
+	"requires": true,
+	"packages": {
+		"": {
+			"name": "emptyproject",
+			"version": "1.0.0",
+			"license": "MIT",
+			"dependencies": {
+				"total4": "latest"
+			}
+		},
+		"node_modules/total4": {
+			"version": "0.0.95",
+			"resolved": "https://registry.npmjs.org/total4/-/total4-0.0.95.tgz",
+			"integrity": "sha512-nYO7UEp4dl3NJiYZUn9WyhPuHUIE482Ztg9tyWyAATF06C0HLp7lHY11Zp6aEOFqPhJZoNUwfKFGXAt/MUPUTA==",
+			"bin": {
+				"total4": "bin/total4"
+			}
+		}
+	}
+}
diff --git a/public/components/contactform.html b/public/components/contactform.html
index f09a30c..6317a64 100644
--- a/public/components/contactform.html
+++ b/public/components/contactform.html
@@ -1,52 +1,58 @@
-<div data-jc-scope="?" class="hidden" data-jc-class="hidden">
+<ui-plugin>
 
-	<div data-jc="visible" data-jc-path="response" data-jc-config="if:value && value.success === true" class="hidden">
-		<div class="message-success"><span class="fa fa-check-circle"></span>Thanks, the contact form has been sent successfully.</div>
+    <ui-component name="visible" path="response" config="if:value && value.success === true" class="hidden">
+        <div class="message-success"><span class="ti ti-check-circle"></span>Thanks, the contact form has been sent successfully.</div>
 		<br />
-	</div>
-
-	<div data-jc="visible" data-jc-path="response" data-jc-config="if:!value || !value.success">
+	</ui-component>
+    
+	<ui-component name="visible" path="response" config="if:value">
 		<div class="row">
 			<div class="col-md-6 m">
-				<div data-jc="textbox" data-jc-path="firstname" data-jc-value="''" data-jc-config="required:true">First name</div>
+				<ui-component name="textbox" path="firstname" default="''" config="required:true">First name</ui-component>
 			</div>
 			<div class="col-md-6 m">
-				<div data-jc="textbox" data-jc-path="lastname" data-jc-value="''" data-jc-config="required:true">Last name</div>
+				<ui-component name="textbox" path="lastname" default="''" config="required:true">Last name</ui-component>
 			</div>
 		</div>
 		<div class="row">
 			<div class="col-md-6 m">
-				<div data-jc="textbox" data-jc-path="email" data-jc-value="'@'" data-jc-config="required:true;type:email">Email address</div>
+				<ui-component name="textbox" path="email" default="'@'" config="required:true;type:email">Email address</ui-component>
 			</div>
 			<div class="col-md-6 m">
-				<div data-jc="textbox" data-jc-path="phone" data-jc-value="''">Phone number</div>
+				<ui-component name="textbox" path="phone" default="''">Phone number</ui-component>
 			</div>
 		</div>
 		<br />
 		<div class="row">
 			<div class="col-md-12 m">
-				<div data-jc="textarea" data-jc-path="message" data-jc-value="''" data-jc-config="height:100;required:true">Message</div>
+				<ui-component name="textarea" path="message" default="''" config="height:100;required:true">Message</ui-component>
 			</div>
 		</div>
-		<div data-jc="error" data-jc-path="response"></div>
+		<ui-component name="error" path="response"></ui-component>
 		<br />
 		<div class="row">
 			<div class="col-md-6">
-				<div data-jc="validation" data-jc-path="?">
+				<ui-component name="validation" path="?">
 					<button class="button exec" name="submit" disabled="disabled" data-exec="contactformsubmit">SUBMIT FORM</button>
-				</div>
+				</ui-component>
 			</div>
 		</div>
-	</div>
-</div>
+    </ui-component>
+
+</ui-plugin>
 
 <script>
-	!window.contactformsubmit && (window.contactformsubmit = function(el) {
-		var component = el.closest('[data-jc-path]').component();
-		var scope = component.pathscope;
-		if (CAN(scope + '.*')) {
-			RESET(scope + '.*');
-			AJAX('POST /api/contact/', GET(scope), scope + '.response');
-		}
+
+    PLUGIN(function(exports) {
+		exports.contactformsubmit = function(el) {
+			var component = el.closest('[path]').component();
+			var scope = component.pathscope;
+			console.log('Scope: ', scope);
+			if (CAN(scope + '.*')) {
+				RESET(scope + '.*');
+				AJAX('POST /api/contact/', GET(scope), scope + '.response');
+			}
+		};
 	});
+
 </script>
\ No newline at end of file
diff --git a/public/components/newsletter.html b/public/components/newsletter.html
index d6bf529..4344e85 100644
--- a/public/components/newsletter.html
+++ b/public/components/newsletter.html
@@ -1,7 +1,7 @@
-<div class="newsletter" data-jc="newsletter" data-success="Thanks, you have been added.">
-	<div class="newsletter-button"><button><span class="fa fa-envelope"></span>SUBMIT</button></div>
-	<div class="newsletter-input"><input type="text" placeholder="Join to our mailing list"></div>
-</div>
+<ui-component name="newsletter" data-success="Thanks, you have been added.">
+	<div class="newsletter-button"><button><span class="ti ti-envelope"></span>SUBMIT</button></div>
+	<div class="newsletter-input"><input type="text" placeholder="Join our mailing list"></div>
+</ui-component>
 
 <script>
 	COMPONENT('newsletter', function() {
diff --git a/public/pages/contact.html b/public/pages/contact.html
new file mode 100644
index 0000000..9128e36
--- /dev/null
+++ b/public/pages/contact.html
@@ -0,0 +1,11 @@
+<div class="row">
+
+    <div class="col-md-2"></div>
+	<div class="col-md-8 m">
+        <ui-component name="part" path="common.page" config="if:contact;url:/components/contactform.html"></ui-component>
+	</div>
+
+</div>
+
+<script>
+</script>
\ No newline at end of file
diff --git a/public/pages/home.html b/public/pages/home.html
new file mode 100644
index 0000000..2dedd1e
--- /dev/null
+++ b/public/pages/home.html
@@ -0,0 +1,53 @@
+<h1>Total.js Example - pages/home.html</h1>
+
+<div class="row">
+	<div class="col-md-4 col-sm-4 m">
+		<a href="/services/"><img src="/img/001.jpg" border="0" alt="Eshop" class="img-responsive img-rounded" /></a>
+	</div>
+	<div class="col-md-4 col-sm-4 m">
+		<a href="/services/"><img src="/img/002.jpg" border="0" alt="Easy modifications" class="img-responsive img-rounded" /></a>
+	</div>
+	<div class="col-md-4 col-sm-4 m">
+		<a href="/services/"><img src="/img/003.jpg" border="0" alt="Redesign it" class="img-responsive img-rounded" /></a>
+	</div>
+</div>
+<br />
+<div class="row">
+    <!-- NEWSLETTER COMPONENT -->
+    <div class="col-md-8 col-md-offset-2">
+        <ui-component name="part" path="common.page" config="if:home;url:/components/newsletter.html"></ui-component>
+        <!-- <ui-component name="part" path="common.page" config="if:contact;url:/components/newsletter.html"></ui-component> -->
+    </div>
+
+</div>
+<br />
+<hr />
+<br />
+<div class="row">
+	<div class="col-md-3 col-sm-3 m">
+		<h3>Lorem ipsum dolor</h3>
+		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate vitae ipsam nesciunt officia, ipsa quo molestiae ex quibusdam praesentium odit.</p>
+	</div>
+	<div class="col-md-3 col-sm-3 m">
+		<h3>Lorem ipsum dolor</h3>
+		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate vitae ipsam nesciunt officia, ipsa quo molestiae ex quibusdam praesentium odit.</p>
+	</div>
+	<div class="col-md-3 col-sm-3 m">
+		<h3>Lorem ipsum dolor</h3>
+		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate vitae ipsam nesciunt officia, ipsa quo molestiae ex quibusdam praesentium odit.</p>
+	</div>
+	<div class="col-md-3 col-sm-3 m">
+		<h3>Lorem ipsum dolor</h3>
+		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate vitae ipsam nesciunt officia, ipsa quo molestiae ex quibusdam praesentium odit.</p>
+	</div>
+</div>
+<br />
+<br />
+<div class="row">
+	<div class="col-md-6 col-md-offset-3 m">
+		<a href="/contact/" class="linkbutton">CONTACT US</a>
+	</div>
+</div>
+
+<script>
+</script>
\ No newline at end of file
diff --git a/views/references.html b/public/pages/references.html
similarity index 99%
rename from views/references.html
rename to public/pages/references.html
index ff1e759..87e5e2a 100644
--- a/views/references.html
+++ b/public/pages/references.html
@@ -38,4 +38,8 @@ <h1>References</h1>
 	<div class="col-md-3 col-sm-6 col-xs-6 reference">
 		<a href="#"><img src="/img/reference.png" class="img-responsive" alt="" border="0" /><span class="reference-title"><b>Lorem Ipsum</b><span>Lorem Ipsum Alias</span></span></a>
 	</div>
-</div>
\ No newline at end of file
+</div>
+
+<script>
+</script> 
+
diff --git a/views/services.html b/public/pages/services.html
similarity index 98%
rename from views/services.html
rename to public/pages/services.html
index 1ecc3cd..d064739 100644
--- a/views/services.html
+++ b/public/pages/services.html
@@ -41,4 +41,8 @@ <h2>Lorem ipsum dolor sit</h2>
 		<h2>Lorem ipsum dolor sit</h2>
 		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem voluptate excepturi sunt ex tempora sit obcaecati consequatur asperiores doloremque assumenda dolorum totam possimus, ipsa eveniet, dolor temporibus magnam! Praesentium, maiores.
 	</div>
-</div>
\ No newline at end of file
+</div>
+
+<script>
+</script> 
+
diff --git a/views/contact.html b/views/contact.html
index 5b0f80b..64d4cd4 100644
--- a/views/contact.html
+++ b/views/contact.html
@@ -1,10 +1,18 @@
 @{title('Contact')}
 
+<ui-bind path="common.page" config="html:value"></ui-bind>
+<ui-bind path="page" config="html:value"></ui-bind>
+
 <div class="row">
-	<div class="col-md-2"></div>
+    <div class="col-md-2"></div>
 	<div class="col-md-8 m">
-		<h1>@{title}</h1>
-		<!-- CONTACTFORM COMPONENT -->
-		<div data-jc-url="/components/contactform.html"></div>
+        <h1>@{title}</h1>
+        <ui-component name="part" path="common.page" config="if:contact;url:/components/contactform.html"></ui-component>
+
 	</div>
-</div>
\ No newline at end of file
+</div>
+
+
+<script>
+</script> 
+
diff --git a/views/index.html b/views/index.html
index 6908a90..a013174 100755
--- a/views/index.html
+++ b/views/index.html
@@ -1,49 +1,59 @@
 @{title('Full website example')}
 
-<h1>Total.js Example</h1>
-<div class="row">
-	<div class="col-md-4 col-sm-4 m">
-		<a href="/services/"><img src="/img/001.jpg" border="0" alt="Eshop" class="img-responsive img-rounded" /></a>
-	</div>
-	<div class="col-md-4 col-sm-4 m">
-		<a href="/services/"><img src="/img/002.jpg" border="0" alt="Easy modifications" class="img-responsive img-rounded" /></a>
-	</div>
-	<div class="col-md-4 col-sm-4 m">
-		<a href="/services/"><img src="/img/003.jpg" border="0" alt="Redesign it" class="img-responsive img-rounded" /></a>
-	</div>
-</div>
-<br />
-<div class="row">
-	<div class="col-md-8 col-md-offset-2">
-		<!-- NEWSLETTER COMPONENT -->
-		<div data-jc-url="/components/newsletter.html"></div>
-	</div>
-</div>
-<br />
-<hr />
-<br />
-<div class="row">
-	<div class="col-md-3 col-sm-3 m">
-		<h3>Lorem ipsum dolor</h3>
-		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate vitae ipsam nesciunt officia, ipsa quo molestiae ex quibusdam praesentium odit.</p>
-	</div>
-	<div class="col-md-3 col-sm-3 m">
-		<h3>Lorem ipsum dolor</h3>
-		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate vitae ipsam nesciunt officia, ipsa quo molestiae ex quibusdam praesentium odit.</p>
-	</div>
-	<div class="col-md-3 col-sm-3 m">
-		<h3>Lorem ipsum dolor</h3>
-		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate vitae ipsam nesciunt officia, ipsa quo molestiae ex quibusdam praesentium odit.</p>
-	</div>
-	<div class="col-md-3 col-sm-3 m">
-		<h3>Lorem ipsum dolor</h3>
-		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate vitae ipsam nesciunt officia, ipsa quo molestiae ex quibusdam praesentium odit.</p>
-	</div>
-</div>
-<br />
-<br />
-<div class="row">
-	<div class="col-md-6 col-md-offset-3 m">
-		<a href="/contact/" class="linkbutton">CONTACT US</a>
-	</div>
-</div>
\ No newline at end of file
+<ui-component name="importer" path="common.page" config="if:home;url:/pages/home.html"></ui-component>
+<ui-component name="importer" path="common.page" config="if:pageservices;url:/services.html"></ui-component>
+<ui-component name="importer" path="common.page" config="if:contact;url:/pages/contact.html"></ui-component>
+<ui-component name="importer" path="common.page" config="if:services;url:/pages/services.html"></ui-component>
+<ui-component name="importer" path="common.page" config="if:references;url:/pages/references.html"></ui-component>
+
+<!-- @{view} -->
+
+<script>
+
+    var form = {};
+	form.newsletter = true;
+
+    ON('ready', function() {
+    });
+
+
+    var common = {};
+
+    CACHEPATH('common.page', '1 week');
+    CACHEPATH('common.darkmode', '1 week');
+
+    common.page = 'home';
+    common.layout = '';
+
+    
+    PLUGIN('common', function(exports) {
+
+        // SET('page', 'home');
+
+        exports.page = function(el) {
+            var id = typeof(el) === 'string' ? el : el.attrd('if');
+            exports.set('page', id);
+        };
+
+        ROUTE('/', function() {
+            SET('common.page', 'home');
+        });
+
+        ROUTE('/home/', function() {
+            SET('common.page', 'home');
+        });
+
+        ROUTE('/references/', function() {
+            SET('common.page', 'references');
+        });
+
+        ROUTE('/services/', function() {
+            SET('common.page', 'services');
+        });
+
+        ROUTE('/contact/', function() {
+            SET('common.page', 'contact');
+        });
+
+    });
+</script>
diff --git a/views/layout.html b/views/layout.html
index 9b79da4..fd4c454 100644
--- a/views/layout.html
+++ b/views/layout.html
@@ -7,13 +7,18 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
 	<meta name="robots" content="all,follow" />
 	<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Sans+Pro:400,200,700&subset=latin,latin-ext" />
-	<link rel="stylesheet" href="//cdn.componentator.com/spa.min.css" />
-	<script src="//cdn.componentator.com/spa.min.js"></script>
+	
+	<link href="//cdn.componentator.com/spa.min@19.css" rel="stylesheet" />
+	<script src="//cdn.componentator.com/spa.min@19.js"></script>
+
 	@{import('meta', 'head', 'default.css', 'default.js', 'favicon.ico')}
 </head>
-<body data-jc="exec">
+<body>
+
+	<ui-component name="LAZY directory"></ui-component>
+
 	<div data-jc="cookie" class="hidden">This site uses cookies for visitor statistics. By continuing to browse the site you are agreeing to our use of cookies.</div>
-	<header>
+    <header>
 		<div class="container">
 			<a href="javascript:void(0)" class="mainmenu-button"><i class="fa fa-navicon"></i></a>
 			<a href="/"><img src="/img/logo.png" alt="@{config.name}" border="0" height="30" /></a>