diff --git a/controllets/animated-button-container-controllet/animated-button-container-controllet.html b/controllets/animated-button-container-controllet/animated-button-container-controllet.html
index dc2a5a3..1632a8f 100644
--- a/controllets/animated-button-container-controllet/animated-button-container-controllet.html
+++ b/controllets/animated-button-container-controllet/animated-button-container-controllet.html
@@ -135,8 +135,9 @@
         },
 
         ready: function(){
-            this.$.window.style.height = this.height;
-            this.$.window.style.width  = this.width;
+            this.$.window.style.height = this.height + "vh";
+            this.$.window.style.width  = this.width + "vw";
+            this.$.close.style.left    = (this.width - 1) + "vw"
         },
 
         _onOpenClick: function() {
diff --git a/controllets/create-card-controllet/create-card-controllet.html b/controllets/create-card-controllet/create-card-controllet.html
index 2e8d6b7..ccc9993 100644
--- a/controllets/create-card-controllet/create-card-controllet.html
+++ b/controllets/create-card-controllet/create-card-controllet.html
@@ -268,8 +268,8 @@
                               ' width="300"'          +
                               ' height="300"'         +
                               ' type="'+ this.type    + '"' +
-                              ' text="'+ this.comment + '"' +
-                              ' legend="'+ this.title + '">';
+                              ' comment="'+ this.comment + '"' +
+                              ' title="'+ this.title + '">';
                if(this.type == 'link'){
                    card += '<preview-datalet data-url="'+ this.link + '" url="'+ this.link + '"></preview-datalet>';
                }else{
diff --git a/controllets/data-sevc-controllet/data-sevc-controllet.html b/controllets/data-sevc-controllet/data-sevc-controllet.html
index 324dfad..8d3a9d3 100644
--- a/controllets/data-sevc-controllet/data-sevc-controllet.html
+++ b/controllets/data-sevc-controllet/data-sevc-controllet.html
@@ -460,7 +460,7 @@ Example:
                                     </paper-material>
 
                                     <div id="comment">
-                                        <paper-textarea class="custom_textarea" id="commentArea" label="Max 100 character comment" maxlength="100"></paper-textarea>
+                                        <paper-textarea class="custom_textarea" id="commentArea" label="Max 100 characters comment" maxlength="100"></paper-textarea>
                                     </div>
 
                                 </div>
@@ -722,9 +722,9 @@ Example:
                 if(this.selectedDatalet == undefined)
                  /* this.$.visualization_slider_area.innerHTML = '<items-slider-controllet items=\'' + JSON.stringify(this.datalets_list) + '\'' +
                          '\'></items-slider-controllet>';*/
-                this.$.visualization_slider_area.innerHTML = '<animated-button-container-controllet height="70vh" width="50vw">' +
-                                                               '<items-list-controllet height="70vh"' +
-                                                                                     ' width="50vw"' +
+                this.$.visualization_slider_area.innerHTML = '<animated-button-container-controllet height="70" width="50">' +
+                                                               '<items-list-controllet height="70"' +
+                                                                                     ' width="50"' +
                                                                                      ' replace-string="-datalet"' +
                                                                                      ' items=\'' + JSON.stringify(this.datalets_list) + '\'>' +
                                                                '</items-list-controllet>' +
@@ -733,9 +733,9 @@ Example:
                     /*this.$.visualization_slider_area.innerHTML = '<items-slider-controllet items=\'' + JSON.stringify(this.datalets_list) + '\'' +
                                                                  'selected-card=\'' + this.selectedDatalet + '\'></items-slider-controllet>';*/
 
-                    this.$.visualization_slider_area.innerHTML = '<animated-button-container-controllet height="50vh" width="30vw">' +
-                            '<items-list-controllet height="50vh"' +
-                            ' width="30vw"' +
+                    this.$.visualization_slider_area.innerHTML = '<animated-button-container-controllet height="50" width="30">' +
+                            '<items-list-controllet height="50"' +
+                            ' width="30"' +
                             ' replace-string="-datalet"' +
                             ' selected-card=\'' + this.selectedDatalet + '\'' +
                             ' items=\'' + JSON.stringify(this.datalets_list) + '\'>' +
@@ -1012,6 +1012,7 @@ Example:
              */
             _textElementChanged : function(e){
                 if(this.selected == 3) {
+                    this.generateDataletPreview();
                     this.injectDatalet(this.$.datalet_placeholder_2);
                 }
             },
diff --git a/controllets/items-list-controllet/item-list-controllet.html b/controllets/items-list-controllet/item-list-controllet.html
index 182819d..1d52852 100644
--- a/controllets/items-list-controllet/item-list-controllet.html
+++ b/controllets/items-list-controllet/item-list-controllet.html
@@ -179,8 +179,8 @@ Example:
             },
 
             ready : function(){
-                this.$.container.style.height = this.height;
-                this.$.container.style.width  = this.width;
+                this.$.container.style.height = this.height + "vh";
+                this.$.container.style.width  = this.width + "vw";
 
                 $(this.$.container).perfectScrollbar();
 
diff --git a/controllets/paper-card-controllet/paper-card-controllet.html b/controllets/paper-card-controllet/paper-card-controllet.html
index de78dd0..a2c0ba7 100644
--- a/controllets/paper-card-controllet/paper-card-controllet.html
+++ b/controllets/paper-card-controllet/paper-card-controllet.html
@@ -33,7 +33,7 @@
                 height: 21px;
             }
 
-            .legend {
+            .title {
                 position: relative;
                 top: -50px;
                 background: rgba(0,0,0,0.8);
@@ -103,10 +103,10 @@
                     <content></content>
                 </div>
 
-                <template is="dom-if" if="{{legend}}">
+                <template is="dom-if" if="{{title}}">
 
-                    <div class="legend horizontal layout center">
-                        <span>{{legend}}</span>
+                    <div class="title horizontal layout center">
+                        <span>{{title}}</span>
                         <!-- Adding icon based on card type -->
 
                         <template is="dom-if" if="{{checkType(type, 'text')}}">
@@ -138,8 +138,8 @@
                 </template>
 
                 <div class="footer">
-                    <template is="dom-if" if="{{text}}">
-                       <div id="text">{{text}}</div>
+                    <template is="dom-if" if="{{comment}}">
+                       <div id="comment">{{comment}}</div>
                     </template>
                 </div>
 
@@ -166,11 +166,11 @@
                     type: String,
                     value: "text"
                 },
-                text:{
+                comment:{
                     type: String,
                     value: ""
                 },
-                legend:{
+                title:{
                     type: String,
                     value: ""
                 },
diff --git a/controllets/search-panel-controllet/search-panel-controllet.html b/controllets/search-panel-controllet/search-panel-controllet.html
index d516133..bc836dc 100755
--- a/controllets/search-panel-controllet/search-panel-controllet.html
+++ b/controllets/search-panel-controllet/search-panel-controllet.html
@@ -79,7 +79,7 @@ Example:
         <div class="horizontal layout">
             <neon-animated-pages selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
                 <neon-animatable></neon-animatable>
-                <neon-animatable><paper-input class="search-text" label="search" autosave="search_text" results="5" transition="fade-in-animation"></paper-input></neon-animatable>
+                <neon-animatable><paper-input class="search-text" label="search" autosave="search_text" results="5" transition="fade-in-animation" value="{{searchKey}}"></paper-input></neon-animatable>
             </neon-animated-pages>
             <paper-icon-button icon="search" class="dropdown-trigger" on-click="_toggleClick"></paper-icon-button>
         </div>
@@ -114,6 +114,12 @@ Example:
                 exitAnimation : {
                     type: String,
                     value: ""
+                },
+                searchKey:{
+                    type: String,
+                    value: undefined,
+                    observer: "_valueChanged"
+
                 }
             },
             _toggleClick: function(e){
@@ -136,7 +142,7 @@ Example:
              */
             _valueChanged : function(oldvalue, newValue){
                 clearTimeout (this.timer);
-                this.timer = setTimeout(this.fire('text-element-controllet_content-changed', {newValue: newValue}), 2000);
+                this.timer = setTimeout(this.fire('search-panel-controllet_content-changed', {searchKey: this.searchKey}), 500);
             },
             /**
              * It returns the value in text area