diff --git a/docs/index.html b/docs/index.html
index c92c1a9..9314bdf 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -37,41 +37,31 @@ <h2>CoCreate-boilerplate</h2>
                         href="https://github.com/CoCreate-app/CoCreate-boilerplate"
                         target="_blank"
                         class="margin-right:15px"
-                        ><i
-                            class="height:20px fill:#505050"
-                            src="/assets/svg/github.svg"></i
+                        ><i src="/assets/svg/github.svg"></i
                     ></a>
                     <a
                         class="margin-right:15px share"
                         share-network="twitter"
                         title="Share on twitter"
-                        ><i
-                            class="height:20px fill:#505050"
-                            src="/assets/svg/twitter.svg"></i
+                        ><i src="/assets/svg/twitter.svg"></i
                     ></a>
                     <a
                         class="margin-right:15px share"
                         share-network="facebook"
                         title="Share on Facebook"
-                        ><i
-                            class="height:20px fill:#505050"
-                            src="/assets/svg/facebook.svg"></i
+                        ><i src="/assets/svg/facebook.svg"></i
                     ></a>
                     <a
                         class="margin-right:15px share"
                         share-network="instagram"
                         title="Share on instagram"
-                        ><i
-                            class="height:20px fill:#505050"
-                            src="/assets/svg/instagram.svg"></i
+                        ><i src="/assets/svg/instagram.svg"></i
                     ></a>
                     <a
                         class="margin-right:15px share"
                         share-network="share"
                         title="Share on share"
-                        ><i
-                            class="height:20px fill:#505050"
-                            src="/assets/svg/share-alt.svg"></i
+                        ><i src="/assets/svg/share-alt.svg"></i
                     ></a>
                 </div>
             </div>
@@ -184,7 +174,7 @@ <h4>
                                 toggle="code-height"
                                 toggle-selector="#demo-code"
                                 ><i
-                                    class="height:18px fill:#505050"
+                                    class="height:18px"
                                     src="/assets/svg/eye.svg"></i
                             ></a>
                             <a
@@ -195,18 +185,14 @@ <h4>
                                 hide="#eye-slash"
                                 toggle="code-height"
                                 toggle-selector="#demo-code"
-                                ><i
-                                    class="height:20px fill:#505050"
-                                    src="/assets/svg/eye-slash.svg"></i
+                                ><i src="/assets/svg/eye-slash.svg"></i
                             ></a>
                             <a
                                 class="margin-right:10px"
                                 id="code"
                                 show="#code-slash"
                                 hide="#code, #demo-code"
-                                ><i
-                                    class="height:20px fill:#505050"
-                                    src="/assets/svg/code.svg"></i
+                                ><i src="/assets/svg/code.svg"></i
                             ></a>
                             <a
                                 class="margin-right:10px"
@@ -215,7 +201,7 @@ <h4>
                                 show="#code, #demo-code"
                                 hide="#code-slash"
                                 ><i
-                                    class="display:flex height:18px fill:#505050"
+                                    class="height:18px"
                                     src="/assets/svg/code.svg"></i
                             ></a>
                             <a
diff --git a/superadmin/admin.html b/superadmin/admin.html
index dae0f1d..c05d5e9 100644
--- a/superadmin/admin.html
+++ b/superadmin/admin.html
@@ -71,7 +71,7 @@
                         <span
                             class="display:flex justify-content:center min-width:50px">
                             <i
-                                class="display:flex height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/users.svg"></i>
                         </span>
                         <span>Interviews</span>
@@ -84,7 +84,7 @@
                             state-overwrite
                             class="display:flex justify-content:center align-items:center height:40px">
                             <i
-                                class="display:flex height:18px fill:#505050"
+                                class="height:18px"
                                 src="./assets/svg/plus.svg"></i>
                         </a>
                     </div>
@@ -99,7 +99,7 @@
                         <span
                             class="display:flex justify-content:center min-width:50px">
                             <i
-                                class="display:flex height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/list.svg"></i>
                         </span>
                         <span>Interview Forms</span>
@@ -113,7 +113,7 @@
                             state-overwrite
                             class="display:flex justify-content:center align-items:center height:40px">
                             <i
-                                class="display:flex height:18px fill:#505050"
+                                class="height:18px"
                                 src="./assets/svg/plus.svg"></i>
                         </a>
                     </div>
diff --git a/superadmin/builder/components/filetree.html b/superadmin/builder/components/filetree.html
index 2eb7053..665bade 100644
--- a/superadmin/builder/components/filetree.html
+++ b/superadmin/builder/components/filetree.html
@@ -55,11 +55,7 @@
 
     <!--File Template -->
     <div class="padding:5px" template render-as="$auto">
-        <span class=""
-            ><i
-                class="height:20px fill:#505050"
-                src="./assets/svg/html5.svg"></i
-        ></span>
+        <span class=""><i src="./assets/svg/html5.svg"></i></span>
         <span
             class="margin-left:5px"
             array="files"
diff --git a/superadmin/builder/components/left-panel.html b/superadmin/builder/components/left-panel.html
index 46f82b2..8fa0372 100644
--- a/superadmin/builder/components/left-panel.html
+++ b/superadmin/builder/components/left-panel.html
@@ -11,9 +11,7 @@
             toggle="#canvas"
             toggle-selector="#vdom"
             toggle-attribute="vdom-selector">
-            <i
-                class="height:20px fill:#505050"
-                src="./assets/svg/stream.svg"></i>
+            <i src="./assets/svg/stream.svg"></i>
         </div>
         <div
             class="builder-tab-round"
@@ -23,9 +21,7 @@
             toggle="files"
             toggle-selector="#fetch-assets"
             toggle-attribute="array">
-            <i
-                class="height:16px fill:#505050"
-                src="./assets/svg/photo-video.svg"></i>
+            <i class="height:16px" src="./assets/svg/photo-video.svg"></i>
         </div>
         <div
             class="builder-tab-round"
@@ -35,18 +31,14 @@
             toggle="files"
             toggle-selector=".fetch-files"
             toggle-attribute="array">
-            <i
-                class="height:16px fill:#505050"
-                src="./assets/svg/folder.svg"></i>
+            <i class="height:16px" src="./assets/svg/folder.svg"></i>
         </div>
         <div
             class="builder-tab-round"
             selected-value="active"
             selected-selector="#uploader"
             selected-group="left-panels">
-            <i
-                class="height:16px fill:#505050"
-                src="./assets/svg/cloud-upload-alt.svg"></i>
+            <i class="height:16px" src="./assets/svg/cloud-upload-alt.svg"></i>
         </div>
         <div
             class="builder-tab-round"
@@ -54,9 +46,7 @@
             selected-selector="#blocks"
             selected-group="left-panels"
             selected>
-            <i
-                class="height:16px fill:#505050"
-                src="./assets/svg/th-large.svg"></i>
+            <i class="height:16px" src="./assets/svg/th-large.svg"></i>
         </div>
     </div>
 
@@ -89,9 +79,7 @@
                         actions="state, openModal"
                         modal-src="./marketplace/list.html"
                         modal-width="840px">
-                        <i
-                            class="height:16px fill:#505050"
-                            src="./assets/svg/plus.svg"></i>
+                        <i class="height:16px" src="./assets/svg/plus.svg"></i>
                     </a>
                 </button>
             </div>
@@ -119,12 +107,12 @@
                         hide=".category{{tag._id}}">
                         <span class="category{{tag._id}}" hidden
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/plus.svg"></i
                         ></span>
                         <span class="category{{tag._id}}"
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/minus.svg"></i
                         ></span>
                         <span>{{tag.name}}</span>
@@ -155,9 +143,7 @@
                                     state-object="{{object._id}}"
                                     state_to="form-fields"
                                     modal-width="320px">
-                                    <i
-                                        class="height:20px fill:#505050"
-                                        src="./assets/svg/pencil-alt.svg"></i>
+                                    <i src="./assets/svg/pencil-alt.svg"></i>
                                 </a>
                             </div>
                             <div
@@ -194,12 +180,12 @@
                         hide=".category{{tag._id}}">
                         <span class="category{{tag._id}}" hidden
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/plus.svg"></i
                         ></span>
                         <span class="category{{tag._id}}"
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/minus.svg"></i
                         ></span>
                         <span>{{tag.name}}</span>
@@ -229,9 +215,7 @@
                                     state-object="{{object._id}}"
                                     state_to="form-fields"
                                     modal-width="320px">
-                                    <i
-                                        class="height:20px fill:#505050"
-                                        src="./assets/svg/pencil-alt.svg"></i>
+                                    <i src="./assets/svg/pencil-alt.svg"></i>
                                 </a>
                             </div>
                             <div
@@ -292,9 +276,7 @@
                         state-key="src"
                         modal-width="900px"
                         modal-color="#229954">
-                        <i
-                            class="height:20px fill:#505050"
-                            src="./assets/svg/search.svg"></i>
+                        <i src="./assets/svg/search.svg"></i>
                     </a>
                 </span>
             </form>
@@ -384,9 +366,7 @@
                         render-as="$auto"
                         object="{{$auto._id}}">
                         <span class="{{$auto.content-type}}"
-                            ><i
-                                class="height:20px fill:#505050"
-                                src="./assets/svg/html5.svg"></i
+                            ><i src="./assets/svg/html5.svg"></i
                         ></span>
                         <span
                             class="margin-left:5px"
@@ -413,9 +393,7 @@
                         state-key="src"
                         modal-width="900px"
                         modal-color="#229954">
-                        <i
-                            class="height:20px fill:#505050"
-                            src="./assets/svg/search.svg"></i>
+                        <i src="./assets/svg/search.svg"></i>
                     </a>
                 </span>
             </form>
@@ -455,9 +433,7 @@
                             state-object="{{object._id}}"
                             state_to="form-fields"
                             modal-width="900px">
-                            <i
-                                class="height:20px fill:#505050"
-                                src="./assets/svg/pencil-alt.svg"></i>
+                            <i src="./assets/svg/pencil-alt.svg"></i>
                         </a>
                     </div>
                     <a
diff --git a/superadmin/builder/components/right-panel.html b/superadmin/builder/components/right-panel.html
index 48bbacd..9a4f48c 100644
--- a/superadmin/builder/components/right-panel.html
+++ b/superadmin/builder/components/right-panel.html
@@ -40,54 +40,42 @@
                 selected-selector="#styles"
                 selected-group="editor-panels"
                 selected>
-                <i
-                    class="height:20px fill:#505050"
-                    src="./assets/svg/paint-brush.svg"></i>
+                <i src="./assets/svg/paint-brush.svg"></i>
             </div>
             <div
                 class="builder-tab-round"
                 selected-value="active"
                 selected-selector="#database"
                 selected-group="editor-panels">
-                <i
-                    class="height:20px fill:#505050"
-                    src="./assets/svg/database.svg"></i>
+                <i src="./assets/svg/database.svg"></i>
             </div>
             <div
                 class="builder-tab-round"
                 selected-value="active"
                 selected-selector="#broadcast"
                 selected-group="editor-panels">
-                <i
-                    class="height:20px fill:#505050"
-                    src="./assets/svg/broadcast-tower.svg"></i>
+                <i src="./assets/svg/broadcast-tower.svg"></i>
             </div>
             <div
                 class="builder-tab-round"
                 selected-value="active"
                 selected-selector="#logic"
                 selected-group="editor-panels">
-                <i
-                    class="height:20px fill:#505050"
-                    src="./assets/svg/brain.svg"></i>
+                <i src="./assets/svg/brain.svg"></i>
             </div>
             <div
                 class="builder-tab-round"
                 selected-value="active"
                 selected-selector="#plugins"
                 selected-group="editor-panels">
-                <i
-                    class="height:20px fill:#505050"
-                    src="./assets/svg/plug.svg"></i>
+                <i src="./assets/svg/plug.svg"></i>
             </div>
             <div
                 class="builder-tab-round"
                 selected-value="active"
                 selected-selector="#settings"
                 selected-group="editor-panels">
-                <i
-                    class="display:flex height:18px fill:#505050"
-                    src="./assets/svg/cog.svg"></i>
+                <i class="height:18px" src="./assets/svg/cog.svg"></i>
             </div>
         </div>
         <div class="overflow:auto height:90vh">
@@ -106,12 +94,12 @@
                         hide=".sizing">
                         <span class="sizing" hidden
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/plus.svg"></i
                         ></span>
                         <span class="sizing"
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/minus.svg"></i
                         ></span>
                         <span>Layout</span>
@@ -287,12 +275,12 @@
                         hide=".spacing">
                         <span class="spacing" hidden
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/plus.svg"></i
                         ></span>
                         <span class="spacing"
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/minus.svg"></i
                         ></span>
                         <span>Spacing</span>
