From 50ad4ad5ffc550fae2bd0ed936e7bb176f89f349 Mon Sep 17 00:00:00 2001
From: Juan Ferrer Toribio <juan.ferrer.toribio@gmail.com>
Date: Sun, 8 Feb 2015 16:38:38 +0100
Subject: [PATCH] Beta: Responsive, Material design

---
 package/etc/apache2/conf.d/hedera-web         |   8 +-
 .../share/hedera-web/forms/account/html.php   |  24 ++-
 .../share/hedera-web/forms/account/style.css  |   4 +-
 .../forms/admin/access-log/html.php           |   8 +-
 .../forms/admin/access-log/style.css          |  13 +-
 .../hedera-web/forms/admin/links/html.php     |   3 +
 .../hedera-web/forms/admin/links/style.css    |   5 +-
 .../hedera-web/forms/admin/photos/html.php    |  64 +++---
 .../hedera-web/forms/admin/photos/style.css   |   3 +-
 .../hedera-web/forms/admin/users/html.php     |   4 +-
 .../hedera-web/forms/admin/users/style.css    |  13 +-
 .../hedera-web/forms/admin/visits/html.php    |  21 +-
 .../hedera-web/forms/admin/visits/style.css   |  20 +-
 .../forms/agencies/packages/html.php          |   4 +-
 .../forms/agencies/packages/style.css         |   7 +-
 .../forms/agencies/provinces/html.php         |   8 +-
 .../forms/agencies/provinces/style.css        |   7 +-
 .../share/hedera-web/forms/cms/about/html.php |  26 ++-
 .../hedera-web/forms/cms/about/style.css      |  19 +-
 .../hedera-web/forms/cms/contact/html.php     |  90 ++++----
 .../hedera-web/forms/cms/contact/style.css    |   5 +-
 .../share/hedera-web/forms/cms/home/home.js   |  15 +-
 .../share/hedera-web/forms/cms/home/html.php  |   4 +-
 .../share/hedera-web/forms/cms/home/style.css |   7 +-
 .../hedera-web/forms/cms/training/html.php    |   3 +
 .../hedera-web/forms/cms/training/style.css   |  51 +++++
 .../hedera-web/forms/cms/training/training.js |  53 +++++
 .../share/hedera-web/forms/cms/why/html.php   |  10 +-
 .../share/hedera-web/forms/cms/why/style.css  |   3 +-
 .../forms/ecomerce/basket/basket.js           |  15 --
 .../hedera-web/forms/ecomerce/basket/html.php |  57 +++--
 .../forms/ecomerce/basket/style.css           |   9 +-
 .../forms/ecomerce/catalog/catalog.js         | 203 ++++++++++++------
 .../forms/ecomerce/catalog/html.php           | 180 ++++++----------
 .../forms/ecomerce/catalog/style.css          | 195 +++++++++++------
 .../forms/ecomerce/checkout/html.php          |  52 ++---
 .../forms/ecomerce/checkout/style.css         |   7 +-
 .../hedera-web/forms/ecomerce/orders/html.php |  28 +--
 .../forms/ecomerce/orders/orders.js           |   2 +-
 .../forms/ecomerce/orders/style.css           |  37 ++--
 .../hedera-web/forms/ecomerce/ticket/html.php |  18 +-
 .../forms/ecomerce/ticket/style.css           |   7 +-
 .../share/hedera-web/forms/news/new/html.php  |  27 ++-
 .../share/hedera-web/forms/news/new/new.js    |   9 +-
 .../share/hedera-web/forms/news/new/style.css |  10 +-
 .../share/hedera-web/forms/news/news/html.php |  11 +-
 .../hedera-web/forms/news/news/style.css      |   7 +-
 package/usr/share/hedera-web/global/style.css | 172 ++++++++++-----
 .../usr/share/hedera-web/image/catalog.png    | Bin 196 -> 0 bytes
 .../usr/share/hedera-web/image/dark/add.svg   | 131 +++++++++++
 .../share/hedera-web/image/dark/connect.svg   | 166 ++++++++++++++
 .../hedera-web/image/dark/go-previous.svg     | 169 +++++++++++++++
 .../usr/share/hedera-web/image/dark/graph.svg | 128 +++++++++++
 .../usr/share/hedera-web/image/dark/info.svg  | 123 +++++++++++
 .../image/{logo-white.png => dark/logo.png}   | Bin
 .../image/{logo-white.svg => dark/logo.svg}   |   0
 .../image/{catalog.svg => dark/menu.svg}      |  59 +++--
 .../usr/share/hedera-web/image/dark/ok.svg    | 139 ++++++++++++
 .../usr/share/hedera-web/image/dark/order.svg | 141 ++++++++++++
 .../usr/share/hedera-web/image/dark/pay.svg   |  70 ++++++
 .../usr/share/hedera-web/image/dark/print.svg | 136 ++++++++++++
 .../share/hedera-web/image/dark/refresh.svg   | 133 ++++++++++++
 .../share/hedera-web/image/dark/search.svg    | 130 +++++++++++
 .../share/hedera-web/image/dark/user-info.svg | 158 ++++++++++++++
 .../usr/share/hedera-web/image/family/1.svg   |  90 ++++++++
 .../usr/share/hedera-web/image/family/2.svg   | 124 +++++++++++
 .../usr/share/hedera-web/image/family/3.svg   |  92 ++++++++
 .../usr/share/hedera-web/image/family/4.svg   |  70 ++++++
 .../usr/share/hedera-web/image/family/5.svg   |  70 ++++++
 package/usr/share/hedera-web/image/menu.svg   |   8 +-
 package/usr/share/hedera-web/image/search.svg | 130 +++++++++++
 package/usr/share/hedera-web/js/db/conn.js    |   9 +-
 package/usr/share/hedera-web/js/db/model.js   |  94 +++++++-
 .../hedera-web/js/htk/field/date-chooser.js   |  14 +-
 .../hedera-web/js/htk/field/full-image.js     |  20 +-
 package/usr/share/hedera-web/js/htk/popup.js  |   9 +-
 package/usr/share/hedera-web/js/sql/batch.js  |  22 +-
 package/usr/share/hedera-web/js/vn/main.js    |   9 +-
 .../locale/ca/forms/admin/links.json          |   4 +-
 .../locale/ca/forms/cms/training.json         |   4 +
 .../locale/ca/forms/ecomerce/basket.json      |   2 +-
 .../locale/ca/forms/ecomerce/catalog.json     |   7 +-
 .../locale/ca/forms/ecomerce/orders.json      |   4 +-
 .../usr/share/hedera-web/locale/ca/js/vn.js   |   1 +
 .../locale/es/forms/admin/links.json          |   4 +-
 .../locale/es/forms/cms/training.json         |   4 +
 .../locale/es/forms/ecomerce/basket.json      |   2 +-
 .../locale/es/forms/ecomerce/catalog.json     |   7 +-
 .../locale/es/forms/ecomerce/orders.json      |   4 +-
 .../usr/share/hedera-web/locale/es/js/vn.js   |   1 +
 .../locale/fr/forms/admin/links.json          |   4 +-
 .../locale/fr/forms/cms/training.json         |   3 +
 .../locale/fr/forms/ecomerce/basket.json      |   2 +-
 .../locale/fr/forms/ecomerce/catalog.json     |   7 +-
 .../locale/fr/forms/ecomerce/orders.json      |   4 +-
 .../usr/share/hedera-web/locale/fr/js/vn.js   |   1 +
 .../usr/share/hedera-web/pages/login/html.php |   2 +-
 .../share/hedera-web/pages/login/style.css    |   3 +-
 .../usr/share/hedera-web/pages/web/html.php   |   8 +-
 .../usr/share/hedera-web/pages/web/style.css  |  29 ++-
 package/usr/share/hedera-web/pages/web/web.js | 134 ++++++------
 package/usr/share/hedera-web/rest/query.php   |  53 ++++-
 package/usr/share/php/vn/hedera/web.php       |   5 +-
 package/usr/share/php/vn/tpv/soap-method.php  |   2 +-
 104 files changed, 3474 insertions(+), 819 deletions(-)
 create mode 100755 package/usr/share/hedera-web/forms/cms/training/html.php
 create mode 100755 package/usr/share/hedera-web/forms/cms/training/style.css
 create mode 100755 package/usr/share/hedera-web/forms/cms/training/training.js
 delete mode 100644 package/usr/share/hedera-web/image/catalog.png
 create mode 100644 package/usr/share/hedera-web/image/dark/add.svg
 create mode 100644 package/usr/share/hedera-web/image/dark/connect.svg
 create mode 100644 package/usr/share/hedera-web/image/dark/go-previous.svg
 create mode 100644 package/usr/share/hedera-web/image/dark/graph.svg
 create mode 100644 package/usr/share/hedera-web/image/dark/info.svg
 rename package/usr/share/hedera-web/image/{logo-white.png => dark/logo.png} (100%)
 rename package/usr/share/hedera-web/image/{logo-white.svg => dark/logo.svg} (100%)
 rename package/usr/share/hedera-web/image/{catalog.svg => dark/menu.svg} (77%)
 create mode 100644 package/usr/share/hedera-web/image/dark/ok.svg
 create mode 100644 package/usr/share/hedera-web/image/dark/order.svg
 create mode 100644 package/usr/share/hedera-web/image/dark/pay.svg
 create mode 100644 package/usr/share/hedera-web/image/dark/print.svg
 create mode 100644 package/usr/share/hedera-web/image/dark/refresh.svg
 create mode 100644 package/usr/share/hedera-web/image/dark/search.svg
 create mode 100644 package/usr/share/hedera-web/image/dark/user-info.svg
 create mode 100644 package/usr/share/hedera-web/image/family/1.svg
 create mode 100644 package/usr/share/hedera-web/image/family/2.svg
 create mode 100644 package/usr/share/hedera-web/image/family/3.svg
 create mode 100644 package/usr/share/hedera-web/image/family/4.svg
 create mode 100644 package/usr/share/hedera-web/image/family/5.svg
 create mode 100644 package/usr/share/hedera-web/image/search.svg
 create mode 100755 package/usr/share/hedera-web/locale/ca/forms/cms/training.json
 create mode 100755 package/usr/share/hedera-web/locale/es/forms/cms/training.json
 create mode 100755 package/usr/share/hedera-web/locale/fr/forms/cms/training.json

diff --git a/package/etc/apache2/conf.d/hedera-web b/package/etc/apache2/conf.d/hedera-web
index f82e08da..f7bf5c91 100644
--- a/package/etc/apache2/conf.d/hedera-web
+++ b/package/etc/apache2/conf.d/hedera-web
@@ -1,17 +1,21 @@
 Alias /hedera-web /usr/share/hedera-web/
 
 <Directory /usr/share/hedera-web/>
-	Options Indexes 
-	Options +FollowSymLinks
+
+	Options -Indexes -FollowSymLinks
 	AllowOverride None
+
 	Order Allow,Deny
 	Allow From All
+
 	<FilesMatch "\.(css|js|json|php)$">
 		SetOutputFilter DEFLATE
 	</FilesMatch>
+
 	<FilesMatch "\.(ttf|otf|eot|woff)$">
 		<IfModule mod_headers.c>
 		Header set Access-Control-Allow-Origin "*"
 		</IfModule>
 	</FilesMatch>
+
 </Directory>
diff --git a/package/usr/share/hedera-web/forms/account/html.php b/package/usr/share/hedera-web/forms/account/html.php
index a51f98e4..170a3ddf 100755
--- a/package/usr/share/hedera-web/forms/account/html.php
+++ b/package/usr/share/hedera-web/forms/account/html.php
@@ -1,16 +1,18 @@
 <div id="account">
+<vn-group>
+	<db-form id="user-form">
+		<db-model id="user-model">
+			SELECT id, u.name, password, email, mail, c.user_id
+				FROM user_view u
+				LEFT JOIN customer_view c
+					ON u.id = c.user_id
+		</db-model>
+	</db-form>
+</vn-group>
 <div class="box">
-	<vn-group>
-		<db-form id="user-form">
-			<db-model id="user-model">
-				SELECT id, u.name, password, email, mail, c.user_id
-					FROM user_view u
-					LEFT JOIN customer_view c
-						ON u.id = c.user_id
-			</db-model>
-		</db-form>
-	</vn-group>
-	<h1 class="title"><?php i('Configuration') ?></h1>
+	<div class="header">
+		<h1><?php i('Configuration') ?></h1>
+	</div>
 	<div class="form">
 		<div class="form-group">
 			<label for="user-id"><?php i('UserNumber') ?></label>