@@ -698,12 +686,12 @@
                         hide=".size">
                         <span class="size" hidden
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/plus.svg"></i
                         ></span>
                         <span class="size"
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/minus.svg"></i
                         ></span>
                         <span>Size</span>
@@ -1005,12 +993,12 @@
                         hide=".position">
                         <span class="position" hidden
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/plus.svg"></i
                         ></span>
                         <span class="position"
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/minus.svg"></i
                         ></span>
                         <span>Position</span>
@@ -1219,12 +1207,12 @@
                         hide=".typography">
                         <span class="typography" hidden
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/plus.svg"></i
                         ></span>
                         <span class="typography"
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/minus.svg"></i
                         ></span>
                         <span>Typography</span>
@@ -1399,22 +1387,22 @@
                                 <ul class="options z-index:7 margin-top:5px">
                                     <cc-option value="left">
                                         <i
-                                            class="height:16px fill:#505050"
+                                            class="height:16px"
                                             src="./assets/svg/align-left.svg"></i>
                                     </cc-option>
                                     <cc-option value="center">
                                         <i
-                                            class="height:16px fill:#505050"
+                                            class="height:16px"
                                             src="./assets/svg/align-center.svg"></i>
                                     </cc-option>
                                     <cc-option value="right">
                                         <i
-                                            class="height:16px fill:#505050"
+                                            class="height:16px"
                                             src="./assets/svg/align-right.svg"></i>
                                     </cc-option>
                                     <cc-option value="justify">
                                         <i
-                                            class="height:16px fill:#505050"
+                                            class="height:16px"
                                             src="./assets/svg/align-justify.svg"></i>
                                     </cc-option>
                                 </ul>
@@ -1438,17 +1426,17 @@
                                 <ul class="options z-index:7 margin-top:5px">
                                     <cc-option value="x">
                                         <i
-                                            class="height:16px fill:#505050"
+                                            class="height:16px"
                                             src="./assets/svg/times.svg"></i>
                                     </cc-option>
                                     <cc-option value="u">
                                         <i
-                                            class="height:16px fill:#505050"
+                                            class="height:16px"
                                             src="./assets/svg/underline.svg"></i>
                                     </cc-option>
                                     <cc-option value="s">
                                         <i
-                                            class="height:16px fill:#505050"
+                                            class="height:16px"
                                             src="./assets/svg/strikethrough.svg"></i>
                                     </cc-option>
                                 </ul>
@@ -1471,12 +1459,12 @@
                                 <ul class="options z-index:7 margin-top:5px">
                                     <cc-option value="a">
                                         <i
-                                            class="height:16px fill:#505050"
+                                            class="height:16px"
                                             src="./assets/svg/font.svg"></i>
                                     </cc-option>
                                     <cc-option value="em">
                                         <i
-                                            class="height:16px fill:#505050"
+                                            class="height:16px"
                                             src="./assets/svg/italic.svg"></i>
                                     </cc-option>
                                 </ul>
@@ -1490,12 +1478,12 @@
                         hide=".border">
                         <span class="border" hidden
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/plus.svg"></i
                         ></span>
                         <span class="border"
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/minus.svg"></i
                         ></span>
                         <span>Border</span>
@@ -1675,12 +1663,12 @@
                         hide=".shadow">
                         <span class="shadow" hidden
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/plus.svg"></i
                         ></span>
                         <span class="shadow"
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/minus.svg"></i
                         ></span>
                         <span>Shadow</span>
@@ -1914,12 +1902,12 @@
                         hide=".backgroundset">
                         <span class="backgroundset" hidden
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/plus.svg"></i
                         ></span>
                         <span class="backgroundset"
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/minus.svg"></i
                         ></span>
                         <span>Background</span>
@@ -2103,12 +2091,12 @@
                         hide=".extra">
                         <span class="extra" hidden
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/plus.svg"></i
                         ></span>
                         <span class="extra"
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/minus.svg"></i
                         ></span>
                         <span>Extra</span>
@@ -2527,12 +2515,12 @@
                         hide=".database">
                         <span class="database" hidden
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/plus.svg"></i
                         ></span>
                         <span class="database"
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/minus.svg"></i
                         ></span>
                         <span>Database</span>
@@ -2868,12 +2856,12 @@
                         hide=".fetchlist">
                         <span class="fetchlist" hidden
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/plus.svg"></i
                         ></span>
                         <span class="fetchlist"
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/minus.svg"></i
                         ></span>
                         <span>Fetch List</span>
@@ -2988,12 +2976,12 @@
                         hide=".broadcast">
                         <span class="broadcast" hidden
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/plus.svg"></i
                         ></span>
                         <span class="broadcast"
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/minus.svg"></i
                         ></span>
                         <span>Broadcast</span>
@@ -3085,12 +3073,12 @@
                         hide=".messages">
                         <span class="messages" hidden
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/plus.svg"></i
                         ></span>
                         <span class="messages"
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/minus.svg"></i
                         ></span>
                         <span>messages</span>
@@ -3120,12 +3108,12 @@
                         hide=".logic">
                         <span class="logic" hidden
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/plus.svg"></i
                         ></span>
                         <span class="logic"
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/minus.svg"></i
                         ></span>
                         <span>Logic</span>
@@ -3339,12 +3327,12 @@
                         hide=".datavisible">
                         <span class="datavisible" hidden
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/plus.svg"></i
                         ></span>
                         <span class="datavisible"
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/minus.svg"></i
                         ></span>
                         <span>Conditional Logic</span>
@@ -3385,12 +3373,12 @@
                         hide=".dataselected">
                         <span class="dataselected" hidden
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/plus.svg"></i
                         ></span>
                         <span class="dataselected"
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/minus.svg"></i
                         ></span>
                         <span>Selected</span>
@@ -3473,12 +3461,12 @@
                         hide=".toggleattr">
                         <span class="toggleattr" hidden
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/plus.svg"></i
                         ></span>
                         <span class="toggleattr"
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/minus.svg"></i
                         ></span>
                         <span>Toggle</span>
@@ -3547,12 +3535,12 @@
                         hide=".hoverattr">
                         <span class="hoverattr" hidden
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/plus.svg"></i
                         ></span>
                         <span class="hoverattr"
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/minus.svg"></i
                         ></span>
                         <span>Hover</span>
@@ -3621,12 +3609,12 @@
                         hide=".scroll">
                         <span class="scroll" hidden
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/plus.svg"></i
                         ></span>
                         <span class="scroll"
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/minus.svg"></i
                         ></span>
                         <span>Scroll</span>
@@ -3894,12 +3882,12 @@
                         hide=".clone">
                         <span class="clone" hidden
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/plus.svg"></i
                         ></span>
                         <span class="clone"
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/minus.svg"></i
                         ></span>
                         <span>Clone</span>
@@ -3927,12 +3915,12 @@
                         hide=".calculate">
                         <span class="calculate" hidden
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/plus.svg"></i
                         ></span>
                         <span class="calculate"
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/minus.svg"></i
                         ></span>
                         <span>Calculates</span>
@@ -3962,12 +3950,12 @@
                         hide=".plugins">
                         <span class="plugins" hidden
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/plus.svg"></i
                         ></span>
                         <span class="plugins"
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/minus.svg"></i
                         ></span>
                         <span>stripe</span>
@@ -4029,12 +4017,12 @@
                         hide=".sendgrid">
                         <span class="sendgrid" hidden
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/plus.svg"></i
                         ></span>
                         <span class="sendgrid"
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/minus.svg"></i
                         ></span>
                         <span>sendgrid</span>
@@ -4110,12 +4098,12 @@
                         hide=".settings">
                         <span class="settings" hidden
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/plus.svg"></i
                         ></span>
                         <span class="settings"
                             ><i
-                                class="height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/minus.svg"></i
                         ></span>
                         <span>settings</span>
diff --git a/superadmin/builder/components/settings.html b/superadmin/builder/components/settings.html
index 930b9f0..356c459 100644
--- a/superadmin/builder/components/settings.html
+++ b/superadmin/builder/components/settings.html
@@ -37,9 +37,7 @@
                 <!-- Modal Controls -->
                 <li class="margin-right:15px">
                     <a actions="closeModal"
-                        ><i
-                            class="height:18px fill:#505050"
-                            src="./assets/svg/times.svg"></i
+                        ><i class="height:18px" src="./assets/svg/times.svg"></i
                     ></a>
                 </li>
                 <li class="margin-right:15px">
@@ -47,14 +45,14 @@
                         <i
                             toggle="./assets/svg/window-restore.svg, ./assets/svg/window-maximize.svg"
                             toggle-attribute="src"
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/window-maximize.svg"></i>
                     </a>
                 </li>
                 <li class="margin-right:15px">
                     <a actions="parkModal"
                         ><i
-                            class="height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/window-minimize.svg"></i
                     ></a>
                 </li>
@@ -63,10 +61,10 @@
                 <li class="margin-right:15px">
                     <a fullscreen>
                         <i
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/expand.svg"></i>
                         <i
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/compress.svg"></i>
                     </a>
                 </li>
@@ -77,9 +75,7 @@
                         actions="state, openModal"
                         modal-src="./modules/form.html"
                         modal-width="320px">
-                        <i
-                            class="display:flex height:18px fill:#505050"
-                            src="./assets/svg/cog.svg"></i>
+                        <i class="height:18px" src="./assets/svg/cog.svg"></i>
                         <div
                             state_id="module-form"
                             state-array="modules"
@@ -97,9 +93,7 @@
                     <a
                         actions="state, openModal"
                         modal-src="./code-editor/index.html">
-                        <i
-                            class="display:flex height:18px fill:#505050"
-                            src="./assets/svg/code.svg"></i>
+                        <i class="height:18px" src="./assets/svg/code.svg"></i>
                         <div
                             state_id="render"
                             state-array=""
@@ -115,7 +109,7 @@
                         actions="state, openModal"
                         modal-src="./builder/index.html">
                         <i
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/palette.svg"></i>
                         <div
                             state_id="render"
@@ -134,7 +128,7 @@
                         object=""
                         state_id="form-fields">
                         <i
-                            class="height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/trash-alt.svg"></i>
                     </a>
                 </li>
@@ -188,9 +182,7 @@ <h3 value="{{units.--}}">Unit Name</h3>
                 <button
                     actions="save"
                     class="position:absolute bottom:15px right:15px padding:15px background:dodgerblue color:#fff font-size:1.5rem grow-hover border-radius:50% border-width:0 box-shadow:0px_2px_10px_0px_rgba(0,_0,_0,_0.4)">
-                    <i
-                        class="height:20px fill:#505050"
-                        src="./assets/svg/save.svg"></i>
+                    <i src="./assets/svg/save.svg"></i>
                 </button>
             </form>
         </main>
diff --git a/superadmin/builder/index.html b/superadmin/builder/index.html
index 47130c1..9514e5b 100644
--- a/superadmin/builder/index.html
+++ b/superadmin/builder/index.html
@@ -79,9 +79,7 @@
                 <!-- Modal Controls -->
                 <li class="margin-right:15px">
                     <a actions="closeModal"
-                        ><i
-                            class="height:18px fill:#505050"
-                            src="./assets/svg/times.svg"></i
+                        ><i class="height:18px" src="./assets/svg/times.svg"></i
                     ></a>
                 </li>
                 <li class="margin-right:15px">
@@ -89,14 +87,14 @@
                         <i
                             toggle="./assets/svg/window-restore.svg, ./assets/svg/window-maximize.svg"
                             toggle-attribute="src"
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/window-maximize.svg"></i>
                     </a>
                 </li>
                 <li class="margin-right:15px">
                     <a actions="parkModal"
                         ><i
-                            class="height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/window-minimize.svg"></i
                     ></a>
                 </li>
@@ -105,10 +103,10 @@
                 <li class="margin-right:15px">
                     <a fullscreen>
                         <i
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/expand.svg"></i>
                         <i
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/compress.svg"></i>
                     </a>
                 </li>
@@ -121,9 +119,7 @@
                         array=""
                         object=""
                         key="src"
-                        ><i
-                            class="height:20px fill:#505050"
-                            src="./assets/svg/save.svg"></i
+                        ><i src="./assets/svg/save.svg"></i
                     ></a>
                 </li>
 
@@ -136,9 +132,7 @@
                         object=""
                         key="src"
                         class=""
-                        ><i
-                            class="height:20px fill:#505050"
-                            src="./assets/svg/redo-alt.svg"></i
+                        ><i src="./assets/svg/redo-alt.svg"></i
                     ></a>
                 </li>
                 <li class="margin-right:15px">
@@ -149,9 +143,7 @@
                         object=""
                         key="src"
                         class=""
-                        ><i
-                            class="height:20px fill:#505050"
-                            src="./assets/svg/undo-alt.svg"></i
+                        ><i src="./assets/svg/undo-alt.svg"></i
                     ></a>
                 </li>
 
@@ -162,9 +154,7 @@
                     selected-group="screen-size"
                     selected>
                     <a id="desktop-view" class=""
-                        ><i
-                            class="height:20px fill:#505050"
-                            src="./assets/svg/desktop.svg"></i
+                        ><i src="./assets/svg/desktop.svg"></i
                     ></a>
                 </li>
                 <li
@@ -173,9 +163,7 @@
                     selected-selector=".canvas-container"
                     selected-group="screen-size">
                     <a id="tablet-view" class=""
-                        ><i
-                            class="height:20px fill:#505050"
-                            src="./assets/svg/tablet-alt.svg"></i
+                        ><i src="./assets/svg/tablet-alt.svg"></i
                     ></a>
                 </li>
                 <li
@@ -184,9 +172,7 @@
                     selected-selector=".canvas-container"
                     selected-group="screen-size">
                     <a id="mobile-view" class=""
-                        ><i
-                            class="height:20px fill:#505050"
-                            src="./assets/svg/mobile-alt.svg"></i
+                        ><i src="./assets/svg/mobile-alt.svg"></i
                     ></a>
                 </li>
 
@@ -196,9 +182,7 @@
                     class="margin-right:15px"
                     show="[actions='enableLinks']"
                     hide="[actions='disableLinks']">
-                    <i
-                        class="height:20px fill:#505050"
-                        src="./assets/svg/link.svg"></i>
+                    <i src="./assets/svg/link.svg"></i>
                 </li>
                 <li
                     actions="enableLinks"
@@ -207,9 +191,7 @@
                     hidden
                     show="[actions='disableLinks']"
                     hide="[actions='enableLinks']">
-                    <i
-                        class="height:20px fill:#505050"
-                        src="./assets/svg/unlink.svg"></i>
+                    <i src="./assets/svg/unlink.svg"></i>
                 </li>
 
                 <li
@@ -226,9 +208,7 @@
                         modal-src="./code-editor/index.html"
                         modal-width="900px"
                         modal-color="#229954">
-                        <i
-                            class="height:20px fill:#505050"
-                            src="./assets/svg/code.svg"></i>
+                        <i src="./assets/svg/code.svg"></i>
                         <div
                             state_id="builder"
                             state-array=""
@@ -239,15 +219,13 @@
                 </li>
                 <li class="margin-right:15px">
                     <a id="element-borders" class=""
-                        ><i
-                            class="height:20px fill:#505050"
-                            src="./assets/svg/square.svg"></i
+                        ><i src="./assets/svg/square.svg"></i
                     ></a>
                 </li>
                 <li class="margin-right:15px padding-left:15px">
                     <a id="clean-canvas"
                         ><i
-                            class="height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/trash-alt.svg"></i
                     ></a>
                 </li>
@@ -340,31 +318,23 @@
                 <span
                     class="padding:2px_5px background:dodgerblue border:1px_dodgerblue_solid"
                     tagname></span>
-                <!--<span class="padding:3px background:dodgerblue pointer-events:auto"><i class="height:20px fill:#505050" src="./assets/svg/arrows-alt.svg"></i></span>-->
+                <!--<span class="padding:3px background:dodgerblue pointer-events:auto"><i  src="./assets/svg/arrows-alt.svg"></i></span>-->
                 <div
                     class="display:flex align-items:center padding:2px_5px background:dodgerblue border:1px_dodgerblue_solid pointer-events:auto">
                     <span actions="cloneElement" class="margin-right:10px"
-                        ><i
-                            class="height:20px fill:#505050"
-                            src="./assets/svg/clone.svg"></i
+                        ><i src="./assets/svg/clone.svg"></i
                     ></span>
                     <span
                         actions="remove"
                         remove-selector="iframe;"
                         class="margin-right:10px"
-                        ><i
-                            class="height:20px fill:#505050"
-                            src="./assets/svg/trash-alt.svg"></i
+                        ><i src="./assets/svg/trash-alt.svg"></i
                     ></span>
                     <span actions="previousElement" class="margin-right:10px"
-                        ><i
-                            class="height:20px fill:#505050"
-                            src="./assets/svg/arrow-up.svg"></i
+                        ><i src="./assets/svg/arrow-up.svg"></i
                     ></span>
                     <span actions="nextElement"
-                        ><i
-                            class="height:20px fill:#505050"
-                            src="./assets/svg/arrow-down.svg"></i
+                        ><i src="./assets/svg/arrow-down.svg"></i
                     ></span>
                 </div>
             </tools>
@@ -401,29 +371,21 @@
                 class="display:flex align-items:center width:fit-content background:gainsboro border-radius:5px pointer-events:auto z-index:7">
                 <div
                     actions="nodename"
-                    nodekey="b"
-                    nodetarget="#canvas;"
-                    classkey="rte-btn"
+                    node-name="b"
+                    node-target="#canvas;"
                     class="padding:5px"
                     id="bold-button">
-                    <i
-                        class="height:20px fill:#505050"
-                        src="./assets/svg/bold.svg"></i>
+                    <i src="./assets/svg/bold.svg"></i>
                 </div>
                 <div
                     actions="nodename"
-                    nodekey="i"
-                    nodetarget="#canvas;"
-                    class="rte-btn"
+                    node-name="i"
+                    node-target="#canvas;"
                     id="italic-button">
-                    <i
-                        class="height:20px fill:#505050"
-                        src="./assets/svg/italic.svg"></i>
+                    <i src="./assets/svg/italic.svg"></i>
                 </div>
-                <div class="rte-btn" id="link-button" show="#link" hide="#link">
-                    <i
-                        class="height:20px fill:#505050"
-                        src="./assets/svg/link.svg"></i>
+                <div id="link-button" show="#link" hide="#link">
+                    <i src="./assets/svg/link.svg"></i>
                 </div>
                 <div
                     id="link"
@@ -432,38 +394,27 @@
                     <input type="text" key="" />
                     <div
                         actions="nodename"
-                        nodekey="a"
-                        nodetarget="#canvas;"
-                        class="rte-btn"
+                        node-name="a"
+                        node-target="#canvas;"
                         id="link-button-1">
-                        <i
-                            class="height:20px fill:#505050"
-                            src="./assets/svg/link.svg"></i>
+                        <i src="./assets/svg/link.svg"></i>
                     </div>
                     <div hide="#link">
-                        <i
-                            class="height:20px fill:#505050"
-                            src="./assets/svg/times.svg"></i>
+                        <i src="./assets/svg/times.svg"></i>
                     </div>
                 </div>
                 <div
                     actions="nodename"
-                    nodekey="q"
-                    nodetarget="#canvas;"
-                    class="rte-btn"
+                    node-name="q"
+                    node-target="#canvas;"
                     id="quote-button">
-                    <i
-                        class="height:20px fill:#505050"
-                        src="./assets/svg/quote-right.svg"></i>
+                    <i src="./assets/svg/quote-right.svg"></i>
                 </div>
                 <div
-                    class="rte-btn"
                     id="heading-btn"
                     hover="width:fit-content"
                     hover-selector="#headings">
-                    <i
-                        class="height:20px fill:#505050"
-                        src="./assets/svg/heading.svg"></i>
+                    <i src="./assets/svg/heading.svg"></i>
                 </div>
                 <div
                     id="headings"
@@ -472,103 +423,68 @@
                     class="position:absolute display:flex align-items:center transition:0.4s width:0px background:gainsboro overflow:hidden height:28px border-radius:5px">
                     <div
                         actions="nodename"
-                        nodekey="h1"
-                        nodetarget="#canvas;"
-                        class="rte-btn"
+                        node-name="h1"
+                        node-target="#canvas;"
                         id="header-1-button">
-                        <i
-                            class="height:20px fill:#505050"
-                            src="./assets/svg/heading.svg"></i
-                        ><sub>1</sub>
+                        <i src="./assets/svg/heading.svg"></i><sub>1</sub>
                     </div>
                     <div
                         actions="nodename"
-                        nodekey="h2"
-                        nodetarget="#canvas;"
-                        class="rte-btn"
+                        node-name="h2"
+                        node-target="#canvas;"
                         id="header-2-button">
-                        <i
-                            class="height:20px fill:#505050"
-                            src="./assets/svg/heading.svg"></i
-                        ><sub>2</sub>
+                        <i src="./assets/svg/heading.svg"></i><sub>2</sub>
                     </div>
                     <div
                         actions="nodename"
-                        nodekey="h3"
-                        nodetarget="#canvas;"
-                        class="rte-btn"
+                        node-name="h3"
+                        node-target="#canvas;"
                         id="header-3-button">
-                        <i
-                            class="height:20px fill:#505050"
-                            src="./assets/svg/heading.svg"></i
-                        ><sub>3</sub>
+                        <i src="./assets/svg/heading.svg"></i><sub>3</sub>
                     </div>
                     <div
                         actions="nodename"
-                        nodekey="h4"
-                        nodetarget="#canvas;"
-                        class="rte-btn"
+                        node-name="h4"
+                        node-target="#canvas;"
                         id="header-4-button">
-                        <i
-                            class="height:20px fill:#505050"
-                            src="./assets/svg/heading.svg"></i
-                        ><sub>4</sub>
+                        <i src="./assets/svg/heading.svg"></i><sub>4</sub>
                     </div>
                     <div
                         actions="nodename"
-                        nodekey="h5"
-                        nodetarget="#canvas;"
-                        class="rte-btn"
+                        node-name="h5"
+                        node-target="#canvas;"
                         id="header-5-button">
-                        <i
-                            class="height:20px fill:#505050"
-                            src="./assets/svg/heading.svg"></i
-                        ><sub>5</sub>
+                        <i src="./assets/svg/heading.svg"></i><sub>5</sub>
                     </div>
                     <div
                         actions="nodename"
-                        nodekey="h6"
-                        nodetarget="#canvas;"
-                        class="rte-btn"
+                        node-name="h6"
+                        node-target="#canvas;"
                         id="header-6-button">
-                        <i
-                            class="height:20px fill:#505050"
-                            src="./assets/svg/heading.svg"></i
-                        ><sub>6</sub>
+                        <i src="./assets/svg/heading.svg"></i><sub>6</sub>
                     </div>
                 </div>
                 <div
-                    class="rte-btn"
                     id="show-controls"
                     show="#sidebar-controls"
                     hide="#sidebar-controls">
-                    <i
-                        class="height:20px fill:#505050"
-                        src="./assets/svg/plus.svg"></i>
+                    <i src="./assets/svg/plus.svg"></i>
                 </div>
                 <div
                     id="sidebar-controls"
                     class="display:flex align-items:center"
                     hidden>
-                    <div class="rte-btn" id="image-button">
-                        <i
-                            class="height:20px fill:#505050"
-                            src="./assets/svg/camera.svg"></i>
+                    <div id="image-button">
+                        <i src="./assets/svg/camera.svg"></i>
                     </div>
-                    <div class="rte-btn" id="video-button">
-                        <i
-                            class="height:20px fill:#505050"
-                            src="./assets/svg/play.svg"></i>
+                    <div id="video-button">
+                        <i src="./assets/svg/play.svg"></i>
                     </div>
-                    <div class="rte-btn" id="tweet-button">
-                        <i
-                            class="height:20px fill:#505050"
-                            src="./assets/svg/twitter.svg"></i>
+                    <div id="tweet-button">
+                        <i src="./assets/svg/twitter.svg"></i>
                     </div>
-                    <div class="rte-btn" id="divider-button">
-                        <i
-                            class="height:20px fill:#505050"
-                            src="./assets/svg/minus.svg"></i>
+                    <div id="divider-button">
+                        <i src="./assets/svg/minus.svg"></i>
                     </div>
                 </div>
             </tools>