diff --git a/package/usr/share/hedera-web/forms/account/style.css b/package/usr/share/hedera-web/forms/account/style.css
index 2799dd8e..b8b1139c 100755
--- a/package/usr/share/hedera-web/forms/account/style.css
+++ b/package/usr/share/hedera-web/forms/account/style.css
@@ -1,17 +1,17 @@
 
 #account
 {
-	margin: 1em;
+	padding: 1em;
 }
 #account .box
 {
 	max-width: 40em;
-	padding: 2em;
 }
 #account div.form
 {
 	margin: 0 auto;
 	max-width: 25em;
+	padding: 2em;
 }
 div.form-group
 {
diff --git a/package/usr/share/hedera-web/forms/admin/access-log/html.php b/package/usr/share/hedera-web/forms/admin/access-log/html.php
index f2a159c6..870b5ecf 100755
--- a/package/usr/share/hedera-web/forms/admin/access-log/html.php
+++ b/package/usr/share/hedera-web/forms/admin/access-log/html.php
@@ -1,6 +1,5 @@
 <div id="access-log">
-<div class="box">
-	<h1 class="title"><?=s('AccessLog')?></h1>
+<vn-group>
 	<vn-param id="user">
 		<vn-hash-link key="user"/>
 	</vn-param>
@@ -13,6 +12,11 @@
 			</sql-batch>
 		</db-model>
 	</db-form>
+</vn-group>
+<div class="box">
+	<div class="header">
+		<h1><?=s('AccessLog')?></h1>
+	</div>
 	<table class="form">
 		<tbody>
 		<tr>
diff --git a/package/usr/share/hedera-web/forms/admin/access-log/style.css b/package/usr/share/hedera-web/forms/admin/access-log/style.css
index 6b5cae66..6dd2df0c 100755
--- a/package/usr/share/hedera-web/forms/admin/access-log/style.css
+++ b/package/usr/share/hedera-web/forms/admin/access-log/style.css
@@ -1,26 +1,15 @@
 #access-log
 {
-	margin: 1em;
+	padding: 1em;
 	min-width: 35em;
 }
 #access-log .box
 {
 	max-width: 50em;
 	margin: 0 auto;
-	padding: 2em;
 }
 #access-log grid tbody tr
 {
 	height: 3.4em;
 }
 
-/* Form */
-
-#access-log table.form
-{
-	padding-bottom: 1.6em;
-}
-#access-log td.label
-{
-	width: 46%;
-}
diff --git a/package/usr/share/hedera-web/forms/admin/links/html.php b/package/usr/share/hedera-web/forms/admin/links/html.php
index 26c25bed..b4450f10 100755
--- a/package/usr/share/hedera-web/forms/admin/links/html.php
+++ b/package/usr/share/hedera-web/forms/admin/links/html.php
@@ -1,5 +1,8 @@
 <div id="cpanel">
 <div class="box">
+	<div class="header">
+		<h1><?php i('ControlPanel') ?></h1>
+	</div>
 	<htk-grid>
 		<db-model>
 			SELECT image, name, description, link FROM link
diff --git a/package/usr/share/hedera-web/forms/admin/links/style.css b/package/usr/share/hedera-web/forms/admin/links/style.css
index 8e077bd8..c506dc1c 100755
--- a/package/usr/share/hedera-web/forms/admin/links/style.css
+++ b/package/usr/share/hedera-web/forms/admin/links/style.css
@@ -1,13 +1,12 @@
 
 #cpanel
-{	
-	margin: 1em;
+{
+	padding: 1em;
 }
 #cpanel .box
 {
 	max-width: 60em;
 	min-width: 25em;
-	padding: 2em;
 }
 #cpanel tbody tr
 {
diff --git a/package/usr/share/hedera-web/forms/admin/photos/html.php b/package/usr/share/hedera-web/forms/admin/photos/html.php
index 435dc0dc..4d0588ce 100755
--- a/package/usr/share/hedera-web/forms/admin/photos/html.php
+++ b/package/usr/share/hedera-web/forms/admin/photos/html.php
@@ -1,35 +1,37 @@
 <div id="photos">
 <div class="box">
-	<h1 class="title">
-		<?=s('Photos')?>
-	</h1>
-	<form action="rest.php?action=image" method="post" enctype="multipart/form-data" target="photos-iframe" id="photos-form">
-		<div class="form-group">
-			<label><?=s('Schema:')?></label>
-			<input type="hidden" name="schema" id="schema-field"/>
-			<htk-combo id="schema">
-				<db-model property="model">
-					SELECT name, `desc` FROM image_schema ORDER BY `desc`
-				</db-model>
-			</htk-combo>
-		</div>
-		<div class="form-group">
-			<label><?=s('ImageName:')?></label>
-			<input type="text" name="name"/>
-		</div>
-		<div class="form-group">
-			<label><?=s('Id:')?></label>
-			<input type="text" name="id" id="photo-id"/>
-		</div>
-		<div class="form-group">
-			<label><?=s('ImageFile:')?></label>
-			<input type="file" name="image"/>
-			<input type="hidden" name="MAX_FILE_SIZE" id="photo-size"/>
-		</div>
-		<button class="vn" id="photo-submit">
-			<?=s('Upload')?>
-		</button>
-	</form>
-	<iframe name="photos-iframe" id="photos-iframe"></iframe>
+	<div class="header">
+		<h1><?=s('Photos')?></h1>
+	</div>
+	<div class="body">
+		<form action="rest.php?action=image" method="post" enctype="multipart/form-data" target="photos-iframe" id="photos-form">
+			<div class="form-group">
+				<label><?=s('Id:')?></label>
+				<input type="number" name="id" id="photo-id"/>
+			</div>
+			<div class="form-group">
+				<label><?=s('ImageName:')?></label>
+				<input type="text" name="name"/>
+			</div>
+			<div class="form-group">
+				<label><?=s('Schema:')?></label>
+				<input type="hidden" name="schema" id="schema-field"/>
+				<htk-combo id="schema">
+					<db-model property="model">
+						SELECT name, `desc` FROM image_schema ORDER BY `desc`
+					</db-model>
+				</htk-combo>
+			</div>
+			<div class="form-group">
+				<label><?=s('ImageFile:')?></label>
+				<input type="file" name="image"/>
+				<input type="hidden" name="MAX_FILE_SIZE" id="photo-size"/>
+			</div>
+			<button class="vn" id="photo-submit">
+				<?=s('Upload')?>
+			</button>
+		</form>
+		<iframe name="photos-iframe" id="photos-iframe"></iframe>
+	</div>
 </div>
 </div>
diff --git a/package/usr/share/hedera-web/forms/admin/photos/style.css b/package/usr/share/hedera-web/forms/admin/photos/style.css
index e39f8bc4..43bde871 100755
--- a/package/usr/share/hedera-web/forms/admin/photos/style.css
+++ b/package/usr/share/hedera-web/forms/admin/photos/style.css
@@ -1,12 +1,11 @@
 
 #photos
 {	
-	margin: 1em;
+	padding: 1em;
 }
 #photos .box
 {
 	max-width: 40em;
-	padding: 2em;
 }
 #photos form
 {
diff --git a/package/usr/share/hedera-web/forms/admin/users/html.php b/package/usr/share/hedera-web/forms/admin/users/html.php
index abd03f80..d452d801 100755
--- a/package/usr/share/hedera-web/forms/admin/users/html.php
+++ b/package/usr/share/hedera-web/forms/admin/users/html.php
@@ -1,6 +1,8 @@
 <div id="users">
 <div class="box">
-	<h1 class="title"><?=s('UserManagement')?></h1>
+	<div class="header">
+		<h1><?=s('UserManagement')?></h1>
+	</div>
 	<table class="form">
 		<tbody>
 		<tr>
diff --git a/package/usr/share/hedera-web/forms/admin/users/style.css b/package/usr/share/hedera-web/forms/admin/users/style.css
index 3f5f2450..4299bb8b 100755
--- a/package/usr/share/hedera-web/forms/admin/users/style.css
+++ b/package/usr/share/hedera-web/forms/admin/users/style.css
@@ -1,26 +1,15 @@
 #users
 {
-	margin: 1em;
+	padding: 1em;
 	min-width: 35em;
 }
 #users .box
 {
 	max-width: 50em;
 	margin: 0 auto;
-	padding: 2em;
 }
 #users tbody tr
 {
 	height: 3.4em;
 }
 
-/* Form */
-
-#users table.form
-{
-	padding-bottom: 1.6em;
-}
-#users td.label
-{
-	width: 46%;
-}
diff --git a/package/usr/share/hedera-web/forms/admin/visits/html.php b/package/usr/share/hedera-web/forms/admin/visits/html.php
index df6ffb80..77617593 100755
--- a/package/usr/share/hedera-web/forms/admin/visits/html.php
+++ b/package/usr/share/hedera-web/forms/admin/visits/html.php
@@ -1,10 +1,21 @@
 <div id="visits">
 <div class="box">
-	<h1 class="title"><?=s('VisitsManagement')?></h1>
-	<div class="action-bar">
-		<button id="refresh"><?=s('Refresh')?></button>
-		<button id="sessions-button"><?=s('ActiveSessions')?></button>
-		<button id="visits-button"><?=s('VisitsQuery')?></button>
+	<div class="header">
+		<h1><?=s('VisitsManagement')?></h1>
+		<div class="action-bar">
+			<button id="refresh">
+				<img src="image/dark/refresh.svg" alt=""/>
+				<?=s('Refresh')?>
+			</button>
+			<button id="sessions-button">
+				<img src="image/dark/user-info.svg" alt=""/>
+				<?=s('ActiveSessions')?>
+			</button>
+			<button id="visits-button">
+				<img src="image/dark/graph.svg" alt=""/>
+				<?=s('VisitsQuery')?>
+			</button>
+		</div>
 	</div>
 	<div class="step" id="sessions-step">
 		<table class="form">
diff --git a/package/usr/share/hedera-web/forms/admin/visits/style.css b/package/usr/share/hedera-web/forms/admin/visits/style.css
index e5370993..79338e41 100755
--- a/package/usr/share/hedera-web/forms/admin/visits/style.css
+++ b/package/usr/share/hedera-web/forms/admin/visits/style.css
@@ -1,13 +1,12 @@
 #visits
 {
-	margin: 1em;
+	padding: 1em;
 	min-width: 50em;
 }
 #visits .box
 {
 	max-width: 80em;
 	margin: 0 auto;
-	padding: 2em;
 }
 
 /* Steps */
@@ -17,20 +16,3 @@ div.step
 	display: none;
 }
 
-/* Forms */
-
-#visits tbody tr
-{
-	height: 34px;
-}
-#visits table.form
-{
-	padding-bottom: 20px;
-	border-collapse: separate;
-	border-spacing: 8px;
-}
-#visits td.label
-{
-	width: 50%;
-}
-
diff --git a/package/usr/share/hedera-web/forms/agencies/packages/html.php b/package/usr/share/hedera-web/forms/agencies/packages/html.php
index 7eaa1268..f28e8ec4 100755
--- a/package/usr/share/hedera-web/forms/agencies/packages/html.php
+++ b/package/usr/share/hedera-web/forms/agencies/packages/html.php
@@ -1,6 +1,8 @@
 <div id="packages">
 <div class="box">
-	<h1 class="title"><?php i('ListByAgency') ?></h1>
+	<div class="header">
+		<h1><?=s('ListByAgency')?></h1>
+	</div>
 	<htk-grid>
 		<db-model property="model">
 			CALL vn2008.agencia_volume ()
diff --git a/package/usr/share/hedera-web/forms/agencies/packages/style.css b/package/usr/share/hedera-web/forms/agencies/packages/style.css
index 491befd2..4f209fea 100755
--- a/package/usr/share/hedera-web/forms/agencies/packages/style.css
+++ b/package/usr/share/hedera-web/forms/agencies/packages/style.css
@@ -1,14 +1,9 @@
 #packages
 {
-	margin: 1em;
+	padding: 1em;
 }
 #packages .box
 {
 	max-width: 50em;
 	margin: 0 auto;
-	padding: 2em;
-}
-#packages table.grid
-{
-	position: relative
 }
diff --git a/package/usr/share/hedera-web/forms/agencies/provinces/html.php b/package/usr/share/hedera-web/forms/agencies/provinces/html.php
index e23e386f..bf8f5793 100755
--- a/package/usr/share/hedera-web/forms/agencies/provinces/html.php
+++ b/package/usr/share/hedera-web/forms/agencies/provinces/html.php
@@ -1,10 +1,14 @@
 <div id="provinces">
-<div class="box">
+<vn-group>
 	<vn-param id="agency">
 		<vn-hash-link key="agency"/>
 	</vn-param>
-	<h1 class="title"><?php i('ByProvince') ?></h1>
 	<vn-param id="agency-id"/>
+</vn-group>
+<div class="box">
+	<div class="header">
+		<h1><?php i('ByProvince') ?></h1>
+	</div>
 	<htk-grid empty-message="SelectAgency">
 		<db-model>
 			CALL vn2008.desglose_volume (#agency)
diff --git a/package/usr/share/hedera-web/forms/agencies/provinces/style.css b/package/usr/share/hedera-web/forms/agencies/provinces/style.css
index 6c8cd1c9..214fcc29 100755
--- a/package/usr/share/hedera-web/forms/agencies/provinces/style.css
+++ b/package/usr/share/hedera-web/forms/agencies/provinces/style.css
@@ -1,14 +1,9 @@
 #provinces
 {
-	margin: 1em;
+	padding: 1em;
 }
 #provinces .box
 {
 	max-width: 50em;
 	margin: 0 auto;
-	padding: 2em;
-}
-#provinces table.grid
-{
-	position: relative
 }
diff --git a/package/usr/share/hedera-web/forms/cms/about/html.php b/package/usr/share/hedera-web/forms/cms/about/html.php
index db485fb1..1b52593f 100755
--- a/package/usr/share/hedera-web/forms/cms/about/html.php
+++ b/package/usr/share/hedera-web/forms/cms/about/html.php
@@ -1,7 +1,9 @@
 <div id="about">
 <div class="box">
 <div>
-	<h1 class="title"><?=s('QualityAndVariety')?></h1>
+	<div class="header">
+		<h1><?=s('QualityAndVariety')?></h1>
+	</div>
 	<p><?=s('MaximumFreshness')?></p>
 	<h3><?=s('SquareMeters')?></h3>
 	<img src="forms/cms/about/image/store.png" alt="store"/>
@@ -15,19 +17,25 @@
 	<img src="forms/cms/about/image/palletizing.png" alt="palletizing"/>
 </div>
 <div>
-	<h1 class="title"><?=s('WhatMakeUsDifferent')?></h1>
+	<div class="header">
+		<h1><?=s('WhatMakeUsDifferent')?></h1>
+	</div>
 	<p><?=s('DesignVariety')?></p>
 	<img src="forms/cms/about/image/differentiates_us.png" alt="differentiates_us"/>
 	<p><?=s('AdaptToYourNeeds')?></p>
 	<h3><?=s('TheBestQuality')?></h3>
 </div>
 <div>
-	<h1 class="title"><?=s('AtYourService')?></h1>
+	<div class="header">
+		<h1><?=s('AtYourService')?></h1>
+	</div>
 	<h2><?=s('BuyersAndTraders')?></h2>
 	<img src="forms/cms/about/image/commercial.png" alt="commercial"/>
 </div>
 <div>
-	<h1 class="title"><?=s('Training')?></h1>
+	<div class="header">
+		<h1><?=s('Training')?></h1>
+	</div>
 	<p><?=s('GoodTraining')?></p>
 	<img src="forms/cms/about/image/training.png" alt="training"/>
 	<p><?=s('SpecialTrainingPrices')?></p>
@@ -36,7 +44,9 @@
 	<img src="forms/cms/about/image/youtube.png" alt="youtube"/>
 </div>
 <div>
-	<h1 class="title"><?=s('HowWeWork')?></h1>
+	<div class="header">
+		<h1><?=s('HowWeWork')?></h1>
+	</div>
 	<p><?=s('AalsmeerAuction')?></p>
 	<img src="forms/cms/about/image/auction.png" alt="auction"/>
 	<p><?=s('BeforeAuction')?></p>
@@ -75,10 +85,10 @@
 	<img src="forms/cms/about/image/agencies.png" alt="agencies"/>
 	<p><?=s('FreshnessGuaranteed')?></p>
 </div>
-<div>
-	<p class="summary">
+<div id="summary">
+	<p>
 		<?=s('AboutSummary')?>
-		<img src="image/logo.png" alt="logo_small"/>
+		<img src="image/logo.svg" alt="Verdnatura"/>
 	</p>
 </div>
 </div>
diff --git a/package/usr/share/hedera-web/forms/cms/about/style.css b/package/usr/share/hedera-web/forms/cms/about/style.css
index b35a31b5..f38fb3bb 100755
--- a/package/usr/share/hedera-web/forms/cms/about/style.css
+++ b/package/usr/share/hedera-web/forms/cms/about/style.css
@@ -1,13 +1,12 @@
 
 #about
 {
-	margin: 1em;
+	padding: 1em;
 }
 #about .box
 {
 	max-width: 50em;
 	margin: 0 auto;
-	padding: 2em;
 }
 #about h2
 {
@@ -30,16 +29,19 @@
     display: block;
     margin: 1em auto;
 }
-#about p.summary
+#summary
+{
+	padding-bottom: 1em;
+}
+#summary p
 {
 	max-width: 30em;
 	text-align: center;
 	background-color: #FF8;
-	padding: 1.5em;
+	padding: 1em;
 	border-radius: 0.1em;
 	box-shadow: 0 0.2em 0.2em #AAA;
-    margin: 0 auto;
-	margin-top: 2em;
+    margin: 2em auto;
 }
 
 /* Images */
@@ -70,9 +72,4 @@
 	padding-left: 0.9em;
 	vertical-align: middle;
 }
-#about img[alt="logo_small"]
-{
-	padding: 0px;
-	padding-top: 2.5em;
-}
 
diff --git a/package/usr/share/hedera-web/forms/cms/contact/html.php b/package/usr/share/hedera-web/forms/cms/contact/html.php
index edca3579..dec38396 100755
--- a/package/usr/share/hedera-web/forms/cms/contact/html.php
+++ b/package/usr/share/hedera-web/forms/cms/contact/html.php
@@ -1,50 +1,52 @@
 <div id="contact">
 <div class="box">
-	<h1 class="title">
-		<?=s('IWantCustomer')?>
-	</h1>
-	<p>
-		<?=s('FillFormData')?>
-	</p>
-	<p>
-		<?=s('OrCallUs')?>
-	</p>
-	<form action="forms/cms/contact/send-data.php" method="post" id="contact-form">
-		<div class="form-group">
-			<label><?=s('Name:')?></label>
-			<input type="text" name="name"/>
-		</div>
-		<div class="form-group">
-			<label><?=s('City:')?></label>
-			<input type="text" name="city"/>
-		</div>
-		<div class="form-group">
-			<label><?=s('PC:')?></label>
-			<input type="text" name="pc"/>
-		</div>
-		<div class="form-group">
-			<label><?=s('Phone:')?></label>
-			<input type="text" name="phone"/>
-		</div>
-		<div class="form-group">
-			<label><?=s('EMail:')?></label>
-			<input type="text" name="email"/>
-		</div>
-		<div class="form-group">
-			<label><?=s('Message:')?></label>
-			<textarea name="message"/>
-		</div>
-		<div class="form-group" id="captcha">
-			<label><?=s('Anti-Spam:')?></label>
-			<img alt="Captcha" id="captcha-img"/>
-			<input type="text" name="captcha"/>
-		</div>
+	<div class="header">
+		<h1><?=s('IWantCustomer')?></h1>
+	</div>
+	<div class="body">
 		<p>
-			<?=s('AllFieldsMandatory')?>
+			<?=s('FillFormData')?>
 		</p>
-		<button class="vn">
-			<?=s('Send')?>
-		</button>
-	</form>
+		<p>
+			<?=s('OrCallUs')?>
+		</p>
+		<form action="forms/cms/contact/send-data.php" method="post" id="contact-form">
+			<div class="form-group">
+				<label><?=s('Name:')?></label>
+				<input type="text" name="name"/>
+			</div>
+			<div class="form-group">
+				<label><?=s('City:')?></label>
+				<input type="text" name="city"/>
+			</div>
+			<div class="form-group">
+				<label><?=s('PC:')?></label>
+				<input type="text" name="pc"/>
+			</div>
+			<div class="form-group">
+				<label><?=s('Phone:')?></label>
+				<input type="text" name="phone"/>
+			</div>
+			<div class="form-group">
+				<label><?=s('EMail:')?></label>
+				<input type="text" name="email"/>
+			</div>
+			<div class="form-group">
+				<label><?=s('Message:')?></label>
+				<textarea name="message"/>
+			</div>
+			<div class="form-group" id="captcha">
+				<label><?=s('Anti-Spam:')?></label>
+				<img alt="Captcha" id="captcha-img"/>
+				<input type="text" name="captcha"/>
+			</div>
+			<p>
+				<?=s('AllFieldsMandatory')?>
+			</p>
+			<button class="vn">
+				<?=s('Send')?>
+			</button>
+		</form>
+	</div>
 </div>
 </div>
diff --git a/package/usr/share/hedera-web/forms/cms/contact/style.css b/package/usr/share/hedera-web/forms/cms/contact/style.css
index 2715a5eb..d8672ca1 100755
--- a/package/usr/share/hedera-web/forms/cms/contact/style.css
+++ b/package/usr/share/hedera-web/forms/cms/contact/style.css
@@ -1,12 +1,11 @@
 
 #contact
-{	
-	margin: 1em;
+{
+	padding: 1em;
 }
 #contact .box
 {
 	max-width: 40em;
-	padding: 2em;
 }
 #contact p
 {
diff --git a/package/usr/share/hedera-web/forms/cms/home/home.js b/package/usr/share/hedera-web/forms/cms/home/home.js
index d68ced23..d8674568 100755
--- a/package/usr/share/hedera-web/forms/cms/home/home.js
+++ b/package/usr/share/hedera-web/forms/cms/home/home.js
@@ -6,14 +6,15 @@ Vn.Home = new Class
 	,dateFormat: _('%a, %e %b %Y')
 
 	,activate: function ()
-	{
-		this.answer = new Htk.RadioGroup ();
-	
+	{	
 		var query = 'SELECT title, date_time, text, id  FROM news '
-				+'ORDER BY priority, date_time DESC';
-		this.conn.execQuery (query, this.newsQueryDone.bind (this));
+			+'WHERE tag != \'course\' '
+			+'ORDER BY priority, date_time DESC';
+		this.conn.execQuery (query, this.onNewsQueryDone.bind (this));
 
-/*		var query = 'SELECT question, @id := id FROM survey ORDER BY id DESC LIMIT 1; '
+/*		this.answer = new Htk.RadioGroup ();
+
+		var query = 'SELECT question, @id := id FROM survey ORDER BY id DESC LIMIT 1; '
 			+'SELECT id, answer, votes FROM survey_answer WHERE survey_id = @id';
 		this.conn.execQuery (query, this.answersQueryDone.bind (this));
 		
@@ -21,7 +22,7 @@ Vn.Home = new Class
 		voteButton.addEventListener ('click', this.voteClicked.bind (this));
 */	}
 
-	,newsQueryDone: function (resultSet)
+	,onNewsQueryDone: function (resultSet)
 	{
 		var newsColumn = document.getElementById ('news-column');
 		var res = resultSet.fetchResult ();
diff --git a/package/usr/share/hedera-web/forms/cms/home/html.php b/package/usr/share/hedera-web/forms/cms/home/html.php
index 1480a5de..515654b7 100755
--- a/package/usr/share/hedera-web/forms/cms/home/html.php
+++ b/package/usr/share/hedera-web/forms/cms/home/html.php
@@ -1,7 +1,5 @@
 <div id="home">
-	<div id="last-news">
-		<div class="news-column" id="news-column"/>
-	</div>
+	<div class="column" id="news-column"/>
 <!--
 	<div id="survey">
 		<div id="question"/>
diff --git a/package/usr/share/hedera-web/forms/cms/home/style.css b/package/usr/share/hedera-web/forms/cms/home/style.css
index ac71b39b..3b7c6ba1 100755
--- a/package/usr/share/hedera-web/forms/cms/home/style.css
+++ b/package/usr/share/hedera-web/forms/cms/home/style.css
@@ -3,7 +3,7 @@
 {
 	padding: 1em;
 }
-.news-column
+#home .column
 {
 	max-width: 40em;
 	margin: 0 auto;
@@ -14,8 +14,8 @@
 	background-color: white;
 	color: #222;
 	border: none;
-	border-radius: 1px;
-	box-shadow: 0 2px 2px #CCC;
+	border-radius: 0.1em;
+	box-shadow: 0 0.2em 0.2em #CCC;
 	margin-bottom: 1em;	
 }
 
@@ -73,3 +73,4 @@
 	display: block;
 	margin: auto;
 }
+
diff --git a/package/usr/share/hedera-web/forms/cms/training/html.php b/package/usr/share/hedera-web/forms/cms/training/html.php
new file mode 100755
index 00000000..a453f9fe
--- /dev/null
+++ b/package/usr/share/hedera-web/forms/cms/training/html.php
@@ -0,0 +1,3 @@
+<div id="training">
+	<div class="column" id="courses-column"/>
+</div>
diff --git a/package/usr/share/hedera-web/forms/cms/training/style.css b/package/usr/share/hedera-web/forms/cms/training/style.css
new file mode 100755
index 00000000..01e79b58
--- /dev/null
+++ b/package/usr/share/hedera-web/forms/cms/training/style.css
@@ -0,0 +1,51 @@
+/* News panel */
+#training
+{
+	padding: 1em;
+}
+#training .column
+{
+	max-width: 40em;
+	margin: 0 auto;
+}
+.new
+{
+	padding: 2em;
+	background-color: white;
+	color: #222;
+	border: none;
+	border-radius: 0.1em;
+	box-shadow: 0 0.2em 0.2em #CCC;
+	margin-bottom: 1em;	
+}
+
+/* New */
+
+.new h2
+{
+	font-size: 1.3em;
+	color: black;
+	font-weight: bold;
+}
+.new-info
+{
+	font-size: 0.9em;
+	color: #444;
+	text-align: right;
+	margin: 0.8em 0;
+}
+.new-text
+{
+	margin-top: 2em;
+}
+.new-text li
+{
+	margin: 0.4em 0;
+}
+.new img
+{
+	display: block;
+	margin: auto;
+	max-width: 92%;
+	padding-top: 1em;
+}
diff --git a/package/usr/share/hedera-web/forms/cms/training/training.js b/package/usr/share/hedera-web/forms/cms/training/training.js
new file mode 100755
index 00000000..6ba06dcf
--- /dev/null
+++ b/package/usr/share/hedera-web/forms/cms/training/training.js
@@ -0,0 +1,53 @@
+
+Vn.Training = new Class
+({
+	Extends: Vn.Module
+	
+	,dateFormat: _('%a, %e %b %Y')
+
+	,activate: function ()
+	{
+		var query = 'SELECT title, date_time, text, id  FROM news '
+			+'WHERE tag = \'course\' '
+			+'ORDER BY priority, date_time DESC';
+		this.conn.execQuery (query, this.onCoursesQueryDone.bind (this));
+	}
+
+	,onCoursesQueryDone: function (resultSet)
+	{
+		var coursesColumn = document.getElementById ('courses-column');
+		var res = resultSet.fetchResult ();
+
+		if (res)
+		while (res.next ())
+		{	
+			var div = document.createElement ('div');
+			div.className = 'new';
+
+			var title = document.createElement ('h2');
+			title.appendChild (document.createTextNode (res.get ('title')));
+			div.appendChild (title);
+
+			var p = document.createElement ('p');
+			p.className = 'new-info';
+			div.appendChild (p);
+			
+			var date = Vn.Date.strftime (res.get ('date_time'), this.dateFormat);
+			p.appendChild (document.createTextNode (date));
+
+			var text = document.createElement ('div');
+			text.className = 'new-text';
+			div.appendChild (text);
+			
+			var html = '' + res.get ('text');
+			text.innerHTML = html;
+
+			var img = document.createElement ('img');
+			img.alt = '';
+			img.src = Vn.Config['image_dir'] + '/news/full/' + res.get ('id') + '.png';
+			div.appendChild (img);
+
+			coursesColumn.appendChild (div);
+		}
+	}
+});
diff --git a/package/usr/share/hedera-web/forms/cms/why/html.php b/package/usr/share/hedera-web/forms/cms/why/html.php
index dad54ae7..1ce3973f 100755
--- a/package/usr/share/hedera-web/forms/cms/why/html.php
+++ b/package/usr/share/hedera-web/forms/cms/why/html.php
@@ -1,7 +1,11 @@
 <div id="why">
 <div class="box">
-	<h1 class="title"><?php i('AboutCompany') ?></h1>
-	<ul><?php i('AboutWhy') ?></ul>
-	<img src="image/store.png" alt="Store photo"/>
+	<div class="header">
+		<h1><?=s('AboutCompany')?></h1>
+	</div>
+	<div class="body">
+		<ul><?=s('AboutWhy')?></ul>
+		<img src="image/store.png" alt="Store photo"/>
+	</div>
 </div>
 </div>
diff --git a/package/usr/share/hedera-web/forms/cms/why/style.css b/package/usr/share/hedera-web/forms/cms/why/style.css
index d7b8ba26..1b6ecd23 100755
--- a/package/usr/share/hedera-web/forms/cms/why/style.css
+++ b/package/usr/share/hedera-web/forms/cms/why/style.css
@@ -1,13 +1,12 @@
 
 #why
 {
-	margin: 1em;
+	padding: 1em;
 }
 #why .box
 {
 	max-width: 40em;
 	margin: 0 auto;
-	padding: 2em;
 }
 #why ul
 {
diff --git a/package/usr/share/hedera-web/forms/ecomerce/basket/basket.js b/package/usr/share/hedera-web/forms/ecomerce/basket/basket.js
index f8057a24..88b5753d 100755
--- a/package/usr/share/hedera-web/forms/ecomerce/basket/basket.js
+++ b/package/usr/share/hedera-web/forms/ecomerce/basket/basket.js
@@ -9,7 +9,6 @@ Vn.Basket = new Class
 	{	
 		// Connecting buttons events
 
-		Vn.get ('delete-order').addEventListener ('click', this.deleteClicked.bind (this));
 		Vn.get ('go-catalog').addEventListener ('click', this.catalogClicked.bind (this));
 		Vn.get ('checkout-button').addEventListener ('click', this.checkoutClicked.bind (this));
 
@@ -41,20 +40,6 @@ Vn.Basket = new Class
 		this.get ('stems').renderer = this.stemsRender.bind (this);
 		this.get ('order-total').func = this.subtotal;
 	}
-
-	,deleteClicked: function ()
-	{
-		if (confirm (_('SureDelOrder')))
-		{
-			var gui = this.gui;
-
-			if (Vn.Cookie.getInt ('order') == this.orderId.value)
-				Vn.Cookie.unset ('order');
-
-			this.get ('order-form').deleteRow ();
-			this.hash.set ({'form': 'ecomerce/orders'});
-		}
-	}
 	
 	,catalogClicked: function ()
 	{
diff --git a/package/usr/share/hedera-web/forms/ecomerce/basket/html.php b/package/usr/share/hedera-web/forms/ecomerce/basket/html.php
index c6a47117..7a627d53 100755
--- a/package/usr/share/hedera-web/forms/ecomerce/basket/html.php
+++ b/package/usr/share/hedera-web/forms/ecomerce/basket/html.php
@@ -1,34 +1,33 @@
 <div id="basket">
+<vn-param id="order-id">
+	<vn-hash-link key="order"/>
+</vn-param>
+<db-form id="order-form">
+	<db-model>
+		SELECT date_send, type_id, wh_id, note, insurance, address_id, id
+			FROM order_view WHERE id = #id
+		<sql-batch property="batch">
+			<item name="id" param="order-id"/>
+		</sql-batch>
+	</db-model>
+	<db-param column="date_send" id="date"/>
+	<db-param column="wh_id" id="warehouse"/>
+	<db-param column="address_id" id="address"/>
+</db-form>
 <div class="box">
-	<h1 class="title"><?=s('ShoppingBasket')?></h1>
-	<vn-param id="order-id">
-		<vn-hash-link key="order"/>
-	</vn-param>
-	<db-form id="order-form">
-		<db-model>
-			SELECT date_send, type_id, wh_id, note, insurance, address_id, id
-				FROM order_view WHERE id = #id
-			<sql-batch property="batch">
-				<item name="id" param="order-id"/>
-			</sql-batch>
-		</db-model>
-		<db-param column="date_send" id="date"/>
-		<db-param column="wh_id" id="warehouse"/>
-		<db-param column="address_id" id="address"/>
-	</db-form>
-	<div class="action-bar">
-		<button id="delete-order">
-			<img src="image/delete.svg" alt=""/>
-			<?=s('Delete')?>
-		</button>
-		<button id="go-catalog">
-			<img src="image/catalog.svg" alt=""/>
-			<?=s('GoToCatalog')?>
-		</button>
-		<button id="checkout-button">
-			<img src="image/ok.svg" alt=""/>
-			<?=s('Checkout')?>
-		</button>
+	<div class="header">
+		<h1><?=s('ShoppingBasket')?></h1>
+		<div class="action-bar">
+			<button id="go-catalog">
+				<img src="image/dark/menu.svg" alt=""/>
+				<?=s('GoToCatalog')?>
+			</button>
+			<button id="checkout-button">
+				<img src="image/dark/ok.svg" alt=""/>
+				<?=s('Checkout')?>
+			</button>
+			<div class="clear"></div>
+		</div>
 	</div>
 	<div>
 		<table class="form">
diff --git a/package/usr/share/hedera-web/forms/ecomerce/basket/style.css b/package/usr/share/hedera-web/forms/ecomerce/basket/style.css
index ab2842b4..a7a8aea5 100755
--- a/package/usr/share/hedera-web/forms/ecomerce/basket/style.css
+++ b/package/usr/share/hedera-web/forms/ecomerce/basket/style.css
@@ -1,21 +1,16 @@
 #basket
 {
-	margin: 1em;
-	min-width: 50em;
+	padding: 1em;
+	min-width: 65em;
 }
 #basket .box
 {
 	max-width: 70em;
 	margin: 0 auto;
-	padding: 2em;
 }
 
 /* Data */
 
-#basket table.form
-{
-	padding: 1.8em;
-}
 #basket td.label
 {
 	width: 10em;
diff --git a/package/usr/share/hedera-web/forms/ecomerce/catalog/catalog.js b/package/usr/share/hedera-web/forms/ecomerce/catalog/catalog.js
index 17c4d5f9..aa741b19 100755
--- a/package/usr/share/hedera-web/forms/ecomerce/catalog/catalog.js
+++ b/package/usr/share/hedera-web/forms/ecomerce/catalog/catalog.js
@@ -6,16 +6,17 @@ Vn.Catalog = new Class
 	,activate: function ()
 	{
 		$('basket-button').addEventListener ('click', this.basketClicked.bind (this));
-
-		var model = this.get ('items');
-		model.setTableInfo ('m', 'order_row_view');
-		model.setFieldFlags ('id', Db.Conn.Flag.AI);	
-		model.setFieldFlags ('Id_Article', Db.Conn.Flag.PRI_KEY);		
+		$('catalog-menu-button').addEventListener ('click', this.showMenu.bind (this));
+		$('catalog-menu').addEventListener ('click', this.onMenuClick.bind (this));
+		$('search-entry').addEventListener ('change', this.onSearch.bind (this));
 
 		this.get ('type-column').renderer = this.typeRenderer.bind (this);
 		this.get ('cat').renderer = this.catRenderer;
 
-		this.get ('realms').setConn (this.conn);
+		this.get ('realms-model').on ('status-changed', this.onRealmsReload.bind (this));
+		this.get ('realms').on ('changed', this.onRealmChanged.bind (this));
+		this.get ('types-model').on ('status-changed', this.onTypesReload.bind (this));
+		this.get ('type').on ('changed', this.onTypeChanged.bind (this));
 		this.get ('order-form').on ('status-changed', this.orderFormChanged.bind (this));
 		this.get ('warehouse').value = 1;
 		this.get ('date').value = new Date ();
@@ -32,6 +33,113 @@ Vn.Catalog = new Class
 		else
 			this.get ('order').value = 0;
 	}
+
+	,onRealmsReload: function (model, status)
+	{
+		if (status == Db.Model.Status.READY)
+			this.onRealmChanged ();
+	}
+	
+	,onRealmChanged: function ()
+	{
+		var color;
+		var realms = this.get ('realms-model');
+		var row = realms.search ('id', this.get ('realm').value);
+
+		if (row != -1)
+			color = '#'+ realms.get (row, 'color');
+		else
+			color = null;
+			
+		$('realms-bar').style.backgroundColor = color;
+	}
+
+	,onTypesReload: function (model, status)
+	{
+		if (status == Db.Model.Status.READY)
+			this.refreshTitle ();
+	}
+
+	,onTypeChanged: function ()
+	{
+		if (Vn.isMobile ())
+			this.hideMenu ();
+			
+		this.refreshTitle ();
+
+		var color = null;
+		
+		if (this.get ('type').value)
+			color = $('realms-bar').style.backgroundColor;
+
+		$('catalog-header').style.backgroundColor = color;
+
+		var itemsGrid = this.get ('items-grid').getNode ();
+		var thead = itemsGrid.getElementsByTagName ('thead')[0];
+		var tr = thead.getElementsByTagName ('tr')[0];
+		tr.style.backgroundColor = color;
+	}
+	
+	,refreshTitle: function (title)
+	{
+		var title = null;
+		
+		if (this.get ('type').value)
+		{
+			var types = this.get ('types-model');
+			var row = types.search ('tipo_id', this.get ('type').value);
+
+			if (row != -1)
+				title = types.get (row, 'Tipo');
+		}
+		else if ($('search-entry').value)
+			title = _('SearchResults');
+
+		if (title)
+			Vn.Node.setText ($('catalog-title'), title);
+	}
+
+	,onSearch: function (event)
+	{
+		var searchTags = $('search-entry').value;
+		searchTags = searchTags != '' ? searchTags : null;
+
+		var batch = this.get ('batch');
+		batch.block ();
+
+		this.get ('search').value = searchTags;
+
+		if (searchTags)
+		{
+			this.get ('type').value = null;
+			this.get ('realm').value = null;
+		}
+
+		batch.unblock ();
+		batch.changed ();
+	}
+
+	,onMenuClick: function (event)
+	{
+		event.stopPropagation ();
+	}
+
+	,showMenu: function (event)
+	{
+		event.stopPropagation ();
+		this.gui.showBackground ();
+		$('catalog-menu').style.display = 'block';
+		this.hideMenuCallback = this.hideMenu.bind (this);
+		document.addEventListener ('click', this.hideMenuCallback);
+	}
+
+	,hideMenu: function ()
+	{
+		this.gui.hideBackground ();
+		$('catalog-menu').style.display = 'none';
+		document.removeEventListener ('click', this.hideMenuCallback);
+		this.hideMenuCallback = null;
+	}
 	
 	,configureView: function ()
 	{
@@ -150,44 +258,53 @@ Htk.Realm = new Class
 ({
 	Extends: Htk.Field
 	,Tag: 'htk-realm'
+	,Properties:
+	{
+		 model:
+		 {
+			type: Db.Model
+			,set: function (x)
+			{
+				x.indexColumn ('id');
+				this.link ({_model: x}, {'status-changed': this.onModelReload});
+				this.onModelReload (x);
+			}
+			,get: function ()
+			{
+				return this._model;
+			}
+		}
+	}
 
-	,model: null
+	,_model: null
 	,selectedImg: null
 
 	,initialize: function (mod)
 	{
 		this.createElement ('div');
 		this.node.className = 'htk-realm';
-		
-		this.model = new Db.Model ();
-		this.model.on ('status-changed', this.modelReloaded.bind (this));
-		
-		var query = 'SELECT id, reino FROM vn2008.reinos '
-			+'WHERE display != FALSE '
-			+'ORDER BY reino';
-		this.model.query = query;
 	}
 
-	,setConn: function (conn)
-	{
-		this.model.conn = conn;
-	}
-
-	,modelReloaded: function (model, status)
+	,onModelReload: function (model)
 	{
 		Vn.Node.removeChilds (this.node);
 	
-		if (status != Db.Model.Status.READY)
+		if (model.status != Db.Model.Status.READY)
 			return;
 
+		var width = parseInt (100 / model.numRows) +'%';
+
 		for (var i = 0; i < model.numRows; i++)
 		{
 			var id = model.get (i, 'id');
 		
 			var img = document.createElement ('img');
-			img.src = Vn.Config['image_dir'] +'/family/full/'+ id +'.png';
+//			img.src = Vn.Config['image_dir'] +'/family/full/'+ id +'.png';
+			img.src = 'image/family/'+ id +'.svg';
 			img.title = model.get (i, 'reino');
 			img.alt = img.title;
+			img.style.width = width;
+			img.style.backgroundColor = '#'+ model.get ('color');
 			img.addEventListener ('click', this.clicked.bind (this, img, id));
 			this.node.appendChild (img);
 			
@@ -215,48 +332,10 @@ Htk.Realm = new Class
 	
 	,putValue: function (value)
 	{
-		var row = this.model.search ('id', value);
+		var row = this._model.search ('id', value);
 
 		if (row != -1)
 			this.focusImage (this.node.childNodes[row]);
 	}
 });
 
-Htk.Nuller = new Class
-({
-	Extends: Htk.Field
-	,Tag: 'htk-nuller'
-	
-	,previousValue: null
-
-	,initialize: function ()
-	{
-		this.parent ();
-		this.createElement ('input');
-		this.node.type = 'checkbox';
-		this.node.addEventListener ('change', this.changed.bind (this));
-		this.putValue (this.value);
-	}
-
-	,changed: function ()
-	{
-		this.valueChanged (this.node.checked ? null : this.previousValue);
-	}
-
-	,putValue: function (value)
-	{
-		if (value !== null && value !== undefined)
-		{
-			this.node.checked = false;
-			this.previousValue = value;
-		}
-		else
-			this.node.checked = true;
-	}
-
-	,setEditable: function (editable)
-	{
-		this.node.disabled = !editable;
-	}
-});
-
diff --git a/package/usr/share/hedera-web/forms/ecomerce/catalog/html.php b/package/usr/share/hedera-web/forms/ecomerce/catalog/html.php
index 105a9a04..289f9de4 100755
--- a/package/usr/share/hedera-web/forms/ecomerce/catalog/html.php
+++ b/package/usr/share/hedera-web/forms/ecomerce/catalog/html.php
@@ -1,49 +1,46 @@
 <div id="catalog">
-<div class="box">
+<vn-group>
 	<vn-param id="type">
 		<vn-hash-link key="type"/>
 	</vn-param>
 	<vn-param id="order"/>
+	<vn-param id="search"/>
+	<db-model id="realms-model">
+		SELECT id, reino, color FROM vn2008.reinos
+			WHERE display != FALSE ORDER BY reino
+	</db-model>
 	<db-form id="order-form">
 		<db-model>
 			SELECT date_send, wh_id, id FROM order_view WHERE id = #order
 			<sql-batch property="batch" id="order-batch"/>
 		</db-model>
 	</db-form>
-	<div id="catalog-left">
-		<sql-filter type="AND" id="filter">
-			<sql-filter-item type="EQUAL" id="sql-type">
-				<sql-field name="tipo_id"/>
-				<sql-value param="type"/>
-			</sql-filter-item>
-			<sql-filter-item type="LIKE">
-				<sql-field name="Article"/>
-				<sql-search-tags param="search"/>
-			</sql-filter-item>
-		</sql-filter>
-<!--
-		<htk-listbox empty-message="SelectSubtype" id="items-listbox" model="items">
-			<div>
-				<htk-image column="Foto" directory="catalog" subdir="icon" show-full="true" editable="true"/>
-				<label><?php i('Pack:') ?></label>
-				<htk-text column="grouping" format="x%.0d"/>
-				<label><?php i('Aval:') ?></label>
-				<htk-spin column="available"/>
-				<label><?php i('Name:') ?></label>
-				<htk-text column="Article"/>
-				<label><?php i('Cat:') ?></label>
-				<htk-text column="Categoria" id="cat"/>
-				<label><?php i('S1:') ?></label>
-				<htk-text column="Medida"/>
-				<label><?php i('Stems:') ?></label>
-				<htk-text column="Tallos"/>
-				<label><?php i('Color:') ?></label>
-				<htk-text column="Color"/>
-				<label><?php i('Origin:') ?></label>
-				<htk-text column="Abreviatura"/>
+	<sql-filter type="AND" id="filter">
+		<sql-filter-item type="EQUAL" id="sql-type">
+			<sql-field name="tipo_id"/>
+			<sql-value param="type"/>
+		</sql-filter-item>
+		<sql-filter-item type="LIKE">
+			<sql-field name="Article"/>
+			<sql-search-tags param="search"/>
+		</sql-filter-item>
+	</sql-filter>
+</vn-group>
+<div id="catalog-center">
+	<div id="catalog-main">
+	<div class="box">
+		<div class="header" id="catalog-header">
+			<button id="catalog-menu-button">
+				<img src="image/dark/menu.svg" alt="<?=s('Menu')?>"/>
+			</button>
+			<h1 id="catalog-title"><?=s('Catalog')?></h1>
+			<div id="catalog-topbar">
+				<div id="catalog-search">
+					<img src="image/search.svg" alt="<?=s('Search')?>" class="icon"/>
+					<input type="text" id="search-entry"/>
+				</div>
 			</div>
-		</htk-listbox>
--->
+		</div>
 		<htk-grid empty-message="SelectSubtype" id="items-grid">
 			<db-model result-index="1" main-table="m" updatable="false" id="items">
 				CALL item (#warehouse, #date);
@@ -59,7 +56,7 @@
 						ORDER BY Article, Medida
 						LIMIT 400;
 				DROP TEMPORARY TABLE vn2008.item_catalog;
-				<sql-batch property="batch">
+				<sql-batch property="batch" id="batch">
 					<item name="warehouse" param="warehouse"/>
 					<item name="date" param="date"/>
 					<item name="order" param="order"/>
@@ -72,83 +69,46 @@
 			<htk-column-text title="Name" column="Article"/>
 			<htk-column-text title="Cat" column="Categoria" id="cat"/>
 			<htk-column-text title="S1" column="Medida"/>
-<!--		<htk-column-text title="Stems" column="Tallos"/>
-			<htk-column-text title="Color" column="Color"/>
--->			<htk-column-text title="Origin" column="Abreviatura"/>
+			<htk-column-text title="Origin" column="Abreviatura"/>
 		</htk-grid>
-		<p>
-			<?php i('FixedPrices') ?>
-		</p>
 	</div>
-	<div id="catalog-right">
-		<center>
-			<button disabled="true" id="basket-button">
-				<?php i('StartOrder') ?>
-			</button>
-		</center>
-		<table class="form">
-			<tbody>
-				<tr>
-					<td class="label">
-						<label><?php i('Date:') ?></label>
-					</td>
-					<td>
-						<htk-date-chooser>
-							<vn-param id="date"/>
-						</htk-date-chooser>
-					</td>
-				</tr>
-				<tr>
-					<td class="label">
-						<label><?php i('Warehouse:') ?></label>
-					</td>
-					<td>
-						<htk-combo>
-							<db-model property="model">
-								SELECT id, name FROM vn2008.warehouse
-									WHERE reserve ORDER BY name
-							</db-model>
-							<vn-param id="warehouse"/>
-						</htk-combo>
-					</td>
-				</tr>
-				<tr>
-					<td class="label">
-						<label><?php i('Search:') ?></label>
-					</td>
-					<td>
-						<htk-entry id="search-entry">
-							<vn-param id="search"/>
-						</htk-entry>
-					</td>
-				</tr>
-				<tr>
-					<td>
-					</td>
-					<td>
-						<htk-nuller param="type"/>
-						<?php i('GeneralSearch') ?>
-					</td>
-				</tr>
-			</tbody>
-		</table>
-		<htk-realm id="realms">
-			<vn-param id="realm">
-				<vn-hash-link key="realm"/>
-			</vn-param>
-		</htk-realm>
-		<div id="types-box">
-			<htk-grid id="types-grid" empty-message="SelectFamily">
-				<db-model>
-					SELECT tipo_id, Tipo FROM vn2008.Tipos
-						WHERE reino_id = #realm AND Orden != 0 ORDER BY Orden DESC, Tipo
-					<sql-batch property="batch">
-						<item name="realm" param="realm"/>
-					</sql-batch>
-				</db-model>
-				<htk-column-link title="Subtype" column="Tipo" id="type-column"/>
-			</htk-grid>
-		</div>
+	</div>
+</div>
+<div id="catalog-menu">
+	<button disabled="true" id="basket-button">
+		<?=s('StartOrder')?>
+	</button>
+	<div class="form-group">
+		<htk-date-chooser>
+			<vn-param id="date"/>
+		</htk-date-chooser>
+	</div>
+	<div class="form-group">
+		<htk-combo>
+			<db-model property="model">
+				SELECT id, name FROM vn2008.warehouse
+					WHERE reserve ORDER BY name
+			</db-model>
+			<vn-param id="warehouse"/>
+		</htk-combo>
+	</div>
+	<htk-realm id="realms" model="realms-model">
+		<vn-param id="realm">
+			<vn-hash-link key="realm"/>
+		</vn-param>
+	</htk-realm>
+	<div id="realms-bar"/>
+	<div id="types-box">
+		<htk-grid id="types-grid" empty-message="SelectFamily">
+			<db-model id="types-model">
+				SELECT tipo_id, Tipo FROM vn2008.Tipos
+					WHERE reino_id = #realm AND Orden != 0 ORDER BY Orden DESC, Tipo
+				<sql-batch property="batch">
+					<item name="realm" param="realm"/>
+				</sql-batch>
+			</db-model>
+			<htk-column-link title="Subtype" column="Tipo" id="type-column"/>
+		</htk-grid>
 	</div>
 </div>
 </div>
diff --git a/package/usr/share/hedera-web/forms/ecomerce/catalog/style.css b/package/usr/share/hedera-web/forms/ecomerce/catalog/style.css
index ef7449ff..e227ce12 100755
--- a/package/usr/share/hedera-web/forms/ecomerce/catalog/style.css
+++ b/package/usr/share/hedera-web/forms/ecomerce/catalog/style.css
@@ -3,74 +3,151 @@
 	position: relative;
 	width: 100%;
 	height: 100%;
-	min-width: 68em;
-	min-height: 32em;
+	min-height: 25em;
 }
-#catalog .box
+#catalog-center
 {
 	position: absolute;
-	top: 1em;
-	bottom: 1em;
-	left: 1em;
-	right: 1em;
-	max-width: 85em;
-}
-#catalog-left
-{
-	position: absolute;
-	top: 0em;
-	bottom: 0em;
-	left: 0em;
+	top: 0;
+	bottom: 0;
+	left: 0;
 	right: 17em;
-	margin: 1em;
-	overflow: auto;
 }
-#catalog-right
+
+/* Main */
+
+#catalog-main
 {
 	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	overflow: auto;
+	padding: 1em;
+}
+#catalog-main .box
+{
+	margin: 0 auto;
+	min-width: 52em;
+	max-width: 70em;
+}
+#catalog-main p
+{
+	text-align: center;
+}
+
+/* Topbar */
+
+#catalog-topbar
+{
+	float: right;
+	max-width: 15em;
+	margin: 0 auto;
+}
+#catalog-search
+{
+	float: left;
+	display: block;
+	background-color: white;
+	height: 2em;
+	padding: 0;
+}
+#search-entry
+{
+	margin: 0;
+	border: none;
+	width: 11em;
+	width: 10em;
+	box-shadow: none;
+}
+#search-entry:focus
+{
+	background-color: initial;
+}
+#catalog-search > img
+{
+	margin: 0.3em;
+	margin-top: 0;
+	vertical-align: middle;
+}
+#catalog-menu-button
+{
+	float: left;
+	display: none;
+	border: none;
+	background-color: transparent;
+	box-shadow: none;
+	padding: 0.3em;
+	padding-left: 0;
+	margin-left: 0;
+}
+#catalog-menu-button img
+{
+	height: 1.8em;
+}
+
+@media screen and (min-resolution: 100dpi)
+{
+	#catalog-menu-button { display: block; }	
+	#catalog-menu { display: none; }
+	#catalog-center { right: 0; }
+}
+
+/* Menu */
+
+#catalog-menu
+{
+	position: absolute;
+	z-index: 20;
 	top: 0em;
 	bottom: 0em;
 	right: 0em;
-	width: 16em;
-	margin: 1em;
-}
-
-#catalog-left p
-{
-	text-align: center;
-}
-
-/* Right panel */
-
-#search-entry
-{
-	width: 10em;
+	width: 17em;
+	background-color: white;
+	box-shadow: 0 0.2em 0.2em #AAA;
 }
 #basket-button
 {
-	width: 95%;
+	width: 100%;
+	height: 3em;
 	text-align: center;
 }
+#catalog .form-group
+{
+	margin: 1em;
+}
+#catalog .form-group select,
+#catalog .form-group button
+{
+	display: block;
+	margin: 0 auto;
+	width: 70%;
+}
 
 /* Realms */
 
 .htk-realm
 {
-	height: 3.5em;
 	text-align: center;
-	margin-top: 0.6em;
+	margin-top: 1em;
 	vertical-align: middle;
 }
 .htk-realm img
 {
-	padding: 0.1em;
-	height: 2.4em;
+	padding: 0;
+	max-height: 4em;
 	cursor: pointer;
 }
 .htk-realm img.selected,
 .htk-realm img:hover
 {
-	height: 2.7em;
+/*	height: 4em; */
+}
+#realms-bar
+{
+	width: 100%;
+	height: 0.5em;
 }
 
 /* Types */
@@ -78,7 +155,7 @@
 #types-box
 {
 	position: absolute;
-	top: 20em;
+	top: 14.4em;
 	bottom: 0em;
 	right: 0em;
 	left: 0em;
@@ -87,35 +164,21 @@
 #types-grid
 {
 	width: 100%;
-}/*
-#types-grid tbody
+}
+#types-grid thead
 {
-	height: 200px;
-	display: block;
-	overflow: auto;
-}*/
+	display: none;
+}
 #types-grid tbody tr
 {
 	border: none;
 	height: 2.2em;
-}/*
-#types-grid tbody tr
-{
-	display: block;
-	width: 100%;
-	height: 25px;
 }
-#types-grid tbody td
-{
-	display: block;
-	width: 100%;
-	padding: 0;
-}*/
 #types-grid tbody a
 {
 	display: block;
 	padding: 0.3em 7%;
-	width: 86%;
+	width: 88%;
 	height: 100%;
 }
 #types-grid tbody a:hover
@@ -127,17 +190,27 @@
 	padding-top: 1em;
 }
 
-/* Catalog */
+/* Items */
 
 #items-grid
 {
 	width: 100%;
 }
-#items-grid tbody tr
+#catalog-main > div.box > div.header,
+#items-grid > thead > tr,
+#realms-bar
+{
+	background-color: #666;
+}
+#items-grid > thead th:hover
+{
+	background-color: #333;
+}
+#items-grid > tbody > tr
 {
 	height: 6em;
 }
-#items-grid tbody img
+#items-grid > tbody img
 {
 	max-height: 5em;
 	max-width: 5em;
diff --git a/package/usr/share/hedera-web/forms/ecomerce/checkout/html.php b/package/usr/share/hedera-web/forms/ecomerce/checkout/html.php
index 260f08be..3f28c9bd 100755
--- a/package/usr/share/hedera-web/forms/ecomerce/checkout/html.php
+++ b/package/usr/share/hedera-web/forms/ecomerce/checkout/html.php
@@ -1,30 +1,32 @@
 <div id="checkout">
+<vn-param id="order-id">
+	<vn-hash-link key="order"/>
+</vn-param>
+<db-form id="order-form">
+	<db-model>
+		SELECT type_id, note, insurance, address_id, id
+			FROM order_view WHERE id = #id
+		<sql-batch property="batch">
+			<item name="id" param="order-id"/>
+		</sql-batch>
+	</db-model>
+	<db-param column="date_send" id="date"/>
+	<db-param column="wh_id" id="warehouse"/>
+	<db-param column="address_id" id="address"/>
+</db-form>
 <div class="box">
-	<h1 class="title"><?=s('Checkout')?></h1>
-	<vn-param id="order-id">
-		<vn-hash-link key="order"/>
-	</vn-param>
-	<db-form id="order-form">
-		<db-model>
-			SELECT type_id, note, insurance, address_id, id
-				FROM order_view WHERE id = #id
-			<sql-batch property="batch">
-				<item name="id" param="order-id"/>
-			</sql-batch>
-		</db-model>
-		<db-param column="date_send" id="date"/>
-		<db-param column="wh_id" id="warehouse"/>
-		<db-param column="address_id" id="address"/>
-	</db-form>
-	<div class="action-bar">
-		<button id="go-basket">
-			<img src="image/go-previous.svg" alt=""/>
-			<?=s('GoBasket')?>
-		</button>
-		<button id="confirm-button">
-			<img src="image/ok.png" alt=""/>
-			<?=s('Confirm')?>
-		</button>
+	<div class="header">
+		<h1><?=s('Checkout')?></h1>
+		<div class="action-bar">
+			<button id="go-basket">
+				<img src="image/dark/go-previous.svg" alt=""/>
+				<?=s('GoBasket')?>
+			</button>
+			<button id="confirm-button">
+				<img src="image/dark/ok.svg" alt=""/>
+				<?=s('Confirm')?>
+			</button>
+		</div>
 	</div>
 	<div>
 		<table class="form">
diff --git a/package/usr/share/hedera-web/forms/ecomerce/checkout/style.css b/package/usr/share/hedera-web/forms/ecomerce/checkout/style.css
index 45914642..e82319dd 100755
--- a/package/usr/share/hedera-web/forms/ecomerce/checkout/style.css
+++ b/package/usr/share/hedera-web/forms/ecomerce/checkout/style.css
@@ -1,21 +1,16 @@
 #checkout
 {
-	margin: 1em;
+	padding: 1em;
 	min-width: 50em;
 }
 #checkout .box
 {
 	max-width: 70em;
 	margin: 0 auto;
-	padding: 2em;
 }
 
 /* Data */
 
-#checkout table.form
-{
-	padding: 1.8em;
-}
 #checkout td.label
 {
 	width: 10em;
diff --git a/package/usr/share/hedera-web/forms/ecomerce/orders/html.php b/package/usr/share/hedera-web/forms/ecomerce/orders/html.php
index e9068909..95913c88 100755
--- a/package/usr/share/hedera-web/forms/ecomerce/orders/html.php
+++ b/package/usr/share/hedera-web/forms/ecomerce/orders/html.php
@@ -1,10 +1,13 @@
 <div id="orders">
 <div class="box">
-	<div class="info">
-		<img src="image/order.svg" alt=""/>
-		<?=s('StartedOrdersDesc')?>
-		<button id="start-order"><?=s('StartOrder')?></button>
-		<div class="clear"/>
+	<div class="header">
+		<h1><?=s('StartedOrdersDesc')?></h1>
+		<div class="action-bar">			
+			<button id="start-order">
+				<img src="image/dark/order.svg" alt=""/>
+				<?=s('StartOrder')?>
+			</button>
+		</div>
 	</div>
 	<div>
 		<htk-grid>
@@ -19,20 +22,20 @@
 			<htk-column-text title="SendMethod" column="Agencia"/>
 		</htk-grid>
 	</div>
-	<div class="info">
-		<img src="image/ok.svg" alt=""/>
-		<?=s('ConfirmedOrdersDesc')?>
+</div>
+<div class="box">
+	<div class="header">
+		<h1><?=s('ConfirmedOrdersDesc')?></h1>
 		<div id="debt">
 			<?=s('PendingBalance:')?>
 			<htk-label format="%.2d€" id="debt-amount">
 				<db-calc-sum model="balance" column-name="amount"/>
 			</htk-label>
-			<img src="image/info.svg" title="<?=s('PaymentInfo')?>" alt="Info"/>
+			<img src="image/dark/info.svg" title="<?=s('PaymentInfo')?>" alt="Info"/>
 			<button id="pay-button" title="<?=s('MakePayment')?>">		
-				<img src="image/pay.svg" alt="<?=s('MakePayment')?>"/>
+				<img src="image/dark/pay.svg" alt="<?=s('MakePayment')?>"/>
 			</button>
 		</div>
-		<div class="clear"/>
 	</div>
 	<div id="debt-popup">
 		<htk-grid id="debt-grid">
@@ -55,8 +58,7 @@
 			<htk-column-text title="SendMethod" column="type"/>
 			<htk-column-text title="SentAddress" column="consignee"/>
 			<htk-column-spin title="TotalWithVAT" column="total" unit="€" digits="2"/>
-<!--		<htk-column-spin title="Pending" column="pending" unit="€" digits="2"/>
--->			<htk-column-button image="image/pay.svg" tip="PayOrder" id="ticket-pay"/>
+			<htk-column-button image="image/pay.svg" tip="PayOrder" id="ticket-pay"/>
 		</htk-grid>
 	</div>
 	<form method="post" id="tpv-form">
diff --git a/package/usr/share/hedera-web/forms/ecomerce/orders/orders.js b/package/usr/share/hedera-web/forms/ecomerce/orders/orders.js
index 5e636316..f0dba454 100755
--- a/package/usr/share/hedera-web/forms/ecomerce/orders/orders.js
+++ b/package/usr/share/hedera-web/forms/ecomerce/orders/orders.js
@@ -83,7 +83,7 @@ Vn.Orders = new Class
 		var model = this.get ('balance');
 		var company = model.get (row, 'id');
 		var amount = model.get (row, 'amount');
-		
+
 		amount = amount <= 0 ? null : amount;
 
 		this.pay (amount, 40000, company);
diff --git a/package/usr/share/hedera-web/forms/ecomerce/orders/style.css b/package/usr/share/hedera-web/forms/ecomerce/orders/style.css
index 6b2ea7d0..0e491fe6 100755
--- a/package/usr/share/hedera-web/forms/ecomerce/orders/style.css
+++ b/package/usr/share/hedera-web/forms/ecomerce/orders/style.css
@@ -7,15 +7,17 @@
 {
 	max-width: 70em;
 }
+#orders .grid tbody tr
+{
+	height: 5em;
+}
 
 /* Info box */
 
 #orders .info
 {
-	margin-bottom: 1em;
 	padding: 0.4em;
 	background-color: #FFC;
-	border: 1px solid #CC9;
 	border-radius: 0.1em;
 }
 #orders .info > img
@@ -31,20 +33,16 @@
 {
 	display: none;
 }
-#start-order,
-#debt
-{
-	float: right;
-}
 
 /* Balance */
 
 #debt
 {
-	display: inline;
+	float: right;
 }
-#debt > img
+#debt img
 {
+	vertical-align: middle;
 	padding-left: 0.3em;
 	cursor: pointer;
 }
@@ -52,28 +50,27 @@
 {
 	margin-left: 1.2em;
 }
+.positive-debt
+{
+	color: white;
+}
+.negative-debt
+{
+	color: white;
+}
 #debt-popup
 {
 	display: none;
 	background-color: white;
-	border: 1px solid #999;
 	border-radius: 0.1em;
-	padding: 1.4em;
-	width: 28em;
+	box-shadow: 0 0 0.4em #666;
+	width: 25em;
 }
 #debt-grid
 {
 	width: 100%;
 	margin: auto;
 }
-.positive-debt
-{
-	color: red;
-}
-.negative-debt
-{
-	color: green;
-}
 
 /* TPV */
 
diff --git a/package/usr/share/hedera-web/forms/ecomerce/ticket/html.php b/package/usr/share/hedera-web/forms/ecomerce/ticket/html.php
index 592ec8c5..8f2d0627 100755
--- a/package/usr/share/hedera-web/forms/ecomerce/ticket/html.php
+++ b/package/usr/share/hedera-web/forms/ecomerce/ticket/html.php
@@ -1,6 +1,5 @@
 <div id="ticket">
-<div class="box">
-	<h1 class="title"><?=s('OrderDetail')?></h1>
+<vn-group>
 	<vn-param id="ticket-id">
 		<vn-hash-link key="ticket"/>
 	</vn-param>
@@ -18,11 +17,16 @@
 			</sql-batch>
 		</db-model>
 	</db-form>
-	<div class="action-bar">
-		<button id="print">
-			<img src="image/print.svg" alt=""/>
-			<?=s('Print')?>
-		</button>
+</vn-group>
+<div class="box">
+	<div class="header">
+		<h1><?=s('OrderDetail')?></h1>
+		<div class="action-bar">
+			<button id="print">
+				<img src="image/dark/print.svg" alt=""/>
+				<?=s('Print')?>
+			</button>
+		</div>
 	</div>
 	<div id="ticket-report">
 		<table class="form">
diff --git a/package/usr/share/hedera-web/forms/ecomerce/ticket/style.css b/package/usr/share/hedera-web/forms/ecomerce/ticket/style.css
index f5e87073..74644190 100755
--- a/package/usr/share/hedera-web/forms/ecomerce/ticket/style.css
+++ b/package/usr/share/hedera-web/forms/ecomerce/ticket/style.css
@@ -1,21 +1,16 @@
 #ticket
 {
-	margin: 1em;
+	padding: 1em;
 	min-width: 50em;
 }
 #ticket .box
 {
 	max-width: 70em;
 	margin: 0 auto;
-	padding: 2em;
 }
 
 /* Data */
 
-#ticket table.form
-{
-	padding: 1.8em;
-}
 #ticket td.label
 {
 	width: 10em;
diff --git a/package/usr/share/hedera-web/forms/news/new/html.php b/package/usr/share/hedera-web/forms/news/new/html.php
index 7c78e36a..9e0a2df7 100755
--- a/package/usr/share/hedera-web/forms/news/new/html.php
+++ b/package/usr/share/hedera-web/forms/news/new/html.php
@@ -1,32 +1,45 @@
 <div id="new">
-<div class="box">
-	<h1 class="title"><?=s('AddNew')?></h1>
+<vn-group>
 	<vn-param id="new-param">
 		<vn-hash-link key="new"/>
 	</vn-param>
 	<db-form id="new-form">
 		<db-param column="text" id="new-body"/>
 		<db-model>
-			SELECT id, user_id, title, text
+			SELECT id, user_id, title, text, tag
 				FROM news WHERE id = #new
 			<sql-batch property="batch">
 				<item name="new" param="new-param"/>
 			</sql-batch>
 		</db-model>
 	</db-form>
+</vn-group>
+<div class="box">
+	<div class="header">
+		<h1><?=s('AddNew')?></h1>
+	</div>
 	<div class="form">
 		<div class="form-group">
 			<label><?=s('Title:')?></label>
 			<htk-entry column="title" form="new-form"/>
 		</div>
+		<div class="form-group">
+			<label><?=s('Tag:')?></label>
+			<htk-combo column="tag" form="new-form">
+				<db-model property="model">
+					SELECT name, description FROM news_tag
+						ORDER BY description
+				</db-model>
+			</htk-combo>
+		</div>
 		<div class="form-group">
 			<label><?=s('NewBody:')?></label>
 			<textarea id="html-editor"/>
 		</div>
-	</div>
-	<div class="foot">
-		<button id="new-cancel" class="vn"><?=s('Cancel')?></button>
-		<button id="new-accept" class="vn"><?=s('Accept')?></button>
+		<div class="foot">
+			<button id="new-cancel" class="vn"><?=s('Cancel')?></button>
+			<button id="new-accept" class="vn"><?=s('Accept')?></button>
+		</div>
 	</div>
 </div>
 </div>
diff --git a/package/usr/share/hedera-web/forms/news/new/new.js b/package/usr/share/hedera-web/forms/news/new/new.js
index eab47d71..50e3f250 100755
--- a/package/usr/share/hedera-web/forms/news/new/new.js
+++ b/package/usr/share/hedera-web/forms/news/new/new.js
@@ -13,9 +13,7 @@ Vn.New = new Class
 		tinymce.init ({
 		    mode : 'exact'
 		    ,elements : 'html-editor'
-/*		    ,width: 610
-		    ,height: 300
-*/			,plugins: [
+			,plugins: [
 				"advlist autolink lists link image charmap print preview hr anchor pagebreak",
 				"searchreplace wordcount visualblocks visualchars code fullscreen",
 				"insertdatetime media nonbreaking save table contextmenu directionality",
@@ -65,10 +63,11 @@ Vn.New = new Class
 		{
 			var batch = new Sql.Batch ();
 			batch.addValue ('title', form.get ('title'));
+			batch.addValue ('tag', form.get ('tag'));
 			batch.addValue ('text', newHtml);
 	
-			var query = 'INSERT INTO news (title, text, user_id) '
-				+'VALUES (#title, #text, account.user_get_id())';
+			var query = 'INSERT INTO news (title, text, tag, user_id) '
+				+'VALUES (#title, #text, #tag, account.user_get_id())';
 
 			this.conn.execQuery (query, this.newAdded.bind (this), batch);
 //			this.get ('new-form').performOperations ();
diff --git a/package/usr/share/hedera-web/forms/news/new/style.css b/package/usr/share/hedera-web/forms/news/new/style.css
index 2755da7b..2db476e3 100755
--- a/package/usr/share/hedera-web/forms/news/new/style.css
+++ b/package/usr/share/hedera-web/forms/news/new/style.css
@@ -1,17 +1,20 @@
 
 #new
 {
-	margin: 1em;
+	padding: 1em;
 }
 #new .box
 {
 	max-width: 50em;
 	margin: 0 auto;
-	padding: 2em;
 }
 
 /* Form */
 
+#new .form
+{
+	padding: 2em;
+}
 #new div.form-group
 {
 	padding: 0.4em;
@@ -22,7 +25,8 @@
 	margin-bottom: 0.5em;
 }
 #new div.form-group input,
-#new div.form-group textarea
+#new div.form-group textarea,
+#new div.form-group select
 {
 	margin: 0;
 	width: 100%;
diff --git a/package/usr/share/hedera-web/forms/news/news/html.php b/package/usr/share/hedera-web/forms/news/news/html.php
index 635fe6cb..e2ba9537 100755
--- a/package/usr/share/hedera-web/forms/news/news/html.php
+++ b/package/usr/share/hedera-web/forms/news/news/html.php
@@ -1,8 +1,13 @@
 <div id="news">
 <div class="box">
-	<h1 class="title"><?=s('NewsManagement')?></h1>
-	<div class="action-bar">
-		<button id="add-new"><?=s('AddNew')?></button>
+	<div class="header">
+		<h1><?=s('NewsManagement')?></h1>
+		<div class="action-bar">
+			<button id="add-new">
+				<img src="image/dark/add.svg" alt=""/>
+				<?=s('AddNew')?>
+			</button>
+		</div>
 	</div>
 	<htk-grid>
 		<db-model id="news-model">
diff --git a/package/usr/share/hedera-web/forms/news/news/style.css b/package/usr/share/hedera-web/forms/news/news/style.css
index 0c297708..96217e37 100755
--- a/package/usr/share/hedera-web/forms/news/news/style.css
+++ b/package/usr/share/hedera-web/forms/news/news/style.css
@@ -1,15 +1,10 @@
 #news
 {
-	margin: 1em;
+	padding: 1em;
 	min-width: 35em;
 }
 #news .box
 {
 	max-width: 60em;
 	margin: 0 auto;
-	padding: 2em;
-}
-#news .action-bar
-{
-	margin-bottom: 1.5em;
 }
diff --git a/package/usr/share/hedera-web/global/style.css b/package/usr/share/hedera-web/global/style.css
index 180674c5..76371164 100755
--- a/package/usr/share/hedera-web/global/style.css
+++ b/package/usr/share/hedera-web/global/style.css
@@ -5,11 +5,15 @@
 {
 	* { font-size: 10pt; }
 }
-@media screen and (max-device-width: 1100px) and (min-resolution: 100dpi)
+@media screen and (min-device-width: 1900px)
 {
-	* { font-size: 18pt; }
+	* { font-size: 11pt; }
 }
-@media screen and (max-device-width: 750px) and (min-resolution: 100dpi)
+@media screen and (max-device-width: 1200px) and (min-resolution: 100dpi) and (orientation: landscape)
+{
+	* { font-size: 16pt; }
+}
+@media screen and (max-device-width: 800px) and (min-resolution: 100dpi)
 {
 	* { font-size: 26pt; }
 }
@@ -35,7 +39,7 @@ textarea
 }
 iframe
 {
-	border: 0px;
+	border: 0;
 }
 fieldset,
 div
@@ -96,13 +100,17 @@ p
 
 input,
 textarea,
-button
+select
 {
 	border: 1px solid #CCD;
 	margin: 0.2em;
 	padding: 0.3em;
 	border-radius: 0.1em;
-/*	box-shadow: 0px 2px 2px #AAA; */
+	box-shadow: 0 0.1em 0.1em #CCC;
+}
+select
+{
+	background-color: white;
 }
 textarea
 {
@@ -110,11 +118,9 @@ textarea
 	width: 20em;
 }
 input[type=submit],
-input[type=button],
-button
+input[type=button]
 {
 	background-color: #EEF;
-	padding: 0.4em;
 }
 input[type=text]:focus,
 input[type=password]:focus,
@@ -124,8 +130,7 @@ textarea:focus
 	border-color: #BBC;
 }
 input[type=submit]:hover,
-input[type=button]:hover,
-button:hover
+input[type=button]:hover
 {
 	cursor: pointer;
 	background-color: #DDE;
@@ -136,12 +141,21 @@ input[type=radio]
 	width: 0.8em;
 	height: 0.8em;
 }
+button
+{
+	border: none;
+	background-color:  #009688;
+	color: white;
+	padding: 0.5em;
+	cursor: pointer;
+}
 button.vn
 {
 	border: none;
 	border-radius: 0.1em;
 	box-shadow: 0 0.2em 0.2em #DDD;
-	background-color: #AD4;	
+	background-color: #AD4;
+	color: black;
 }
 button.vn:hover
 {
@@ -149,6 +163,22 @@ button.vn:hover
 	cursor: pointer;
 }
 
+/* Date chooser */
+
+.date-chooser button
+{
+	border: 1px solid #CCD;
+	margin: 0.2em;
+	padding: 0.3em;
+	border-radius: 0.1em;
+	box-shadow: 0 0.1em 0.1em #CCC;
+	background-color: white;
+	color: black;
+	text-align: left;
+	min-width: 8em;
+	min-height: 2.3em;
+}
+
 /* Float */
 
 div.clear
@@ -156,21 +186,6 @@ div.clear
 	clear: both;
 }
 
-/* Title */
-
-h1.title
-{
-	text-align: center;
-	font-size: 1.5em;
-	font-weight: normal;
-	padding: 0.2em;
-	margin: 0;
-	margin-bottom: 1em;
-	background-color: #F91;
-	border-radius: 2px;
-	box-shadow: 0 0.1em 0.1em #DDD;
-}
-
 /* Box */
 
 div.box
@@ -179,23 +194,25 @@ div.box
 	margin: 0 auto;
 	border-radius: 0.1em;
 	box-shadow: 0 0.2em 0.2em #CCC;
-	padding: 1em;
 }
-
-/* Form */
-
-table.form
+div.box .header
 {
-	border-collapse: separate;
-	border-spacing: 0.3em;
+	padding: 0.6em 0.8em;
+	margin: 0;
+	color: white;
+	background-color: #009688;
 }
-table.form td.label
+div.box .header h1
 {
-	text-align: right;
+	text-align: left;
+	font-size: 1.5em;
+	line-height: 1.7em;
+	font-weight: normal;
+	display: inline;
 }
-table.form tr
+div.box .body
 {
-	height: 2.8em;
+	padding: 2em;
 }
 
 /* Action bar */
@@ -204,11 +221,17 @@ div.action-bar
 {
 	float: right;
 	padding: 0;
+	background-color: #009688;
 }
 div.action-bar button
 {
 	float: left;
 	padding: 0.4em;
+	border-left: 1px solid white;
+}
+div.action-bar button:first-child
+{
+	border-left: none;
 }
 div.action-bar img
 {
@@ -217,11 +240,35 @@ div.action-bar img
 	height: 1.4em;
 }
 
+/* Form */
+
+table.form
+{
+	padding: 1em;
+	border-collapse: separate;
+	border-spacing: 0.3em;
+}
+table.form td.label
+{
+	width: 45%;
+	text-align: right;
+}
+table.form tr
+{
+	height: 2.8em;
+}
+
+/* Icon */
+
+img.icon
+{
+	height: 1.5em;
+}
+
 /* Grid */
 
 table.grid
 {
-	width: 98%;
 	margin: auto;
 	border-collapse: collapse;
 	text-align: center;
@@ -232,27 +279,26 @@ table.grid tfoot tr
 {
 /*	box-shadow: 0px 0.1em 0.1em #DDD;
 	background-color: #AD4;
-*/	background-color: #EEF;
 	border: 1px solid #CCD;
-	color: black;
-	font-weight: bold;
+*/	background-color:  #009688;
+	color: white /* #032 */;
 	vertical-align: middle;
 	text-align: center;
-	height: 2.5em;
+	height: 3em;
 }
 table.grid thead th
 {
 	cursor: pointer;
+	font-weight: normal;
 	padding: 0 0.4em;
 }
 table.grid thead th:hover
 {
-	background-color: #DDE;
+	background-color: #076 /* #DDE */;
 }
 table.grid tr
 {
 	height: 3.5em;
-	border-top: 1px solid #DDD;
 }
 table.grid tfoot a,
 table.grid thead a
@@ -273,11 +319,29 @@ td.grid-message img
 	padding: 0.8em;
 	height: 1.8em;
 }
+table.grid tbody tr
+{
+	border-top: 1px solid #DDD;
+}
+table.grid tbody tr:first-child
+{
+	border-top: none;
+}
 table.grid tbody td
 {
 	padding-right: 0.7em;
 	padding-left: 0.3em;
 }
+table.grid tbody td:first-child,
+table.grid thead th:first-child
+{
+	padding-left: 1em;
+}
+table.grid tbody td:last-child,
+table.grid thead th:last-child
+{
+	padding-right: 1em;
+}
 input.cell-spin
 {
 	width: 2.5em;
@@ -301,7 +365,7 @@ button.cell-button img
 {
 	width: 20em;
 	background-color: white;
-	border: 1px solid #CCD;
+	border: none /* 1px solid #CCD */;
 	border-radius: 0.1em;
 	box-shadow: 0 0.2em 0.2em #AAA;
 }
@@ -312,8 +376,8 @@ button.cell-button img
 .calendar thead tr,
 .calendar tfoot tr
 {
-	background-color: #EEF;
-	color: black;
+	background-color: #009688 /*#EEF*/;
+	color: white;
 	font-weight: normal;
 	vertical-align: middle;
 	text-align: center;
@@ -321,11 +385,11 @@ button.cell-button img
 }
 .calendar thead tr
 {
-	border-bottom: 1px solid #CCD;
+	border-bottom: none /* 1px solid #CCD */;
 }
 .calendar tfoot tr
 {
-	border-top: 1px solid #CCD;
+	border-top: none /* 1px solid #CCD */;
 }
 .calendar col
 {
@@ -348,14 +412,6 @@ button.cell-button img
 	background-color: #DDE;
 }
 
-/* Date chooser */
-
-.date-chooser button
-{
-	margin: 0;
-	margin-right: 0.6em;
-}
-
 /* Full image */
 
 div.full-image
diff --git a/package/usr/share/hedera-web/image/catalog.png b/package/usr/share/hedera-web/image/catalog.png
deleted file mode 100644
index 7ff5ce2681f34cf7d9f2863d19fbf9bac43e4e97..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 196
zcmeAS@N?(olHy`uVBq!ia0vp^A|TAc1|)ksWqE-VTavfC3&Vd9T(EcfWS|IVfk$L9
zP{(x;W^~e+T>%tiFY)wsWxvP8BcNuOwIHAaC=}@F;uvCa`t8Jxyax<8SopP-4H;%v
znzALRUs9QrJw<8Tk5^w=|Ga+ie$w?7s~E%fJQjS&a9t=W?Oc$yAOpKZynmeZug@z@
kX69a*GP@|)uK5%1c78>T$4*Dxfrc}9y85}Sb4q9e09ai=4gdfE

diff --git a/package/usr/share/hedera-web/image/dark/add.svg b/package/usr/share/hedera-web/image/dark/add.svg
new file mode 100644
index 00000000..cc516539
--- /dev/null
+++ b/package/usr/share/hedera-web/image/dark/add.svg
@@ -0,0 +1,131 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="svg7384"
+   version="1.1"
+   inkscape:version="0.48.5 r10040"
+   height="16"
+   sodipodi:docname="add.svg"
+   width="16">
+  <metadata
+     id="metadata90">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>Gnome Symbolic Icon Theme</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     inkscape:object-paths="true"
+     inkscape:cy="3.6781644"
+     inkscape:current-layer="layer12"
+     inkscape:window-width="1920"
+     pagecolor="#555753"
+     showborder="false"
+     showguides="true"
+     inkscape:snap-nodes="false"
+     objecttolerance="10"
+     showgrid="true"
+     inkscape:object-nodes="true"
+     inkscape:pageshadow="2"
+     inkscape:guide-bbox="true"
+     inkscape:window-x="1920"
+     inkscape:snap-bbox="true"
+     bordercolor="#666666"
+     id="namedview88"
+     inkscape:window-maximized="1"
+     inkscape:snap-global="true"
+     inkscape:window-y="27"
+     gridtolerance="10"
+     inkscape:zoom="28.849957"
+     inkscape:window-height="1014"
+     borderopacity="1"
+     guidetolerance="10"
+     inkscape:snap-bbox-midpoints="false"
+     inkscape:cx="-6.628744"
+     inkscape:bbox-paths="false"
+     inkscape:snap-grids="true"
+     inkscape:pageopacity="1"
+     inkscape:snap-to-guides="true"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0">
+    <inkscape:grid
+       visible="true"
+       spacingx="1px"
+       type="xygrid"
+       spacingy="1px"
+       id="grid4866"
+       empspacing="2"
+       enabled="true"
+       snapvisiblegridlinesonly="true"
+       originx="-3px"
+       originy="-3px" />
+  </sodipodi:namedview>
+  <title
+     id="title9167">Gnome Symbolic Icon Theme</title>
+  <defs
+     id="defs7386" />
+  <g
+     transform="translate(-63.0002,-723)"
+     inkscape:groupmode="layer"
+     id="layer9"
+     inkscape:label="status"
+     style="display:inline" />
+  <g
+     transform="translate(-63.0002,-723)"
+     inkscape:groupmode="layer"
+     id="layer10"
+     inkscape:label="devices" />
+  <g
+     transform="translate(-63.0002,-723)"
+     inkscape:groupmode="layer"
+     id="layer11"
+     inkscape:label="apps" />
+  <g
+     transform="translate(-63.0002,-723)"
+     inkscape:groupmode="layer"
+     id="layer12"
+     inkscape:label="actions">
+    <path
+       d="m 69.8002,725 0,4.8 -4.8,0 0,2.4 4.8,0 0,4.8 2.4,0 0,-4.8 4.8,0 0,-2.4 -4.8,0 0,-4.8 -2.4,0 z"
+       id="rect31992"
+       style="color:#bebebe;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible"
+       inkscape:connector-curvature="0" />
+  </g>
+  <g
+     transform="translate(-63.0002,-723)"
+     inkscape:groupmode="layer"
+     id="layer13"
+     inkscape:label="places" />
+  <g
+     transform="translate(-63.0002,-723)"
+     inkscape:groupmode="layer"
+     id="layer14"
+     inkscape:label="mimetypes" />
+  <g
+     transform="translate(-63.0002,-723)"
+     inkscape:groupmode="layer"
+     id="layer15"
+     inkscape:label="emblems"
+     style="display:inline" />
+  <g
+     transform="translate(-63.0002,-723)"
+     inkscape:groupmode="layer"
+     id="g4953"
+     inkscape:label="categories"
+     style="display:inline" />
+</svg>
diff --git a/package/usr/share/hedera-web/image/dark/connect.svg b/package/usr/share/hedera-web/image/dark/connect.svg
new file mode 100644
index 00000000..7566e28f
--- /dev/null
+++ b/package/usr/share/hedera-web/image/dark/connect.svg
@@ -0,0 +1,166 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   sodipodi:docname="connect.svg"
+   height="16"
+   id="svg7384"
+   inkscape:version="0.48.5 r10040"
+   version="1.1"
+   width="16">
+  <metadata
+     id="metadata90">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>Gnome Symbolic Icon Theme</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     inkscape:bbox-nodes="false"
+     inkscape:bbox-paths="true"
+     bordercolor="#666666"
+     borderopacity="1"
+     inkscape:current-layer="layer11"
+     inkscape:cx="2.9199357"
+     inkscape:cy="13.174001"
+     gridtolerance="10"
+     inkscape:guide-bbox="true"
+     guidetolerance="10"
+     id="namedview88"
+     inkscape:object-nodes="false"
+     inkscape:object-paths="false"
+     objecttolerance="10"
+     pagecolor="#3a3b39"
+     inkscape:pageopacity="1"
+     inkscape:pageshadow="2"
+     showborder="false"
+     showgrid="true"
+     showguides="true"
+     inkscape:snap-bbox="true"
+     inkscape:snap-bbox-midpoints="false"
+     inkscape:snap-global="true"
+     inkscape:snap-grids="true"
+     inkscape:snap-nodes="false"
+     inkscape:snap-others="false"
+     inkscape:snap-to-guides="true"
+     inkscape:window-height="1014"
+     inkscape:window-maximized="1"
+     inkscape:window-width="1920"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:zoom="1">
+    <inkscape:grid
+       empspacing="2"
+       enabled="true"
+       id="grid4866"
+       originx="178px"
+       originy="450px"
+       snapvisiblegridlinesonly="true"
+       spacingx="1px"
+       spacingy="1px"
+       type="xygrid"
+       visible="true" />
+  </sodipodi:namedview>
+  <title
+     id="title9167">Gnome Symbolic Icon Theme</title>
+  <defs
+     id="defs7386" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer9"
+     inkscape:label="status"
+     style="display:inline"
+     transform="translate(-63.000204,-667)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer10"
+     inkscape:label="devices"
+     transform="translate(-63.000204,-667)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer11"
+     inkscape:label="apps"
+     transform="translate(-63.000204,-667)">
+    <path
+       sodipodi:cx="289.03125"
+       sodipodi:cy="178.03125"
+       d="m 291,178.03125 c 0,1.08731 -0.88144,1.96875 -1.96875,1.96875 -1.08731,0 -1.96875,-0.88144 -1.96875,-1.96875 0,-1.08731 0.88144,-1.96875 1.96875,-1.96875 1.08731,0 1.96875,0.88144 1.96875,1.96875 z"
+       id="path5182"
+       sodipodi:rx="1.96875"
+       sodipodi:ry="1.96875"
+       style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.99999994000000003;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new"
+       transform="matrix(1.5079365,0,0,1.5079365,-369.84037,406.50893)"
+       sodipodi:type="arc" />
+    <path
+       sodipodi:cx="289.03125"
+       sodipodi:cy="178.03125"
+       d="m 291,178.03125 c 0,1.08731 -0.88144,1.96875 -1.96875,1.96875 -1.08731,0 -1.96875,-0.88144 -1.96875,-1.96875 0,-1.08731 0.88144,-1.96875 1.96875,-1.96875 1.08731,0 1.96875,0.88144 1.96875,1.96875 z"
+       id="path5184"
+       sodipodi:rx="1.96875"
+       sodipodi:ry="1.96875"
+       style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.99999994000000003;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new"
+       transform="matrix(1.5079365,0,0,1.5079365,-359.87182,411.50893)"
+       sodipodi:type="arc" />
+    <path
+       sodipodi:cx="289.03125"
+       sodipodi:cy="178.03125"
+       d="m 291,178.03125 c 0,1.08731 -0.88144,1.96875 -1.96875,1.96875 -1.08731,0 -1.96875,-0.88144 -1.96875,-1.96875 0,-1.08731 0.88144,-1.96875 1.96875,-1.96875 1.08731,0 1.96875,0.88144 1.96875,1.96875 z"
+       id="path5186"
+       sodipodi:rx="1.96875"
+       sodipodi:ry="1.96875"
+       style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.99999994000000003;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new"
+       transform="matrix(1.5079365,0,0,1.5079365,-359.87182,401.50893)"
+       sodipodi:type="arc" />
+    <path
+       inkscape:connector-curvature="0"
+       d="m 75.625,669.15625 -10.0625,4.875 -1.8125,0.90625 1.8125,0.90625 10.03125,5.0625 0.90625,-1.8125 -8.21875,-4.15625 8.21875,-4 -0.875,-1.78125 z"
+       id="path5188"
+       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer13"
+     inkscape:label="places"
+     transform="translate(-63.000204,-667)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer14"
+     inkscape:label="mimetypes"
+     transform="translate(-63.000204,-667)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer15"
+     inkscape:label="emblems"
+     style="display:inline"
+     transform="translate(-63.000204,-667)" />
+  <g
+     inkscape:groupmode="layer"
+     id="g71291"
+     inkscape:label="emotes"
+     style="display:inline"
+     transform="translate(-63.000204,-667)" />
+  <g
+     inkscape:groupmode="layer"
+     id="g4953"
+     inkscape:label="categories"
+     style="display:inline"
+     transform="translate(-63.000204,-667)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer12"
+     inkscape:label="actions"
+     style="display:inline"
+     transform="translate(-63.000204,-667)" />
+</svg>
diff --git a/package/usr/share/hedera-web/image/dark/go-previous.svg b/package/usr/share/hedera-web/image/dark/go-previous.svg
new file mode 100644
index 00000000..8d3cbbde
--- /dev/null
+++ b/package/usr/share/hedera-web/image/dark/go-previous.svg
@@ -0,0 +1,169 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   sodipodi:docname="go-previous.svg"
+   height="16"
+   id="svg7384"
+   inkscape:version="0.48.5 r10040"
+   version="1.1"
+   width="16">
+  <metadata
+     id="metadata90">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>Gnome Symbolic Icon Theme</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     inkscape:bbox-nodes="false"
+     inkscape:bbox-paths="true"
+     bordercolor="#666666"
+     borderopacity="1"
+     inkscape:current-layer="layer12"
+     inkscape:cx="-9.4438785"
+     inkscape:cy="-25.208568"
+     gridtolerance="10"
+     inkscape:guide-bbox="true"
+     guidetolerance="10"
+     id="namedview88"
+     inkscape:object-nodes="false"
+     inkscape:object-paths="false"
+     objecttolerance="10"
+     pagecolor="#3a3b39"
+     inkscape:pageopacity="1"
+     inkscape:pageshadow="2"
+     showborder="false"
+     showgrid="false"
+     showguides="true"
+     inkscape:snap-bbox="true"
+     inkscape:snap-bbox-midpoints="false"
+     inkscape:snap-global="true"
+     inkscape:snap-grids="true"
+     inkscape:snap-nodes="true"
+     inkscape:snap-others="false"
+     inkscape:snap-to-guides="true"
+     inkscape:window-height="1014"
+     inkscape:window-maximized="1"
+     inkscape:window-width="1920"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:zoom="2.0429688">
+    <inkscape:grid
+       empspacing="2"
+       enabled="true"
+       id="grid4866"
+       originx="141px"
+       originy="530px"
+       snapvisiblegridlinesonly="true"
+       spacingx="1px"
+       spacingy="1px"
+       type="xygrid"
+       visible="true" />
+    <inkscape:grid
+       color="#000000"
+       empcolor="#000000"
+       empopacity="0"
+       empspacing="4"
+       enabled="true"
+       id="grid5968"
+       opacity="0.1254902"
+       originx="141px"
+       originy="530px"
+       snapvisiblegridlinesonly="true"
+       spacingx="0.5px"
+       spacingy="0.5px"
+       type="xygrid"
+       visible="true" />
+  </sodipodi:namedview>
+  <title
+     id="title9167">Gnome Symbolic Icon Theme</title>
+  <defs
+     id="defs7386" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer9"
+     inkscape:label="status"
+     style="display:inline"
+     transform="translate(-100.0002,-747)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer10"
+     inkscape:label="devices"
+     transform="translate(-100.0002,-747)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer11"
+     inkscape:label="apps"
+     transform="translate(-100.0002,-747)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer13"
+     inkscape:label="places"
+     transform="translate(-100.0002,-747)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer14"
+     inkscape:label="mimetypes"
+     transform="translate(-100.0002,-747)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer15"
+     inkscape:label="emblems"
+     style="display:inline"
+     transform="translate(-100.0002,-747)" />
+  <g
+     inkscape:groupmode="layer"
+     id="g71291"
+     inkscape:label="emotes"
+     style="display:inline"
+     transform="translate(-100.0002,-747)" />
+  <g
+     inkscape:groupmode="layer"
+     id="g4953"
+     inkscape:label="categories"
+     style="display:inline"
+     transform="translate(-100.0002,-747)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer12"
+     inkscape:label="actions"
+     style="display:inline"
+     transform="translate(-100.0002,-747)">
+    <path
+       inkscape:connector-curvature="0"
+       d="m 110.875,749 a 1.0001,1.0001 0 0 0 -0.59375,0.28125 l -5,5 -0.6875,0.71875 0.6875,0.71875 5,5 a 1.016466,1.016466 0 1 0 1.4375,-1.4375 L 107.4375,755 l 4.28125,-4.28125 A 1.0001,1.0001 0 0 0 110.875,749 z"
+       id="path6040"
+       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" />
+    <rect
+       height="1"
+       id="rect6046"
+       rx="0"
+       ry="1"
+       style="fill:#ffffff;fill-opacity:1;stroke:none"
+       width="1"
+       x="111.0002"
+       y="749" />
+    <rect
+       height="1"
+       id="rect6050"
+       rx="0"
+       ry="1"
+       style="fill:#ffffff;fill-opacity:1;stroke:none"
+       width="1"
+       x="111.0002"
+       y="760" />
+  </g>
+</svg>
diff --git a/package/usr/share/hedera-web/image/dark/graph.svg b/package/usr/share/hedera-web/image/dark/graph.svg
new file mode 100644
index 00000000..e2fff567
--- /dev/null
+++ b/package/usr/share/hedera-web/image/dark/graph.svg
@@ -0,0 +1,128 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="svg7384"
+   version="1.1"
+   inkscape:version="0.48.5 r10040"
+   height="16"
+   sodipodi:docname="graph.svg"
+   width="16">
+  <metadata
+     id="metadata90">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>Gnome Symbolic Icon Theme</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     inkscape:object-paths="true"
+     inkscape:cy="-218.16054"
+     inkscape:current-layer="layer11"
+     inkscape:window-width="1920"
+     pagecolor="#555753"
+     showborder="false"
+     showguides="true"
+     inkscape:snap-nodes="false"
+     objecttolerance="10"
+     showgrid="true"
+     inkscape:object-nodes="true"
+     inkscape:pageshadow="2"
+     inkscape:guide-bbox="true"
+     inkscape:window-x="1920"
+     inkscape:snap-bbox="true"
+     bordercolor="#666666"
+     id="namedview88"
+     inkscape:window-maximized="1"
+     inkscape:snap-global="true"
+     inkscape:window-y="27"
+     gridtolerance="10"
+     inkscape:zoom="1"
+     inkscape:window-height="1014"
+     borderopacity="1"
+     guidetolerance="10"
+     inkscape:snap-bbox-midpoints="false"
+     inkscape:cx="-82.56688"
+     inkscape:bbox-paths="false"
+     inkscape:snap-grids="true"
+     inkscape:pageopacity="1"
+     inkscape:snap-to-guides="true">
+    <inkscape:grid
+       visible="true"
+       spacingx="1px"
+       type="xygrid"
+       spacingy="1px"
+       id="grid4866"
+       empspacing="2"
+       enabled="true"
+       snapvisiblegridlinesonly="true" />
+  </sodipodi:namedview>
+  <title
+     id="title9167">Gnome Symbolic Icon Theme</title>
+  <defs
+     id="defs7386" />
+  <g
+     transform="translate(-142,-490)"
+     inkscape:groupmode="layer"
+     id="layer9"
+     inkscape:label="status"
+     style="display:inline" />
+  <g
+     transform="translate(-142,-490)"
+     inkscape:groupmode="layer"
+     id="layer10"
+     inkscape:label="devices" />
+  <g
+     transform="translate(-142,-490)"
+     inkscape:groupmode="layer"
+     id="layer11"
+     inkscape:label="apps">
+    <path
+       d="M 144.1875,490 C 142.98238,490 142,491.01794 142,492.21875 l 0,10.5625 c 0,1.20081 0.98238,2.21875 2.1875,2.21875 l 11.625,0 c 1.20512,0 2.1875,-1.01794 2.1875,-2.21875 l 0,-10.5625 C 158,491.01794 157.01762,490 155.8125,490 l -11.625,0 z m 0,2 11.625,0 c 0.12026,0 0.1875,0.08 0.1875,0.21875 l 0,10.5625 C 156,502.91996 155.93276,503 155.8125,503 l -11.625,0 c -0.12026,0 -0.1875,-0.08 -0.1875,-0.21875 l 0,-10.5625 C 144,492.08004 144.06724,492 144.1875,492 z"
+       id="rect11749-5-0"
+       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;color:#bebebe;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Bitstream Vera Sans;-inkscape-font-specification:Bitstream Vera Sans" />
+    <path
+       d="m 151.3125,493.96875 a 0.50005,0.50005 0 0 0 -0.34375,0.34375 l -1.6875,6.09375 -0.875,-1.1875 A 0.50005,0.50005 0 0 0 148,499 l -2.5,0 -0.5,0 0,1 0.5,0 2.25,0 1.3125,1.78125 a 0.50005,0.50005 0 0 0 0.875,-0.15625 l 1.53125,-5.4375 1.0625,3.46875 A 0.50005,0.50005 0 0 0 153,500 l 1.5,0 0.5,0 0,-1 -0.5,0 -1.125,0 -1.4375,-4.6875 a 0.50005,0.50005 0 0 0 -0.625,-0.34375 z"
+       id="path3643"
+       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;color:#000000;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Bitstream Vera Sans;-inkscape-font-specification:Bitstream Vera Sans" />
+  </g>
+  <g
+     transform="translate(-142,-490)"
+     inkscape:groupmode="layer"
+     id="layer12"
+     inkscape:label="actions" />
+  <g
+     transform="translate(-142,-490)"
+     inkscape:groupmode="layer"
+     id="layer13"
+     inkscape:label="places" />
+  <g
+     transform="translate(-142,-490)"
+     inkscape:groupmode="layer"
+     id="layer14"
+     inkscape:label="mimetypes" />
+  <g
+     transform="translate(-142,-490)"
+     inkscape:groupmode="layer"
+     id="layer15"
+     inkscape:label="emblems"
+     style="display:inline" />
+  <g
+     transform="translate(-142,-490)"
+     inkscape:groupmode="layer"
+     id="g4953"
+     inkscape:label="categories"
+     style="display:inline" />
+</svg>
diff --git a/package/usr/share/hedera-web/image/dark/info.svg b/package/usr/share/hedera-web/image/dark/info.svg
new file mode 100644
index 00000000..54837200
--- /dev/null
+++ b/package/usr/share/hedera-web/image/dark/info.svg
@@ -0,0 +1,123 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="svg7384"
+   version="1.1"
+   inkscape:version="0.48.5 r10040"
+   height="16"
+   sodipodi:docname="info.svg"
+   width="16">
+  <metadata
+     id="metadata90">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>Gnome Symbolic Icon Theme</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     inkscape:cy="7.0274833"
+     inkscape:current-layer="layer9"
+     inkscape:window-width="1920"
+     pagecolor="#555753"
+     showborder="false"
+     showguides="true"
+     inkscape:snap-nodes="true"
+     objecttolerance="10"
+     showgrid="false"
+     inkscape:object-nodes="true"
+     inkscape:pageshadow="2"
+     inkscape:guide-bbox="true"
+     inkscape:window-x="1920"
+     inkscape:snap-bbox="true"
+     bordercolor="#666666"
+     id="namedview88"
+     inkscape:window-maximized="1"
+     inkscape:snap-global="true"
+     inkscape:window-y="27"
+     gridtolerance="10"
+     inkscape:zoom="45.078231"
+     inkscape:window-height="1014"
+     borderopacity="1"
+     guidetolerance="10"
+     inkscape:cx="3.8262706"
+     inkscape:bbox-paths="false"
+     inkscape:snap-grids="true"
+     inkscape:pageopacity="1"
+     inkscape:snap-to-guides="true">
+    <inkscape:grid
+       visible="true"
+       spacingx="1px"
+       type="xygrid"
+       spacingy="1px"
+       id="grid4866"
+       empspacing="2"
+       enabled="true"
+       snapvisiblegridlinesonly="true" />
+  </sodipodi:namedview>
+  <title
+     id="title9167">Gnome Symbolic Icon Theme</title>
+  <defs
+     id="defs7386" />
+  <g
+     transform="translate(-281.0002,-257)"
+     inkscape:groupmode="layer"
+     id="layer9"
+     inkscape:label="status"
+     style="display:inline">
+    <path
+       d="m 287.53551,259.96102 c -0.32661,0 -0.66541,0.12985 -0.91815,0.38255 l -5.20278,5.20277 c -0.50544,0.50543 -0.50544,1.33087 0,1.83629 l 5.20278,5.20279 c 0.50544,0.50541 1.33084,0.50541 1.83629,0 l 5.20277,-5.20279 c 0.50544,-0.50542 0.50544,-1.33086 0,-1.83629 l -5.20277,-5.20277 c -0.25273,-0.2527 -0.59154,-0.38255 -0.91814,-0.38255 z m -0.15302,2.42286 c 1.34042,-0.075 2.52629,0.95493 2.60138,2.29534 -8e-5,1.14368 -0.30825,1.56841 -1.30069,2.32085 -0.15583,0.11723 -0.26573,0.20453 -0.30604,0.25504 -0.0403,0.0507 -0.0254,0.0271 -0.0254,0.0254 0.006,0.43119 -0.38491,0.81613 -0.81612,0.81613 -0.43122,0 -0.82184,-0.38494 -0.81612,-0.81613 0,-0.41 0.183,-0.76994 0.38255,-1.02014 0.19955,-0.25025 0.40096,-0.42144 0.58659,-0.56109 0.16652,-0.13104 0.37609,-0.31383 0.56108,-0.53558 0.0763,-0.0915 0.10528,-0.25108 0.10202,-0.35706 l 0,-0.0255 c -0.0258,-0.45966 -0.40746,-0.7909 -0.86714,-0.76511 -0.45966,0.0258 -0.79089,0.35644 -0.7651,0.81613 l -1.63226,0 c -0.075,-1.34043 0.95494,-2.37322 2.29535,-2.44838 z m 0.15302,6.52899 c 0.45072,0 0.81612,0.36539 0.81612,0.81611 0,0.45073 -0.3654,0.81612 -0.81612,0.81612 -0.45072,0 -0.81612,-0.36539 -0.81612,-0.81612 0,-0.45072 0.3654,-0.81611 0.81612,-0.81611 z"
+       id="path19592"
+       style="color:#bebebe;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible"
+       inkscape:connector-curvature="0" />
+  </g>
+  <g
+     transform="translate(-281.0002,-257)"
+     inkscape:groupmode="layer"
+     id="layer10"
+     inkscape:label="devices" />
+  <g
+     transform="translate(-281.0002,-257)"
+     inkscape:groupmode="layer"
+     id="layer11"
+     inkscape:label="apps" />
+  <g
+     transform="translate(-281.0002,-257)"
+     inkscape:groupmode="layer"
+     id="layer12"
+     inkscape:label="actions" />
+  <g
+     transform="translate(-281.0002,-257)"
+     inkscape:groupmode="layer"
+     id="layer13"
+     inkscape:label="places" />
+  <g
+     transform="translate(-281.0002,-257)"
+     inkscape:groupmode="layer"
+     id="layer14"
+     inkscape:label="mimetypes" />
+  <g
+     transform="translate(-281.0002,-257)"
+     inkscape:groupmode="layer"
+     id="layer15"
+     inkscape:label="emblems"
+     style="display:inline" />
+  <g
+     transform="translate(-281.0002,-257)"
+     inkscape:groupmode="layer"
+     id="g4953"
+     inkscape:label="categories"
+     style="display:inline" />
+</svg>
diff --git a/package/usr/share/hedera-web/image/logo-white.png b/package/usr/share/hedera-web/image/dark/logo.png
similarity index 100%
rename from package/usr/share/hedera-web/image/logo-white.png
rename to package/usr/share/hedera-web/image/dark/logo.png
diff --git a/package/usr/share/hedera-web/image/logo-white.svg b/package/usr/share/hedera-web/image/dark/logo.svg
similarity index 100%
rename from package/usr/share/hedera-web/image/logo-white.svg
rename to package/usr/share/hedera-web/image/dark/logo.svg
diff --git a/package/usr/share/hedera-web/image/catalog.svg b/package/usr/share/hedera-web/image/dark/menu.svg
similarity index 77%
rename from package/usr/share/hedera-web/image/catalog.svg
rename to package/usr/share/hedera-web/image/dark/menu.svg
index 99e43d05..a4119cd8 100644
--- a/package/usr/share/hedera-web/image/catalog.svg
+++ b/package/usr/share/hedera-web/image/dark/menu.svg
@@ -9,7 +9,7 @@
    xmlns="http://www.w3.org/2000/svg"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   sodipodi:docname="catalog.svg"
+   sodipodi:docname="menu.svg"
    inkscape:export-filename="/home/sam/dev/RESOURCES/gnome-icon-theme-symbolic/src/gnome-stencils.png"
    inkscape:export-xdpi="90"
    inkscape:export-ydpi="90"
@@ -36,8 +36,8 @@
      bordercolor="#666666"
      borderopacity="1"
      inkscape:current-layer="layer12"
-     inkscape:cx="4.8431143"
-     inkscape:cy="8.2436975"
+     inkscape:cx="4.8598245"
+     inkscape:cy="8.2412188"
      gridtolerance="10"
      inkscape:guide-bbox="true"
      guidetolerance="10"
@@ -63,7 +63,7 @@
      inkscape:window-width="1920"
      inkscape:window-x="1920"
      inkscape:window-y="27"
-     inkscape:zoom="51">
+     inkscape:zoom="57.698681">
     <inkscape:grid
        dotted="false"
        empspacing="2"
@@ -133,32 +133,29 @@
      inkscape:label="actions"
      style="display:inline"
      transform="translate(-61.0002,-949.00001)">
-    <g
-       id="g2995">
-      <rect
-         y="951.49951"
-         x="64.000397"
-         width="10.5"
-         style="color:#bebebe;fill:#333333;fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible"
-         inkscape:label="a"
-         id="rect7356"
-         height="2.1003082" />
-      <rect
-         y="955.69958"
-         x="64.000397"
-         width="10.5"
-         style="color:#bebebe;fill:#333333;fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible"
-         inkscape:label="a"
-         id="rect7358"
-         height="2.1003082" />
-      <rect
-         y="959.89966"
-         x="64.000397"
-         width="10.5"
-         style="color:#bebebe;fill:#333333;fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible"
-         inkscape:label="a"
-         id="rect7360"
-         height="2.1003082" />
-    </g>
+    <rect
+       height="2.0002136"
+       id="rect7356"
+       inkscape:label="a"
+       style="color:#bebebe;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible"
+       width="9.9996014"
+       x="64.000397"
+       y="951.99982" />
+    <rect
+       height="2.0002136"
+       id="rect7358"
+       inkscape:label="a"
+       style="color:#bebebe;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible"
+       width="9.9996014"
+       x="64.000397"
+       y="955.99982" />
+    <rect
+       height="2.0002136"
+       id="rect7360"
+       inkscape:label="a"
+       style="color:#bebebe;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible"
+       width="9.9996014"
+       x="64.000397"
+       y="959.99982" />
   </g>
 </svg>
diff --git a/package/usr/share/hedera-web/image/dark/ok.svg b/package/usr/share/hedera-web/image/dark/ok.svg
new file mode 100644
index 00000000..d6f243e3
--- /dev/null
+++ b/package/usr/share/hedera-web/image/dark/ok.svg
@@ -0,0 +1,139 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   sodipodi:docname="ok-dark.svg"
+   height="13.21348"
+   id="svg7384"
+   inkscape:version="0.48.5 r10040"
+   version="1.1"
+   width="16">
+  <metadata
+     id="metadata90">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>Gnome Symbolic Icon Theme</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     inkscape:bbox-paths="false"
+     bordercolor="#666666"
+     borderopacity="1"
+     inkscape:current-layer="layer15"
+     inkscape:cx="8.032386"
+     inkscape:cy="6.60674"
+     gridtolerance="10"
+     inkscape:guide-bbox="true"
+     guidetolerance="10"
+     id="namedview88"
+     inkscape:object-nodes="false"
+     inkscape:object-paths="false"
+     objecttolerance="10"
+     pagecolor="#555753"
+     inkscape:pageopacity="1"
+     inkscape:pageshadow="2"
+     showborder="false"
+     showgrid="false"
+     showguides="true"
+     inkscape:snap-bbox="true"
+     inkscape:snap-bbox-midpoints="false"
+     inkscape:snap-global="true"
+     inkscape:snap-grids="true"
+     inkscape:snap-nodes="false"
+     inkscape:snap-others="false"
+     inkscape:snap-to-guides="true"
+     inkscape:window-height="1014"
+     inkscape:window-maximized="1"
+     inkscape:window-width="1920"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:zoom="61.755117"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0">
+    <inkscape:grid
+       empspacing="2"
+       enabled="true"
+       id="grid4866"
+       snapvisiblegridlinesonly="true"
+       spacingx="1px"
+       spacingy="1px"
+       type="xygrid"
+       visible="true"
+       originx="-5.8746px"
+       originy="-5.7499995px" />
+  </sodipodi:namedview>
+  <title
+     id="title9167">Gnome Symbolic Icon Theme</title>
+  <defs
+     id="defs7386" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer9"
+     inkscape:label="status"
+     style="display:inline"
+     transform="translate(-463.9375,-400.91152)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer10"
+     inkscape:label="devices"
+     transform="translate(-463.9375,-400.91152)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer11"
+     inkscape:label="apps"
+     transform="translate(-463.9375,-400.91152)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer13"
+     inkscape:label="places"
+     transform="translate(-463.9375,-400.91152)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer14"
+     inkscape:label="mimetypes"
+     transform="translate(-463.9375,-400.91152)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer15"
+     inkscape:label="emblems"
+     style="display:inline"
+     transform="translate(-463.9375,-400.91152)">
+    <path
+       inkscape:connector-curvature="0"
+       d="m 475.64536,402.5632 -5.32585,5.32584 -2.08987,-2.08989 -2.29214,2.29215 3.23595,3.23594 1.14606,1.14607 1.14607,-1.14607 6.47192,-6.47192 -2.29214,-2.29212 z"
+       id="path5037"
+       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="g71291"
+     inkscape:label="emotes"
+     style="display:inline"
+     transform="translate(-463.9375,-400.91152)" />
+  <g
+     inkscape:groupmode="layer"
+     id="g4953"
+     inkscape:label="categories"
+     style="display:inline"
+     transform="translate(-463.9375,-400.91152)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer12"
+     inkscape:label="actions"
+     style="display:inline"
+     transform="translate(-463.9375,-400.91152)" />
+</svg>
diff --git a/package/usr/share/hedera-web/image/dark/order.svg b/package/usr/share/hedera-web/image/dark/order.svg
new file mode 100644
index 00000000..b3c2ae89
--- /dev/null
+++ b/package/usr/share/hedera-web/image/dark/order.svg
@@ -0,0 +1,141 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   sodipodi:docname="order.svg"
+   height="17.90663"
+   id="svg7384"
+   inkscape:version="0.48.5 r10040"
+   version="1.1"
+   width="12">
+  <metadata
+     id="metadata90">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>Gnome Symbolic Icon Theme</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     inkscape:bbox-nodes="false"
+     inkscape:bbox-paths="true"
+     bordercolor="#666666"
+     borderopacity="1"
+     inkscape:current-layer="layer12"
+     inkscape:cx="4.6676376"
+     inkscape:cy="10.290026"
+     gridtolerance="10"
+     inkscape:guide-bbox="true"
+     guidetolerance="10"
+     id="namedview88"
+     inkscape:object-nodes="false"
+     inkscape:object-paths="false"
+     objecttolerance="10"
+     pagecolor="#3a3b39"
+     inkscape:pageopacity="1"
+     inkscape:pageshadow="2"
+     showborder="false"
+     showgrid="false"
+     showguides="true"
+     inkscape:snap-bbox="true"
+     inkscape:snap-bbox-midpoints="false"
+     inkscape:snap-global="true"
+     inkscape:snap-grids="true"
+     inkscape:snap-nodes="false"
+     inkscape:snap-others="false"
+     inkscape:snap-to-guides="true"
+     inkscape:window-height="1014"
+     inkscape:window-maximized="1"
+     inkscape:window-width="1920"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:zoom="32.6875"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0">
+    <inkscape:grid
+       empspacing="2"
+       enabled="true"
+       id="grid4866"
+       originx="77px"
+       originy="588.96875px"
+       snapvisiblegridlinesonly="true"
+       spacingx="1px"
+       spacingy="1px"
+       type="xygrid"
+       visible="true" />
+  </sodipodi:namedview>
+  <title
+     id="title9167">Gnome Symbolic Icon Theme</title>
+  <defs
+     id="defs7386" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer9"
+     inkscape:label="status"
+     style="display:inline"
+     transform="translate(-164.0002,-804.06212)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer10"
+     inkscape:label="devices"
+     transform="translate(-164.0002,-804.06212)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer11"
+     inkscape:label="apps"
+     transform="translate(-164.0002,-804.06212)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer13"
+     inkscape:label="places"
+     transform="translate(-164.0002,-804.06212)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer14"
+     inkscape:label="mimetypes"
+     transform="translate(-164.0002,-804.06212)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer15"
+     inkscape:label="emblems"
+     style="display:inline"
+     transform="translate(-164.0002,-804.06212)" />
+  <g
+     inkscape:groupmode="layer"
+     id="g71291"
+     inkscape:label="emotes"
+     style="display:inline"
+     transform="translate(-164.0002,-804.06212)" />
+  <g
+     inkscape:groupmode="layer"
+     id="g4953"
+     inkscape:label="categories"
+     style="display:inline"
+     transform="translate(-164.0002,-804.06212)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer12"
+     inkscape:label="actions"
+     style="display:inline"
+     transform="translate(-164.0002,-804.06212)">
+    <path
+       inkscape:connector-curvature="0"
+       d="m 169.98154,804.06212 c -3.3034,0 -5.98134,2.67794 -5.98134,5.98134 0,0.41292 0.0325,0.80689 0.11209,1.19626 0.44867,3.39694 4.70439,5.89265 5.90657,10.72903 1.17882,-4.76759 5.97867,-8.27578 5.98134,-11.92529 l -0.0373,0 c 0,-3.3034 -2.67794,-5.98134 -5.98134,-5.98134 z m 0,2.39253 c 1.98205,0 3.5888,1.60676 3.5888,3.58881 0,1.98204 -1.60675,3.5888 -3.5888,3.5888 -1.98205,0 -3.5888,-1.60676 -3.5888,-3.5888 0,-1.98205 1.60675,-3.58881 3.5888,-3.58881 z"
+       id="path45579"
+       sodipodi:nodetypes="ssccccssssss"
+       style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
+  </g>
+</svg>
diff --git a/package/usr/share/hedera-web/image/dark/pay.svg b/package/usr/share/hedera-web/image/dark/pay.svg
new file mode 100644
index 00000000..f5b3bb5a
--- /dev/null
+++ b/package/usr/share/hedera-web/image/dark/pay.svg
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.0"
+   width="45"
+   height="18"
+   viewBox="0 0 5.4128298 2.1596722"
+   id="svg2"
+   xml:space="preserve"
+   inkscape:version="0.48.5 r10040"
+   sodipodi:docname="pay.svg"><metadata
+     id="metadata13"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1014"
+     id="namedview11"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:zoom="17.26776"
+     inkscape:cx="20.06532"
+     inkscape:cy="5.5278893"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2" /><defs
+     id="defs4"><style
+       type="text/css"
+       id="style6" /></defs><g
+     id="g5088"
+     transform="matrix(0.05464477,0,0,0.05464477,0.30071444,0.32636112)"
+     style="fill:#ffffff"><polygon
+       points="38.1441,26.6077 31.0183,26.6077 31.0183,26.6077 35.4754,0.453591 42.6041,0.453591 "
+       style="fill:#ffffff;stroke:none"
+       id="polygon10" /><path
+       d="M 63.9988,1.09833 C 62.58648,0.567483 60.37334,0 57.60947,0 c -7.04359,-7.10068e-4 -12.0057,3.54707 -12.0477,8.63087 -0.03962,3.75782 3.54224,5.85437 6.24632,7.10536 2.7748,1.28096 3.70755,2.09924 3.69434,3.24416 -0.01747,1.75216 -2.21584,2.55383 -4.26481,2.55383 -2.85319,-2.84e-4 -4.36905,-0.396218 -6.71014,-1.3727 l -0.918544,-0.416384 -1.00049,5.85479 c 1.66525,0.730376 4.74396,1.36305 7.94069,1.39599 7.49349,-4.26e-4 12.358,-3.5066 12.4133,-8.93521 0.02698,-2.97561 -1.87231,-5.23931 -5.98488,-7.10593 -2.49163,-1.21052 -4.01785,-2.01716 -4.00166,-3.24217 1.42e-4,-1.0874 1.29161,-2.24964 4.08232,-2.24964 2.33144,-0.037065 4.01969,0.472053 5.33531,1.00191 l 0.639061,0.301211 0.96626,-5.66776 -4.7e-5,3e-6 z"
+       style="fill:#ffffff;stroke:none"
+       id="path12"
+       inkscape:connector-curvature="0" /><path
+       d="m 82.279,0.478444 -5.50885,0 c -1.70629,0 -2.98342,0.466799 -3.73297,2.16997 l -10.5868,23.9672 7.48539,0 c 0,0 1.22416,-3.22215 1.50108,-3.92951 0.818282,0 8.0898,0.01122 9.12934,0.01122 0.213588,0.915277 0.867419,3.91886 0.867419,3.91886 l 6.61513,-5.68e-4 -5.76973,-26.13719995 M 73.488229,17.336115 c 0.58964,-1.50705 2.84013,-7.31043 2.84013,-7.31043 -0.04175,0.06916 0.585096,-1.51429 0.945242,-2.49617 l 0.48242,2.25418 c 0,0 1.36447,6.24363 1.64977,7.55285 l -5.91756,-4.26e-4 -2e-6,-4e-6 z"
+       style="fill:#ffffff;stroke:none"
+       id="path14"
+       inkscape:connector-curvature="0" /><path
+       d="m 25.0395,0.472763 -6.97897,17.8351 -0.743725,-3.62404 c -1.29914,-4.17861 -5.34752,-8.70458 -9.87307,-10.9708 l 6.38166,22.8721 7.54234,-0.0089 11.2228,-26.10339985 -7.551,0 -3.5e-5,-1.315e-5 z"
+       style="fill:#ffffff;stroke:none"
+       id="path16"
+       inkscape:connector-curvature="0" /><path
+       d="m 11.586,0.457 -11.495,0 -0.0910307,0.54448 c 8.94288,2.16429 14.8602997,7.39649 17.3166997,13.6823 L 14.817089,2.66528 C 14.385652,1.00926 13.133949,0.51519 11.585999,0.45697 l 1e-6,3e-5 z"
+       style="fill:#ffffff"
+       id="path18"
+       inkscape:connector-curvature="0" /></g></svg>
\ No newline at end of file
diff --git a/package/usr/share/hedera-web/image/dark/print.svg b/package/usr/share/hedera-web/image/dark/print.svg
new file mode 100644
index 00000000..590f90fe
--- /dev/null
+++ b/package/usr/share/hedera-web/image/dark/print.svg
@@ -0,0 +1,136 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="svg7384"
+   sodipodi:docname="print.svg"
+   version="1.1"
+   inkscape:version="0.48.5 r10040"
+   height="16"
+   width="16">
+  <metadata
+     id="metadata90">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>Gnome Symbolic Icon Theme</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     inkscape:cy="72.4546"
+     pagecolor="#555753"
+     borderopacity="1"
+     showborder="false"
+     inkscape:bbox-paths="false"
+     guidetolerance="10"
+     inkscape:window-width="1310"
+     showguides="true"
+     inkscape:snap-bbox="true"
+     inkscape:pageshadow="2"
+     inkscape:guide-bbox="true"
+     inkscape:snap-nodes="true"
+     bordercolor="#666666"
+     objecttolerance="10"
+     id="namedview88"
+     showgrid="false"
+     inkscape:window-maximized="0"
+     inkscape:window-x="54"
+     inkscape:window-y="27"
+     gridtolerance="10"
+     inkscape:window-height="701"
+     inkscape:current-layer="layer10"
+     inkscape:zoom="2.0390625"
+     inkscape:cx="-25.548654"
+     inkscape:pageopacity="1">
+    <inkscape:grid
+       spacingx="1px"
+       spacingy="1px"
+       id="grid4866"
+       empspacing="2"
+       enabled="true"
+       type="xygrid"
+       snapvisiblegridlinesonly="true"
+       visible="true" />
+  </sodipodi:namedview>
+  <title
+     id="title9167">Gnome Symbolic Icon Theme</title>
+  <defs
+     id="defs7386" />
+  <g
+     inkscape:label="status"
+     transform="translate(-142,-338)"
+     inkscape:groupmode="layer"
+     id="layer9"
+     style="display:inline" />
+  <g
+     inkscape:label="devices"
+     transform="translate(-142,-338)"
+     inkscape:groupmode="layer"
+     id="layer10">
+    <g
+       inkscape:label="accessories-calculator"
+       transform="translate(94,-60)"
+       id="g10819"
+       style="fill:#333333;fill-opacity:1" />
+    <g
+       inkscape:label="Layer 1"
+       transform="translate(142,338)"
+       id="layer1-6"
+       style="fill:#ffffff;fill-opacity:1">
+      <path
+         inkscape:connector-curvature="0"
+         d="M 2,4 C 1.5,4 1,4.5 1,5 l 0,4 c 0,0.5 0.5,1 1,1 l 1,0 0,-2 10,0 0,2 1,0 c 0.5,0 1,-0.5 1,-1 L 15,5 C 15,4.5 14.5,4 14,4 L 2,4 z"
+         id="path3520"
+         sodipodi:nodetypes="ccccccccccccc"
+         style="fill:#ffffff;fill-opacity:1;stroke:none" />
+      <path
+         inkscape:connector-curvature="0"
+         d="M 4,1 4,3 12,3 12,1 4,1 z"
+         id="path4804"
+         sodipodi:nodetypes="ccccc"
+         style="fill:#ffffff;fill-opacity:1;stroke:none" />
+      <path
+         inkscape:connector-curvature="0"
+         d="M 4,9.0000001 4,14 l 8,0 0,-5 -8,10e-8 z M 5,10 l 6,0 0,1 -6,0 0,-1 z m 0,2 5,0 0,1 -5,0 0,-1 z"
+         id="path4806"
+         sodipodi:nodetypes="ccccccccccccccc"
+         style="fill:#ffffff;fill-opacity:1;stroke:none" />
+    </g>
+  </g>
+  <g
+     inkscape:label="apps"
+     transform="translate(-142,-338)"
+     inkscape:groupmode="layer"
+     id="layer11" />
+  <g
+     inkscape:label="actions"
+     transform="translate(-142,-338)"
+     inkscape:groupmode="layer"
+     id="layer12" />
+  <g
+     inkscape:label="places"
+     transform="translate(-142,-338)"
+     inkscape:groupmode="layer"
+     id="layer13" />
+  <g
+     inkscape:label="mimetypes"
+     transform="translate(-142,-338)"
+     inkscape:groupmode="layer"
+     id="layer14" />
+  <g
+     inkscape:label="emblems"
+     transform="translate(-142,-338)"
+     inkscape:groupmode="layer"
+     id="layer15" />
+</svg>
diff --git a/package/usr/share/hedera-web/image/dark/refresh.svg b/package/usr/share/hedera-web/image/dark/refresh.svg
new file mode 100644
index 00000000..7c8fda7c
--- /dev/null
+++ b/package/usr/share/hedera-web/image/dark/refresh.svg
@@ -0,0 +1,133 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="svg7384"
+   sodipodi:docname="refresh.svg"
+   inkscape:version="0.48.5 r10040"
+   version="1.1"
+   width="16"
+   height="16">
+  <metadata
+     id="metadata90">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>Gnome Symbolic Icon Theme</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     inkscape:zoom="67.736474"
+     inkscape:bbox-paths="false"
+     inkscape:pageopacity="1"
+     guidetolerance="10"
+     inkscape:snap-bbox="true"
+     inkscape:window-height="1013"
+     objecttolerance="10"
+     id="namedview88"
+     showborder="false"
+     inkscape:window-x="2191"
+     inkscape:window-y="27"
+     inkscape:cx="7.5021197"
+     inkscape:cy="8.0157339"
+     gridtolerance="10"
+     inkscape:snap-bbox-midpoints="false"
+     showguides="true"
+     inkscape:pageshadow="2"
+     pagecolor="#555753"
+     bordercolor="#666666"
+     inkscape:snap-global="true"
+     inkscape:window-maximized="0"
+     inkscape:object-nodes="false"
+     inkscape:snap-nodes="false"
+     inkscape:guide-bbox="true"
+     inkscape:window-width="1595"
+     inkscape:snap-others="false"
+     borderopacity="1"
+     showgrid="false"
+     inkscape:snap-to-guides="true"
+     inkscape:object-paths="false"
+     inkscape:snap-grids="true"
+     inkscape:current-layer="layer12">
+    <inkscape:grid
+       enabled="true"
+       spacingx="1px"
+       spacingy="1px"
+       id="grid4866"
+       visible="true"
+       snapvisiblegridlinesonly="true"
+       empspacing="2"
+       type="xygrid" />
+  </sodipodi:namedview>
+  <title
+     id="title9167">Gnome Symbolic Icon Theme</title>
+  <defs
+     id="defs7386" />
+  <g
+     id="layer9"
+     transform="translate(-241.0002,-627)"
+     inkscape:label="status"
+     style="display:inline"
+     inkscape:groupmode="layer" />
+  <g
+     id="layer10"
+     transform="translate(-241.0002,-627)"
+     inkscape:label="devices"
+     inkscape:groupmode="layer" />
+  <g
+     id="layer11"
+     transform="translate(-241.0002,-627)"
+     inkscape:label="apps"
+     inkscape:groupmode="layer" />
+  <g
+     id="layer13"
+     transform="translate(-241.0002,-627)"
+     inkscape:label="places"
+     inkscape:groupmode="layer" />
+  <g
+     id="layer14"
+     transform="translate(-241.0002,-627)"
+     inkscape:label="mimetypes"
+     inkscape:groupmode="layer" />
+  <g
+     id="layer15"
+     transform="translate(-241.0002,-627)"
+     inkscape:label="emblems"
+     style="display:inline"
+     inkscape:groupmode="layer" />
+  <g
+     id="g71291"
+     transform="translate(-241.0002,-627)"
+     inkscape:label="emotes"
+     style="display:inline"
+     inkscape:groupmode="layer" />
+  <g
+     id="g4953"
+     transform="translate(-241.0002,-627)"
+     inkscape:label="categories"
+     style="display:inline"
+     inkscape:groupmode="layer" />
+  <g
+     id="layer12"
+     transform="translate(-241.0002,-627)"
+     inkscape:label="actions"
+     style="display:inline"
+     inkscape:groupmode="layer">
+    <path
+       id="path4597"
+       d="m 253.90645,628.96875 a 1.0001,1.0001 0 0 0 -0.125,0.0312 1.0001,1.0001 0 0 0 -0.78125,1 l 0,1.6875 c -0.38225,-0.57796 -0.84927,-1.08223 -1.40625,-1.5 -1.15563,-0.86677 -2.53199,-1.25227 -3.875,-1.1875 -0.19186,0.009 -0.37223,0.0353 -0.5625,0.0625 -1.52218,0.21741 -2.97815,1.02304 -3.96875,2.34375 -1.98119,2.64144 -1.42267,6.42505 1.21875,8.40625 2.64147,1.98122 6.42504,1.42267 8.40625,-1.21875 A 1.0063276,1.0063276 0 0 0 253.0002,638 a 1.0063276,1.0063276 0 0 0 0,-0.15625 l 0,-0.84375 -0.8125,0 -0.0937,0 a 1.0063276,1.0063276 0 0 0 -0.0937,0 1.0063276,1.0063276 0 0 0 -0.8125,0.40625 c -1.33265,1.77674 -3.81702,2.11387 -5.59375,0.78125 -1.77674,-1.33264 -2.1139,-3.81699 -0.78125,-5.59375 1.33265,-1.77674 3.817,-2.11389 5.59375,-0.78125 0.42946,0.32212 0.76954,0.73295 1.03125,1.1875 l -1.4375,0 a 1.0001,1.0001 0 0 0 -1,1 1.0001,1.0001 0 0 0 0,0.21875 l 0,0.78125 0.84375,0 0.15625,0 4,0 1,0 0,-1 0,-4 a 1.0001,1.0001 0 0 0 0,-0.1875 l 0,-0.8125 -0.8125,0 a 1.0001,1.0001 0 0 0 -0.28125,-0.0312 z"
+       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#bebebe;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>
diff --git a/package/usr/share/hedera-web/image/dark/search.svg b/package/usr/share/hedera-web/image/dark/search.svg
new file mode 100644
index 00000000..ea9eb301
--- /dev/null
+++ b/package/usr/share/hedera-web/image/dark/search.svg
@@ -0,0 +1,130 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="svg7384"
+   sodipodi:docname="search.svg"
+   version="1.1"
+   inkscape:version="0.48.5 r10040"
+   height="16"
+   width="16">
+  <metadata
+     id="metadata90">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>Gnome Symbolic Icon Theme</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     inkscape:cy="8.9536526"
+     pagecolor="#555753"
+     borderopacity="1"
+     showborder="false"
+     inkscape:bbox-paths="false"
+     guidetolerance="10"
+     inkscape:object-paths="true"
+     inkscape:window-width="1296"
+     showguides="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-bbox="true"
+     inkscape:pageshadow="2"
+     inkscape:guide-bbox="true"
+     inkscape:snap-nodes="false"
+     bordercolor="#666666"
+     objecttolerance="10"
+     id="namedview88"
+     showgrid="true"
+     inkscape:window-maximized="0"
+     inkscape:window-x="2192"
+     inkscape:snap-global="true"
+     inkscape:window-y="243"
+     gridtolerance="10"
+     inkscape:window-height="701"
+     inkscape:snap-to-guides="true"
+     inkscape:current-layer="layer12"
+     inkscape:snap-bbox-midpoints="false"
+     inkscape:zoom="16.3125"
+     inkscape:cx="7.1233965"
+     inkscape:snap-grids="true"
+     inkscape:pageopacity="1">
+    <inkscape:grid
+       spacingx="1px"
+       spacingy="1px"
+       id="grid4866"
+       empspacing="2"
+       enabled="true"
+       type="xygrid"
+       snapvisiblegridlinesonly="true"
+       visible="true" />
+  </sodipodi:namedview>
+  <title
+     id="title9167">Gnome Symbolic Icon Theme</title>
+  <defs
+     id="defs7386" />
+  <g
+     inkscape:label="status"
+     transform="translate(-140.0002,-645.96875)"
+     inkscape:groupmode="layer"
+     id="layer9"
+     style="display:inline" />
+  <g
+     inkscape:label="devices"
+     transform="translate(-140.0002,-645.96875)"
+     inkscape:groupmode="layer"
+     id="layer10" />
+  <g
+     inkscape:label="apps"
+     transform="translate(-140.0002,-645.96875)"
+     inkscape:groupmode="layer"
+     id="layer11" />
+  <g
+     inkscape:label="actions"
+     transform="translate(-140.0002,-645.96875)"
+     inkscape:groupmode="layer"
+     id="layer12">
+    <path
+       inkscape:connector-curvature="0"
+       d="m 146.50761,646.99554 c -3.02886,0 -5.51073,2.47905 -5.51073,5.50447 0,3.02541 2.48187,5.50446 5.51073,5.50446 3.02885,0 5.51072,-2.47905 5.51072,-5.50446 0,-3.02542 -2.48187,-5.50447 -5.51072,-5.50447 z m 0,2.00893 c 1.94735,0 3.49951,1.55039 3.49951,3.49554 0,1.94514 -1.55216,3.49553 -3.49951,3.49553 -1.94736,0 -3.49952,-1.55039 -3.49952,-3.49553 0,-1.94515 1.55216,-3.49554 3.49952,-3.49554 z"
+       id="path27918"
+       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.55467153000000002;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new;font-family:Sans;-inkscape-font-specification:Sans" />
+    <path
+       inkscape:connector-curvature="0"
+       d="m 149.8125,655 a 1.0001,1.0001 0 0 0 -0.5,1.71875 l 4,4 a 1.0054782,1.0054782 0 1 0 1.40625,-1.4375 l -4,-4 A 1.0001,1.0001 0 0 0 149.8125,655 z"
+       id="path27941"
+       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new;font-family:Sans;-inkscape-font-specification:Sans" />
+  </g>
+  <g
+     inkscape:label="places"
+     transform="translate(-140.0002,-645.96875)"
+     inkscape:groupmode="layer"
+     id="layer13" />
+  <g
+     inkscape:label="mimetypes"
+     transform="translate(-140.0002,-645.96875)"
+     inkscape:groupmode="layer"
+     id="layer14" />
+  <g
+     inkscape:label="emblems"
+     transform="translate(-140.0002,-645.96875)"
+     inkscape:groupmode="layer"
+     id="layer15"
+     style="display:inline" />
+  <g
+     inkscape:label="categories"
+     transform="translate(-140.0002,-645.96875)"
+     inkscape:groupmode="layer"
+     id="g4953"
+     style="display:inline" />
+</svg>
diff --git a/package/usr/share/hedera-web/image/dark/user-info.svg b/package/usr/share/hedera-web/image/dark/user-info.svg
new file mode 100644
index 00000000..c3887ae0
--- /dev/null
+++ b/package/usr/share/hedera-web/image/dark/user-info.svg
@@ -0,0 +1,158 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   sodipodi:docname="user-info.svg"
+   inkscape:export-filename="/home/sam/dev/RESOURCES/gnome-icon-theme-symbolic/src/gnome-stencils.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90"
+   height="16.000031"
+   id="svg7384"
+   version="1.1"
+   inkscape:version="0.48.5 r10040"
+   width="16.000202">
+  <metadata
+     id="metadata90">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>Gnome Symbolic Icon Theme</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     inkscape:bbox-nodes="false"
+     inkscape:bbox-paths="true"
+     bordercolor="#666666"
+     borderopacity="1"
+     inkscape:current-layer="layer11"
+     inkscape:cx="154.96757"
+     inkscape:cy="71.90811"
+     gridtolerance="10"
+     inkscape:guide-bbox="true"
+     guidetolerance="10"
+     id="namedview88"
+     inkscape:object-nodes="false"
+     inkscape:object-paths="false"
+     objecttolerance="10"
+     pagecolor="#3a3b39"
+     inkscape:pageopacity="1"
+     inkscape:pageshadow="2"
+     showborder="false"
+     showgrid="false"
+     showguides="true"
+     inkscape:snap-bbox="true"
+     inkscape:snap-bbox-midpoints="false"
+     inkscape:snap-global="true"
+     inkscape:snap-grids="true"
+     inkscape:snap-nodes="true"
+     inkscape:snap-others="false"
+     inkscape:snap-to-guides="true"
+     inkscape:window-height="1014"
+     inkscape:window-maximized="1"
+     inkscape:window-width="1920"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:zoom="1">
+    <inkscape:grid
+       empspacing="2"
+       enabled="true"
+       id="grid4866"
+       originx="139px"
+       originy="432px"
+       snapvisiblegridlinesonly="true"
+       spacingx="1px"
+       spacingy="1px"
+       type="xygrid"
+       visible="true" />
+  </sodipodi:namedview>
+  <title
+     id="title9167">Gnome Symbolic Icon Theme</title>
+  <defs
+     id="defs7386" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer9"
+     inkscape:label="status"
+     style="display:inline"
+     transform="translate(-102.0002,-648.99997)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer10"
+     inkscape:label="devices"
+     style="display:inline"
+     transform="translate(-102.0002,-648.99997)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer11"
+     inkscape:label="apps"
+     transform="translate(-102.0002,-648.99997)">
+    <path
+       inkscape:connector-curvature="0"
+       d="m 109.55489,655.09373 c -0.70541,0.62353 -1.53918,0.90625 -2.55469,0.90625 -1.01551,0 -1.85318,-0.29053 -2.55859,-0.91406 -1.10938,0.36328 -2.43603,1.28775 -2.4375,2.90234 l -0.004,3.01172 c -7.2e-4,0.554 0.446,1.00002 1,1.00002 l 6,0 0,-5 c -0.011,-0.32734 0.3599,-0.99776 1,-1 l 1.14063,-0.004 c -0.71485,-0.60547 -1.157,-0.79019 -1.58594,-0.90236 z"
+       id="path9219"
+       sodipodi:nodetypes="csccssccsccc"
+       style="fill:#ffffff;fill-opacity:1;stroke:none" />
+    <path
+       sodipodi:cx="49.5"
+       sodipodi:cy="342.5"
+       d="m 52,342.5 c 0,1.38071 -1.119288,2.5 -2.5,2.5 -1.380712,0 -2.5,-1.11929 -2.5,-2.5 0,-1.38071 1.119288,-2.5 2.5,-2.5 1.380712,0 2.5,1.11929 2.5,2.5 z"
+       id="path9221"
+       sodipodi:rx="2.5"
+       sodipodi:ry="2.5"
+       style="color:#bebebe;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       transform="matrix(1.2,0,0,1.2,47.6002,240.99997)"
+       sodipodi:type="arc" />
+    <path
+       inkscape:connector-curvature="0"
+       d="m 110.8754,657 c -0.49245,0 -0.875,0.38256 -0.875,0.875 l 0,6.25 c 0,0.49244 0.38255,0.875 0.875,0.875 l 6.25,0 c 0.49245,0 0.875,-0.38256 0.875,-0.875 l 0,-6.25 c 0,-0.49244 -0.38255,-0.875 -0.875,-0.875 z m 2.125,1 2,0 0,1 -2,0 z m 0,2 2,0 0,4 -2,0 z"
+       id="path9233"
+       sodipodi:nodetypes="ccccccccccccccccccc"
+       style="color:#bebebe;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer13"
+     inkscape:label="places"
+     style="display:inline"
+     transform="translate(-102.0002,-648.99997)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer14"
+     inkscape:label="mimetypes"
+     transform="translate(-102.0002,-648.99997)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer15"
+     inkscape:label="emblems"
+     style="display:inline"
+     transform="translate(-102.0002,-648.99997)" />
+  <g
+     inkscape:groupmode="layer"
+     id="g71291"
+     inkscape:label="emotes"
+     style="display:inline"
+     transform="translate(-102.0002,-648.99997)" />
+  <g
+     inkscape:groupmode="layer"
+     id="g4953"
+     inkscape:label="categories"
+     style="display:inline"
+     transform="translate(-102.0002,-648.99997)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer12"
+     inkscape:label="actions"
+     style="display:inline"
+     transform="translate(-102.0002,-648.99997)" />
+</svg>
diff --git a/package/usr/share/hedera-web/image/family/1.svg b/package/usr/share/hedera-web/image/family/1.svg
new file mode 100644
index 00000000..5052e670
--- /dev/null
+++ b/package/usr/share/hedera-web/image/family/1.svg
@@ -0,0 +1,90 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 13.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 14948)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   x="0px"
+   y="0px"
+   width="40"
+   height="40"
+   viewBox="0 0 40 40"
+   enable-background="new 0 0 444.488 324"
+   xml:space="preserve"
+   id="svg3218"
+   inkscape:version="0.48.5 r10040"
+   sodipodi:docname="flower.svg"><metadata
+     id="metadata3449"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:Work></rdf:RDF></metadata><defs
+     id="defs3447" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1014"
+     id="namedview3445"
+     showgrid="false"
+     inkscape:zoom="14.424978"
+     inkscape:cx="9.4619197"
+     inkscape:cy="20.791879"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg3218"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" /><rect
+     style="fill:#b92a26;stroke-width:2.65200000000000014;stroke-miterlimit:3.86369990999999979;stroke-dasharray:none;fill-opacity:1"
+     id="rect3049"
+     width="40"
+     height="40"
+     x="0"
+     y="0" /><g
+     id="Background"
+     transform="translate(-4.4638381,-117.67518)" /><g
+     id="Guides"
+     transform="translate(-4.4638381,-117.67518)" /><path
+     d="M 20,20"
+     id="path3283"
+     inkscape:connector-curvature="0"
+     style="fill:#8ed300;stroke-width:2.652;stroke-miterlimit:3.86369991;stroke-dasharray:none" /><g
+     id="g3295"
+     transform="matrix(0.36363636,0,0,0.36363636,-0.08672728,-5.14738)"
+     style="stroke-width:7.29300007;stroke-miterlimit:3.86369991;stroke-dasharray:none"><path
+       stroke-miterlimit="3.8637"
+       d="m 25.409,81.75 c -1.393,-5.199 0.654,-10.508 4.746,-13.513 -0.251,-0.215 -0.496,-0.441 -0.734,-0.68 -4.955,-4.954 -4.955,-12.987 0,-17.941 3.804,-3.804 9.423,-4.688 14.07,-2.65 0.06,-0.322 0.133,-0.645 0.22,-0.966 1.813,-6.769 8.77,-10.785 15.538,-8.971 5.195,1.392 8.77,5.814 9.33,10.855 0.31,-0.109 0.626,-0.208 0.95,-0.294 6.768,-1.813 13.725,2.203 15.539,8.971 1.393,5.199 -0.654,10.509 -4.746,13.514 0.25,0.214 0.494,0.439 0.73,0.676 4.955,4.955 4.955,12.987 0,17.941 -3.8,3.8 -9.41,4.686 -14.054,2.657 -0.06,0.32 -0.133,0.642 -0.219,0.962 -1.813,6.768 -8.771,10.784 -15.539,8.971 -5.196,-1.392 -8.771,-5.816 -9.329,-10.859 -0.314,0.111 -0.635,0.211 -0.962,0.298 -6.77,1.812 -13.727,-2.204 -15.54,-8.971 z"
+       id="path3297"
+       inkscape:connector-curvature="0"
+       style="fill:none;stroke:#ffffff;stroke-width:7.29300007;stroke-miterlimit:3.86369991;stroke-dasharray:none" /></g><g
+     id="g3313"
+     transform="matrix(0.36363636,0,0,0.36363636,-0.08618165,-5.146909)"
+     style="stroke-width:7.29300007;stroke-miterlimit:3.86369991;stroke-dasharray:none"><circle
+       style="fill:none;stroke:#ffffff;stroke-width:7.29300007;stroke-miterlimit:3.86369991;stroke-dasharray:none"
+       sodipodi:ry="9.2849998"
+       sodipodi:rx="9.2849998"
+       sodipodi:cy="69.153999"
+       sodipodi:cx="55.237"
+       id="circle3315"
+       r="9.2849998"
+       cy="69.153999"
+       cx="55.237"
+       stroke-miterlimit="3.8637"
+       d="m 64.521999,69.153999 c 0,5.127964 -4.157036,9.285 -9.284999,9.285 -5.127964,0 -9.285,-4.157036 -9.285,-9.285 0,-5.127963 4.157036,-9.285 9.285,-9.285 5.127963,0 9.284999,4.157037 9.284999,9.285 z" /></g><path
+     stroke-miterlimit="3.8637"
+     d="M 20,20"
+     id="path3317"
+     inkscape:connector-curvature="0"
+     style="fill:none;stroke:#ffffff;stroke-width:2.652;stroke-miterlimit:3.86369991;stroke-dasharray:none" /></svg>
\ No newline at end of file
diff --git a/package/usr/share/hedera-web/image/family/2.svg b/package/usr/share/hedera-web/image/family/2.svg
new file mode 100644
index 00000000..7665661c
--- /dev/null
+++ b/package/usr/share/hedera-web/image/family/2.svg
@@ -0,0 +1,124 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 13.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 14948)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   x="0px"
+   y="0px"
+   width="40"
+   height="40"
+   viewBox="0 0 40 40"
+   enable-background="new 0 0 444.488 324"
+   xml:space="preserve"
+   id="svg3218"
+   inkscape:version="0.48.5 r10040"
+   sodipodi:docname="plant.svg"><metadata
+     id="metadata3449"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:Work></rdf:RDF></metadata><defs
+     id="defs3447" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1014"
+     id="namedview3445"
+     showgrid="false"
+     inkscape:zoom="14.424978"
+     inkscape:cx="12.32232"
+     inkscape:cy="21.417862"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg3218"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" /><rect
+     style="fill:#00978a;fill-opacity:1"
+     id="rect3244"
+     width="40"
+     height="40"
+     x="0"
+     y="0" /><g
+     id="Background"
+     transform="translate(-156.32787,-82.717)" /><g
+     id="Guides"
+     transform="translate(-156.32787,-82.717)" /><g
+     id="g4118"
+     transform="translate(0.7174706,-3.3302421)"><path
+       d="M 20.098592,20.048364"
+       id="path3387"
+       inkscape:connector-curvature="0"
+       style="fill:#8ed300" /><g
+       transform="matrix(0.34545455,0,0,0.34545455,-53.584359,-0.15136461)"
+       id="g3399"><g
+         id="g3401"><g
+           id="g3403"><path
+             stroke-miterlimit="3.8637"
+             d="m 224.431,97.786 c 0,2.549 -5.695,4.615 -12.72,4.615 -6.749,0 -12.271,-1.907 -12.693,-4.317 -0.207,-0.331 -0.316,-0.674 -0.316,-1.027 0,-0.067 0.004,-0.134 0,-0.2 0,0 -4.964,-32.619 -5.143,-33.792 0.174,1.143 7.998,4.723 18.034,4.723 9.308,0 16.979,-2.28 18.044,-5.22 l -5.207,35.018 c -0.003,0.066 0.001,0.132 0.001,0.2 z"
+             id="path3405"
+             inkscape:connector-curvature="0"
+             style="fill:none;stroke:#ffffff;stroke-width:7.29269981;stroke-miterlimit:3.86369991" /></g></g><g
+         id="g3407"><g
+           id="g3409"><g
+             id="g3411"><ellipse
+               stroke-miterlimit="3.8637"
+               cx="211.60001"
+               cy="61.305"
+               rx="18.57"
+               ry="6.3759999"
+               id="ellipse3413"
+               sodipodi:cx="211.60001"
+               sodipodi:cy="61.305"
+               sodipodi:rx="18.57"
+               sodipodi:ry="6.3759999"
+               style="fill:none;stroke:#ffffff;stroke-width:7.29269981;stroke-miterlimit:3.86369991"
+               d="m 230.17001,61.305 c 0,3.521368 -8.31408,6.376 -18.57,6.376 -10.25593,0 -18.57,-2.854632 -18.57,-6.376 0,-3.521367 8.31407,-6.376 18.57,-6.376 10.25592,0 18.57,2.854633 18.57,6.376 z" /><path
+               stroke-miterlimit="3.8637"
+               d="M 211.599,61.305"
+               id="path3415"
+               inkscape:connector-curvature="0"
+               style="fill:none;stroke:#ffffff;stroke-width:7.29269981;stroke-miterlimit:3.86369991" /></g></g></g></g><path
+       inkscape:connector-curvature="0"
+       id="path4116"
+       d="m 9.982684,24.818001 7.625661,-7.694985 4.367425,0 7.209716,7.902958 8.11093,-0.06932 -0.06932,-10.259981 -31.9584532,-0.06932 0.1386483,10.121332 z"
+       style="fill:#00978a;fill-opacity:1;stroke:none" /><g
+       transform="matrix(0.36363636,0,0,0.36363636,-0.70811367,11.307539)"
+       id="g3236"><path
+         style="fill:none;stroke:#ffffff;stroke-width:5.87346983;stroke-miterlimit:3.86369991"
+         inkscape:connector-curvature="0"
+         id="path3423"
+         d="m 55.897709,24.700295 c -9.76695,-14.5141 -37.314101,-8.63455 -30.638451,17.895152 7.12975,-3.695502 21.356951,-30.740102 30.638451,-17.895152 z"
+         stroke-miterlimit="3.8637"
+         clip-rule="evenodd" /><path
+         style="fill:none;stroke:#ffffff;stroke-width:5.87346983;stroke-miterlimit:3.86369991"
+         inkscape:connector-curvature="0"
+         id="path3429"
+         d="m 55.322959,24.700295 c 9.76695,-14.5141 37.3141,-8.63455 30.63845,17.895152 -7.12975,-3.695502 -21.35695,-30.740102 -30.63845,-17.895152 z"
+         stroke-miterlimit="3.8637"
+         clip-rule="evenodd" /><path
+         clip-rule="evenodd"
+         stroke-miterlimit="3.8637"
+         d="m 58.155859,24.743995 c -7.4119,-15.8469504 11.8161,-36.4287 31.12105,-17.0439504 -6.8419,4.2085004 -37.35305,2.4738004 -31.12105,17.0439504 z"
+         id="path3437"
+         inkscape:connector-curvature="0"
+         style="fill:none;stroke:#ffffff;stroke-width:5.87346983;stroke-miterlimit:3.86369991" /><path
+         clip-rule="evenodd"
+         stroke-miterlimit="3.8637"
+         d="m 53.063859,24.743995 c 7.41285,-15.8469504 -11.8161,-36.4287 -31.120101,-17.0439504 6.8419,4.2085004 37.353051,2.4738004 31.120101,17.0439504 z"
+         id="path3443"
+         inkscape:connector-curvature="0"
+         style="fill:none;stroke:#ffffff;stroke-width:5.87346983;stroke-miterlimit:3.86369991" /></g></g></svg>
\ No newline at end of file
diff --git a/package/usr/share/hedera-web/image/family/3.svg b/package/usr/share/hedera-web/image/family/3.svg
new file mode 100644
index 00000000..a22ccd82
--- /dev/null
+++ b/package/usr/share/hedera-web/image/family/3.svg
@@ -0,0 +1,92 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 13.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 14948)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   x="0px"
+   y="0px"
+   width="40"
+   height="40"
+   viewBox="0 0 40 40"
+   enable-background="new 0 0 444.488 324"
+   xml:space="preserve"
+   id="svg3218"
+   inkscape:version="0.48.5 r10040"
+   sodipodi:docname="complement.svg"><metadata
+     id="metadata3449"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:Work></rdf:RDF></metadata><defs
+     id="defs3447" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1014"
+     id="namedview3445"
+     showgrid="false"
+     inkscape:zoom="14.424978"
+     inkscape:cx="10.143865"
+     inkscape:cy="20.629442"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg3218"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" /><rect
+     style="fill:#f11b65;fill-opacity:1"
+     id="rect3051"
+     width="40"
+     height="40"
+     x="0"
+     y="0" /><g
+     id="Background"
+     transform="translate(-310.0395,-87.5995)" /><g
+     id="Guides"
+     transform="translate(-310.0395,-87.5995)" /><path
+     style="fill:#8ed300"
+     inkscape:connector-curvature="0"
+     id="path3235"
+     d="M 20,20" /><g
+     id="g3241"
+     transform="matrix(0.31177273,0,0,0.31177273,-93.62292,-2.364393)"><g
+       id="g3243"><g
+         id="g3245"><g
+           id="g3247"><g
+             id="g3249"><path
+               d="m 353.482,110.029 c -3.309,-0.788 -6.104,-1.847 -8.321,-3.501 l 0,0 c -1.275,-0.975 -2.49,-2.275 -3.037,-4.089 l 0,0 c -0.431,-0.856 -0.711,-1.86 -0.707,-2.91 l 0,0 c 0,-0.01 0,-0.019 0,-0.028 l 0,0 c -0.286,-1.88 -1.994,-13.104 -3.73,-24.514 l 0,0 c -1.903,-12.506 -3.84,-25.232 -3.975,-26.115 l 0,0 7.21,-1.098 -2.5,0.38 1.832,-1.848 0.012,0.008 c 0.096,0.085 0.473,0.347 1.021,0.642 l 0,0 c 1.103,0.601 2.901,1.375 5.158,2.098 l 0,0 c 4.523,1.456 10.917,2.741 18.039,2.737 l 0,0 c 5.871,0.002 11.283,-0.636 15.498,-1.664 l 0,0 c 4.208,-0.976 7.23,-2.565 8.001,-3.469 l 0,0 c 0.229,-0.237 0.256,-0.325 0.255,-0.326 l 0,0 7.034,1.778 -7.805,52.485 c 0,0.01 0,0.021 0,0.031 l 0,0 c -0.01,2.401 -1.347,4.265 -2.777,5.474 l 0,0 c -1.472,1.25 -3.224,2.132 -5.236,2.87 l 0,0 c -4.018,1.448 -9.138,2.247 -14.793,2.255 l 0,0 c -4.074,-10e-4 -7.876,-0.427 -11.179,-1.196 l 0,0 z m 25.695,-8.928 c 0.545,-0.317 0.856,-0.604 0.993,-0.755 l 0,0 c 0.002,-0.109 0.007,-0.192 0.01,-0.249 l 0,0 0.01,-0.154 6.588,-44.296 c -0.952,0.369 -1.962,0.707 -3.027,1.019 l 0,0 c -5.281,1.535 -11.956,2.413 -19.268,2.417 l 0,0 c -9.17,-0.018 -17.056,-1.833 -22.424,-3.834 l 0,0 c 2.157,14.175 6.609,43.429 6.609,43.429 l 0,0 0.036,0.244 0.004,0.247 c -0.001,0 0.002,0.032 0.002,0.104 l 0,0 0.295,0.47 0.097,0.546 c 0.063,0.079 0.213,0.238 0.467,0.429 l 0,0 c 0.577,0.447 1.68,1.028 3.135,1.521 l 0,0 c 2.921,1.005 7.222,1.7 11.956,1.693 l 0,0 c 6.449,0.041 12.169,-1.366 14.517,-2.831 l 0,0 z"
+               id="path3251"
+               inkscape:connector-curvature="0"
+               style="fill:#ffffff" /></g></g></g><g
+         id="g3253"><g
+           id="g3255"><g
+             id="g3257"><g
+               id="g3259"><path
+                 d="m 347.937,57.362 c -4.81,-1.139 -8.763,-2.654 -11.682,-4.982 l 0,0 c -1.896,-1.522 -3.595,-3.774 -3.611,-6.708 l 0,0 c 0.017,-2.934 1.715,-5.188 3.611,-6.709 l 0,0 c 1.947,-1.567 4.35,-2.727 7.164,-3.701 l 0,0 c 5.617,-1.92 12.936,-3.014 21.021,-3.021 l 0,0 c 6.062,10e-4 11.703,0.627 16.505,1.739 l 0,0 c 4.811,1.141 8.763,2.654 11.682,4.982 l 0,0 c 1.896,1.521 3.595,3.775 3.612,6.709 l 0,0 c -0.018,2.934 -1.717,5.186 -3.612,6.708 l 0,0 c -1.947,1.568 -4.35,2.727 -7.163,3.702 l 0,0 c -5.618,1.919 -12.937,3.013 -21.023,3.02 l 0,0 c -6.061,0 -11.701,-0.625 -16.504,-1.739 l 0,0 z m -6.859,-10.92 c 0.883,0.73 2.577,1.641 4.825,2.404 l 0,0 c 4.508,1.558 11.176,2.614 18.538,2.606 l 0,0 c 6.043,0.002 11.607,-0.699 15.909,-1.82 l 0,0 c 4.301,-1.063 7.318,-2.793 8.017,-3.722 l 0,0 c 0.092,-0.105 0.148,-0.183 0.183,-0.238 l 0,0 c -0.088,-0.141 -0.318,-0.428 -0.743,-0.771 l 0,0 c -0.885,-0.73 -2.578,-1.641 -4.826,-2.405 l 0,0 c -4.507,-1.557 -11.176,-2.613 -18.539,-2.606 l 0,0 c -6.043,-0.002 -11.607,0.699 -15.908,1.82 l 0,0 c -4.301,1.064 -7.318,2.793 -8.017,3.723 l 0,0 c -0.091,0.105 -0.147,0.183 -0.182,0.237 l 0,0 c 0.086,0.143 0.318,0.43 0.743,0.772 l 0,0 z"
+                 id="path3261"
+                 inkscape:connector-curvature="0"
+                 style="fill:#ffffff" /></g><path
+               stroke-miterlimit="3.8637"
+               d="M 364.442,45.673"
+               id="path3263"
+               inkscape:connector-curvature="0"
+               style="fill:none;stroke:#ffffff;stroke-width:7.64940023;stroke-miterlimit:3.86369991" /></g><g
+             id="g3265"><path
+               stroke-miterlimit="3.8637"
+               d="M 364.442,45.673"
+               id="path3267"
+               inkscape:connector-curvature="0"
+               style="fill:none;stroke:#ffffff;stroke-width:0.63739997;stroke-miterlimit:3.86369991" /></g></g></g></g></g></svg>
\ No newline at end of file
diff --git a/package/usr/share/hedera-web/image/family/4.svg b/package/usr/share/hedera-web/image/family/4.svg
new file mode 100644
index 00000000..ec6baec1
--- /dev/null
+++ b/package/usr/share/hedera-web/image/family/4.svg
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 13.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 14948)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   x="0px"
+   y="0px"
+   width="40"
+   height="40"
+   viewBox="0 0 40 40"
+   enable-background="new 0 0 444.488 324"
+   xml:space="preserve"
+   id="svg3218"
+   inkscape:version="0.48.5 r10040"
+   sodipodi:docname="artificial.svg"><metadata
+     id="metadata3449"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:Work></rdf:RDF></metadata><defs
+     id="defs3447" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1014"
+     id="namedview3445"
+     showgrid="false"
+     inkscape:zoom="14.424978"
+     inkscape:cx="17.167381"
+     inkscape:cy="20.043435"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg3218"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" /><rect
+     style="fill:#ff9d02;fill-opacity:1"
+     id="rect3816"
+     width="40"
+     height="40"
+     x="0"
+     y="0" /><g
+     id="Background"
+     transform="translate(-296.818,-250.8545)" /><g
+     id="Guides"
+     transform="translate(-296.818,-250.8545)" /><path
+     d="M 20,20"
+     id="path3361"
+     inkscape:connector-curvature="0"
+     style="fill:#8ed300" /><g
+     id="g3371"
+     transform="matrix(0.34545455,0,0,0.34545455,-101.53644,-61.478218)"><path
+       stroke-miterlimit="3.8637"
+       d="m 345.249,229.289 h 13.131 v 13.131 h -13.131 v -13.131 l 0,0 z m -18.535,6.524 -10.861,-6.292 6.292,-10.861 6.293,-10.862 10.862,6.293 0.02,-12.553 12.553,0.021 12.553,0.021 -0.021,12.552 10.884,-6.254 6.255,10.884 6.254,10.883 -10.883,6.255 10.863,6.286 -6.287,10.863 -6.286,10.862 -10.863,-6.286 -0.025,12.553 -12.552,-0.025 -12.552,-0.025 0.025,-12.552 -10.881,6.261 -6.262,-10.88 -6.261,-10.882 10.88,-6.262 0,0 0,0 0,0 z"
+       id="path3373"
+       inkscape:connector-curvature="0"
+       style="fill:none;stroke:#ffffff;stroke-width:7.29269981;stroke-miterlimit:3.86369991" /></g></svg>
\ No newline at end of file
diff --git a/package/usr/share/hedera-web/image/family/5.svg b/package/usr/share/hedera-web/image/family/5.svg
new file mode 100644
index 00000000..da862519
--- /dev/null
+++ b/package/usr/share/hedera-web/image/family/5.svg
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 13.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 14948)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   x="0px"
+   y="0px"
+   width="40"
+   height="40"
+   viewBox="0 0 40 40"
+   enable-background="new 0 0 444.488 324"
+   xml:space="preserve"
+   id="svg3218"
+   inkscape:version="0.48.5 r10040"
+   sodipodi:docname="green.svg"><metadata
+     id="metadata3449"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:Work></rdf:RDF></metadata><defs
+     id="defs3447" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1014"
+     id="namedview3445"
+     showgrid="false"
+     inkscape:zoom="14.424978"
+     inkscape:cx="10.022038"
+     inkscape:cy="21.035534"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg3218"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" /><rect
+     style="fill:#aeb52b;fill-opacity:1"
+     id="rect3048"
+     width="40"
+     height="40"
+     x="0"
+     y="0" /><g
+     id="Background"
+     transform="translate(-139.618,-259.377)" /><g
+     id="Guides"
+     transform="translate(-139.618,-259.377)" /><path
+     d="M 20,20"
+     id="path3333"
+     inkscape:connector-curvature="0"
+     style="fill:#8ed300" /><g
+     id="g3347"
+     transform="matrix(0.31915838,-0.13219973,0.13219973,0.31915838,-72.345184,-32.032575)"><path
+       stroke-miterlimit="3.8637"
+       d="m 211.609,277.939 c 29.081,-28.019 6.022,-72.357 -52.965,-62.473 22.264,47.39 69.147,29.745 52.965,62.473 z"
+       id="path3349"
+       inkscape:connector-curvature="0"
+       style="fill:none;stroke:#ffffff;stroke-width:7.99989986;stroke-miterlimit:3.86369991" /></g></svg>
\ No newline at end of file
diff --git a/package/usr/share/hedera-web/image/menu.svg b/package/usr/share/hedera-web/image/menu.svg
index a4119cd8..b15f5227 100644
--- a/package/usr/share/hedera-web/image/menu.svg
+++ b/package/usr/share/hedera-web/image/menu.svg
@@ -36,7 +36,7 @@
      bordercolor="#666666"
      borderopacity="1"
      inkscape:current-layer="layer12"
-     inkscape:cx="4.8598245"
+     inkscape:cx="4.8944873"
      inkscape:cy="8.2412188"
      gridtolerance="10"
      inkscape:guide-bbox="true"
@@ -137,7 +137,7 @@
        height="2.0002136"
        id="rect7356"
        inkscape:label="a"
-       style="color:#bebebe;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible"
+       style="color:#bebebe;fill:#666666;fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible"
        width="9.9996014"
        x="64.000397"
        y="951.99982" />
@@ -145,7 +145,7 @@
        height="2.0002136"
        id="rect7358"
        inkscape:label="a"
-       style="color:#bebebe;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible"
+       style="color:#bebebe;fill:#666666;fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible"
        width="9.9996014"
        x="64.000397"
        y="955.99982" />
@@ -153,7 +153,7 @@
        height="2.0002136"
        id="rect7360"
        inkscape:label="a"
-       style="color:#bebebe;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible"
+       style="color:#bebebe;fill:#666666;fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible"
        width="9.9996014"
        x="64.000397"
        y="959.99982" />
diff --git a/package/usr/share/hedera-web/image/search.svg b/package/usr/share/hedera-web/image/search.svg
new file mode 100644
index 00000000..dbfe4fd6
--- /dev/null
+++ b/package/usr/share/hedera-web/image/search.svg
@@ -0,0 +1,130 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="svg7384"
+   sodipodi:docname="show.svg"
+   version="1.1"
+   inkscape:version="0.48.5 r10040"
+   height="16"
+   width="16">
+  <metadata
+     id="metadata90">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>Gnome Symbolic Icon Theme</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     inkscape:cy="8.9536526"
+     pagecolor="#555753"
+     borderopacity="1"
+     showborder="false"
+     inkscape:bbox-paths="false"
+     guidetolerance="10"
+     inkscape:object-paths="true"
+     inkscape:window-width="1296"
+     showguides="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-bbox="true"
+     inkscape:pageshadow="2"
+     inkscape:guide-bbox="true"
+     inkscape:snap-nodes="false"
+     bordercolor="#666666"
+     objecttolerance="10"
+     id="namedview88"
+     showgrid="true"
+     inkscape:window-maximized="0"
+     inkscape:window-x="2192"
+     inkscape:snap-global="true"
+     inkscape:window-y="243"
+     gridtolerance="10"
+     inkscape:window-height="701"
+     inkscape:snap-to-guides="true"
+     inkscape:current-layer="layer12"
+     inkscape:snap-bbox-midpoints="false"
+     inkscape:zoom="16.3125"
+     inkscape:cx="7.1233965"
+     inkscape:snap-grids="true"
+     inkscape:pageopacity="1">
+    <inkscape:grid
+       spacingx="1px"
+       spacingy="1px"
+       id="grid4866"
+       empspacing="2"
+       enabled="true"
+       type="xygrid"
+       snapvisiblegridlinesonly="true"
+       visible="true" />
+  </sodipodi:namedview>
+  <title
+     id="title9167">Gnome Symbolic Icon Theme</title>
+  <defs
+     id="defs7386" />
+  <g
+     inkscape:label="status"
+     transform="translate(-140.0002,-645.96875)"
+     inkscape:groupmode="layer"
+     id="layer9"
+     style="display:inline" />
+  <g
+     inkscape:label="devices"
+     transform="translate(-140.0002,-645.96875)"
+     inkscape:groupmode="layer"
+     id="layer10" />
+  <g
+     inkscape:label="apps"
+     transform="translate(-140.0002,-645.96875)"
+     inkscape:groupmode="layer"
+     id="layer11" />
+  <g
+     inkscape:label="actions"
+     transform="translate(-140.0002,-645.96875)"
+     inkscape:groupmode="layer"
+     id="layer12">
+    <path
+       inkscape:connector-curvature="0"
+       d="m 146.50761,646.99554 c -3.02886,0 -5.51073,2.47905 -5.51073,5.50447 0,3.02541 2.48187,5.50446 5.51073,5.50446 3.02885,0 5.51072,-2.47905 5.51072,-5.50446 0,-3.02542 -2.48187,-5.50447 -5.51072,-5.50447 z m 0,2.00893 c 1.94735,0 3.49951,1.55039 3.49951,3.49554 0,1.94514 -1.55216,3.49553 -3.49951,3.49553 -1.94736,0 -3.49952,-1.55039 -3.49952,-3.49553 0,-1.94515 1.55216,-3.49554 3.49952,-3.49554 z"
+       id="path27918"
+       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#666666;fill-opacity:1;stroke:none;stroke-width:1.55467153000000002;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new;font-family:Sans;-inkscape-font-specification:Sans" />
+    <path
+       inkscape:connector-curvature="0"
+       d="m 149.8125,655 a 1.0001,1.0001 0 0 0 -0.5,1.71875 l 4,4 a 1.0054782,1.0054782 0 1 0 1.40625,-1.4375 l -4,-4 A 1.0001,1.0001 0 0 0 149.8125,655 z"
+       id="path27941"
+       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#666666;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new;font-family:Sans;-inkscape-font-specification:Sans" />
+  </g>
+  <g
+     inkscape:label="places"
+     transform="translate(-140.0002,-645.96875)"
+     inkscape:groupmode="layer"
+     id="layer13" />
+  <g
+     inkscape:label="mimetypes"
+     transform="translate(-140.0002,-645.96875)"
+     inkscape:groupmode="layer"
+     id="layer14" />
+  <g
+     inkscape:label="emblems"
+     transform="translate(-140.0002,-645.96875)"
+     inkscape:groupmode="layer"
+     id="layer15"
+     style="display:inline" />
+  <g
+     inkscape:label="categories"
+     transform="translate(-140.0002,-645.96875)"
+     inkscape:groupmode="layer"
+     id="g4953"
+     style="display:inline" />
+</svg>
diff --git a/package/usr/share/hedera-web/js/db/conn.js b/package/usr/share/hedera-web/js/db/conn.js
index dce79b8c..f8ad1dde 100755
--- a/package/usr/share/hedera-web/js/db/conn.js
+++ b/package/usr/share/hedera-web/js/db/conn.js
@@ -15,9 +15,12 @@ Db.Conn = new Class ().extend
 	
 	,Type:
 	{
-		 TIMESTAMP : 7
-		,DATE      : 10
-		,DATE_TIME : 12
+		 BOOLEAN   : 1
+		,INTEGER   : 2
+		,DOUBLE    : 3
+		,STRING    : 4
+		,DATE      : 8
+		,DATE_TIME : 9
 	}
 });
 
diff --git a/package/usr/share/hedera-web/js/db/model.js b/package/usr/share/hedera-web/js/db/model.js
index fbed527b..2b6e8891 100755
--- a/package/usr/share/hedera-web/js/db/model.js
+++ b/package/usr/share/hedera-web/js/db/model.js
@@ -180,11 +180,14 @@ Db.Model.implement
 	,defaults: []
 	,columnDefaults: []
 	,sortColumn: -1
+	,requestedIndexes: {}
+	,indexes: []
 
 	,initialize: function (props)
 	{
 		this.parent (props);
-		this.cleanData (false);
+		this.cleanData ();
+		this.setStatus (Db.Model.Status.CLEAN);
 	}
 
 	,loadXml: function (builder, node)
@@ -209,19 +212,19 @@ Db.Model.implement
 			this._conn.execStmt (this._stmt, this.selectDone.bind (this), this._batch);
 		}
 		else
-			this.cleanData (false);
+		{
+			this.cleanData ();
+			this.setStatus (Db.Model.Status.CLEAN);
+		}
 	}
 	
+	
 	,cleanData: function (error)
 	{
 		this.data = null;
 		this.columns = null;
 		this.columnMap = null;
-
-		if (error)
-			this.setStatus (Db.Model.Status.ERROR);
-		else
-			this.setStatus (Db.Model.Status.CLEAN);
+		this.indexes = [];
 	}
 	
 	,refreshUpdatable: function ()
@@ -533,6 +536,47 @@ Db.Model.implement
 		this.setStatus (Db.Model.Status.READY);
 	}
 
+	/**
+	 * Builds an internal hash index for the specified column, this speeds
+	 * significantly searches on that column.
+	 * Not implemented yet.
+	 *
+	 * @param {String} column The column name
+	 **/
+	,indexColumn: function (column)
+	{
+		this.requestedIndexes[column] = true;
+
+		if (this._status == Db.Model.Status.READY)
+			this.buildIndex (column);
+	}
+
+	,buildIndex: function (column)
+	{
+		var columnIndex = this.getColumnIndex (column);
+
+		if (columnIndex != -1)
+		{
+			var index = {};
+			var data = this.data;
+
+			switch (this.columns[columnIndex].type)
+			{
+				case Db.Conn.Type.TIMESTAMP:
+				case Db.Conn.Type.DATE_TIME:
+				case Db.Conn.Type.DATE:
+					for (var i = 0; i < data.length; i++)
+						index[data[i][columnIndex].toString ()] = i;
+					break;
+				default:
+					for (var i = 0; i < data.length; i++)
+						index[data[i][columnIndex]] = i;
+			}
+
+			this.indexes[columnIndex] = index;
+		}
+	}
+
 	/**
 	 * Searchs a value on the model and returns the row index of the first
 	 * ocurrence.
@@ -559,6 +603,32 @@ Db.Model.implement
 	{
 		if (!this.checkColExists (col))
 			return -1;
+		
+		if (value)
+		switch (this.columns[col].type)
+		{
+			case Db.Conn.Type.BOOLEAN:
+				value = !!value;
+				break;
+			case Db.Conn.Type.INTEGER:
+				value = parseInt (value);
+				break;
+			case Db.Conn.Type.DOUBLE:
+				value = parseFloat (value);
+				break;
+			default:
+				value = value.toString ();
+		}
+		
+		var index = this.indexes[col];
+		
+		if (index)
+		{
+			if (index[value])
+				return index[value];
+				
+			return -1;
+		}
 
 		var data = this.data;
 	
@@ -568,8 +638,6 @@ Db.Model.implement
 			case Db.Conn.Type.DATE_TIME:
 			case Db.Conn.Type.DATE:
 			{
-				value = value.toString ();
-				
 				for (var i = 0; i < data.length; i++)
 				if (value === data[i][col].toString ());
 					return i;
@@ -696,6 +764,8 @@ Db.Model.implement
 	{
 		var result;
 		var dataResult;
+		
+		this.cleanData ();
 
 		for (var i = 0; result = resultSet.fetchResult (); i++)
 			if (i == this._resultIndex)
@@ -709,10 +779,14 @@ Db.Model.implement
 			this.columnMap = dataResult.columnMap;
 			this.repairColumns (this.columns);
 			this.refreshMainTable ();
+			
+			for (column in this.requestedIndexes)
+				this.buildIndex (column);
+			
 			this.setStatus (Db.Model.Status.READY);
 		}
 		else
-			this.cleanData (true);
+			this.setStatus (Db.Model.Status.ERROR);
 	}
 
 	,updateDone: function (updateData, resultSet)
diff --git a/package/usr/share/hedera-web/js/htk/field/date-chooser.js b/package/usr/share/hedera-web/js/htk/field/date-chooser.js
index 1ce4d2db..af878f41 100755
--- a/package/usr/share/hedera-web/js/htk/field/date-chooser.js
+++ b/package/usr/share/hedera-web/js/htk/field/date-chooser.js
@@ -14,7 +14,7 @@ Htk.DateChooser = new Class
 		this.createElement ('div');
 		this.node.className = 'date-chooser';
 		
-		this.label = document.createElement ('label');
+		this.label = document.createElement ('span');
 		this.node.appendChild (this.label);
 
 		this.setEditable (this._editable);
@@ -36,15 +36,13 @@ Htk.DateChooser = new Class
 	{
 		if (editable && !this.calendar)
 		{
+			Vn.Node.remove (this.label);
+
 			this.button = document.createElement ('button');
 			this.button.title = _('ChangeDate');
 			this.button.addEventListener ('click', this.showCalendar.bind (this));
-			this.node.insertBefore (this.button, this.label);
-		
-			var img = document.createElement ('img');
-			img.alt = _('ChangeDate');
-			img.src = 'image/calendar.png';
-			this.button.appendChild (img);
+			this.button.appendChild (this.label);
+			this.node.appendChild (this.button);
 		
 			var calendar = new Htk.Calendar ();
 			calendar.on ('changed', this.calendarChanged.bind (this));
@@ -52,6 +50,8 @@ Htk.DateChooser = new Class
 		}
 		else if (!editable)
 		{
+			Vn.Node.remove (this.label);
+			this.node.appendChild (this.label);
 			this.calendar = null;
 			this.node.removeChild (this.button);
 		}
diff --git a/package/usr/share/hedera-web/js/htk/field/full-image.js b/package/usr/share/hedera-web/js/htk/field/full-image.js
index 671fee53..098db3e8 100755
--- a/package/usr/share/hedera-web/js/htk/field/full-image.js
+++ b/package/usr/share/hedera-web/js/htk/field/full-image.js
@@ -8,6 +8,7 @@ Htk.FullImage = new Class
 	,loading: false
 	,visible: false
 	,hideCalled: false
+	,closed: false
 
 	,initialize: function (props)
 	{
@@ -42,13 +43,21 @@ Htk.FullImage = new Class
 	}
 	
 	,show: function (basedir, file)
-	{		
+	{
+		var src = basedir +'/full/'+ file;
+		
+		if (this.closed && this.src == src)
+			return;
+	
 		this.cancelHide ();
 		this.loadingBox.style.left = this.getLeft (40);
 		this.loadingBox.style.top = this.getTop (40);
 
+		this.closed = false;
+		this.src = src
+
 		this.img = document.createElement ('img');
-		this.img.src = basedir +'/full/'+ file;
+		this.img.src = src;
 		this.img.addEventListener ('load', this.imageLoaded.bind (this, this.img));
 		this.img.addEventListener ('error', this.hideLoading.bind (this));
 
@@ -99,6 +108,8 @@ Htk.FullImage = new Class
 			this.div.replaceChild (img, this.div.firstChild);
 		else
 			this.div.appendChild (img);
+			
+		img.addEventListener ('click', this.onImageClick.bind (this));
 
 		if (!this.visible)
 		{
@@ -109,6 +120,11 @@ Htk.FullImage = new Class
 			document.addEventListener ('click', this.onDocumentClickCallback);
 		}
 	}
+	
+	,onImageClick: function ()
+	{
+		this.closed = true;
+	}
 
 	,hide: function ()
 	{
diff --git a/package/usr/share/hedera-web/js/htk/popup.js b/package/usr/share/hedera-web/js/htk/popup.js
index d0c18039..9843a8ea 100755
--- a/package/usr/share/hedera-web/js/htk/popup.js
+++ b/package/usr/share/hedera-web/js/htk/popup.js
@@ -23,12 +23,17 @@ Htk.Popup = new Class
 		if (left + width > getInnerWidth ())
 			left -= width - parent.offsetWidth;
 		if (top + height > getInnerHeight ())
-			top -= height + parent.offsetHeight + spacing * 2;	
+			top -= height + parent.offsetHeight + spacing * 2;
+
+		if (left < 0)
+			left = 0;
+		if (top < 0)
+			top = 0;	
 		
 		this.node.style.top = (top) + 'px';
 		this.node.style.left = (left) + 'px';
 		this.node.style.position = 'fixed';
-		this.node.style.zIndex = 4;
+		this.node.style.zIndex = 100;
 	}
 
 	,hidePopup: function ()
diff --git a/package/usr/share/hedera-web/js/sql/batch.js b/package/usr/share/hedera-web/js/sql/batch.js
index 3ce154e1..af7932da 100755
--- a/package/usr/share/hedera-web/js/sql/batch.js
+++ b/package/usr/share/hedera-web/js/sql/batch.js
@@ -7,6 +7,7 @@ Sql.Batch = new Class
 	,Tag: 'sql-batch'
 
 	,params: {}
+	,blocked: false
 
 	,loadXml: function (builder, node)
 	{
@@ -48,7 +49,7 @@ Sql.Batch = new Class
 	{
 		if (this.params[id])
 		{
-			this.params[id].disconnect ('changed', this.onObjectChange, this);
+			this.params[id].disconnect ('changed', this.changed, this);
 			delete this.params[id];
 		}
 	}
@@ -57,8 +58,8 @@ Sql.Batch = new Class
 	{
 		this.remove (id);
 		this.params[id] = object;
-		object.on ('changed', this.onObjectChange, this);
-		this.onObjectChange ();
+		object.on ('changed', this.changed, this);
+		this.changed ();
 	}
 
 	,addValue: function (id, value)
@@ -73,9 +74,20 @@ Sql.Batch = new Class
 			new Sql.Value ({param: param}));
 	}
 
-	,onObjectChange: function ()
+	,block: function ()
 	{
-		this.signalEmit ('changed');
+		this.blocked = true;
+	}
+
+	,unblock: function ()
+	{
+		this.blocked = false;
+	}
+
+	,changed: function ()
+	{
+		if (!this.blocked)
+			this.signalEmit ('changed');
 	}
 
 	,isReady: function ()
diff --git a/package/usr/share/hedera-web/js/vn/main.js b/package/usr/share/hedera-web/js/vn/main.js
index 759f40b9..feb6fe04 100755
--- a/package/usr/share/hedera-web/js/vn/main.js
+++ b/package/usr/share/hedera-web/js/vn/main.js
@@ -36,7 +36,7 @@ var Vn =
 		}
 		else if (!cssData.included)
 		{
-			this.head.appendChild (cssData.link);
+			cssData.link.disabled = false;
 			cssData.included = true;
 		}
 	}
@@ -52,7 +52,7 @@ var Vn =
 	
 		if (cssData && cssData.included)
 		{
-			this.head.removeChild (cssData.link);
+			cssData.link.disabled = true;
 			cssData.included = false;
 		}		
 	}
@@ -125,6 +125,11 @@ var Vn =
 		includeData.callbacks = null;
 	}
 
+	/**
+	 * Checks if user is using a mobile browser.
+	 *
+	 * return {boolean} %true if is mobile, %false otherwise.
+	 **/
 	,isMobile: function ()
 	{
 		if (this.isMobileCached === null)
diff --git a/package/usr/share/hedera-web/locale/ca/forms/admin/links.json b/package/usr/share/hedera-web/locale/ca/forms/admin/links.json
index 251fbba7..b5e398ab 100755
--- a/package/usr/share/hedera-web/locale/ca/forms/admin/links.json
+++ b/package/usr/share/hedera-web/locale/ca/forms/admin/links.json
@@ -1,4 +1,6 @@
 {
-	 "Module": "Mòdul"
+	 "ControlPanel": "Panell de control"
+
+	,"Module": "Mòdul"
 	,"Description": "Descripció"
 }
diff --git a/package/usr/share/hedera-web/locale/ca/forms/cms/training.json b/package/usr/share/hedera-web/locale/ca/forms/cms/training.json
new file mode 100755
index 00000000..1e3bbeb4
--- /dev/null
+++ b/package/usr/share/hedera-web/locale/ca/forms/cms/training.json
@@ -0,0 +1,4 @@
+{
+	 "Author": "Autor"
+}
+
diff --git a/package/usr/share/hedera-web/locale/ca/forms/ecomerce/basket.json b/package/usr/share/hedera-web/locale/ca/forms/ecomerce/basket.json
index bd35a57f..d2f2cb64 100755
--- a/package/usr/share/hedera-web/locale/ca/forms/ecomerce/basket.json
+++ b/package/usr/share/hedera-web/locale/ca/forms/ecomerce/basket.json
@@ -2,7 +2,7 @@
 	 "ShoppingBasket": "Cistella de la compra"
 
 	,"Delete": "Borrar encàrrec"
-	,"GoToCatalog": "Accedir al catàleg"
+	,"GoToCatalog": "Anar al catàleg"
 	,"Checkout": "Tramitar encàrrec"
 
 	,"OrderNumber:": "N encàrec:"
diff --git a/package/usr/share/hedera-web/locale/ca/forms/ecomerce/catalog.json b/package/usr/share/hedera-web/locale/ca/forms/ecomerce/catalog.json
index a3bd434b..1e275c14 100755
--- a/package/usr/share/hedera-web/locale/ca/forms/ecomerce/catalog.json
+++ b/package/usr/share/hedera-web/locale/ca/forms/ecomerce/catalog.json
@@ -1,11 +1,14 @@
 {
-	 "SelectFamily": "Seleccione família"
+	 "Catalog": "Catàleg"
+	,"SearchResults": "Resultats de cerca"
+
+	,"SelectFamily": "Seleccione família"
 	,"SelectSubtype": "Per favor, seleccione el subtipus al menú de la dreta"
 	,"ArticleNotFound": "Artcle no trobat"
 	,"ArticleNotAvailable": "Article no disponible"
 
 	,"StartOrder": "Començar encàrrec"
-	,"ShoppingBasket": "Veure la cistella de la compra"
+	,"ShoppingBasket": "Cistella de la compra"
 	
 	,"Realm": "Família"
 	,"Subtype": "Subtipus"
diff --git a/package/usr/share/hedera-web/locale/ca/forms/ecomerce/orders.json b/package/usr/share/hedera-web/locale/ca/forms/ecomerce/orders.json
index 36c949a6..f62bf3f9 100755
--- a/package/usr/share/hedera-web/locale/ca/forms/ecomerce/orders.json
+++ b/package/usr/share/hedera-web/locale/ca/forms/ecomerce/orders.json
@@ -1,6 +1,6 @@
 {
 	 "StartedOrdersDesc":
-		 "Encarrecs pendents de confirmació."
+		 "Encarrecs pendents de confirmació"
 
 	,"StartOrder": "Començar encàrrec"
 	,"ContinueOrder": "Continuar encàrrec"
@@ -10,7 +10,7 @@
 	,"SendMethod": "Forma d'enviament"
 
 	,"ConfirmedOrdersDesc":
-		"Encarrecs confirmats més recents."
+		"Encarrecs confirmats més recents"
 
 	,"PendingBalance:": "Saldo pendent:"
 	,"PaymentInfo": "Per realitzar una entrega a compte feu clic al botó de la dreta i feu el pagament a l'empresa corresponent. La quantitat que apareix és el saldo pendent a dia d'avui, no té en compte comandes del futur. Pot realitzar un lliurament a compte de la quantitat que desitgi. Si voleu pagar una comanda en concret pot prémer directament el botó de pagament de la comanda."
diff --git a/package/usr/share/hedera-web/locale/ca/js/vn.js b/package/usr/share/hedera-web/locale/ca/js/vn.js
index 6d905c6a..432382cc 100755
--- a/package/usr/share/hedera-web/locale/ca/js/vn.js
+++ b/package/usr/share/hedera-web/locale/ca/js/vn.js
@@ -59,6 +59,7 @@ Vn.Locale.add
 	,"Home": "Inici"
 	,"Orders": "Encàrrecs"
 	,"Catalog": "Catàleg"
+	,"Training": "Formació"
 	,"Configuration": "Configuració"
 	,"About": "Coneix-nos"
 	,"Why": "Per què?"
diff --git a/package/usr/share/hedera-web/locale/es/forms/admin/links.json b/package/usr/share/hedera-web/locale/es/forms/admin/links.json
index 8ca8aea0..6ce5e497 100755
--- a/package/usr/share/hedera-web/locale/es/forms/admin/links.json
+++ b/package/usr/share/hedera-web/locale/es/forms/admin/links.json
@@ -1,4 +1,6 @@
 {
-	 "Module": "Módulo"
+	 "ControlPanel": "Panel de control"
+
+	,"Module": "Módulo"
 	,"Description": "Descripción"
 }
diff --git a/package/usr/share/hedera-web/locale/es/forms/cms/training.json b/package/usr/share/hedera-web/locale/es/forms/cms/training.json
new file mode 100755
index 00000000..1e3bbeb4
--- /dev/null
+++ b/package/usr/share/hedera-web/locale/es/forms/cms/training.json
@@ -0,0 +1,4 @@
+{
+	 "Author": "Autor"
+}
+
diff --git a/package/usr/share/hedera-web/locale/es/forms/ecomerce/basket.json b/package/usr/share/hedera-web/locale/es/forms/ecomerce/basket.json
index 9e264198..3b8d5ff1 100755
--- a/package/usr/share/hedera-web/locale/es/forms/ecomerce/basket.json
+++ b/package/usr/share/hedera-web/locale/es/forms/ecomerce/basket.json
@@ -2,7 +2,7 @@
 	 "ShoppingBasket": "Cesta de la compra"
 
 	,"Delete": "Borrar pedido"
-	,"GoToCatalog": "Acceder al catálogo"
+	,"GoToCatalog": "Ir al catálogo"
 	,"Checkout": "Tramitar pedido"
 
 	,"OrderNumber:": "Nº pedido:"
diff --git a/package/usr/share/hedera-web/locale/es/forms/ecomerce/catalog.json b/package/usr/share/hedera-web/locale/es/forms/ecomerce/catalog.json
index 1c2b11e6..215cb596 100755
--- a/package/usr/share/hedera-web/locale/es/forms/ecomerce/catalog.json
+++ b/package/usr/share/hedera-web/locale/es/forms/ecomerce/catalog.json
@@ -1,11 +1,14 @@
 {
-	 "SelectFamily": "Seleccione familia"
+	 "Catalog": "Catálogo"
+	,"SearchResults": "Resultados de búsqueda"
+
+	,"SelectFamily": "Seleccione familia"
 	,"SelectSubtype": "Por favor, seleccione el subtipo en el menú de la derecha"
 	,"ArticleNotFound": "Artículo no encontrado"
 	,"ArticleNotAvailable": "Artículo no disponible"
 
 	,"StartOrder": "Empezar pedido"
-	,"ShoppingBasket": "Ver cesta de la compra"
+	,"ShoppingBasket": "Cesta de la compra"
 	
 	,"Realm": "Familia"
 	,"Subtype": "Subtipo"
diff --git a/package/usr/share/hedera-web/locale/es/forms/ecomerce/orders.json b/package/usr/share/hedera-web/locale/es/forms/ecomerce/orders.json
index 678de8b4..e933a81a 100755
--- a/package/usr/share/hedera-web/locale/es/forms/ecomerce/orders.json
+++ b/package/usr/share/hedera-web/locale/es/forms/ecomerce/orders.json
@@ -1,6 +1,6 @@
 {
 	 "StartedOrdersDesc":
-		 "Pedidos pendientes de confirmar."
+		 "Pedidos pendientes de confirmar"
 
 	,"StartOrder": "Empezar pedido"
 	,"ContinueOrder": "Continuar pedido"
@@ -10,7 +10,7 @@
 	,"SendMethod": "Forma de envío"
 
 	,"ConfirmedOrdersDesc":
-		"Pedidos confirmados más recientes."
+		"Pedidos confirmados más recientes"
 
 	,"PendingBalance:": "Saldo pendiente:"
 	,"PaymentInfo": "Para realizar una entrega a cuenta pulse en el botón de la derecha y haga el pago en la empresa correspondiente. La cantidad que aparece es el saldo pendiente a día de hoy, no tiene en cuenta pedidos del futuro. Puede realizar una entrega a cuenta de la cantidad que desee. Si desea pagar un pedido en concreto puede pulsar directamente en el botón de pago del pedido."
diff --git a/package/usr/share/hedera-web/locale/es/js/vn.js b/package/usr/share/hedera-web/locale/es/js/vn.js
index 45783efc..50c36d99 100755
--- a/package/usr/share/hedera-web/locale/es/js/vn.js
+++ b/package/usr/share/hedera-web/locale/es/js/vn.js
@@ -59,6 +59,7 @@ Vn.Locale.add
 	,"Home": "Inicio"
 	,"Orders": "Pedidos"
 	,"Catalog": "Catálogo"
+	,"Training": "Formación"
 	,"Configuration": "Configuración"
 	,"About": "Conócenos"
 	,"Why": "¿Por qué?"
diff --git a/package/usr/share/hedera-web/locale/fr/forms/admin/links.json b/package/usr/share/hedera-web/locale/fr/forms/admin/links.json
index f5ad68a7..c2f13c02 100755
--- a/package/usr/share/hedera-web/locale/fr/forms/admin/links.json
+++ b/package/usr/share/hedera-web/locale/fr/forms/admin/links.json
@@ -1,4 +1,6 @@
 {
-	 "Module": "Module"
+	 "ControlPanel": "Panneau de commande"
+
+	,"Module": "Module"
 	,"Description": "Description"
 }
diff --git a/package/usr/share/hedera-web/locale/fr/forms/cms/training.json b/package/usr/share/hedera-web/locale/fr/forms/cms/training.json
new file mode 100755
index 00000000..98a1f4e2
--- /dev/null
+++ b/package/usr/share/hedera-web/locale/fr/forms/cms/training.json
@@ -0,0 +1,3 @@
+{
+	 "Author": "Autor"
+}
diff --git a/package/usr/share/hedera-web/locale/fr/forms/ecomerce/basket.json b/package/usr/share/hedera-web/locale/fr/forms/ecomerce/basket.json
index 9059beb9..3f899672 100755
--- a/package/usr/share/hedera-web/locale/fr/forms/ecomerce/basket.json
+++ b/package/usr/share/hedera-web/locale/fr/forms/ecomerce/basket.json
@@ -2,7 +2,7 @@
 	 "ShoppingBasket": "Panier"
 
 	,"Delete": "Effacer"
-	,"GoToCatalog": "Accédez au catalogue"
+	,"GoToCatalog": "Aller au catalogue"
 	,"Checkout": "Caisse"
 
 	,"OrderNumber:": "Numéro de commande:"
diff --git a/package/usr/share/hedera-web/locale/fr/forms/ecomerce/catalog.json b/package/usr/share/hedera-web/locale/fr/forms/ecomerce/catalog.json
index 1a5ce54d..0dd30442 100755
--- a/package/usr/share/hedera-web/locale/fr/forms/ecomerce/catalog.json
+++ b/package/usr/share/hedera-web/locale/fr/forms/ecomerce/catalog.json
@@ -1,11 +1,14 @@
 {
-	 "SelectFamily": "Choisissez la famille"
+	 "Catalog": "Catalogue"
+	,"SearchResults": "Résultats de la recherche"
+
+	,"SelectFamily": "Choisissez la famille"
 	,"SelectSubtype": "S'il vous plaît sélectionnez le sous-menu sur la droite"
 	,"ArticleNotFound": "Article pas trouvé"
 	,"ArticleNotAvailable": "Article pas disponible"
 	
 	,"StartOrder": "Acheter"
-	,"ShoppingBasket": "Voir mon panier"
+	,"ShoppingBasket": "Mon panier"
 	
 	,"Realm": "Famille"
 	,"Subtype": "Sous-genre"
diff --git a/package/usr/share/hedera-web/locale/fr/forms/ecomerce/orders.json b/package/usr/share/hedera-web/locale/fr/forms/ecomerce/orders.json
index 5cc57b86..ecb8488f 100755
--- a/package/usr/share/hedera-web/locale/fr/forms/ecomerce/orders.json
+++ b/package/usr/share/hedera-web/locale/fr/forms/ecomerce/orders.json
@@ -1,6 +1,6 @@
 {
 	 "StartedOrdersDesc":
-		 "Commandes en cours de confirmation."
+		 "Commandes en cours de confirmation"
 
 	,"StartOrder": "Acheter"
 	,"ContinueOrder": "Continuer la commande"
@@ -10,7 +10,7 @@
 	,"SendMethod": "Typo"
 
 	,"ConfirmedOrdersDesc":
-		"Commandes confirmées."
+		"Commandes confirmées"
 
 	,"PendingBalance:": "Balance:"
 	,"PaymentInfo": "Pour effectuer un paiement vers le bas, cliquez sur le bouton à droite et effectuer le paiement par la société. Le montant indiqué est le solde aujourd'hui, ne prend pas en compte les commandes futures. Vous pouvez faire un acompte sur le montant que vous voulez. Si vous voulez payer un ordre spécifique, vous pouvez cliquer directement sur le bouton de paiement Ordre."
diff --git a/package/usr/share/hedera-web/locale/fr/js/vn.js b/package/usr/share/hedera-web/locale/fr/js/vn.js
index d54c22f3..0e704ede 100755
--- a/package/usr/share/hedera-web/locale/fr/js/vn.js
+++ b/package/usr/share/hedera-web/locale/fr/js/vn.js
@@ -59,6 +59,7 @@ Vn.Locale.add
 	,"Home": "Accueil"
 	,"Orders": "Commandes"
 	,"Catalog": "Catalogue"
+	,"Training": "Formation"
 	,"Configuration": "Configuration"
 	,"About": "Nous"
 	,"Why": "Pourquoi?"
diff --git a/package/usr/share/hedera-web/pages/login/html.php b/package/usr/share/hedera-web/pages/login/html.php
index 2a5e399b..d15dd3d8 100755
--- a/package/usr/share/hedera-web/pages/login/html.php
+++ b/package/usr/share/hedera-web/pages/login/html.php
@@ -16,7 +16,7 @@
 	<?php include ('global/analytics.php') ?>
 	<div id="header">
 		<div>
-		<a href="?page=web&amp;guest#!module=about"><?=s('IWantToKnowMore')?></a>
+		<a href="?page=web&amp;guest=true#!form=cms/about"><?=s('IWantToKnowMore')?></a>
 		</div>
 	</div>
 	<div id="body">
diff --git a/package/usr/share/hedera-web/pages/login/style.css b/package/usr/share/hedera-web/pages/login/style.css
index 0368377b..209ace15 100755
--- a/package/usr/share/hedera-web/pages/login/style.css
+++ b/package/usr/share/hedera-web/pages/login/style.css
@@ -113,8 +113,7 @@ input[type=password]
 {
 	margin: 0.5em 0;
 	margin-bottom: 0.5em;
-	padding: 0.6em;
-	height: 1em;
+	padding: 0.5em;
 	width: 100%;
 	border: 1px solid #AAA;
 }
diff --git a/package/usr/share/hedera-web/pages/web/html.php b/package/usr/share/hedera-web/pages/web/html.php
index 80dfa6b2..020281fd 100755
--- a/package/usr/share/hedera-web/pages/web/html.php
+++ b/package/usr/share/hedera-web/pages/web/html.php
@@ -17,12 +17,12 @@
 	<div id="header">
 		<div id="header-bar">
 			<button id="menu-button">
-				<img src="image/menu.svg" alt=""/>
+				<img src="image/dark/menu.svg" alt=""/>
 			</button>
 			<a id="exit" href="?page=login&amp;logout">
 				<span id="exit-text"><?=s('Exit')?></span>
 			</a>
-			<img id="logo" src="image/logo-white.svg" alt="Verdnatura"/>
+			<img id="logo" src="image/dark/logo.svg" alt="Verdnatura"/>
 			<img id="loader" src="image/loader.gif" alt="Loading"/>
 			<div id="welcome">
 				<?=s('Welcome')?><span id="user-name"></span>
@@ -31,7 +31,7 @@
 	</div>
 	<div id="body">
 	<div id="content">
-	<div id="menu-box">
+		<div id="menu-box">
 			<ul id="menu"></ul>
 			<div id="links">
 				<a target="_blank" href="http://verdnaturacomunicacion.blogspot.com.es/">
@@ -48,7 +48,7 @@
 				</a>
 			</div>
 		</div>
-		<div id="menu-background">
+		<div id="background">
 		</div>
 		<div id="form">
 		</div>
diff --git a/package/usr/share/hedera-web/pages/web/style.css b/package/usr/share/hedera-web/pages/web/style.css
index db3fbb55..2259e4ba 100755
--- a/package/usr/share/hedera-web/pages/web/style.css
+++ b/package/usr/share/hedera-web/pages/web/style.css
@@ -135,7 +135,7 @@ body
 {
 	height: 2em;
 }
-#menu-background
+#background
 {
 	z-index: 10;
 	position: absolute;
@@ -147,7 +147,8 @@ body
 	display: none;
 }
 #menu-box,
-#menu > li
+#menu > li,
+ul.submenu
 {
 	width: 15em;
 }
@@ -195,6 +196,10 @@ body
 {
 	background-color: #DDD /* #AC6 */;
 }
+#menu a.selected
+{
+	background-color: #EEE;
+}
 ul.submenu
 {
 	display: none;
@@ -203,20 +208,15 @@ ul.submenu
 	border-radius: 1px;
 	background-color: white;
 	box-shadow: 0 0.2em 0.2em #CCC;
-	z-index: 10;
+	z-index: 50;
 	list-style-type: none;
 	padding-left: 0;
-	width: 14em;
 }
 ul.submenu a
 {
 	width: 60%;
 	padding: 0.7em 20%;
 }
-#menu li.selected
-{
-	background-color: #EEE;
-}
 
 /* Links */
 
@@ -232,6 +232,7 @@ ul.submenu a
 	padding: 0.1em;
 	display: block;
 	float: left;
+	max-width: 2.2em;
 }
 #links img
 {
@@ -250,10 +251,20 @@ ul.submenu a
 	overflow: auto;
 }
 
-@media screen and (max-device-width: 1100px) and (min-resolution: 100dpi)
+@media screen and (min-resolution: 100dpi)
 {
 	#menu-button { display: block; }	
 	#menu-box { display: none; }
 	#form { left: 0; }
+
+	ul.submenu
+	{
+		display: block;
+		position: relative;
+		border: none;
+		border-radius: 0;
+		background-color: white;
+		box-shadow: none;
+	}
 }
 
diff --git a/package/usr/share/hedera-web/pages/web/web.js b/package/usr/share/hedera-web/pages/web/web.js
index dfd56cbe..6e7446ec 100755
--- a/package/usr/share/hedera-web/pages/web/web.js
+++ b/package/usr/share/hedera-web/pages/web/web.js
@@ -6,7 +6,7 @@ Vn.Web =
 {
 	 forms: {}
 	,activeForm: null
-	,activeFormPath: null
+	,activeCss: null
 	,requestedForm: null
 	,menuShown: false
 	,menuOptions: {}
@@ -15,9 +15,9 @@ Vn.Web =
 	,initialize: function ()
 	{
 		this.loadingCount = 0;
-		this.loader = Vn.get ('loader');
+		this.loader = $('loader');
 
-		this.formHolder = Vn.get ('form');
+		this.formHolder = $('form');
 
 		this.hash = new Vn.Hash ();
 		this.hashLink = new Vn.HashLink
@@ -32,32 +32,36 @@ Vn.Web =
 		this.conn.on ('loading-changed', this.onConnLoading, this);
 		this.conn.open (null, null, null, this.connOpened.bind (this));
 
-		var menuButton = Vn.get ('menu-button');
-		menuButton.addEventListener ('click', this.onMenuClick.bind (this));
+		$('menu-button').addEventListener ('click', function (event)
+		{
+			event.stopPropagation ();
 
-		var menuBox = Vn.get ('menu-box');
-		menuBox.addEventListener ('click', function (event)
+			if (!this.menuShown)
+				this.showMenu ();
+			else
+				this.hideMenu ();
+		}.bind (this));
+
+		$('menu-box').addEventListener ('click', function (event)
 		{
 			event.stopPropagation ();
 		});
 	}
 
-	,onMenuClick: function (event)
+	,showBackground: function ()
 	{
-		event.stopPropagation ();
+		$('background').style.display = 'block';
+	}
 
-		if (!this.menuShown)
-			this.showMenu ();
-		else
-			this.hideMenu ();
+	,hideBackground: function ()
+	{
+		$('background').style.display = 'none';
 	}
 
 	,showMenu: function ()
 	{
-		var menu = Vn.get ('menu-box');
-		menu.style.display = 'block';
-		var menuBackground = Vn.get ('menu-background');
-		menuBackground.style.display = 'block';
+		this.showBackground ();
+		$('menu-box').style.display = 'block';
 		this.menuShown = true;
 
 		this.hideMenuCallback = this.hideMenu.bind (this);
@@ -66,10 +70,9 @@ Vn.Web =
 
 	,hideMenu: function ()
 	{
-		var menu = Vn.get ('menu-box');
-		menu.style.display = 'none';
-		var menuBackground = Vn.get ('menu-background');
-		menuBackground.style.display = 'none';
+		this.hideBackground ();
+		$('menu-box').style.display = 'none';
+		$('menu-button').style.display = 'initial';
 		this.menuShown = false;
 		
 		document.removeEventListener ('click', this.hideMenuCallback);
@@ -101,7 +104,7 @@ Vn.Web =
 
 		if (userName)
 		{
-			var span = Vn.get ('user-name');
+			var span = $('user-name');
 			span.appendChild (document.createTextNode (', '+ userName));
 		}
 
@@ -121,7 +124,7 @@ Vn.Web =
 			sectionMap[parent].push (i);
 		}
 
-		this.createMenu (res, sectionMap, null, Vn.get ('menu'));
+		this.createMenu (res, sectionMap, null, $('menu'));
 
 		// Loading the default form
 
@@ -209,10 +212,10 @@ Vn.Web =
 		
 			var li = document.createElement ('li');
 			ul.appendChild (li);
-			this.menuOptions[res.get ('path')] = li;
 
 			var a = document.createElement ('a');
 			a.href = this.hash.make ({'form': res.get ('path')});
+			this.menuOptions[res.get ('path')] = a;
 			li.appendChild (a);
 
 			var text = document.createTextNode (_(res.get ('description')));
@@ -222,21 +225,14 @@ Vn.Web =
 			
 			if (sectionMap[formId])
 			{
-				var submenu;
-				
-				if (!Vn.isMobile ())
-				{
-					submenu = document.createElement ('ul');
-					submenu.className = 'submenu';
-					li.appendChild (submenu);
+				var submenu = document.createElement ('ul');
+				submenu.className = 'submenu';
+				li.appendChild (submenu);
 
-					li.addEventListener ('mouseover',
-						this.onLiMouseHover.bind (this, submenu, a));
-					li.addEventListener ('mouseout',
-						this.onLiMouseOut.bind (this));
-				}
-				else
-					submenu = ul;
+				li.addEventListener ('mouseover',
+					this.onLiMouseHover.bind (this, submenu, a));
+				li.addEventListener ('mouseout',
+					this.onLiMouseOut.bind (this));
 
 				this.createMenu (res, sectionMap, formId, submenu);
 			}
@@ -245,6 +241,9 @@ Vn.Web =
 
 	,onLiMouseHover: function (submenu, parent)
 	{
+		if (Vn.isMobile ())
+			return;
+
 		this.hideSubmenu ();
 		this.activeSubmenu = submenu;
 
@@ -284,12 +283,25 @@ Vn.Web =
 			this.hideMenu ();
 
 		this.requestedForm = formPath;
-		this.loadForm (formPath, this.onFormLoad.bind (this));
+		this.loadForm (formPath, null);
 	}
 	
 	,loadForm: function (formPath, callback)
 	{
 		var formInfo = this.forms[formPath];
+		var path = 'forms/'+ formPath;
+
+		if (this.activeForm)
+		{
+			this.activeForm.close ();
+			this.activeForm = null;
+		}
+
+		if (this.activeCss)
+			Vn.excludeCss (this.activeCss);
+
+		this.activeCss = path +'/style.css';
+		Vn.includeCss (this.activeCss);
 
 		if (!formInfo)
 		{
@@ -312,13 +324,10 @@ Vn.Web =
 				,callbacks: []
 			};
 
-			var path = 'forms/'+ formPath;
-
 			Vn.Locale.load (path,
 				this.onFormLocaleReady.bind (this, formInfo));
 			Vn.includeJs (path +'/'+ formName +'.js',
 				this.onFormJsReady.bind (this, formInfo));
-			Vn.includeCss (path +'/style.css');
 
 			var request = new XMLHttpRequest ();
 			request.onreadystatechange =
@@ -342,12 +351,9 @@ Vn.Web =
 		}
 
 		if (callback)
-		{
-			if (formInfo.ready)
-				callback (formInfo);
-			else
-				formInfo.callbacks.push (callback);
-		}
+			formInfo.callbacks.push (callback);
+		if (formInfo.ready)
+			this.onFormDownload (formInfo);
 	}
 
 	,onFormLocaleReady: function (formInfo)
@@ -379,25 +385,7 @@ Vn.Web =
 
 		formInfo.ready = true;
 
-		var callbacks = formInfo.callbacks;
-		delete formInfo.callbacks;
-
-		for (var i = 0; i < callbacks.length; i++)	
-			callbacks[i] (formInfo);
-
-		this.loaderPop ();
-	}		
-	
-	,onFormLoad: function (formInfo)
-	{
-		if (formInfo.path != this.requestedForm)
-			return;		
-
-		if (this.activeForm)
-			this.activeForm.close ();
-
-		this.activeFormPath = formInfo.path;
-
+		if (formInfo.path == this.requestedForm)
 		try {
 			var klass = eval (formInfo.klass);
 			this.activeForm = new klass (this, formInfo);
@@ -406,8 +394,16 @@ Vn.Web =
 		catch (e) {
 			console.error (e);
 		}
-	}
-	
+
+		var callbacks = formInfo.callbacks;
+		formInfo.callbacks = [];
+
+		for (var i = 0; i < callbacks.length; i++)	
+			callbacks[i] (this.activeForm);
+
+		this.loaderPop ();
+	}		
+
 	,unload: function ()
 	{
 		this.hashLink.disconnect ('changed', this.onFormChange, this);
diff --git a/package/usr/share/hedera-web/rest/query.php b/package/usr/share/hedera-web/rest/query.php
index 98cf97b5..f5850f6f 100755
--- a/package/usr/share/hedera-web/rest/query.php
+++ b/package/usr/share/hedera-web/rest/query.php
@@ -1,6 +1,7 @@
 <?php
 
 use Vn\Rest;
+use Vn\Db;
 
 class RestMod extends Rest\Module
 {
@@ -13,7 +14,8 @@ class RestMod extends Rest\Module
 		$conn = $this->conn;
 
 		try {
-			if ($conn->multiQuery ($_REQUEST['sql']))
+			$conn->multiQuery ($_REQUEST['sql']);
+
 			do {
 				$result = $conn->storeResult ();
 
@@ -23,7 +25,54 @@ class RestMod extends Rest\Module
 
 					$resultMap = [];
 					$resultMap['data'] = [];
-					$resultMap['field'] = $columns;
+					$resultMap['field'] = [];
+
+					for ($i = 0; $i < $result->field_count; $i++)
+					{
+						$column = $columns[$i];
+						
+						switch ($column->type)
+						{
+							case MYSQLI_TYPE_BIT:
+								$type = TYPE_BOOLEAN;
+								break;
+							case MYSQLI_TYPE_TINY:
+							case MYSQLI_TYPE_SHORT:
+							case MYSQLI_TYPE_LONG:
+							case MYSQLI_TYPE_LONGLONG:
+							case MYSQLI_TYPE_INT24:
+							case MYSQLI_TYPE_YEAR:
+								$type = TYPE_INTEGER;
+								break;
+							case MYSQLI_TYPE_FLOAT:
+							case MYSQLI_TYPE_DOUBLE:
+							case MYSQLI_TYPE_DECIMAL:	
+							case MYSQLI_TYPE_NEWDECIMAL:
+								$type = TYPE_DOUBLE;
+								break;
+							case MYSQLI_TYPE_DATE:	
+								$type = TYPE_DATE;
+								break;
+							case MYSQLI_TYPE_DATETIME:
+							case MYSQLI_TYPE_TIMESTAMP:
+								$type = TYPE_DATE_TIME;
+								break;
+							default;
+								$type = TYPE_STRING;
+						}
+
+						$resultMap['field'][] =
+						[
+							'name'     => $column->name,
+							'orgname'  => $column->orgname,
+							'table'    => $column->table,
+							'orgtable' => $column->orgtable,
+							'def'      => $column->def,
+							'db'       => $column->db,
+							'flags'    => $column->flags,
+							'type'     => $type
+						];
+					}
 
 					while ($row = $result->fetch_row ())
 					{
diff --git a/package/usr/share/php/vn/hedera/web.php b/package/usr/share/php/vn/hedera/web.php
index 745c35a4..c35c1408 100755
--- a/package/usr/share/php/vn/hedera/web.php
+++ b/package/usr/share/php/vn/hedera/web.php
@@ -27,7 +27,7 @@ class Web
 		self::$sysConn = new Conn ();
 		$sysConn = self::$sysConn;
 		$sysConn->open (
-			 'p:'. $conf['db']['host']
+			'p:'. $conf['db']['host']
 			,$conf['db']['user']
 			,base64_decode ($conf['db']['pass'])
 			,$conf['db']['schema']
@@ -128,7 +128,8 @@ class Web
 
 		try {
 			Auth::getCredentials ();
-			self::$conn->open ($conf['db']['host']
+			self::$conn->open (
+				 $conf['db']['host']
 				,Auth::getUser ()
 				,Auth::getPassword ()
 				,$conf['db']['schema']
diff --git a/package/usr/share/php/vn/tpv/soap-method.php b/package/usr/share/php/vn/tpv/soap-method.php
index 7193554c..967cac8f 100644
--- a/package/usr/share/php/vn/tpv/soap-method.php
+++ b/package/usr/share/php/vn/tpv/soap-method.php
@@ -39,7 +39,7 @@ function procesaNotificacionSIS ($XML)
 		// Confirms the transaction
 
 		Tpv::$conn->query (
-			'CALL transaction_confirm_new (#, #, #, #, #)',
+			'CALL transaction_confirm (#, #, #, #, #)',
 			[
 				 $request['Ds_Amount']
 				,$request['Ds_Order']