@@ -642,7 +558,7 @@
                 { selector: "a.menu_icon span", selectable: false },
                 {
                     selector: "[array], [object], [name]",
-                    label: "{{tagname}} <i class='height:20px fill:#505050' src='./assets/svg/database.svg'></i>",
+                    label: "{{tagname}} <i src='./assets/svg/database.svg'></i>",
                     draggable: true,
                     droppable: true,
                     selectable: true,
diff --git a/superadmin/code-editor/index.html b/superadmin/code-editor/index.html
index 9098e1a..2db6984 100644
--- a/superadmin/code-editor/index.html
+++ b/superadmin/code-editor/index.html
@@ -36,9 +36,7 @@
                 <!-- Modal Controls -->
                 <li class="margin-right:15px">
                     <a actions="closeModal"
-                        ><i
-                            class="height:18px fill:#505050"
-                            src="./assets/svg/times.svg"></i
+                        ><i class="height:18px" src="./assets/svg/times.svg"></i
                     ></a>
                 </li>
                 <li class="margin-right:15px">
@@ -46,14 +44,14 @@
                         <i
                             toggle="./assets/svg/window-restore.svg, ./assets/svg/window-maximize.svg"
                             toggle-attribute="src"
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/window-maximize.svg"></i>
                     </a>
                 </li>
                 <li class="margin-right:15px">
                     <a actions="parkModal"
                         ><i
-                            class="height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/window-minimize.svg"></i
                     ></a>
                 </li>
@@ -62,10 +60,10 @@
                 <li class="margin-right:15px">
                     <a fullscreen>
                         <i
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/expand.svg"></i>
                         <i
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/compress.svg"></i>
                     </a>
                 </li>
@@ -78,9 +76,7 @@
                         array=""
                         object=""
                         key="src"
-                        ><i
-                            class="height:20px fill:#505050"
-                            src="./assets/svg/save.svg"></i
+                        ><i src="./assets/svg/save.svg"></i
                     ></a>
                 </li>
 
@@ -90,9 +86,7 @@
                         actions="state, openModal"
                         modal-src="./modules/form.html"
                         modal-width="320px">
-                        <i
-                            class="display:flex height:18px fill:#505050"
-                            src="./assets/svg/cog.svg"></i>
+                        <i class="height:18px" src="./assets/svg/cog.svg"></i>
                         <div
                             state-array="modules"
                             state-object="5ff747727005da1c27274191"
@@ -108,9 +102,7 @@
                     <a
                         actions="state, openModal"
                         modal-src="./code-editor/index.html">
-                        <i
-                            class="display:flex height:18px fill:#505050"
-                            src="./assets/svg/code.svg"></i>
+                        <i class="height:18px" src="./assets/svg/code.svg"></i>
                         <div
                             state_id="render"
                             state-array="files"
@@ -126,7 +118,7 @@
                         actions="state, openModal"
                         modal-src="./builder/index.html">
                         <i
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/palette.svg"></i>
                         <div
                             state_id="render"
diff --git a/superadmin/dashboard/business-checklist/index.html b/superadmin/dashboard/business-checklist/index.html
index 86a4a18..0f71743 100644
--- a/superadmin/dashboard/business-checklist/index.html
+++ b/superadmin/dashboard/business-checklist/index.html
@@ -33,9 +33,7 @@
             <div class="position:relative padding:10px overflow:hidden">
                 <div class="float:left margin-right:10px">
                     <span class="width:24px height:24px border-width:1px">
-                        <i
-                            class="height:20px fill:#505050"
-                            src="./assets/svg/info.svg"></i>
+                        <i src="./assets/svg/info.svg"></i>
                     </span>
                 </div>
                 <div class="overflow:hidden">
@@ -51,9 +49,7 @@
             <div class="position:relative padding:10px overflow:hidden">
                 <div class="float:left margin-right:10px">
                     <span class="width:24px height:24px border-width:1px">
-                        <i
-                            class="height:20px fill:#505050"
-                            src="./assets/svg/info.svg"></i>
+                        <i src="./assets/svg/info.svg"></i>
                     </span>
                 </div>
                 <div class="overflow:hidden">
@@ -69,9 +65,7 @@
             <div class="position:relative padding:10px overflow:hidden">
                 <div class="float:left margin-right:10px">
                     <span class="width:24px height:24px border-width:1px">
-                        <i
-                            class="height:20px fill:#505050"
-                            src="./assets/svg/info.svg"></i>
+                        <i src="./assets/svg/info.svg"></i>
                     </span>
                 </div>
                 <div class="overflow:hidden">
@@ -89,9 +83,7 @@
             <div class="position:relative padding:10px overflow:hidden">
                 <div class="float:left margin-right:10px">
                     <span class="width:24px height:24px border-width:1px">
-                        <i
-                            class="height:20px fill:#505050"
-                            src="./assets/svg/info.svg"></i>
+                        <i src="./assets/svg/info.svg"></i>
                     </span>
                 </div>
                 <div class="overflow:hidden">
@@ -107,9 +99,7 @@
             <div class="position:relative padding:10px overflow:hidden">
                 <div class="float:left margin-right:10px">
                     <span class="width:24px height:24px border-width:1px">
-                        <i
-                            class="height:20px fill:#505050"
-                            src="./assets/svg/info.svg"></i>
+                        <i src="./assets/svg/info.svg"></i>
                     </span>
                 </div>
                 <div class="overflow:hidden">
@@ -125,9 +115,7 @@
             <div class="position:relative padding:10px overflow:hidden">
                 <div class="float:left margin-right:10px">
                     <span class="width:24px height:24px border-width:1px">
-                        <i
-                            class="height:20px fill:#505050"
-                            src="./assets/svg/info.svg"></i>
+                        <i src="./assets/svg/info.svg"></i>
                     </span>
                 </div>
                 <div class="overflow:hidden">
@@ -146,9 +134,7 @@
             <div class="position:relative padding:10px overflow:hidden">
                 <div class="float:left margin-right:10px">
                     <span class="width:24px height:24px border-width:1px">
-                        <i
-                            class="height:20px fill:#505050"
-                            src="./assets/svg/info.svg"></i>
+                        <i src="./assets/svg/info.svg"></i>
                     </span>
                 </div>
                 <div class="overflow:hidden">
diff --git a/superadmin/dashboard/charts/charts.html b/superadmin/dashboard/charts/charts.html
index bba78ef..44ae411 100644
--- a/superadmin/dashboard/charts/charts.html
+++ b/superadmin/dashboard/charts/charts.html
@@ -73,9 +73,7 @@
                 <!-- Modal Controls -->
                 <li class="margin-right:15px">
                     <a actions="closeModal"
-                        ><i
-                            class="height:18px fill:#505050"
-                            src="./assets/svg/times.svg"></i
+                        ><i class="height:18px" src="./assets/svg/times.svg"></i
                     ></a>
                 </li>
                 <li class="margin-right:15px">
@@ -83,14 +81,14 @@
                         <i
                             toggle="./assets/svg/window-restore.svg, ./assets/svg/window-maximize.svg"
                             toggle-attribute="src"
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/window-maximize.svg"></i>
                     </a>
                 </li>
                 <li class="margin-right:15px">
                     <a actions="parkModal"
                         ><i
-                            class="height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/window-minimize.svg"></i
                     ></a>
                 </li>
@@ -99,10 +97,10 @@
                 <li class="margin-right:15px">
                     <a fullscreen>
                         <i
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/expand.svg"></i>
                         <i
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/compress.svg"></i>
                     </a>
                 </li>
@@ -113,9 +111,7 @@
                         actions="state, openModal"
                         modal-src="./modules/form.html"
                         modal-width="320px">
-                        <i
-                            class="display:flex height:18px fill:#505050"
-                            src="./assets/svg/cog.svg"></i>
+                        <i class="height:18px" src="./assets/svg/cog.svg"></i>
                         <div
                             state_id="module-form"
                             state-array="modules"
@@ -133,9 +129,7 @@
                     <a
                         actions="state, openModal"
                         modal-src="./code-editor/index.html">
-                        <i
-                            class="display:flex height:18px fill:#505050"
-                            src="./assets/svg/code.svg"></i>
+                        <i class="height:18px" src="./assets/svg/code.svg"></i>
                         <div
                             state_id="render"
                             state-array=""
@@ -151,7 +145,7 @@
                         actions="state, openModal"
                         modal-src="./builder/index.html">
                         <i
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/palette.svg"></i>
                         <div
                             state_id="render"
@@ -170,7 +164,7 @@
                         object=""
                         state_id="form-fields">
                         <i
-                            class="height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/trash-alt.svg"></i>
                     </a>
                 </li>
diff --git a/superadmin/dashboard/form.html b/superadmin/dashboard/form.html
index c23044e..2f676c9 100644
--- a/superadmin/dashboard/form.html
+++ b/superadmin/dashboard/form.html
@@ -43,9 +43,7 @@
                 <!-- Modal Controls -->
                 <li class="margin-right:15px">
                     <a actions="closeModal"
-                        ><i
-                            class="height:18px fill:#505050"
-                            src="./assets/svg/times.svg"></i
+                        ><i class="height:18px" src="./assets/svg/times.svg"></i
                     ></a>
                 </li>
                 <li class="margin-right:15px">
@@ -53,14 +51,14 @@
                         <i
                             toggle="./assets/svg/window-restore.svg, ./assets/svg/window-maximize.svg"
                             toggle-attribute="src"
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/window-maximize.svg"></i>
                     </a>
                 </li>
                 <li class="margin-right:15px">
                     <a actions="parkModal"
                         ><i
-                            class="height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/window-minimize.svg"></i
                     ></a>
                 </li>
@@ -69,10 +67,10 @@
                 <li class="margin-right:15px">
                     <a fullscreen>
                         <i
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/expand.svg"></i>
                         <i
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/compress.svg"></i>
                     </a>
                 </li>
@@ -83,9 +81,7 @@
                         actions="state, openModal"
                         modal-src="./modules/form.html"
                         modal-width="320px">
-                        <i
-                            class="display:flex height:18px fill:#505050"
-                            src="./assets/svg/cog.svg"></i>
+                        <i class="height:18px" src="./assets/svg/cog.svg"></i>
                         <div
                             state_id="module-form"
                             state-array="modules"
@@ -103,9 +99,7 @@
                     <a
                         actions="state, openModal"
                         modal-src="./code-editor/index.html">
-                        <i
-                            class="display:flex height:18px fill:#505050"
-                            src="./assets/svg/code.svg"></i>
+                        <i class="height:18px" src="./assets/svg/code.svg"></i>
                         <div
                             state_id="render"
                             state-array=""
@@ -121,7 +115,7 @@
                         actions="state, openModal"
                         modal-src="./builder/index.html">
                         <i
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/palette.svg"></i>
                         <div
                             state_id="render"
@@ -140,7 +134,7 @@
                         object=""
                         state_id="form-fields">
                         <i
-                            class="height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/trash-alt.svg"></i>
                     </a>
                 </li>
@@ -320,9 +314,7 @@ <h5>{{object.email}}</h5>
                 <button
                     actions="save"
                     class="position:absolute bottom:15px right:15px background:dodgerblue grow-hover border-radius:50% padding:15px">
-                    <i
-                        class="height:20px fill:#505050"
-                        src="./assets/svg/save.svg"></i>
+                    <i src="./assets/svg/save.svg"></i>
                 </button>
             </form>
         </main>
diff --git a/superadmin/dashboard/index.html b/superadmin/dashboard/index.html
index df1ebbb..817d289 100644
--- a/superadmin/dashboard/index.html
+++ b/superadmin/dashboard/index.html
@@ -69,9 +69,7 @@
                 <!-- Modal Controls -->
                 <li class="margin-right:15px">
                     <a actions="closeModal"
-                        ><i
-                            class="height:18px fill:#505050"
-                            src="./assets/svg/times.svg"></i
+                        ><i class="height:18px" src="./assets/svg/times.svg"></i
                     ></a>
                 </li>
                 <li class="margin-right:15px">
@@ -79,14 +77,14 @@
                         <i
                             toggle="./assets/svg/window-restore.svg, ./assets/svg/window-maximize.svg"
                             toggle-attribute="src"
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/window-maximize.svg"></i>
                     </a>
                 </li>
                 <li class="margin-right:15px">
                     <a actions="parkModal"
                         ><i
-                            class="height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/window-minimize.svg"></i
                     ></a>
                 </li>
@@ -95,10 +93,10 @@
                 <li class="margin-right:15px">
                     <a fullscreen>
                         <i
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/expand.svg"></i>
                         <i
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/compress.svg"></i>
                     </a>
                 </li>
@@ -109,9 +107,7 @@
                         actions="state, openModal"
                         modal-src="./modules/form.html"
                         modal-width="320px">
-                        <i
-                            class="display:flex height:18px fill:#505050"
-                            src="./assets/svg/cog.svg"></i>
+                        <i class="height:18px" src="./assets/svg/cog.svg"></i>
                         <div
                             state_id="module-form"
                             state-array="modules"
@@ -129,9 +125,7 @@
                     <a
                         actions="state, openModal"
                         modal-src="./code-editor/index.html">
-                        <i
-                            class="display:flex height:18px fill:#505050"
-                            src="./assets/svg/code.svg"></i>
+                        <i class="height:18px" src="./assets/svg/code.svg"></i>
                         <div
                             state_id="render"
                             state-array=""
@@ -147,7 +141,7 @@
                         actions="state, openModal"
                         modal-src="./builder/index.html">
                         <i
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/palette.svg"></i>
                         <div
                             state_id="render"
@@ -166,7 +160,7 @@
                         object=""
                         state_id="form-fields">
                         <i
-                            class="height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/trash-alt.svg"></i>
                     </a>
                 </li>
@@ -244,9 +238,7 @@ <h2>
                     modal-src="./dashboard/form.html"
                     modal-width="320px"
                     modal-color="#229954">
-                    <i
-                        class="height:20px fill:#505050"
-                        src="./assets/svg/plus.svg"></i>
+                    <i src="./assets/svg/plus.svg"></i>
                     <div state_to="form-fields" state-object=""></div>
                     <div
                         state_id="module_id"
diff --git a/superadmin/database/form.html b/superadmin/database/form.html
index 72ce26f..aa658c9 100644
--- a/superadmin/database/form.html
+++ b/superadmin/database/form.html
@@ -43,9 +43,7 @@
                 <!-- Modal Controls -->
                 <li class="margin-right:15px">
                     <a actions="closeModal"
-                        ><i
-                            class="height:18px fill:#505050"
-                            src="./assets/svg/times.svg"></i
+                        ><i class="height:18px" src="./assets/svg/times.svg"></i
                     ></a>
                 </li>
                 <li class="margin-right:15px">
@@ -53,14 +51,14 @@
                         <i
                             toggle="./assets/svg/window-restore.svg, ./assets/svg/window-maximize.svg"
                             toggle-attribute="src"
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/window-maximize.svg"></i>
                     </a>
                 </li>
                 <li class="margin-right:15px">
                     <a actions="parkModal"
                         ><i
-                            class="height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/window-minimize.svg"></i
                     ></a>
                 </li>
@@ -69,10 +67,10 @@
                 <li class="margin-right:15px">
                     <a fullscreen>
                         <i
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/expand.svg"></i>
                         <i
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/compress.svg"></i>
                     </a>
                 </li>
@@ -85,7 +83,7 @@
                         object=""
                         state_id="form-fields">
                         <i
-                            class="height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/trash-alt.svg"></i>
                     </a>
                 </li>
@@ -106,9 +104,7 @@
                 <button
                     actions="save"
                     class="position:absolute bottom:15px right:15px background:dodgerblue grow-hover border-radius:50% padding:15px">
-                    <i
-                        class="height:20px fill:#505050"
-                        src="./assets/svg/save.svg"></i>
+                    <i src="./assets/svg/save.svg"></i>
                 </button>
             </form>
         </main>
diff --git a/superadmin/database/index.html b/superadmin/database/index.html
index 3054ccb..fda3f88 100644
--- a/superadmin/database/index.html
+++ b/superadmin/database/index.html
@@ -53,9 +53,7 @@
                 <!-- Modal Controls -->
                 <li class="margin-right:15px">
                     <a actions="closeModal"
-                        ><i
-                            class="height:18px fill:#505050"
-                            src="./assets/svg/times.svg"></i
+                        ><i class="height:18px" src="./assets/svg/times.svg"></i
                     ></a>
                 </li>
                 <li class="margin-right:15px">
@@ -63,14 +61,14 @@
                         <i
                             toggle="./assets/svg/window-restore.svg, ./assets/svg/window-maximize.svg"
                             toggle-attribute="src"
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/window-maximize.svg"></i>
                     </a>
                 </li>
                 <li class="margin-right:15px">
                     <a actions="parkModal"
                         ><i
-                            class="height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/window-minimize.svg"></i
                     ></a>
                 </li>
@@ -79,10 +77,10 @@
                 <li class="margin-right:15px">
                     <a fullscreen>
                         <i
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/expand.svg"></i>
                         <i
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/compress.svg"></i>
                     </a>
                 </li>
@@ -91,7 +89,7 @@
                 <li class="margin-right:15px">
                     <a actions="delete" array="" state_id="array-view"
                         ><i
-                            class="height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/trash-alt.svg"></i
                     ></a>
                 </li>
@@ -147,7 +145,7 @@
                                         array="{{object.array}}"
                                         object=""
                                         ><i
-                                            class="height:18px fill:#505050"
+                                            class="height:18px"
                                             src="./assets/svg/trash.svg"></i
                                     ></a>
                                 </div>
@@ -172,7 +170,7 @@
                                             value="untitiled" />
                                         <a actions="save, reset"
                                             ><i
-                                                class="height:16px fill:#505050"
+                                                class="height:16px"
                                                 src="./assets/svg/plus.svg"></i
                                         ></a>
                                     </form>
@@ -185,7 +183,7 @@
                                             object="{{object._id}}"
                                             deletekey="{{one.key}}"
                                             ><i
-                                                class="height:18px fill:#505050"
+                                                class="height:18px"
                                                 src="./assets/svg/trash.svg"></i
                                         ></a>
                                     </form>
@@ -223,9 +221,7 @@
                         value="untitled"
                         state_id="module_id" />
                     <a actions="save, reset"
-                        ><i
-                            class="height:16px fill:#505050"
-                            src="./assets/svg/plus.svg"></i
+                        ><i class="height:16px" src="./assets/svg/plus.svg"></i
                     ></a>
                 </form>
             </button>
@@ -270,7 +266,7 @@
                                     value="untitiled" />
                                 <a actions="save, reset"
                                     ><i
-                                        class="height:16px fill:#505050"
+                                        class="height:16px"
                                         src="./assets/svg/plus.svg"></i
                                 ></a>
                             </form>
@@ -281,7 +277,7 @@
                                     object="{{object._id}}"
                                     deletekey="$parents.{{$auto.key}}"
                                     ><i
-                                        class="height:18px fill:#505050"
+                                        class="height:18px"
                                         src="./assets/svg/trash.svg"></i
                                 ></a>
                             </form>
@@ -326,9 +322,7 @@
                 <span
                     class="position:relative bottom:29px right:11px float:right font-size:18px">
                     <a actions="createCollection, reset">
-                        <i
-                            class="height:16px fill:#505050"
-                            src="./assets/svg/plus.svg"></i>
+                        <i class="height:16px" src="./assets/svg/plus.svg"></i>
                     </a>
                 </span>
             </form>
@@ -361,7 +355,7 @@
                                     array="{{array.name}}"
                                     class="display:none">
                                     <i
-                                        class="height:18px fill:#505050"
+                                        class="height:18px"
                                         src="./assets/svg/trash.svg"></i>
                                 </a>
                             </div>
diff --git a/superadmin/files/datatable.html b/superadmin/files/datatable.html
index 545593c..71c221d 100644
--- a/superadmin/files/datatable.html
+++ b/superadmin/files/datatable.html
@@ -52,9 +52,7 @@
                 <!-- Modal Controls -->
                 <li class="margin-right:15px">
                     <a actions="closeModal"
-                        ><i
-                            class="height:18px fill:#505050"
-                            src="./assets/svg/times.svg"></i
+                        ><i class="height:18px" src="./assets/svg/times.svg"></i
                     ></a>
                 </li>
                 <li class="margin-right:15px">
@@ -62,14 +60,14 @@
                         <i
                             toggle="./assets/svg/window-restore.svg, ./assets/svg/window-maximize.svg"
                             toggle-attribute="src"
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/window-maximize.svg"></i>
                     </a>
                 </li>
                 <li class="margin-right:15px">
                     <a actions="parkModal"
                         ><i
-                            class="height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/window-minimize.svg"></i
                     ></a>
                 </li>
@@ -78,10 +76,10 @@
                 <li class="margin-right:15px">
                     <a fullscreen>
                         <i
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/expand.svg"></i>
                         <i
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/compress.svg"></i>
                     </a>
                 </li>
@@ -90,7 +88,7 @@
                 <li class="margin-right:15px">
                     <a actions="delete" array="files"
                         ><i
-                            class="height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/trash-alt.svg"></i
                     ></a>
                 </li>
@@ -123,7 +121,7 @@
                                 placeholder="Path" />
                         </floating-label>
                         <span
-                            class="position:absolute bottom:20px right:20px float:right z-index:6">
+                            class="position:absolute bottom:22px right:20px float:right z-index:6">
                             <a
                                 filter-sort-key="path"
                                 filter-sort-toggle="asc"
@@ -143,7 +141,7 @@
                                 placeholder="Document_id" />
                         </floating-label>
                         <span
-                            class="position:absolute bottom:20px right:20px float:right z-index:6">
+                            class="position:absolute bottom:22px right:20px float:right z-index:6">
                             <a
                                 filter-sort-key="_id"
                                 filter-sort-direction=""
@@ -154,7 +152,7 @@
                                 <i
                                     toggle-attribute="src"
                                     toggle-value="./assets/svg/sort-down.svg, ./assets/svg/sort-up.svg"
-                                    class="display:flex height:18px fill:#505050"
+                                    class="height:18px"
                                     src="./assets/svg/sort.svg"></i>
                             </a>
                         </span>
@@ -171,7 +169,7 @@
                     state_id="datatable">
                     <tr
                         template
-                        class="background:gainsboro:hover border-bottom:1px_solid_darkgray"
+                        class="border-bottom:1px_solid_darkgray"
                         object="{{object._id}}"
                         toggle="selected"
                         state_id="datatable">
@@ -259,9 +257,7 @@ <h4>{{object.path}}</h4>
                 modal-src="./files/form.html"
                 modal-width="320px"
                 modal-color="#229954">
-                <i
-                    class="height:20px fill:#505050"
-                    src="./assets/svg/plus.svg"></i>
+                <i src="./assets/svg/plus.svg"></i>
                 <div state_to="form-fields" state-object=""></div>
                 <div
                     state_id="form"
diff --git a/superadmin/files/form.html b/superadmin/files/form.html
index 2c62f52..b7b3599 100644
--- a/superadmin/files/form.html
+++ b/superadmin/files/form.html
@@ -43,9 +43,7 @@
                 <!-- Modal Controls -->
                 <li class="margin-right:15px">
                     <a actions="closeModal"
-                        ><i
-                            class="height:18px fill:#505050"
-                            src="./assets/svg/times.svg"></i
+                        ><i class="height:18px" src="./assets/svg/times.svg"></i
                     ></a>
                 </li>
                 <li class="margin-right:15px">
@@ -53,14 +51,14 @@
                         <i
                             toggle="./assets/svg/window-restore.svg, ./assets/svg/window-maximize.svg"
                             toggle-attribute="src"
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/window-maximize.svg"></i>
                     </a>
                 </li>
                 <li class="margin-right:15px">
                     <a actions="parkModal"
                         ><i
-                            class="height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/window-minimize.svg"></i
                     ></a>
                 </li>
@@ -69,10 +67,10 @@
                 <li class="margin-right:15px">
                     <a fullscreen>
                         <i
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/expand.svg"></i>
                         <i
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/compress.svg"></i>
                     </a>
                 </li>
@@ -83,9 +81,7 @@
                         actions="state, openModal"
                         modal-src="./modules/form.html"
                         modal-width="320px">
-                        <i
-                            class="display:flex height:18px fill:#505050"
-                            src="./assets/svg/cog.svg"></i>
+                        <i class="height:18px" src="./assets/svg/cog.svg"></i>
                         <div
                             state_id="module-form"
                             state-array="modules"
@@ -103,9 +99,7 @@
                     <a
                         actions="state, openModal"
                         modal-src="./code-editor/index.html">
-                        <i
-                            class="display:flex height:18px fill:#505050"
-                            src="./assets/svg/code.svg"></i>
+                        <i class="height:18px" src="./assets/svg/code.svg"></i>
                         <div
                             state_id="render"
                             state-array=""
@@ -121,7 +115,7 @@
                         actions="state, openModal"
                         modal-src="./builder/index.html">
                         <i
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/palette.svg"></i>
                         <div
                             state_id="render"
@@ -140,7 +134,7 @@
                         object=""
                         state_id="form-fields">
                         <i
-                            class="height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/trash-alt.svg"></i>
                     </a>
                 </li>
@@ -358,18 +352,14 @@ <h4 array="{{object.array}}">
                     hide=".form-fields, .uploader"
                     class="position:absolute bottom:15px left:15px line-height:50px width:50px background:dodgerblue color:#fff font-size:1.5rem grow-hover border-radius:50% border-width:0 box-shadow:0px_2px_10px_0px_rgba(0,_0,_0,_0.4)">
                     <i
-                        class="form-fields height:20px fill:#505050"
+                        class="form-fields"
                         src="./assets/svg/cloud-upload-alt.svg"></i>
-                    <i
-                        class="uploader hidden height:20px fill:#505050"
-                        src="./assets/svg/times.svg"></i>
+                    <i class="uploader hidden" src="./assets/svg/times.svg"></i>
                 </button>
                 <button
                     actions="save"
                     class="position:absolute bottom:15px right:15px line-height:50px width:50px background:dodgerblue color:#fff font-size:1.5rem grow-hover border-radius:50% border-width:0 box-shadow:0px_2px_10px_0px_rgba(0,_0,_0,_0.4)">
-                    <i
-                        class="height:20px fill:#505050"
-                        src="./assets/svg/save.svg"></i>
+                    <i src="./assets/svg/save.svg"></i>
                 </button>
             </form>
         </main>
diff --git a/superadmin/index.html b/superadmin/index.html
index f52760f..5314fc6 100644
--- a/superadmin/index.html
+++ b/superadmin/index.html
@@ -56,20 +56,16 @@
                 <li class="margin-right:15px">
                     <a fullscreen>
                         <i
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/expand.svg"></i>
                         <i
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/compress.svg"></i>
                     </a>
                 </li>
             </ul>
 
             <!-- Avatar -->
-            <div
-                localstorage-get="user_id"
-                localstorage-key="userId"
-                localstorage-selector="cocreate-select, .avatar-wrapper"></div>
             <div class="avatar-wrapper margin:5px">
                 <a
                     class="avatar round"
@@ -80,13 +76,13 @@
                     modal-color="#229954">
                     <span
                         array="users"
-                        object="{{userId}}"
+                        object="$user_id"
                         key="name"
                         class="avatar-name"></span>
                     <span class="avatar-image">
                         <img
                             array="users"
-                            object="{{userId}}"
+                            object="$user_id"
                             key="avatar"
                             onerror="this.style.display='none'"
                             width="40px" />
@@ -101,7 +97,7 @@
                         state_to="form"></div>
                     <div
                         state-array="users"
-                        state-object="{{userId}}"
+                        state-object="$user_id"
                         state_to="form-fields"></div>
                     <div
                         state-array="files"
@@ -112,7 +108,7 @@
                 <div
                     class="avatar-status"
                     array="users"
-                    object="{{userId}}"
+                    object="$user_id"
                     user-status="{'name':'status'}"></div>
             </div>
         </nav>
@@ -152,9 +148,7 @@
                         state-key="src"
                         modal-width="900px"
                         modal-color="#229954">
-                        <i
-                            class="height:20px fill:#505050"
-                            src="./assets/svg/search.svg"></i>
+                        <i src="./assets/svg/search.svg"></i>
                     </a>
                 </span>
             </form>
@@ -173,7 +167,7 @@
                             <span
                                 class="display:flex justify-content:center min-width:50px">
                                 <i
-                                    class="display:flex height:16px fill:#505050"
+                                    class="height:16px"
                                     src="./assets/svg/city.svg"></i>
                             </span>
                             <span>Organization</span>
@@ -191,7 +185,7 @@
                             <span
                                 class="display:flex justify-content:center min-width:50px">
                                 <i
-                                    class="display:flex height:16px fill:#505050"
+                                    class="height:16px"
                                     src="./assets/svg/users.svg"></i>
                             </span>
                             <span>Users</span>
@@ -206,7 +200,7 @@
                                 state-src="./users/form.html"
                                 state-overwrite>
                                 <i
-                                    class="height:16px fill:#505050"
+                                    class="height:16px"
                                     src="./assets/svg/plus.svg"></i>
                             </a>
                         </div>
@@ -223,7 +217,7 @@
                             <span
                                 class="display:flex justify-content:center min-width:50px">
                                 <i
-                                    class="display:flex height:16px fill:#505050"
+                                    class="height:16px"
                                     src="./assets/svg/key.svg"></i>
                             </span>
                             <span>Keys</span>
@@ -238,7 +232,7 @@
                                 state-src="./keys/form.html"
                                 state-overwrite>
                                 <i
-                                    class="height:16px fill:#505050"
+                                    class="height:16px"
                                     src="./assets/svg/plus.svg"></i>
                             </a>
                         </div>
@@ -255,7 +249,7 @@
                             <span
                                 class="display:flex justify-content:center min-width:50px">
                                 <i
-                                    class="display:flex height:16px fill:#505050"
+                                    class="height:16px"
                                     src="./assets/svg/database.svg"></i>
                             </span>
                             <span>Database</span>
@@ -270,7 +264,7 @@
                                 state-src="./database/form.html"
                                 state-overwrite>
                                 <i
-                                    class="height:16px fill:#505050"
+                                    class="height:16px"
                                     src="./assets/svg/plus.svg"></i>
                             </a>
                         </div>
@@ -287,7 +281,7 @@
                             <span
                                 class="display:flex justify-content:center min-width:50px">
                                 <i
-                                    class="display:flex height:16px fill:#505050"
+                                    class="height:16px"
                                     src="./assets/svg/folder.svg"></i>
                             </span>
                             <span>Files</span>
@@ -302,7 +296,7 @@
                                 state-src="./files/form.html"
                                 state-overwrite>
                                 <i
-                                    class="height:16px fill:#505050"
+                                    class="height:16px"
                                     src="./assets/svg/plus.svg"></i>
                             </a>
                         </div>
@@ -319,7 +313,7 @@
                             <span
                                 class="display:flex justify-content:center min-width:50px">
                                 <i
-                                    class="display:flex height:16px fill:#505050"
+                                    class="height:16px"
                                     src="./assets/svg/desktop.svg"></i>
                             </span>
                             <span>Sites &amp; Apps</span>
@@ -334,7 +328,7 @@
                                 state-src="./users/datatable.html"
                                 state-overwrite>
                                 <i
-                                    class="height:16px fill:#505050"
+                                    class="height:16px"
                                     src="./assets/svg/plus.svg"></i>
                             </a>
                         </div>
@@ -351,7 +345,7 @@
                         <span
                             class="display:flex justify-content:center min-width:50px">
                             <i
-                                class="display:flex height:16px fill:#505050"
+                                class="height:16px"
                                 src="./assets/svg/sign-out-alt.svg"></i>
                         </span>
                         <span>Sign Out</span>
diff --git a/superadmin/keys/datatable.html b/superadmin/keys/datatable.html
index 55ec50d..d09f824 100644
--- a/superadmin/keys/datatable.html
+++ b/superadmin/keys/datatable.html
@@ -54,7 +54,7 @@
                     <li class="margin-right:15px">
                         <a actions="closeModal"
                             ><i
-                                class="height:18px fill:#505050"
+                                class="height:18px"
                                 src="./assets/svg/times.svg"></i
                         ></a>
                     </li>
@@ -63,14 +63,14 @@
                             <i
                                 toggle="./assets/svg/window-restore.svg, ./assets/svg/window-maximize.svg"
                                 toggle-attribute="src"
-                                class="display:flex height:18px fill:#505050"
+                                class="height:18px"
                                 src="./assets/svg/window-maximize.svg"></i>
                         </a>
                     </li>
                     <li class="margin-right:15px">
                         <a actions="parkModal"
                             ><i
-                                class="height:18px fill:#505050"
+                                class="height:18px"
                                 src="./assets/svg/window-minimize.svg"></i
                         ></a>
                     </li>
@@ -84,7 +84,7 @@
                     <li class="margin-right:15px">
                         <a actions="delete" array="keys"
                             ><i
-                                class="height:18px fill:#505050"
+                                class="height:18px"
                                 src="./assets/svg/trash-alt.svg"></i
                         ></a>
                     </li>
@@ -115,7 +115,7 @@
                                     placeholder="Name" />
                             </floating-label>
                             <span
-                                class="position:absolute bottom:20px right:20px float:right z-index:6">
+                                class="position:absolute bottom:22px right:20px float:right z-index:6">
                                 <a
                                     filter-sort-key="name"
                                     filter-sort-direction="asc"
@@ -125,7 +125,7 @@
                                     <i
                                         toggle-attribute="src"
                                         toggle-value="./assets/svg/sort-down.svg, ./assets/svg/sort-up.svg"
-                                        class="display:flex height:18px fill:#505050"
+                                        class="height:18px"
                                         src="./assets/svg/sort.svg"></i>
                                 </a>
                             </span>
@@ -141,7 +141,7 @@
                                     placeholder="Type" />
                             </floating-label>
                             <span
-                                class="position:absolute bottom:20px right:20px float:right z-index:6">
+                                class="position:absolute bottom:22px right:20px float:right z-index:6">
                                 <a
                                     filter-sort-key="type"
                                     filter-sort-direction=""
@@ -151,7 +151,7 @@
                                     <i
                                         toggle-attribute="src"
                                         toggle-value="./assets/svg/sort-down.svg, ./assets/svg/sort-up.svg"
-                                        class="display:flex height:18px fill:#505050"
+                                        class="height:18px"
                                         src="./assets/svg/sort.svg"></i>
                                 </a>
                             </span>
@@ -167,7 +167,7 @@
                                     placeholder="Key" />
                             </floating-label>
                             <span
-                                class="position:absolute bottom:20px right:20px float:right z-index:6">
+                                class="position:absolute bottom:22px right:20px float:right z-index:6">
                                 <a
                                     filter-sort-key="key"
                                     filter-sort-direction=""
@@ -177,7 +177,7 @@
                                     <i
                                         toggle-attribute="src"
                                         toggle-value="./assets/svg/sort-down.svg, ./assets/svg/sort-up.svg"
-                                        class="display:flex height:18px fill:#505050"
+                                        class="height:18px"
                                         src="./assets/svg/sort.svg"></i>
                                 </a>
                             </span>
@@ -193,7 +193,7 @@
                                     placeholder="Document_id" />
                             </floating-label>
                             <span
-                                class="position:absolute bottom:20px right:20px float:right z-index:6">
+                                class="position:absolute bottom:22px right:20px float:right z-index:6">
                                 <a
                                     filter-sort-key="_id"
                                     filter-sort-direction=""
@@ -203,7 +203,7 @@
                                     <i
                                         toggle-attribute="src"
                                         toggle-value="./assets/svg/sort-down.svg, ./assets/svg/sort-up.svg"
-                                        class="display:flex height:18px fill:#505050"
+                                        class="height:18px"
                                         src="./assets/svg/sort.svg"></i>
                                 </a>
                             </span>
@@ -216,7 +216,7 @@
                         filter-sort-direction="asc"
                         render-selector="template">
                         <tr
-                            class="background:gainsboro:hover border-bottom:1px_solid_darkgray"
+                            class="border-bottom:1px_solid_darkgray"
                             template
                             object="{{object._id}}"
                             toggle="selected">
@@ -341,9 +341,7 @@ <h4>{{object.name}}</h4>
                 modal-src="./keys/form.html"
                 modal-width="320px"
                 modal-color="#229954">
-                <i
-                    class="height:20px fill:#505050"
-                    src="./assets/svg/plus.svg"></i>
+                <i src="./assets/svg/plus.svg"></i>
                 <div state_to="form-fields" state-object=""></div>
                 <div
                     state_id="form"
diff --git a/superadmin/keys/form.html b/superadmin/keys/form.html
index 134ea22..dcd9a72 100644
--- a/superadmin/keys/form.html
+++ b/superadmin/keys/form.html
@@ -64,9 +64,7 @@
             <button
                 actions="save"
                 class="position:absolute bottom:15px right:15px bg-blue grow-hover round opacity-08">
-                <i
-                    class="height:20px fill:#505050"
-                    src="./assets/svg/save.svg"></i>
+                <i src="./assets/svg/save.svg"></i>
             </button>
         </form>
 
diff --git a/superadmin/organizations/creator.html b/superadmin/organizations/creator.html
index 24de363..2751cf8 100644
--- a/superadmin/organizations/creator.html
+++ b/superadmin/organizations/creator.html
@@ -70,10 +70,7 @@
                         <div class="color:blue font-size:24px">
                             <p id="ava1">
                                 Hey,
-                                <span
-                                    object="{{userId}}"
-                                    key="name"
-                                    array="users"
+                                <span object="$user_id" key="name" array="users"
                                     >First Name</span
                                 >! Enter your new organization's name. Don't
                                 worry if you are not sure, you can allways
@@ -81,10 +78,7 @@
                             </p>
                             <p id="ava2" hidden>
                                 Great,
-                                <span
-                                    object="{{userId}}"
-                                    key="name"
-                                    array="users"
+                                <span object="$user_id" key="name" array="users"
                                     >First Name</span
                                 >! Let’s choose an industry so I can begin to
                                 understand what we will be doing.
@@ -103,20 +97,18 @@
                     <form realtime="false">
                         <div id="step1">
                             <div
-                                class="overflow:hidden padding:0px_25px background:white">
+                                class="overflow:hidden padding:0px_25px background:white background:#222@dark">
                                 <div
                                     class="float:left width:75% padding-top:25px">
                                     <h3>Step 1 / 3</h3>
                                 </div>
                                 <div
-                                    class="float:right width:25% padding-top:5px font-size:70px line-height:100px text-align:right color:very-light-gray">
-                                    <i
-                                        class="fill:#505050"
-                                        src="./assets/svg/store.svg"></i>
+                                    class="float:right width:25% padding-top:5px font-size:70px line-height:100px text-align:right">
+                                    <i src="./assets/svg/store.svg"></i>
                                 </div>
                             </div>
                             <div
-                                class="padding:25px background:gainsboro text-align:left">
+                                class="padding:25px background:gainsboro background:#444@dark text-align:left">
                                 <input
                                     type="text"
                                     id="org-name"
@@ -138,20 +130,20 @@ <h3>Step 1 / 3</h3>
 
                         <div id="step2" hidden>
                             <div
-                                class="overflow:hidden padding:0px_25px background:white">
+                                class="overflow:hidden padding:0px_25px background:white background:#222@dark">
                                 <div
                                     class="float:left width:75% padding-top:25px">
                                     <h3>Step 2 / 3</h3>
                                 </div>
                                 <div
-                                    class="float:right width:25% padding-top:5px font-size:70px line-height:100px text-align:right color:very-light-gray">
+                                    class="float:right width:25% padding-top:5px font-size:70px line-height:100px text-align:right">
                                     <i
-                                        class="height:70px fill:#505050"
+                                        class="height:70px"
                                         src="./assets/svg/industry.svg"></i>
                                 </div>
                             </div>
                             <div
-                                class="padding:25px background:gainsboro text-align:left">
+                                class="padding:25px background:gainsboro background:#444@dark text-align:left">
                                 <!-- Industry select -->
                                 <cocreate-select
                                     sortable
@@ -203,20 +195,20 @@ <h3>Step 2 / 3</h3>
 
                         <div id="step3" hidden>
                             <div
-                                class="overflow:hidden padding:0px_25px background:white">
+                                class="overflow:hidden padding:0px_25px background:white background:#222@dark">
                                 <div
                                     class="float:left width:75% padding-top:25px">
                                     <h3>Step 3 / 3</h3>
                                 </div>
                                 <div
-                                    class="float:right width:25% padding-top:5px font-size:70px line-height:100px text-align:right color:very-light-gray">
+                                    class="float:right width:25% padding-top:5px font-size:70px line-height:100px text-align:right">
                                     <i
-                                        class="height:70px fill:#505050"
+                                        class="height:70px"
                                         src="./assets/svg/key.svg"></i>
                                 </div>
                             </div>
                             <div
-                                class="padding:25px background:gainsboro text-align:left">
+                                class="padding:25px background:gainsboro background:#444@dark text-align:left">
                                 <!-- API key  -->
                                 <input
                                     type="hidden"
diff --git a/superadmin/organizations/form.html b/superadmin/organizations/form.html
index 85ab00b..d2b365a 100644
--- a/superadmin/organizations/form.html
+++ b/superadmin/organizations/form.html
@@ -43,9 +43,7 @@
                 <!-- Modal Controls -->
                 <li class="margin-right:15px">
                     <a actions="closeModal"
-                        ><i
-                            class="height:18px fill:#505050"
-                            src="./assets/svg/times.svg"></i
+                        ><i class="height:18px" src="./assets/svg/times.svg"></i
                     ></a>
                 </li>
                 <li class="margin-right:15px">
@@ -53,14 +51,14 @@
                         <i
                             toggle="./assets/svg/window-restore.svg, ./assets/svg/window-maximize.svg"
                             toggle-attribute="src"
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/window-maximize.svg"></i>
                     </a>
                 </li>
                 <li class="margin-right:15px">
                     <a actions="parkModal"
                         ><i
-                            class="height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/window-minimize.svg"></i
                     ></a>
                 </li>
@@ -69,10 +67,10 @@
                 <li class="margin-right:15px">
                     <a fullscreen>
                         <i
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/expand.svg"></i>
                         <i
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/compress.svg"></i>
                     </a>
                 </li>
@@ -85,7 +83,7 @@
                         object=""
                         state_id="form-fields">
                         <i
-                            class="height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/trash-alt.svg"></i>
                     </a>
                 </li>
@@ -152,9 +150,7 @@
                 <button
                     actions="save"
                     class="position:absolute bottom:15px right:15px background:dodgerblue grow-hover border-radius:50% padding:15px">
-                    <i
-                        class="height:20px fill:#505050"
-                        src="./assets/svg/save.svg"></i>
+                    <i src="./assets/svg/save.svg"></i>
                 </button>
             </form>
         </main>
diff --git a/superadmin/signin.html b/superadmin/signin.html
index 4adb75c..b3f99de 100644
--- a/superadmin/signin.html
+++ b/superadmin/signin.html
@@ -69,19 +69,17 @@
                 class="flex-grow:1 min-width:300px max-width:400px margin:15px">
                 <form realtime="false" array="users" id="signin">
                     <div
-                        class="overflow:hidden padding:0px_25px background:white">
+                        class="overflow:hidden padding:0px_25px background:white background:#222@dark">
                         <div class="float:left width:75% padding-top:25px">
                             <h3>Sign In</h3>
                         </div>
                         <div
-                            class="float:right width:25% padding-top:5px font-size:70px line-height:100px text-align:right color:very-light-gray">
-                            <i
-                                class="height:20px fill:#505050"
-                                src="./assets/svg/sign-in-alt.svg"></i>
+                            class="float:right width:25% padding-top:5px font-size:70px line-height:100px text-align:right">
+                            <i src="./assets/svg/sign-in-alt.svg"></i>
                         </div>
                     </div>
                     <div
-                        class="padding:25px background:gainsboro text-align:left">
+                        class="padding:25px background:gainsboro background:#444@dark text-align:left">
                         <floating-label>
                             <input
                                 type="email"
@@ -111,19 +109,17 @@ <h3>Sign In</h3>
 
                 <form array="users" hidden id="forgotpass">
                     <div
-                        class="overflow:hidden padding:0px_25px background:white">
+                        class="overflow:hidden padding:0px_25px background:white background:#222@dark">
                         <div class="float:left width:75% padding-top:25px">
                             <h3>Password Recovery</h3>
                         </div>
                         <div
-                            class="float:right width:25% padding-top:5px font-size:70px line-height:100px text-align:right color:very-light-gray">
-                            <i
-                                class="height:20px fill:#505050"
-                                src="./assets/svg/key.svg"></i>
+                            class="float:right width:25% padding-top:5px font-size:70px line-height:100px text-align:right">
+                            <i src="./assets/svg/key.svg"></i>
                         </div>
                     </div>
                     <div
-                        class="padding:25px background:gainsboro text-align:left">
+                        class="padding:25px background:gainsboro background:#444@dark text-align:left">
                         <floating-label>
                             <input
                                 type="email"
diff --git a/superadmin/signup.html b/superadmin/signup.html
index 8ddd42d..81d11e3 100644
--- a/superadmin/signup.html
+++ b/superadmin/signup.html
@@ -56,20 +56,20 @@
 					    <input type="hidden" localstorage-get="organization_id" input-attribute="object" input-selector="[array='organizations']"> -->
 
                         <div
-                            class="overflow:hidden padding:0px_25px background:white">
+                            class="overflow:hidden padding:0px_25px background:white background:#222@dark">
                             <div class="float:left width:75% padding-top:25px">
                                 <!-- <h3>Step 3 / 3</h3> -->
                             </div>
                             <div
-                                class="float:right width:25% padding-top:5px font-size:70px line-height:100px text-align:right color:very-light-gray">
+                                class="float:right width:25% padding-top:5px font-size:70px line-height:100px text-align:right">
                                 <i
-                                    class="height:70px fill:#505050"
+                                    class="height:70px"
                                     src="./assets/svg/key.svg">
                                 </i>
                             </div>
                         </div>
                         <div
-                            class="padding:25px background:gainsboro text-align:left">
+                            class="padding:25px background:gainsboro background:#444@dark text-align:left">
                             <floating-label>
                                 <input
                                     id="fistName"
@@ -158,19 +158,19 @@
                         autocomplete="off"
                         hidden>
                         <div
-                            class="overflow:hidden padding:0px_25px background:white">
+                            class="overflow:hidden padding:0px_25px background:white background:#222@dark">
                             <div class="float:left width:75% padding-top:25px">
                                 <!-- <h3>Step 3 / 3</h3> -->
                             </div>
                             <div
-                                class="float:right width:25% padding-top:5px font-size:70px line-height:100px text-align:right color:very-light-gray">
+                                class="float:right width:25% padding-top:5px font-size:70px line-height:100px text-align:right">
                                 <i
-                                    class="height:70px fill:#505050"
+                                    class="height:70px"
                                     src="./assets/svg/key.svg"></i>
                             </div>
                         </div>
                         <div
-                            class="padding:25px background:gainsboro text-align:left">
+                            class="padding:25px background:gainsboro background:#444@dark text-align:left">
                             <floating-label>
                                 <input
                                     array="organizations"
diff --git a/superadmin/users/datatable.html b/superadmin/users/datatable.html
index e310459..a15bdee 100644
--- a/superadmin/users/datatable.html
+++ b/superadmin/users/datatable.html
@@ -50,9 +50,7 @@
                 <!-- Modal Controls -->
                 <li class="margin-right:15px">
                     <a actions="closeModal"
-                        ><i
-                            class="height:18px fill:#505050"
-                            src="./assets/svg/times.svg"></i
+                        ><i class="height:18px" src="./assets/svg/times.svg"></i
                     ></a>
                 </li>
                 <li class="margin-right:15px">
@@ -60,14 +58,14 @@
                         <i
                             toggle="./assets/svg/window-restore.svg, ./assets/svg/window-maximize.svg"
                             toggle-attribute="src"
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/window-maximize.svg"></i>
                     </a>
                 </li>
                 <li class="margin-right:15px">
                     <a actions="parkModal"
                         ><i
-                            class="height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/window-minimize.svg"></i
                     ></a>
                 </li>
@@ -76,10 +74,10 @@
                 <li class="margin-right:15px">
                     <a fullscreen>
                         <i
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/expand.svg"></i>
                         <i
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/compress.svg"></i>
                     </a>
                 </li>
@@ -88,7 +86,7 @@
                 <li class="margin-right:15px">
                     <a actions="delete" array="users" state_id="datatable">
                         <i
-                            class="height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/trash-alt.svg"></i>
                     </a>
                 </li>
@@ -117,7 +115,7 @@
                                 placeholder="Name" />
                         </floating-label>
                         <span
-                            class="position:absolute bottom:20px right:20px float:right z-index:6">
+                            class="position:absolute bottom:22px right:20px float:right z-index:6">
                             <a
                                 filter-sort-key="name"
                                 filter-sort-direction="asc"
@@ -128,7 +126,7 @@
                                 <i
                                     toggle-attribute="src"
                                     toggle-value="./assets/svg/sort-down.svg, ./assets/svg/sort-up.svg"
-                                    class="display:flex height:18px fill:#505050"
+                                    class="height:18px"
                                     src="./assets/svg/sort.svg"></i>
                             </a>
                         </span>
@@ -145,7 +143,7 @@
                                 placeholder="Document_id" />
                         </floating-label>
                         <span
-                            class="position:absolute bottom:20px right:20px float:right z-index:6">
+                            class="position:absolute bottom:22px right:20px float:right z-index:6">
                             <a
                                 filter-sort-key="_id"
                                 filter-sort-direction=""
@@ -156,7 +154,7 @@
                                 <i
                                     toggle-attribute="src"
                                     toggle-value="./assets/svg/sort-down.svg, ./assets/svg/sort-up.svg"
-                                    class="display:flex height:18px fill:#505050"
+                                    class="height:18px"
                                     src="./assets/svg/sort.svg"></i>
                             </a>
                         </span>
@@ -165,7 +163,7 @@
 
                 <tbody render-selector="" array="users" state_id="datatable">
                     <tr
-                        class="background:gainsboro:hover border-bottom:1px_solid_darkgray"
+                        class="border-bottom:1px_solid_darkgray"
                         template
                         state_id="datatable"
                         object="{{object._id}}"
@@ -245,9 +243,7 @@ <h4>{{object.name}}</h4>
                 modal-src="./users/form.html"
                 modal-width="320px"
                 modal-color="#229954">
-                <i
-                    class="height:20px fill:#505050"
-                    src="./assets/svg/plus.svg"></i>
+                <i src="./assets/svg/plus.svg"></i>
                 <div state_to="form-fields" state-object=""></div>
                 <div
                     state_id="form"
diff --git a/superadmin/users/form.html b/superadmin/users/form.html
index 3e7ce6b..a91bad4 100644
--- a/superadmin/users/form.html
+++ b/superadmin/users/form.html
@@ -37,9 +37,7 @@
                 <!-- Modal Controls -->
                 <li class="margin-right:15px">
                     <a actions="closeModal"
-                        ><i
-                            class="height:18px fill:#505050"
-                            src="./assets/svg/times.svg"></i
+                        ><i class="height:18px" src="./assets/svg/times.svg"></i
                     ></a>
                 </li>
                 <li class="margin-right:15px">
@@ -47,14 +45,14 @@
                         <i
                             toggle="./assets/svg/window-restore.svg, ./assets/svg/window-maximize.svg"
                             toggle-attribute="src"
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/window-maximize.svg"></i>
                     </a>
                 </li>
                 <li class="margin-right:15px">
                     <a actions="parkModal"
                         ><i
-                            class="height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/window-minimize.svg"></i
                     ></a>
                 </li>
@@ -63,10 +61,10 @@
                 <li class="margin-right:15px">
                     <a fullscreen>
                         <i
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/expand.svg"></i>
                         <i
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/compress.svg"></i>
                     </a>
                 </li>
@@ -77,9 +75,7 @@
                         actions="state, openModal"
                         modal-src="./modules/form.html"
                         modal-width="320px">
-                        <i
-                            class="display:flex height:18px fill:#505050"
-                            src="./assets/svg/cog.svg"></i>
+                        <i class="height:18px" src="./assets/svg/cog.svg"></i>
                         <div
                             state_id="module-form"
                             state-array="modules"
@@ -97,9 +93,7 @@
                     <a
                         actions="state, openModal"
                         modal-src="./code-editor/index.html">
-                        <i
-                            class="display:flex height:18px fill:#505050"
-                            src="./assets/svg/code.svg"></i>
+                        <i class="height:18px" src="./assets/svg/code.svg"></i>
                         <div
                             state_id="render"
                             state-array=""
@@ -115,7 +109,7 @@
                         actions="state, openModal"
                         modal-src="./builder/index.html">
                         <i
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/palette.svg"></i>
                         <div
                             state_id="render"
@@ -134,7 +128,7 @@
                         object=""
                         state_id="form-fields">
                         <i
-                            class="height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/trash-alt.svg"></i>
                     </a>
                 </li>
@@ -255,9 +249,7 @@ <h5>{{object._id}}</h5>
                 <button
                     actions="save"
                     class="position:absolute bottom:15px right:15px padding:15px background:dodgerblue color:#fff font-size:1.5rem grow-hover border-radius:50% border-width:0 box-shadow:0px_2px_10px_0px_rgba(0,_0,_0,_0.4)">
-                    <i
-                        class="height:20px fill:#505050"
-                        src="./assets/svg/save.svg"></i>
+                    <i src="./assets/svg/save.svg"></i>
                 </button>
             </form>
         </main>
diff --git a/superadmin/users/profile.html b/superadmin/users/profile.html
index bbed184..6c7cb90 100644
--- a/superadmin/users/profile.html
+++ b/superadmin/users/profile.html
@@ -45,9 +45,7 @@
                 <!-- Modal Controls -->
                 <li class="margin-right:15px">
                     <a actions="closeModal"
-                        ><i
-                            class="height:18px fill:#505050"
-                            src="./assets/svg/times.svg"></i
+                        ><i class="height:18px" src="./assets/svg/times.svg"></i
                     ></a>
                 </li>
                 <li class="margin-right:15px">
@@ -55,14 +53,14 @@
                         <i
                             toggle="./assets/svg/window-restore.svg, ./assets/svg/window-maximize.svg"
                             toggle-attribute="src"
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/window-maximize.svg"></i>
                     </a>
                 </li>
                 <li class="margin-right:15px">
                     <a actions="parkModal"
                         ><i
-                            class="height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/window-minimize.svg"></i
                     ></a>
                 </li>
@@ -71,10 +69,10 @@
                 <li class="margin-right:15px">
                     <a fullscreen>
                         <i
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/expand.svg"></i>
                         <i
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/compress.svg"></i>
                     </a>
                 </li>
@@ -85,9 +83,7 @@
                         actions="state, openModal"
                         modal-src="./modules/form.html"
                         modal-width="320px">
-                        <i
-                            class="display:flex height:18px fill:#505050"
-                            src="./assets/svg/cog.svg"></i>
+                        <i class="height:18px" src="./assets/svg/cog.svg"></i>
                         <div
                             state_id="module-form"
                             state-array="modules"
@@ -105,9 +101,7 @@
                     <a
                         actions="state, openModal"
                         modal-src="./code-editor/index.html">
-                        <i
-                            class="display:flex height:18px fill:#505050"
-                            src="./assets/svg/code.svg"></i>
+                        <i class="height:18px" src="./assets/svg/code.svg"></i>
                         <div
                             state_id="render"
                             state-array=""
@@ -123,7 +117,7 @@
                         actions="state, openModal"
                         modal-src="./builder/index.html">
                         <i
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/palette.svg"></i>
                         <div
                             state_id="render"
@@ -149,16 +143,14 @@
                     </div>
                 </span>
 
-                <!--<a class="add-button blue" id="upload" show="#save" hide="#upload"><i class="height:16px fill:#505050" src="./assets/svg/images.svg"></i></a>-->
+                <!--<a class="add-button blue" id="upload" show="#save" hide="#upload"><i class="height:16px" src="./assets/svg/images.svg"></i></a>-->
                 <button
                     class="imageUpload position:relative left:20px bottom:20px height:40px width:40px background:dodgerblue border-radius:50% color:#fff grow-hover"
                     data-uploader_id="image"
                     id="upload"
                     show="#save,#image"
                     hide="#upload,#profile-image">
-                    <i
-                        class="height:16px fill:#505050"
-                        src="./assets/svg/images.svg"></i>
+                    <i class="height:16px" src="./assets/svg/images.svg"></i>
                 </button>
                 <button
                     class="imageSave position:relative left:20px bottom:20px height:40px width:40px background:yellowgreen border-radius:50% color:#fff grow-hover"
@@ -167,9 +159,7 @@
                     id="save"
                     show="#uploaad"
                     hide="#save">
-                    <i
-                        class="height:20px fill:#505050"
-                        src="./assets/svg/save.svg"></i>
+                    <i src="./assets/svg/save.svg"></i>
                 </button>
                 <div
                     class="position:relative bottom:80px width:100% color:#fff font-size:26px padding:6px_35px background:black opacity:0.4 height:40px">
@@ -177,7 +167,7 @@
                         class="float:right"
                         array="users"
                         key="name"
-                        object="{{userId}}"
+                        object="$user_id"
                         localstorage-get="user_id"
                         localstorage-key="userId"
                         >test</span
@@ -210,9 +200,7 @@
         <button
             actions="save"
             class="position:absolute bottom:15px right:15px background:dodgerblue grow-hover border-radius:50%">
-            <i
-                class="height:20px fill:#505050"
-                src="./assets/svg/pencil-alt.svg"></i>
+            <i src="./assets/svg/pencil-alt.svg"></i>
         </button>
 
         <form id="image1" class="display:none">
diff --git a/superadmin/websites/form.html b/superadmin/websites/form.html
index 4adc270..50bc20e 100644
--- a/superadmin/websites/form.html
+++ b/superadmin/websites/form.html
@@ -52,9 +52,7 @@
                 <!-- Modal Controls -->
                 <li class="margin-right:15px">
                     <a actions="closeModal"
-                        ><i
-                            class="height:18px fill:#505050"
-                            src="./assets/svg/times.svg"></i
+                        ><i class="height:18px" src="./assets/svg/times.svg"></i
                     ></a>
                 </li>
                 <li class="margin-right:15px">
@@ -62,14 +60,14 @@
                         <i
                             toggle="./assets/svg/window-restore.svg, ./assets/svg/window-maximize.svg"
                             toggle-attribute="src"
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/window-maximize.svg"></i>
                     </a>
                 </li>
                 <li class="margin-right:15px">
                     <a actions="parkModal"
                         ><i
-                            class="height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/window-minimize.svg"></i
                     ></a>
                 </li>
@@ -78,10 +76,10 @@
                 <li class="margin-right:15px">
                     <a fullscreen>
                         <i
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/expand.svg"></i>
                         <i
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/compress.svg"></i>
                     </a>
                 </li>
@@ -94,7 +92,7 @@
                         object=""
                         state_id="form-fields">
                         <i
-                            class="height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/trash-alt.svg"></i>
                     </a>
                 </li>
@@ -161,9 +159,7 @@
                 <button
                     actions="save"
                     class="position:absolute bottom:15px right:15px background:dodgerblue grow-hover border-radius:50% padding:15px">
-                    <i
-                        class="height:20px fill:#505050"
-                        src="./assets/svg/save.svg"></i>
+                    <i src="./assets/svg/save.svg"></i>
                 </button>
             </form>
 
@@ -178,7 +174,7 @@
                         state-array="files"
                         state_to="page-templates"
                         ><i
-                            class="height:16px fill:#505050"
+                            class="height:16px"
                             src="./assets/svg/plus-square.svg"></i
                     ></a>
                 </div>
@@ -236,7 +232,7 @@
                                 object="{{object._id}}"
                                 class="float:right padding:5px">
                                 <i
-                                    class="height:18px fill:#505050"
+                                    class="height:18px"
                                     src="./assets/svg/trash.svg"></i>
                             </a>
                             <a
@@ -244,7 +240,7 @@
                                 modal-src="./builder/index.html"
                                 class="float:right padding:5px">
                                 <i
-                                    class="display:flex height:18px fill:#505050"
+                                    class="height:18px"
                                     src="./assets/svg/palette.svg"></i>
                                 <div
                                     state-array="{{object.array}}"
@@ -258,7 +254,7 @@
                                 modal-src="./code-editor/index.html"
                                 class="float:right padding:5px">
                                 <i
-                                    class="display:flex height:18px fill:#505050"
+                                    class="height:18px"
                                     src="./assets/svg/code.svg"></i>
                                 <div
                                     state_id="render"
@@ -326,9 +322,7 @@
                                     hide="#page-templates"
                                     state-array="files"
                                     state_to="website_id">
-                                    <i
-                                        class="height:20px fill:#505050"
-                                        src="./assets/svg/plus.svg"></i>
+                                    <i src="./assets/svg/plus.svg"></i>
                                 </button>
                             </form>
                             <div
diff --git a/superadmin/websites/list.html b/superadmin/websites/list.html
index 6692750..d9d9748 100644
--- a/superadmin/websites/list.html
+++ b/superadmin/websites/list.html
@@ -44,9 +44,7 @@
                 <!-- Modal Controls -->
                 <li class="margin-right:15px">
                     <a actions="closeModal"
-                        ><i
-                            class="height:18px fill:#505050"
-                            src="./assets/svg/times.svg"></i
+                        ><i class="height:18px" src="./assets/svg/times.svg"></i
                     ></a>
                 </li>
                 <li class="margin-right:15px">
@@ -54,14 +52,14 @@
                         <i
                             toggle="./assets/svg/window-restore.svg, ./assets/svg/window-maximize.svg"
                             toggle-attribute="src"
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/window-maximize.svg"></i>
                     </a>
                 </li>
                 <li class="margin-right:15px">
                     <a actions="parkModal"
                         ><i
-                            class="height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/window-minimize.svg"></i
                     ></a>
                 </li>
@@ -70,10 +68,10 @@
                 <li class="margin-right:15px">
                     <a fullscreen>
                         <i
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/expand.svg"></i>
                         <i
-                            class="display:flex height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/compress.svg"></i>
                     </a>
                 </li>
@@ -82,7 +80,7 @@
                 <li class="margin-right:15px">
                     <a actions="delete" array="" state_id="datatable"
                         ><i
-                            class="height:18px fill:#505050"
+                            class="height:18px"
                             src="./assets/svg/trash-alt.svg"></i
                     ></a>
                 </li>
@@ -126,7 +124,7 @@
                                 actions="state, openModal"
                                 modal-src="./builder/index.html">
                                 <i
-                                    class="display:flex height:18px fill:#505050"
+                                    class="height:18px"
                                     src="./assets/svg/palette.svg"></i>
                                 <div
                                     state-array="files"
@@ -182,9 +180,7 @@
                 modal-src="./websites/form.html"
                 modal-width="320px"
                 modal-color="#229954">
-                <i
-                    class="height:20px fill:#505050"
-                    src="./assets/svg/plus.svg"></i>
+                <i src="./assets/svg/plus.svg"></i>
                 <div state_to="form-fields" state-object=""></div>
                 <div
                     state_id="form"