diff --git a/dev-app/routes/components/copy/slots/index.html b/dev-app/routes/components/copy/slots/index.html
index b6cbc275..323acf50 100644
--- a/dev-app/routes/components/copy/slots/index.html
+++ b/dev-app/routes/components/copy/slots/index.html
@@ -24,8 +24,10 @@
                     >
                         <span slot="tip">
                             <c-tip side="top" icon-tip.bind="true" arrow-position="leftEdge" size="medium">
-                                <div slot="trigger"><c-icon icon="question"></c-icon></div>
-                                <div slot="content">Content Here. Huzzah! that is a bit longer just to test</div>
+                                <div slot="trigger">
+                                    <c-icon icon="question"></c-icon>
+                                </div>
+                                <div slot="content"><c-p color="white">Content Here. Huzzah! that is a bit longer just to test</c-p></div>
                             </c-tip>
                         </span>
                     </c-copy>
diff --git a/dev-app/routes/components/forms/add-remove/actions/index.ts b/dev-app/routes/components/forms/add-remove/actions/index.ts
index d7694526..8beae88d 100644
--- a/dev-app/routes/components/forms/add-remove/actions/index.ts
+++ b/dev-app/routes/components/forms/add-remove/actions/index.ts
@@ -25,14 +25,14 @@ export class AddRemoveActions {
 
     public addRemoveActions = [
         {
-            description: 'Set a function to fire when the select contents changes on the left side.',
+            description: 'An object with callback functions. More details coming soon.',
             name: 'actions-left',
-            value: 'function',
+            value: 'object',
         },
         {
-            description: 'Set a function to fire when the select contents changes on the right side.',
+            description: 'An object with callback functions. More details coming soon.',
             name: 'actions-right',
-            value: 'function',
+            value: 'object',
         },
     ];
 }
diff --git a/dev-app/routes/components/forms/add-remove/properties/index.html b/dev-app/routes/components/forms/add-remove/properties/index.html
index 99cc7285..19c99729 100644
--- a/dev-app/routes/components/forms/add-remove/properties/index.html
+++ b/dev-app/routes/components/forms/add-remove/properties/index.html
@@ -30,7 +30,7 @@
                     ></c-form-add-remove>
                 </c-code-sample>
             </l-stack>
-            <br>
+            <br><br><br>
         </div>
 
         <c-divider></c-divider>
@@ -50,7 +50,7 @@
                     ></c-form-add-remove>
                 </c-code-sample>
             </l-stack>
-            <br>
+            <br><br><br>
         </div>
 
         <c-divider></c-divider>
@@ -68,7 +68,7 @@
                     ></c-form-add-remove>
                 </c-code-sample>
             </l-stack>
-            <br>
+            <br><br><br>
         </div>
 
         <c-divider></c-divider>
diff --git a/dev-app/routes/components/forms/date/actions/index.ts b/dev-app/routes/components/forms/date/actions/index.ts
index 9a01f3bd..4421786e 100644
--- a/dev-app/routes/components/forms/date/actions/index.ts
+++ b/dev-app/routes/components/forms/date/actions/index.ts
@@ -25,7 +25,7 @@ export class DateInputActions {
 
     public formDateOptionsActions = [
         {
-            description: 'An object of callbacks.',
+            description: 'An object with callback functions. More details coming soon.',
             name: 'callbacks',
             value: 'object',
         },
diff --git a/dev-app/routes/components/forms/date/properties/index.html b/dev-app/routes/components/forms/date/properties/index.html
index ce44ab89..ac5408f3 100644
--- a/dev-app/routes/components/forms/date/properties/index.html
+++ b/dev-app/routes/components/forms/date/properties/index.html
@@ -38,7 +38,7 @@
                         <div>
                             <c-form-date
                                 id="test31"
-                                label="Error"
+                                label="Icon"
                                 label-icon="info"
                                 error-msg="Date is required"
                             ></c-form-date>
diff --git a/dev-app/routes/components/forms/select/actions/index.html b/dev-app/routes/components/forms/select/actions/index.html
index e48c6c7b..fd942c77 100644
--- a/dev-app/routes/components/forms/select/actions/index.html
+++ b/dev-app/routes/components/forms/select/actions/index.html
@@ -22,9 +22,11 @@
 };</c-code>
                 <c-code-sample>
                     <l-grid min-size="25ch">
+                        <l-stack>
                         <c-form-select select-value.bind="vSelectOutput" options.bind="testOptions" label="Select Label" error-msg="This is an error" actions.bind="testActions"></c-form-select>
+                        <c-p>select: ${vSelectOutput}</c-p>
+                        </l-stack>
                     </l-grid>
-                    <c-p>select: ${vSelectOutput}</c-p>
                 </c-code-sample>
             </l-stack>
         </div>
diff --git a/dev-app/routes/components/forms/select/actions/index.ts b/dev-app/routes/components/forms/select/actions/index.ts
index 007fd95e..8e4fae1d 100644
--- a/dev-app/routes/components/forms/select/actions/index.ts
+++ b/dev-app/routes/components/forms/select/actions/index.ts
@@ -21,19 +21,13 @@ export class SelectActions {
             colHeadName: 'description',
             colHeadValue: 'Description',
         },
-        {
-            _class: 'monospaced',
-            colClass: 't85',
-            colHeadName: 'default',
-            colHeadValue: 'Default',
-        },
     ];
 
     public formSelectActions = [
         {
-            description: 'Set a function to fire when the select contents changes.',
+            description: 'An object with callback functions. More details coming soon.',
             name: 'actions',
-            value: 'function',
+            value: 'object',
         },
     ];
 
diff --git a/dev-app/routes/components/forms/select/properties/index.html b/dev-app/routes/components/forms/select/properties/index.html
index 81e1f523..d4a56ed8 100644
--- a/dev-app/routes/components/forms/select/properties/index.html
+++ b/dev-app/routes/components/forms/select/properties/index.html
@@ -60,11 +60,13 @@
     }];
 }</c-code>
                 <c-code-sample>
-                    <l-grid min-size="25ch">
-                        <c-form-select select-value.bind="vSelectOutput" options.bind="testOptions" label="Select Label" error-msg="This is an error"></c-form-select>
-                        <c-form-select options.bind="testOptions" error-msg="This is an error"></c-form-select>
-                    </l-grid>
-                    <c-p>select: ${vSelectOutput}</c-p>
+                    <l-stack spacing="var(--s0)">
+                        <l-grid min-size="25ch">
+                            <c-form-select select-value.bind="vSelectOutput" options.bind="testOptions" label="Select Label" error-msg="This is an error"></c-form-select>
+                            <c-form-select options.bind="testOptions" error-msg="This is an error"></c-form-select>
+                        </l-grid>
+                        <c-p>select: ${vSelectOutput}</c-p>
+                    </l-stack>
                 </c-code-sample>
             </l-stack>
         </div>
diff --git a/dev-app/routes/components/timeline/properties/index.ts b/dev-app/routes/components/timeline/properties/index.ts
index 7ea738db..9562b612 100644
--- a/dev-app/routes/components/timeline/properties/index.ts
+++ b/dev-app/routes/components/timeline/properties/index.ts
@@ -15,6 +15,7 @@ export class TimelineProperties {
         },
         {
             _class: 'monospaced',
+            colClass: 't270',
             colHeadName: 'type',
             colHeadValue: 'Type',
         },
@@ -24,6 +25,7 @@ export class TimelineProperties {
         },
         {
             _class: 'monospaced',
+            colClass: 't150',
             colHeadName: 'default',
             colHeadValue: 'Default',
         },
diff --git a/dev-app/routes/components/tip/actions/index.ts b/dev-app/routes/components/tip/actions/index.ts
index 2b77c20b..6536348b 100644
--- a/dev-app/routes/components/tip/actions/index.ts
+++ b/dev-app/routes/components/tip/actions/index.ts
@@ -34,10 +34,9 @@ export class TipActions {
 
     public tipActions = [
         {
-            default: '',
-            description: 'Callback functions supported: onHide, onShow. See actions section below for examples.',
+            description: 'An object with callback functions. Functions supported: onHide, onShow. See actions section below for examples.',
             name: 'actions',
-            value: 'Object with callback functions.',
+            value: 'object',
         },
     ];
 
diff --git a/dev-app/routes/components/type/headlines/index.html b/dev-app/routes/components/type/headlines/index.html
index c0f1f1bd..19afab3e 100644
--- a/dev-app/routes/components/type/headlines/index.html
+++ b/dev-app/routes/components/type/headlines/index.html
@@ -13,6 +13,7 @@
                 <c-code-sample>
                     <c-h1 flush-top.bind="false">Not flush on the top</c-h1>
                     <c-h1>Normal Headline 1</c-h1>
+                    <c-h1 truncate.bind="true">Headline 1 that is really long and will truncate at the end of the line or something. Shrink the width of the browser window if needed.</c-h1>
                     <l-cluster
                         align="flex-start"
                         justify="space-between"
@@ -25,6 +26,7 @@
                                 spacing="var(--s-3)"
                                 spacing-direction="right"
                                 truncated-content.bind="true"
+                                style="width: 100%"
                             >
                                 <div>
                                     <c-icon
diff --git a/dev-app/routes/layouts/box-link/index.html b/dev-app/routes/layouts/box-link/index.html
index fa727e1e..2810468d 100644
--- a/dev-app/routes/layouts/box-link/index.html
+++ b/dev-app/routes/layouts/box-link/index.html
@@ -57,6 +57,29 @@
 
             <c-divider></c-divider>
 
+            <div>
+                <l-stack spacing="var(--s-3)">
+                    <c-h3>fill-space</c-h3>
+                    <c-code-sample>
+                        <l-grid>
+                            <l-box-link fill-space.bind="true">
+                                <c-p>I am a tall box with muiltiple lines.</c-p>
+                                <c-p>I am a tall box with muiltiple lines.</c-p>
+                                <c-p>I am a tall box with muiltiple lines.</c-p>
+                            </l-box-link>
+                            <l-box-link fill-space.bind="true">
+                                <c-p>Single line yet the same height.</c-p>
+                            </l-box-link>
+                            <l-box-link fill-space.bind="false">
+                                <c-p>fill-space set to false</c-p>
+                            </l-box-link>
+                        </l-grid>
+                    </c-code-sample>
+                </l-stack>
+            </div>
+
+            <c-divider></c-divider>
+
             <div>
                 <l-stack spacing="var(--s-3)">
                     <c-h3>margin-sides &amp; margin-ends</c-h3>
diff --git a/dev-app/routes/layouts/box-link/index.ts b/dev-app/routes/layouts/box-link/index.ts
index 7473b152..6624bb2f 100644
--- a/dev-app/routes/layouts/box-link/index.ts
+++ b/dev-app/routes/layouts/box-link/index.ts
@@ -52,6 +52,12 @@ export class BoxLinkProperties {
             name: 'color',
             value: 'Any color value. It is advised that you use the Core Color CSS Properties.',
         },
+        {
+            default: 'false',
+            description: 'Set to true if you want height: 100% set on the box.',
+            name: 'fill-space',
+            value: 'boolean',
+        },
         {
             default: '#',
             description: 'Set the URL where the link should go.',
diff --git a/dev-app/routes/layouts/box/index.html b/dev-app/routes/layouts/box/index.html
index e9965c77..e514b5bf 100644
--- a/dev-app/routes/layouts/box/index.html
+++ b/dev-app/routes/layouts/box/index.html
@@ -55,6 +55,29 @@
 
             <c-divider></c-divider>
 
+            <div>
+                <l-stack spacing="var(--s-3)">
+                    <c-h3>fill-space</c-h3>
+                    <c-code-sample>
+                        <l-grid>
+                            <l-box fill-space.bind="true">
+                                <c-p>I am a tall box with muiltiple lines.</c-p>
+                                <c-p>I am a tall box with muiltiple lines.</c-p>
+                                <c-p>I am a tall box with muiltiple lines.</c-p>
+                            </l-box>
+                            <l-box fill-space.bind="true">
+                                <c-p>Single line yet the same height.</c-p>
+                            </l-box>
+                            <l-box fill-space.bind="false">
+                                <c-p>fill-space set to false</c-p>
+                            </l-box>
+                        </l-grid>
+                    </c-code-sample>
+                </l-stack>
+            </div>
+
+            <c-divider></c-divider>
+
             <div>
                 <l-stack spacing="var(--s-3)">
                     <c-h3>margin-sides &amp; margin-ends</c-h3>
diff --git a/dev-app/routes/layouts/box/index.ts b/dev-app/routes/layouts/box/index.ts
index 256381c1..08e02489 100644
--- a/dev-app/routes/layouts/box/index.ts
+++ b/dev-app/routes/layouts/box/index.ts
@@ -46,6 +46,12 @@ export class BoxProperties {
             name: 'color',
             value: 'Any color value. It is advised that you use the Core Color CSS Properties.',
         },
+        {
+            default: 'false',
+            description: 'Set to true if you want height: 100% set on the box.',
+            name: 'fill-space',
+            value: 'boolean',
+        },
         {
             default: '0px',
             description: 'Set the left and right margin of the box.',
diff --git a/dev-app/routes/layouts/grid/methods/index.ts b/dev-app/routes/layouts/grid/methods/index.ts
index 3d2bcbcb..412ce1ea 100644
--- a/dev-app/routes/layouts/grid/methods/index.ts
+++ b/dev-app/routes/layouts/grid/methods/index.ts
@@ -21,24 +21,13 @@ export class GridMethods {
             colHeadName: 'description',
             colHeadValue: 'Description',
         },
-        {
-            _class: 'monospaced',
-            colHeadName: 'default',
-            colHeadValue: 'Default',
-        },
     ];
 
     public gridMethods = [
         {
-            description: 'The function you want to run when the button is clicked.',
-            name: 'action',
-            value: 'function',
-        },
-        {
-            default: '_self',
-            description: 'Set if you want the box link to open in a new window.',
-            name: 'target',
-            value: '_self | _blank',
+            description: 'An object with callback functions. More details coming soon.',
+            name: 'actions',
+            value: 'object',
         },
     ];
 
diff --git a/dev-app/routes/layouts/grid/properties/index.html b/dev-app/routes/layouts/grid/properties/index.html
index 1c89ffbb..0d6c55a9 100644
--- a/dev-app/routes/layouts/grid/properties/index.html
+++ b/dev-app/routes/layouts/grid/properties/index.html
@@ -52,21 +52,22 @@
             <l-stack spacing="var(--s-3)">
                 <c-h3>gap</c-h3>
                 <c-code-sample>
-                    <l-grid gap="var(--s5)">
-                        <l-box>First Item</l-box>
-                        <l-box>Second Item</l-box>
-                        <l-box>Third Item</l-box>
-                        <l-box>Fourth Item</l-box>
-                        <l-box>Fifth Item</l-box>
-                    </l-grid>
-
-                    <l-grid gap="0px">
-                        <l-box>First Item</l-box>
-                        <l-box>Second Item</l-box>
-                        <l-box>Third Item</l-box>
-                        <l-box>Fourth Item</l-box>
-                        <l-box>Fifth Item</l-box>
-                    </l-grid>
+                    <l-stack>
+                        <l-grid gap="var(--s5)">
+                            <l-box>First Item</l-box>
+                            <l-box>Second Item</l-box>
+                            <l-box>Third Item</l-box>
+                            <l-box>Fourth Item</l-box>
+                            <l-box>Fifth Item</l-box>
+                        </l-grid>
+                        <l-grid gap="0px">
+                            <l-box>First Item</l-box>
+                            <l-box>Second Item</l-box>
+                            <l-box>Third Item</l-box>
+                            <l-box>Fourth Item</l-box>
+                            <l-box>Fifth Item</l-box>
+                        </l-grid>
+                    </l-stack>
                 </c-code-sample>
             </l-stack>
         </div>
@@ -77,15 +78,16 @@
             <l-stack spacing="var(--s-3)">
                 <c-h3>auto-sizing</c-h3>
                 <c-code-sample>
-                    <l-grid>
-                        <l-box>First Item</l-box>
-                        <l-box>Second Item</l-box>
-                    </l-grid>
-
-                    <l-grid auto-sizing="auto-fill">
-                        <l-box>First Item</l-box>
-                        <l-box>Second Item</l-box>
-                    </l-grid>
+                    <l-stack>
+                        <l-grid>
+                            <l-box>First Item</l-box>
+                            <l-box>Second Item</l-box>
+                        </l-grid>
+                        <l-grid auto-sizing="auto-fill">
+                            <l-box>First Item</l-box>
+                            <l-box>Second Item</l-box>
+                        </l-grid>
+                    </l-stack>
                 </c-code-sample>
             </l-stack>
         </div>
diff --git a/dev-app/routes/layouts/stack/index.html b/dev-app/routes/layouts/stack/index.html
index af2fab5f..6243b138 100644
--- a/dev-app/routes/layouts/stack/index.html
+++ b/dev-app/routes/layouts/stack/index.html
@@ -118,7 +118,7 @@
 
             <c-divider></c-divider>
 
-            <div>
+            <div style="height: 500px;">
                 <l-stack spacing="var(--s-3)">
                     <c-h3>Split After</c-h3>
                     <c-code-sample class="example">
diff --git a/dev-app/routes/layouts/switcher/index.html b/dev-app/routes/layouts/switcher/index.html
index 9f97d7e0..2b5bd9b7 100644
--- a/dev-app/routes/layouts/switcher/index.html
+++ b/dev-app/routes/layouts/switcher/index.html
@@ -38,7 +38,7 @@
             <c-divider></c-divider>
 
             <div>
-                <l-stack spacing="var(-s-3)">
+                <l-stack spacing="var(--s-3)">
                     <c-h3>double-width</c-h3>
                     <c-code-sample>
                         <l-switcher double-width="second">
@@ -53,7 +53,7 @@
             <c-divider></c-divider>
 
             <div>
-                <l-stack spacing="var(-s-3)">
+                <l-stack spacing="var(--s-3)">
                     <c-h3>limit</c-h3>
                     <c-code-sample>
                         <l-switcher limit="three">
@@ -69,20 +69,21 @@
             <c-divider></c-divider>
 
             <div>
-                <l-stack spacing="var(-s-3)">
+                <l-stack spacing="var(--s-3)">
                     <c-h3>spacing</c-h3>
                     <c-code-sample>
-                        <l-switcher spacing="var(--s5)">
-                            <l-box>First Item</l-box>
-                            <l-box>Second Item</l-box>
-                            <l-box>Third Item</l-box>
-                        </l-switcher>
-
-                        <l-switcher spacing="0px">
-                            <l-box>First Item</l-box>
-                            <l-box>Second Item</l-box>
-                            <l-box>Third Item</l-box>
-                        </l-switcher>
+                        <l-stack>
+                            <l-switcher spacing="var(--s5)">
+                                <l-box>First Item</l-box>
+                                <l-box>Second Item</l-box>
+                                <l-box>Third Item</l-box>
+                            </l-switcher>
+                            <l-switcher spacing="0px">
+                                <l-box>First Item</l-box>
+                                <l-box>Second Item</l-box>
+                                <l-box>Third Item</l-box>
+                            </l-switcher>
+                        </l-stack>
                     </c-code-sample>
                 </l-stack>
             </div>
@@ -90,7 +91,7 @@
             <c-divider></c-divider>
 
             <div>
-                <l-stack spacing="var(-s-3)">
+                <l-stack spacing="var(--s-3)">
                     <c-h3>threshold</c-h3>
                     <c-code-sample>
                         <l-stack>
@@ -99,13 +100,11 @@
                                 <l-box>Second Item</l-box>
                                 <l-box>Third Item</l-box>
                             </l-switcher>
-
                             <l-switcher threshold="50rem">
                                 <l-box>First Item</l-box>
                                 <l-box>Second Item</l-box>
                                 <l-box>Third Item</l-box>
                             </l-switcher>
-
                             <l-switcher threshold="60rem">
                                 <l-box>First Item</l-box>
                                 <l-box>Second Item</l-box>
diff --git a/package-lock.json b/package-lock.json
index 04ca1fed..f23b1e44 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@bindable-ui/bindable",
-  "version": "1.0.22",
+  "version": "1.0.23",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index bb8b11ae..a5e2d408 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@bindable-ui/bindable",
   "description": "An Aurelia component library",
-  "version": "1.0.22",
+  "version": "1.0.23",
   "repository": {
     "type": "git",
     "url": "https://github.com/bindable-ui/bindable"
diff --git a/src/components/buttons/c-button/c-button.html b/src/components/buttons/c-button/c-button.html
index e0ca1c63..bba00627 100644
--- a/src/components/buttons/c-button/c-button.html
+++ b/src/components/buttons/c-button/c-button.html
@@ -8,19 +8,49 @@
 
     <button
         disabled.bind="_state === 'thinking' || _state === 'disabled'"
-        hide.bind="title || _state === 'hidden'"
-        class="${styles.button}  ${styles[color]}  ${styles[size]}  ${styles[_state]}  ${icon ? styles.icon : ''}  ${styles[iconPosition]}"
+        class="
+            ${styles.button}
+            ${styles[color]}
+            ${styles[size]}
+            ${styles[_state]}
+            ${icon ? styles.icon : ''}
+            ${styles[iconPosition]}
+        "
         click.trigger="actionFunction()"
         type="${type}"
+        hide.bind="title || _state === 'hidden'"
     >
-        <c-icon if.bind="showLeftIcon()" icon="${icon}"></c-icon>
+        <c-icon
+            icon="${icon}"
+            if.bind="showLeftIcon()"
+        ></c-icon>
         <slot></slot>
-        <c-icon if.bind="showRightOrCenterIcon()" icon="${icon}"></c-icon>
+        <c-icon
+            if.bind="showRightOrCenterIcon()"
+            icon="${icon}"
+        ></c-icon>
     </button>
-
-    <a href.bind="href" if.bind="title && _state !== 'hidden'" target="${targetNew ? '_blank' : '_self'}" class="${styles.button}  ${styles[color]}  ${styles[size]}  ${styles[_state]}  ${icon ? styles.icon : ''}  ${styles[iconPosition]}">
-        <c-icon if.bind="showLeftIcon()" icon="${icon}"></c-icon>
+    <a
+        href.bind="href"
+        target="${targetNew ? '_blank' : '_self'}"
+        class="
+            ${styles.button}
+            ${styles[color]}
+            ${styles[size]}
+            ${styles[_state]}
+            ${icon ? styles.icon : ''}
+            ${styles[iconPosition]}
+        "
+        if.bind="title && _state !== 'hidden'"
+    >
+        <c-icon
+            if.bind="showLeftIcon()"
+            icon="${icon}"
+        ></c-icon>
         ${title}
-        <c-icon if.bind="showRightOrCenterIcon()" icon="${icon}"></c-icon>
+        <c-icon
+            if.bind="showRightOrCenterIcon()"
+            icon="${icon}"
+        ></c-icon>
     </a>
 </template>
diff --git a/src/components/copy/c-copy/c-copy.html b/src/components/copy/c-copy/c-copy.html
index 12b60641..a2ec1e6b 100644
--- a/src/components/copy/c-copy/c-copy.html
+++ b/src/components/copy/c-copy/c-copy.html
@@ -14,11 +14,32 @@
             <slot name="tip"></slot>
         </div>
         <div class="${styles.container}">
-            <div class="${styles.content}  ${wrap ? styles.wrap : ''}  ${!link ? '' : styles.hide}">
+            <div
+                class="
+                    ${styles.content}
+                    ${wrap ? styles.wrap : ''}
+                    ${!link ? '' : styles.hide}
+                "
+            >
                 ${content}
             </div>
-            <a class="${styles.content}  ${wrap ? styles.wrap : ''}  ${link ? '' : styles.hide}" href="${content}" target="_blank">${content}</a>
-            <c-button color="neutral" click.delegate="copy(content)">Copy</c-button>
+            <a
+                class="
+                    ${styles.content}
+                    ${wrap ? styles.wrap : ''}
+                    ${link ? '' : styles.hide}
+                "
+                href="${content}"
+                target="_blank"
+            >
+                ${content}
+            </a>
+            <c-button
+                color="neutral"
+                click.delegate="copy(content)"
+            >
+                Copy
+            </c-button>
         </div>
     </div>
 </template>
diff --git a/src/components/forms/c-disabled/c-disabled.css b/src/components/forms/c-disabled/c-disabled.css
index 5e985cd1..7fb1b115 100644
--- a/src/components/forms/c-disabled/c-disabled.css
+++ b/src/components/forms/c-disabled/c-disabled.css
@@ -21,7 +21,7 @@ Licensed under the terms of the MIT license. See the LICENSE file in the project
 
 .disabled{
     display: inline-block;
-    margin-top: 8px;
+    margin-top: 6px;
     color: var(--c_subOneMain);
     font-style: italic;
     word-break: break-word;
diff --git a/src/components/forms/c-form-error/c-form-error.html b/src/components/forms/c-form-error/c-form-error.html
index 1f62501a..14b7a7cd 100644
--- a/src/components/forms/c-form-error/c-form-error.html
+++ b/src/components/forms/c-form-error/c-form-error.html
@@ -6,7 +6,12 @@
 <template>
 	<require from="./c-form-error.css"></require>
 
-    <span class="${styles.base}  ${styles[state]}">
+    <span
+        class="
+            ${styles.base}
+            ${styles[state]}
+        "
+    >
         <span class="${styles.errorBlock}">
             <slot></slot>
         </span>
diff --git a/src/components/forms/c-form-image/c-form-image.html b/src/components/forms/c-form-image/c-form-image.html
index c80a677f..7741f6be 100644
--- a/src/components/forms/c-form-image/c-form-image.html
+++ b/src/components/forms/c-form-image/c-form-image.html
@@ -6,18 +6,31 @@
 <template>
 	<require from="./c-form-image.css"></require>
 
-    <label for="${id}" class="${styles.label}  ${styles[state]}">
+    <label
+        for="${id}"
+        class="
+            ${styles.label}
+            ${styles[state]}
+        "
+    >
         <div class="${styles.container}">
             <div class="${styles.image}">
                 <div class="${styles.center}">
-                    <img src="${imageUrl}" alt="${id}">
+                    <img
+                        src="${imageUrl}"
+                        alt="${id}"
+                    >
                 </div>
             </div>
             <div class="${styles.input}">
                 <div class="${styles.inputCover}"></div>
                 <l-cluster spacing="var(--s-4)">
                     <div>
-                        <c-radio-input name="${name}" id="${id}" checked.bind="checked"></c-radio-input>
+                        <c-radio-input
+                            name="${name}"
+                            id="${id}"
+                            checked.bind="checked"
+                        ></c-radio-input>
                         <span class="${styles.desc}">${description}</span>
                     </div>
                 </l-cluster>
diff --git a/src/components/forms/c-form-warning/c-form-warning.html b/src/components/forms/c-form-warning/c-form-warning.html
index 1b8da6ff..b458aa0d 100644
--- a/src/components/forms/c-form-warning/c-form-warning.html
+++ b/src/components/forms/c-form-warning/c-form-warning.html
@@ -6,7 +6,12 @@
 <template>
 	<require from="./c-form-warning.css"></require>
 
-    <span class="${styles.base}  ${styles[state]}">
+    <span
+        class="
+            ${styles.base}
+            ${styles[state]}
+        "
+    >
         <span class="${styles.warningBlock}">
             <slot></slot>
         </span>
diff --git a/src/components/forms/c-label/c-label.html b/src/components/forms/c-label/c-label.html
index 43ec6110..a9e614c1 100644
--- a/src/components/forms/c-label/c-label.html
+++ b/src/components/forms/c-label/c-label.html
@@ -6,10 +6,34 @@
 <template>
 	<require from="./c-label.css"></require>
 
-    <label class="${styles.label}  ${styles[state]}">
-        <c-icon icon="${icon}" color="${labelIconColor}" if.bind="icon"></c-icon>
+    <label
+        class="
+            ${styles.label}
+            ${styles[state]}
+        "
+    >
+        <c-icon
+            icon="${icon}"
+            color="${labelIconColor}"
+            if.bind="icon"
+        ></c-icon>
         <slot></slot>
-        <span class="${styles.edit}" click.trigger="editingActionFunction()" if.bind="editable && notEditing">Edit</span>
-        <span class="${styles.edit}  ${styles.done}" click.trigger="doneEditingActionFunction()" if.bind="editable && editing">Done</span>
+        <span
+            class="${styles.edit}"
+            click.trigger="editingActionFunction()"
+            if.bind="editable && notEditing"
+        >
+            Edit
+        </span>
+        <span
+            class="
+                ${styles.edit}
+                ${styles.done}
+            "
+            click.trigger="doneEditingActionFunction()"
+            if.bind="editable && editing"
+        >
+            Done
+        </span>
     </label>
 </template>
diff --git a/src/components/forms/checkbox-radio/c-form-checkbox-radio-container/c-form-checkbox-radio-container.html b/src/components/forms/checkbox-radio/c-form-checkbox-radio-container/c-form-checkbox-radio-container.html
index cbc950be..f9824a0b 100644
--- a/src/components/forms/checkbox-radio/c-form-checkbox-radio-container/c-form-checkbox-radio-container.html
+++ b/src/components/forms/checkbox-radio/c-form-checkbox-radio-container/c-form-checkbox-radio-container.html
@@ -7,19 +7,38 @@
 	<require from="./c-form-checkbox-radio-container.css"></require>
 
     <l-stack spacing="var(--s-4)">
-        <div class="${styles.labelWrapper}" show.bind="_state !== 'hidden' && _state !== 'disabled' && label">
+        <div
+            class="${styles.labelWrapper}"
+            show.bind="_state !== 'hidden' && _state !== 'disabled' && label"
+        >
             <c-label state="${_state}">
                 ${label}
             </c-label>
             <slot name="tip"></slot>
         </div>
-
-        <div class="${styles[layout]}  ${label === undefined ? styles.noLabel : ''}  js-input-list" show.bind="_state !== 'hidden' && _state !== 'disabled'">
+        <div
+            class="
+                ${styles[layout]}
+                ${label === undefined ? styles.noLabel : ''}
+                js-input-list
+            "
+            show.bind="_state !== 'hidden' && _state !== 'disabled'"
+        >
             <l-stack spacing="var(--s-4)">
                 <slot></slot>
             </l-stack>
         </div>
-        <c-form-error state="${_state}" if.bind="_state !== 'hidden' && _state !== 'disabled' && errorMsg">${errorMsg}</c-form-error>
-        <c-form-warning state="${_state}" if.bind="_state !== 'hidden' && _state !== 'disabled' && warningMsg">${warningMsg}</c-form-warning>
+        <c-form-error
+            state="${_state}"
+            if.bind="_state !== 'hidden' && _state !== 'disabled' && errorMsg"
+        >
+            ${errorMsg}
+        </c-form-error>
+        <c-form-warning
+            state="${_state}"
+            if.bind="_state !== 'hidden' && _state !== 'disabled' && warningMsg"
+        >
+            ${warningMsg}
+        </c-form-warning>
     </l-stack>
 </template>
diff --git a/src/components/forms/checkbox-radio/checkbox/c-checkbox-input/c-checkbox-input.html b/src/components/forms/checkbox-radio/checkbox/c-checkbox-input/c-checkbox-input.html
index cc1dee21..5cca94ac 100644
--- a/src/components/forms/checkbox-radio/checkbox/c-checkbox-input/c-checkbox-input.html
+++ b/src/components/forms/checkbox-radio/checkbox/c-checkbox-input/c-checkbox-input.html
@@ -6,5 +6,15 @@
 <template>
 	<require from="./c-checkbox-input.css"></require>
 
-    <input disabled.bind="state === 'disabled'" id="${id}" type="checkbox" class="${styles.check}  ${state === 'disabled' ? styles.disabled : ''}" checked.bind="checkedValue" change.delegate="valueChanged()">
+    <input
+        disabled.bind="state === 'disabled'"
+        id="${id}"
+        type="checkbox"
+        class="
+            ${styles.check}
+            ${state === 'disabled' ? styles.disabled : ''}
+        "
+        checked.bind="checkedValue"
+        change.delegate="valueChanged()"
+    >
 </template>
diff --git a/src/components/forms/checkbox-radio/checkbox/c-checkbox-label/c-checkbox-label.html b/src/components/forms/checkbox-radio/checkbox/c-checkbox-label/c-checkbox-label.html
index ac31ca54..6574e202 100644
--- a/src/components/forms/checkbox-radio/checkbox/c-checkbox-label/c-checkbox-label.html
+++ b/src/components/forms/checkbox-radio/checkbox/c-checkbox-label/c-checkbox-label.html
@@ -6,5 +6,13 @@
 <template>
 	<require from="./c-checkbox-label.css"></require>
 
-    <label class="${styles.label}  ${state === 'disabled' ? styles.disabled : ''}" for="${id}"><slot></slot></label>
+    <label
+        class="
+            ${styles.label}
+            ${state === 'disabled' ? styles.disabled : ''}
+        "
+        for="${id}"
+    >
+        <slot></slot>
+    </label>
 </template>
diff --git a/src/components/forms/checkbox-radio/checkbox/c-form-checkbox/c-form-checkbox.css b/src/components/forms/checkbox-radio/checkbox/c-form-checkbox/c-form-checkbox.css
index 261499e2..3de93a90 100644
--- a/src/components/forms/checkbox-radio/checkbox/c-form-checkbox/c-form-checkbox.css
+++ b/src/components/forms/checkbox-radio/checkbox/c-form-checkbox/c-form-checkbox.css
@@ -22,6 +22,7 @@ Licensed under the terms of the MIT license. See the LICENSE file in the project
 .draggable{
     height: 15px;
     width: 11px;
+    margin-bottom: 0 !important;
     vertical-align: top;
 }
 
diff --git a/src/components/forms/checkbox-radio/checkbox/c-form-checkbox/c-form-checkbox.html b/src/components/forms/checkbox-radio/checkbox/c-form-checkbox/c-form-checkbox.html
index a0488b5f..d19b3ace 100644
--- a/src/components/forms/checkbox-radio/checkbox/c-form-checkbox/c-form-checkbox.html
+++ b/src/components/forms/checkbox-radio/checkbox/c-form-checkbox/c-form-checkbox.html
@@ -17,8 +17,18 @@
                     class="${styles.draggable}"
                     drag-options.bind="dragOptions"
                 ></c-drag-handle>
-                <c-checkbox-input id="${id}" checked-value.bind="checkedValue" state="${_state}" on-change.call="valueChanged(val)"></c-checkbox-input>
-                <c-checkbox-label id="${id}" state="${_state}"><slot></slot></c-checkbox-label>
+                <c-checkbox-input
+                    id="${id}"
+                    checked-value.bind="checkedValue"
+                    state="${_state}"
+                    on-change.call="valueChanged(val)"
+                ></c-checkbox-input>
+                <c-checkbox-label
+                    id="${id}"
+                    state="${_state}"
+                >
+                    <slot></slot>
+                </c-checkbox-label>
             </div>
         </l-cluster>
     </div>
diff --git a/src/components/forms/checkbox-radio/radio/c-form-radio/c-form-radio.html b/src/components/forms/checkbox-radio/radio/c-form-radio/c-form-radio.html
index 005ca817..0da08e02 100644
--- a/src/components/forms/checkbox-radio/radio/c-form-radio/c-form-radio.html
+++ b/src/components/forms/checkbox-radio/radio/c-form-radio/c-form-radio.html
@@ -7,8 +7,19 @@
     <div show.bind="_state !== 'hidden'">
         <l-cluster spacing="var(--s-5)">
             <div>
-                <c-radio-input name="${name}" id="${id}" checked.bind="checked" state="${_state}"></c-radio-input>
-                <c-radio-label name="${name}" id="${id}" state="${_state}"><slot></slot></c-radio-label>
+                <c-radio-input
+                    name="${name}"
+                    id="${id}"
+                    checked.bind="checked"
+                    state="${_state}"
+                ></c-radio-input>
+                <c-radio-label
+                    name="${name}"
+                    id="${id}"
+                    state="${_state}"
+                >
+                    <slot></slot>
+                </c-radio-label>
             </div>
         </l-cluster>
     </div>
diff --git a/src/components/forms/checkbox-radio/radio/c-radio-input/c-radio-input.html b/src/components/forms/checkbox-radio/radio/c-radio-input/c-radio-input.html
index b0d87684..f1d476fa 100644
--- a/src/components/forms/checkbox-radio/radio/c-radio-input/c-radio-input.html
+++ b/src/components/forms/checkbox-radio/radio/c-radio-input/c-radio-input.html
@@ -6,5 +6,18 @@
 <template>
 	<require from="./c-radio-input.css"></require>
 
-    <input disabled.bind="state === 'disabled'" id.bind="id" id="${id}" name="${name}" type="radio" class="${styles.radio}  ${state === 'disabled' ? styles.disabled : ''}  js-radio" checked.bind="checked" model="${id}">
+    <input
+        disabled.bind="state === 'disabled'"
+        id.bind="id"
+        id="${id}"
+        name="${name}"
+        type="radio"
+        class="
+            ${styles.radio}
+            ${state === 'disabled' ? styles.disabled : ''}
+            js-radio
+        "
+        checked.bind="checked"
+        model="${id}"
+    >
 </template>
diff --git a/src/components/forms/checkbox-radio/radio/c-radio-label/c-radio-label.html b/src/components/forms/checkbox-radio/radio/c-radio-label/c-radio-label.html
index 24827c6e..36282c2f 100644
--- a/src/components/forms/checkbox-radio/radio/c-radio-label/c-radio-label.html
+++ b/src/components/forms/checkbox-radio/radio/c-radio-label/c-radio-label.html
@@ -6,5 +6,13 @@
 <template>
 	<require from="./c-radio-label.css"></require>
 
-    <label class="${styles.label}  ${state === 'disabled' ? styles.disabled : ''}" for="${id}"><slot></slot></label>
+    <label
+        class="
+            ${styles.label}
+            ${state === 'disabled' ? styles.disabled : ''}
+        "
+        for="${id}"
+    >
+        <slot></slot>
+    </label>
 </template>
diff --git a/src/components/forms/checkbox-radio/toggle/c-form-toggle/c-form-toggle.html b/src/components/forms/checkbox-radio/toggle/c-form-toggle/c-form-toggle.html
index 54b4452d..0d9c812f 100644
--- a/src/components/forms/checkbox-radio/toggle/c-form-toggle/c-form-toggle.html
+++ b/src/components/forms/checkbox-radio/toggle/c-form-toggle/c-form-toggle.html
@@ -5,8 +5,22 @@
 
 <template>
 	<require from="./c-form-toggle.css"></require>
-    <div show.bind="_state !== 'hidden'" class="${styles.base}">
-        <c-toggle-input id="${id}" checked-value.bind="checkedValue" state="${_state}" on-change.call="valueChanged(val)"></c-toggle-input>
-        <c-toggle-label id="${id}" state="${_state}"><slot></slot></c-toggle-label>
+
+    <div
+        show.bind="_state !== 'hidden'"
+        class="${styles.base}"
+    >
+        <c-toggle-input
+            id="${id}"
+            checked-value.bind="checkedValue"
+            state="${_state}"
+            on-change.call="valueChanged(val)"
+        ></c-toggle-input>
+        <c-toggle-label
+            id="${id}"
+            state="${_state}"
+        >
+            <slot></slot>
+        </c-toggle-label>
     </div>
 </template>
diff --git a/src/components/forms/checkbox-radio/toggle/c-toggle-input/c-toggle-input.html b/src/components/forms/checkbox-radio/toggle/c-toggle-input/c-toggle-input.html
index c61530f2..3652b714 100644
--- a/src/components/forms/checkbox-radio/toggle/c-toggle-input/c-toggle-input.html
+++ b/src/components/forms/checkbox-radio/toggle/c-toggle-input/c-toggle-input.html
@@ -5,8 +5,21 @@
 
 <template>
 	<require from="./c-toggle-input.css"></require>
-    <label class="${styles.bin} ${state === 'disabled' ? styles.disabled : ''}">
-        <input disabled.bind="state === 'disabled'" id="${id}" type="checkbox" class="${styles.check}" checked.bind="checkedValue" change.delegate="valueChanged()">
+
+    <label
+        class="
+            ${styles.bin}
+            ${state === 'disabled' ? styles.disabled : ''}
+        "
+    >
+        <input
+            disabled.bind="state === 'disabled'"
+            id="${id}"
+            type="checkbox"
+            class="${styles.check}"
+            checked.bind="checkedValue"
+            change.delegate="valueChanged()"
+        >
         <div class="${styles.bar}"></div>
         <div class="${styles.nub}"></div>
     </label>
diff --git a/src/components/forms/checkbox-radio/toggle/c-toggle-label/c-toggle-label.html b/src/components/forms/checkbox-radio/toggle/c-toggle-label/c-toggle-label.html
index f2e366c6..9953ef28 100644
--- a/src/components/forms/checkbox-radio/toggle/c-toggle-label/c-toggle-label.html
+++ b/src/components/forms/checkbox-radio/toggle/c-toggle-label/c-toggle-label.html
@@ -6,5 +6,13 @@
 <template>
 	<require from="./c-toggle-label.css"></require>
 
-    <label class="${styles.label}  ${state === 'disabled' ? styles.disabled : ''}" for="${id}"><slot></slot></label>
+    <label
+        class="
+            ${styles.label}
+            ${state === 'disabled' ? styles.disabled : ''}
+        "
+        for="${id}"
+    >
+        <slot></slot>
+    </label>
 </template>
diff --git a/src/components/forms/date/c-form-date/c-form-date.html b/src/components/forms/date/c-form-date/c-form-date.html
index 3b691a58..66a47578 100644
--- a/src/components/forms/date/c-form-date/c-form-date.html
+++ b/src/components/forms/date/c-form-date/c-form-date.html
@@ -6,13 +6,25 @@
 <template>
 	<require from="./c-form-date.css"></require>
 
-    <div class="${styles.labelWrapper}" show.bind="_state !== 'hidden' && label">
-        <c-label state="${_state}" icon="${labelIcon}" if.bind="label">
+    <div
+        class="${styles.labelWrapper}"
+        show.bind="_state !== 'hidden' && label"
+    >
+        <c-label
+            state="${_state}"
+            icon="${labelIcon}"
+            if.bind="label"
+        >
             ${label}
         </c-label>
         <slot name="tip"></slot>
     </div>
-    <div class="${styles.container}  ${inline ? styles.inlineContainer : ''}">
+    <div
+        class="
+            ${styles.container}
+            ${inline ? styles.inlineContainer : ''}
+        "
+    >
         <c-text-input
             if.bind="_state !== 'disabled' && _state !== 'hidden'"
             placeholder.bind="placeholder"
@@ -29,6 +41,16 @@
             <span if.bind="disabledText">${disabledText}</span>
         </c-disabled>
     </div>
-    <c-form-error state="${_state}" if.bind="_state !== 'hidden' && errorMsg">${errorMsg}</c-form-error>
-    <c-form-warning state="${_state}" if.bind="_state !== 'hidden' && warningMsg">${warningMsg}</c-form-warning>
+    <c-form-error
+        state="${_state}"
+        if.bind="_state !== 'hidden' && errorMsg"
+    >
+        ${errorMsg}
+    </c-form-error>
+    <c-form-warning
+        state="${_state}"
+        if.bind="_state !== 'hidden' && warningMsg"
+    >
+        ${warningMsg}
+    </c-form-warning>
 </template>
diff --git a/src/components/forms/file/c-file-input/c-file-input.html b/src/components/forms/file/c-file-input/c-file-input.html
index ee7ea0ee..00323695 100644
--- a/src/components/forms/file/c-file-input/c-file-input.html
+++ b/src/components/forms/file/c-file-input/c-file-input.html
@@ -6,11 +6,30 @@
 <template>
 	<require from="./c-file-input.css"></require>
 
-    <div class="${styles.image}" if.bind="imagePicker">
+    <div
+        class="${styles.image}"
+        if.bind="imagePicker"
+    >
         <span>
             <a href="#">Upload</a>
         </span>
-        <input type="file" class="${styles.file}  ${state === 'error' ? styles.error : ''}" change.delegate="filesUploaded($event)" accept="image/*">
+        <input
+            class="
+                ${styles.file}
+                ${state === 'error' ? styles.error : ''}
+            "
+            type="file"
+            change.delegate="filesUploaded($event)"
+            accept="image/*"
+        >
     </div>
-    <input type="file" class="${styles.file}  ${state === 'error' ? styles.error : ''}" if.bind="!imagePicker" change.delegate="filesUploaded($event)">
+    <input
+        class="
+            ${styles.file}
+            ${state === 'error' ? styles.error : ''}
+        "
+        type="file"
+        if.bind="!imagePicker"
+        change.delegate="filesUploaded($event)"
+    >
 </template>
diff --git a/src/components/forms/file/c-form-file/c-form-file.css b/src/components/forms/file/c-form-file/c-form-file.css
index a2be872b..b3b7f763 100644
--- a/src/components/forms/file/c-form-file/c-form-file.css
+++ b/src/components/forms/file/c-form-file/c-form-file.css
@@ -75,7 +75,7 @@ Licensed under the terms of the MIT license. See the LICENSE file in the project
     text-align: center;
 }
 
-.is-uploading > div{
+.is-uploading > c-spinner{
     position: absolute;
     top: 0;
     left: 0;
diff --git a/src/components/forms/file/c-form-file/c-form-file.html b/src/components/forms/file/c-form-file/c-form-file.html
index db0efdbd..dd450f19 100644
--- a/src/components/forms/file/c-form-file/c-form-file.html
+++ b/src/components/forms/file/c-form-file/c-form-file.html
@@ -6,25 +6,74 @@
 <template>
 	<require from="./c-form-file.css"></require>
 
-    <div class="${styles.labelWrapper}" show.bind="_state !== 'hidden' && label">
-        <c-label state="${_state}" if.bind="label">
+    <div
+        class="${styles.labelWrapper}"
+        show.bind="_state !== 'hidden' && label"
+    >
+        <c-label
+            state="${_state}"
+            if.bind="label"
+        >
             ${label}
         </c-label>
         <slot name="tip"></slot>
     </div>
-    <div class="${styles.noImage}" if.bind="!imgUrl && imagePicker">
+    <div
+        class="${styles.noImage}"
+        if.bind="!imgUrl && imagePicker"
+    >
         <c-p>No Image</c-p>
     </div>
-    <div if.bind="imgUrl && imagePicker" class="${styles.imageSrcContainer}  ${isUploading ? styles.isUploading : ''}">
-        <c-spinner size="small" if.bind="isUploading"></c-spinner>
-        <img class="${styles.image}" src="${imgUrl}" alt="${label}">
+    <div
+        class="
+            ${styles.imageSrcContainer}
+            ${isUploading ? styles.isUploading : ''}
+        "
+        if.bind="imgUrl && imagePicker"
+    >
+        <c-spinner
+            size="small"
+            if.bind="isUploading"
+        ></c-spinner>
+        <img
+            class="${styles.image}"
+            src="${imgUrl}"
+            alt="${label}"
+        >
     </div>
-    <c-file-input image-picker.bind="imagePicker" if.bind="_state !== 'disabled' && _state !== 'hidden'" state.bind="_state" files.bind="files"></c-file-input>
+    <c-file-input
+        image-picker.bind="imagePicker"
+        state.bind="_state"
+        files.bind="files"
+        if.bind="_state !== 'disabled' && _state !== 'hidden'"
+    ></c-file-input>
     <c-disabled if.bind="_state === 'disabled' && !imagePicker">
-        <span if.bind="files.length" repeat.for="f of files">${f.name}</span>
+        <span
+            if.bind="files.length"
+            repeat.for="f of files"
+        >
+            ${f.name}
+        </span>
         <span if.bind="!files.length">None</span>
     </c-disabled>
-    <a if.bind="imagePicker && imgUrl !== imageSrc && !showReset && _state !== 'disabled'" click.delegate="removeImage()" class="${styles.removeImage}">Reset</a>
-    <a if.bind="imagePicker && showReset && _state !== 'disabled'" click.delegate="resetImage()" class="${styles.removeImage}">Reset</a>
-    <c-form-error state="${_state}" if.bind="_state !== 'hidden' && errorMsg">${errorMsg}</c-form-error>
+    <a
+        class="${styles.removeImage}"
+        click.delegate="removeImage()"
+        if.bind="imagePicker && imgUrl !== imageSrc && !showReset && _state !== 'disabled'"
+    >
+        Reset
+    </a>
+    <a
+        class="${styles.removeImage}"
+        click.delegate="resetImage()"
+        if.bind="imagePicker && showReset && _state !== 'disabled'"
+    >
+        Reset
+    </a>
+    <c-form-error
+        state="${_state}"
+        if.bind="_state !== 'hidden' && errorMsg"
+    >
+        ${errorMsg}
+    </c-form-error>
 </template>
diff --git a/src/components/forms/select/c-form-add-remove/c-form-add-remove.css b/src/components/forms/select/c-form-add-remove/c-form-add-remove.css
index 4ae12f3c..5427c4d9 100644
--- a/src/components/forms/select/c-form-add-remove/c-form-add-remove.css
+++ b/src/components/forms/select/c-form-add-remove/c-form-add-remove.css
@@ -31,17 +31,24 @@ Licensed under the terms of the MIT license. See the LICENSE file in the project
     flex: 1;
 }
 
-.container c-form-select > div:nth-child(2){
+.container c-form-select > l-stack{
     height: 100%;
 }
 
+.container l-stack > div{
+    height: unset;
+}
+
 .container select,
 .container > div{
     flex: 1;
 }
 
-.container > div{
-    justify-content: center;
+.container > l-stack{
     flex: 0;
     margin: 20px var(--s-2) 0;
 }
+
+.container > l-stack > div{
+    justify-content: center;
+}
diff --git a/src/components/forms/select/c-form-add-remove/c-form-add-remove.html b/src/components/forms/select/c-form-add-remove/c-form-add-remove.html
index bc6d7b30..9ee21f17 100644
--- a/src/components/forms/select/c-form-add-remove/c-form-add-remove.html
+++ b/src/components/forms/select/c-form-add-remove/c-form-add-remove.html
@@ -6,7 +6,10 @@
 <template>
 	<require from="./c-form-add-remove.css"></require>
 
-    <div class="${styles.container}" hide.bind="_state === 'hidden'">
+    <div
+        class="${styles.container}"
+        hide.bind="_state === 'hidden'"
+    >
         <c-form-select
             options.two-way="listLeft"
             label="${titleLeft}"
@@ -20,8 +23,16 @@
             scroll-to-load.bind="scrollToLoadLeft"
             actions.bind="actionsLeft"
         >
-            <span slot="tip" show.bind="tipLeftContent">
-                <c-tip side="bottom" icon-tip.bind="true" arrow-position="leftEdge" size="medium">
+            <span
+                slot="tip"
+                show.bind="tipLeftContent"
+            >
+                <c-tip
+                    side="bottom"
+                    icon-tip.bind="true"
+                    arrow-position="leftEdge"
+                    size="medium"
+                >
                     <div slot="trigger">
                         <c-icon icon="question"></c-icon>
                     </div>
@@ -63,8 +74,16 @@
             scroll-to-load.bind="scrollToLoadRight"
             actions.bind="actionsRight"
         >
-            <span slot="tip" show.bind="tipRightContent">
-                <c-tip side="bottom" icon-tip.bind="true" arrow-position="rightEdge" size="medium">
+            <span
+                slot="tip"
+                show.bind="tipRightContent"
+            >
+                <c-tip
+                    side="bottom"
+                    icon-tip.bind="true"
+                    arrow-position="rightEdge"
+                    size="medium"
+                >
                     <div slot="trigger">
                         <c-icon icon="question"></c-icon>
                     </div>
diff --git a/src/components/forms/select/c-form-select/c-form-select.css b/src/components/forms/select/c-form-select/c-form-select.css
index 354054fa..370a8ad7 100644
--- a/src/components/forms/select/c-form-select/c-form-select.css
+++ b/src/components/forms/select/c-form-select/c-form-select.css
@@ -40,6 +40,7 @@ c-form-select{
     -moz-appearance: none;
     display: block;
     width: 100%;
+    height: unset;
     padding: var(--s-5) var(--s-3);
     border: solid 1px var(--c_black);
     border-radius: 0;
@@ -157,7 +158,7 @@ select.error{
 
 .loader{
     position: absolute;
-    top: 60px;
+    top: 25px;
     bottom: 0;
     width: 100%;
     min-height: 109px;
diff --git a/src/components/forms/select/c-form-select/c-form-select.html b/src/components/forms/select/c-form-select/c-form-select.html
index 06d955ac..2e6e7b18 100644
--- a/src/components/forms/select/c-form-select/c-form-select.html
+++ b/src/components/forms/select/c-form-select/c-form-select.html
@@ -6,15 +6,21 @@
 <template>
     <require from="./c-form-select.css"></require>
 
-    <div class="${styles.labelWrapper}" show.bind="_state !== 'hidden' && label">
+    <div
+        class="${styles.labelWrapper}"
+        show.bind="_state !== 'hidden' && label"
+    >
         <c-label state="${_state}">
             ${label}
         </c-label>
         <slot name="tip"></slot>
     </div>
-    <l-stack spacing="var(--s-3)">
+    <l-stack
+        spacing="var(--s-3)"
+        if.bind="_state !== 'disabled'"
+    >
         <c-form-text
-            if.bind="search && _state !== 'hidden' && _state !== 'disabled'"
+            if.bind="search && _state !== 'hidden'"
             text-value.bind="searchText"
             class="${styles.search}"
             clearable.bind="true"
@@ -23,30 +29,77 @@
             button-action.call="searchSelect(textValue)">
         </c-form-text>
         <select
-            if.bind="!isLoading && _state !== 'hidden' && _state !== 'disabled'"
-            class="${styles.select}  ${styles[_state]}  ${multiple ? styles.multiple : ''}"
+            class="
+                ${styles.select}
+                ${styles[_state]}
+                ${multiple ? styles.multiple : ''}
+            "
             value.bind="selectValue"
             multiple.bind="multiple"
             scroll.trigger="onScroll() & throttle"
+            if.bind="!isLoading && _state !== 'hidden'"
         >
-            <option if.bind="!simple" repeat.for="option of filteredOptions" value="${option.value}">${option.text}</option>
-            <option if.bind="simple" repeat.for="option of filteredOptions" value="${option}">${option}</option>
+            <option
+                repeat.for="option of filteredOptions"
+                value="${option.value}"
+                if.bind="!simple"
+            >
+                ${option.text}
+            </option>
+            <option
+                repeat.for="option of filteredOptions"
+                value="${option}"
+                if.bind="simple"
+            >
+                ${option}
+            </option>
         </select>
-        <div if.bind="reorder">
-            <l-cluster spacing="var(--s-3)">
-                <div>
-                    <c-button size="small" color="neutral" icon="chevron-up" icon-position="center" click.trigger="moveItems(-1)" state="${selectValue.length ? '': 'disabled'}"></c-button>
-                    <c-button size="small" color="neutral" icon="chevron-down" icon-position="center" click.trigger="moveItems(1)" state="${selectValue.length ? '': 'disabled'}"></c-button>
-                </div>
-            </l-cluster>
-        </div>
+        <l-cluster
+            spacing="var(--s-3)"
+            if.bind="reorder"
+        >
+            <div>
+                <c-button
+                    size="small"
+                    color="neutral"
+                    icon="chevron-up"
+                    icon-position="center"
+                    click.trigger="moveItems(-1)"
+                    state="${selectValue.length ? '': 'disabled'}"
+                ></c-button>
+                <c-button
+                    size="small"
+                    color="neutral"
+                    icon="chevron-down"
+                    icon-position="center"
+                    click.trigger="moveItems(1)"
+                    state="${selectValue.length ? '': 'disabled'}"
+                ></c-button>
+            </div>
+        </l-cluster>
     </l-stack>
-    <div class="${isLoading ? styles.loader : ''}  ${isLoadingMore ? styles.loadingMore : ''}" if.bind="(isLoading || isLoadingMore) && multiple">
+    <div
+        class="
+            ${isLoading ? styles.loader : ''}
+            ${isLoadingMore ? styles.loadingMore : ''}
+        "
+        if.bind="(isLoading || isLoadingMore) && multiple"
+    >
         <c-spinner size="small"></c-spinner>
     </div>
     <c-disabled if.bind="_state === 'disabled'">
         ${selectValue || 'None'}
     </c-disabled>
-    <c-form-error state="${_state}" if.bind="_state !== 'hidden' && errorMsg">${errorMsg}</c-form-error>
-    <c-form-warning state="${_state}" if.bind="_state !== 'hidden' && warningMsg">${warningMsg}</c-form-warning>
+    <c-form-error
+        state="${_state}"
+        if.bind="_state !== 'hidden' && errorMsg"
+    >
+        ${errorMsg}
+    </c-form-error>
+    <c-form-warning
+        state="${_state}"
+        if.bind="_state !== 'hidden' && warningMsg"
+    >
+        ${warningMsg}
+    </c-form-warning>
 </template>
diff --git a/src/components/forms/slider/c-form-slider/c-form-slider.html b/src/components/forms/slider/c-form-slider/c-form-slider.html
index 488dae9e..3df72542 100644
--- a/src/components/forms/slider/c-form-slider/c-form-slider.html
+++ b/src/components/forms/slider/c-form-slider/c-form-slider.html
@@ -7,8 +7,14 @@
 	<require from="./c-form-slider.css"></require>
 
     <div class="${inline ? styles.inline : ''}">
-        <div class="${styles.labelWrapper}" show.bind="_state !== 'hidden' && label">
-            <c-label state="${_state}" if.bind="label">
+        <div
+            class="${styles.labelWrapper}"
+            show.bind="_state !== 'hidden' && label"
+        >
+            <c-label
+                state="${_state}"
+                if.bind="label"
+            >
                 ${label}
             </c-label>
             <slot name="tip"></slot>
@@ -21,5 +27,10 @@
             debounce-time.bind="debounceTime"
         ></c-slider>
     </div>
-    <c-form-error state="${_state}" if.bind="_state !== 'hidden' && errorMsg">${errorMsg}</c-form-error>
+    <c-form-error
+        state="${_state}"
+        if.bind="_state !== 'hidden' && errorMsg"
+    >
+        ${errorMsg}
+    </c-form-error>
 </template>
diff --git a/src/components/forms/slider/c-slider/c-slider.html b/src/components/forms/slider/c-slider/c-slider.html
index 472bb5de..60eb717a 100644
--- a/src/components/forms/slider/c-slider/c-slider.html
+++ b/src/components/forms/slider/c-slider/c-slider.html
@@ -7,7 +7,10 @@
 	<require from="./c-slider.css"></require>
 
     <input
-        class="${styles.slider}  ${state === 'disabled' ? styles.disabled : ''}"
+        class="
+            ${styles.slider}
+            ${state === 'disabled' ? styles.disabled : ''}
+        "
         type="range"
         step="1"
         max="${increments}"
diff --git a/src/components/forms/text/c-form-text/c-form-text.html b/src/components/forms/text/c-form-text/c-form-text.html
index 8245c3b8..7e82d8db 100644
--- a/src/components/forms/text/c-form-text/c-form-text.html
+++ b/src/components/forms/text/c-form-text/c-form-text.html
@@ -6,14 +6,25 @@
 <template>
     <require from="./c-form-text.css"></require>
 
-    <div class="${styles.labelWrapper}" show.bind="_state !== 'hidden' && label">
-        <c-label state="${_state}" icon="${labelIcon}" label-icon-color="${labelIconColor}">
+    <div
+        class="${styles.labelWrapper}"
+        show.bind="_state !== 'hidden' && label"
+    >
+        <c-label
+            state="${_state}"
+            icon="${labelIcon}"
+            label-icon-color="${labelIconColor}"
+        >
             ${label}
         </c-label>
         <slot name="tip"></slot>
     </div>
     <c-text-input
-        if.bind="_state !== 'disabled' && _state !== 'hidden'"
+        class="
+            ${icon ? styles.icon : ''}
+            ${styles[iconPosition]}
+            ${alignInput && !label ? styles.alignInput : ''}
+        "
         has-focus.bind="hasFocus"
         placeholder.bind="placeholder"
         icon.bind="icon"
@@ -25,14 +36,24 @@
         button-action.call="onButtonAction(textValue)"
         clearable.bind="clearable"
         state.bind="_state"
-        class="${icon ? styles.icon : ''}  ${styles[iconPosition]}  ${alignInput && !label ? styles.alignInput : ''}"
         text-value.bind="textValue"
         event-listeners.bind="eventListeners"
+        if.bind="_state !== 'disabled' && _state !== 'hidden'"
     >
     </c-text-input>
     <c-disabled if.bind="_state === 'disabled'">
         ${textValue || 'None'}
     </c-disabled>
-    <c-form-error state="${_state}" if.bind="_state !== 'hidden' && errorMsg">${errorMsg}</c-form-error>
-    <c-form-warning state="${_state}" if.bind="_state !== 'hidden' && warningMsg">${warningMsg}</c-form-warning>
+    <c-form-error
+        state="${_state}"
+        if.bind="_state !== 'hidden' && errorMsg"
+    >
+        ${errorMsg}
+    </c-form-error>
+    <c-form-warning
+        state="${_state}"
+        if.bind="_state !== 'hidden' && warningMsg"
+    >
+        ${warningMsg}
+    </c-form-warning>
 </template>
diff --git a/src/components/forms/text/c-text-input/c-text-input.html b/src/components/forms/text/c-text-input/c-text-input.html
index 333cd23a..7f6cb5bf 100644
--- a/src/components/forms/text/c-text-input/c-text-input.html
+++ b/src/components/forms/text/c-text-input/c-text-input.html
@@ -6,39 +6,67 @@
 <template>
 	<require from="./c-text-input.css"></require>
 
-    <c-icon if.bind="icon" icon="${icon}"></c-icon>
-    <span class="${button || buttonText ? styles.buttonInput : ''} ${clearable ? styles.container : ''}">
+    <c-icon
+        if.bind="icon"
+        icon="${icon}"
+    ></c-icon>
+    <span
+        class="
+            ${button || buttonText ? styles.buttonInput : ''}
+            ${clearable ? styles.container : ''}
+        "
+    >
         <input
-            if.bind="placeholder"
+            class="
+                ${styles.input}
+                ${styles[iconPosition]}
+                ${state === 'error' ? styles.error : ''}
+                ${state === 'warning' ? styles.warning : ''}
+            "
             keyup.delegate="onKeyUp($event) & debounce"
             type="${type}"
-            class="${styles.input}  ${styles[iconPosition]}  ${state === 'error' ? styles.error : ''}  ${state === 'warning' ? styles.warning : ''}"
             placeholder.bind="placeholder"
             value.bind="textValue"
             focus.bind="hasFocus"
             id="${id}"
             autocomplete="off"
+            if.bind="placeholder"
         >
         <input
-            if.bind="!placeholder"
+            class="
+                ${styles.input}
+                ${styles[iconPosition]}
+                ${state === 'error' ? styles.error : ''}
+                ${state === 'warning' ? styles.warning : ''}
+            "
             keyup.delegate="onKeyUp($event) & debounce"
             type="${type}"
-            class="${styles.input}  ${styles[iconPosition]}  ${state === 'error' ? styles.error : ''}  ${state === 'warning' ? styles.warning : ''}"
             value.bind="textValue"
             focus.bind="hasFocus"
             id="${id}"
             autocomplete="off"
+            if.bind="!placeholder"
+        >
+        <a
+            class="
+                ${styles.clearable}
+                ${button ? styles.clearButton : ''}
+            "
+            click.delegate="clearText()"
+            if.bind="clearable && textValue"
         >
-        <a class="${styles.clearable} ${button ? styles.clearButton : ''}" click.delegate="clearText()" if.bind="clearable && textValue">
             <c-icon icon="x"></c-icon>
         </a>
         <c-button
-            if.bind="button || buttonText"
+            class="
+                ${styles.button}
+                ${button === 'bin' ? styles.bin : ''}
+            "
             color="neutral"
             icon="${button}"
             icon-position="center"
-            class="${styles.button} ${button === 'bin' ? styles.bin : ''}"
             click.delegate="buttonFn()"
+            if.bind="button || buttonText"
         >
             ${buttonText}
         </c-button>
diff --git a/src/components/forms/textarea/c-form-textarea/c-form-textarea.html b/src/components/forms/textarea/c-form-textarea/c-form-textarea.html
index 087a23e6..db3fbf86 100644
--- a/src/components/forms/textarea/c-form-textarea/c-form-textarea.html
+++ b/src/components/forms/textarea/c-form-textarea/c-form-textarea.html
@@ -6,22 +6,38 @@
 <template>
 	<require from="./c-form-textarea.css"></require>
 
-    <div class="${styles.labelWrapper}" show.bind="_state !== 'hidden' && label">
+    <div
+        class="${styles.labelWrapper}"
+        show.bind="_state !== 'hidden' && label"
+    >
         <c-label state="${_state}">
             ${label}
         </c-label>
         <slot name="tip"></slot>
     </div>
     <c-textarea-input
-        if.bind="_state !== 'disabled' && _state !== 'hidden'"
+        class="
+            ${styles[state]}
+            ${styles.textarea}
+        "
         placeholder.bind="placeholder"
-        class="${styles[state]}  ${styles.textarea}"
         state.bind="_state"
         textarea-value.bind="textareaValue"
+        if.bind="_state !== 'disabled' && _state !== 'hidden'"
     ></c-textarea-input>
     <c-disabled if.bind="_state === 'disabled'">
         ${textareaValue || 'None'}
     </c-disabled>
-    <c-form-error state="${_state}" if.bind="_state !== 'hidden' && errorMsg">${errorMsg}</c-form-error>
-    <c-form-warning state="${_state}" if.bind="_state !== 'hidden' && warningMsg">${warningMsg}</c-form-warning>
+    <c-form-error
+        state="${_state}"
+        if.bind="_state !== 'hidden' && errorMsg"
+    >
+        ${errorMsg}
+    </c-form-error>
+    <c-form-warning
+        state="${_state}"
+        if.bind="_state !== 'hidden' && warningMsg"
+    >
+        ${warningMsg}
+    </c-form-warning>
 </template>
diff --git a/src/components/forms/textarea/c-textarea-input/c-textarea-input.html b/src/components/forms/textarea/c-textarea-input/c-textarea-input.html
index c955e087..3dd70668 100644
--- a/src/components/forms/textarea/c-textarea-input/c-textarea-input.html
+++ b/src/components/forms/textarea/c-textarea-input/c-textarea-input.html
@@ -7,7 +7,11 @@
 	<require from="./c-textarea-input.css"></require>
 
     <textarea
-        class="${styles.textarea}  ${state == 'error' ? styles.error : ''}  ${state == 'warning' ? styles.warning : ''}"
+        class="
+            ${styles.textarea}
+            ${state == 'error' ? styles.error : ''}
+            ${state == 'warning' ? styles.warning : ''}
+        "
         placeholder.bind="placeholder"
         value.bind="textareaValue"
     ></textarea>
diff --git a/src/components/icons/c-icon/c-icon.html b/src/components/icons/c-icon/c-icon.html
index 6ce0de8a..04a5a353 100644
--- a/src/components/icons/c-icon/c-icon.html
+++ b/src/components/icons/c-icon/c-icon.html
@@ -6,7 +6,15 @@
 <template>
 	<require from="./c-icon.css"></require>
 
-    <svg class="${styles.icon}  ${styles[color]}  ${styles[size]}  ${action ? styles.action : ''}" click.trigger="actionFunction()">
+    <svg
+        class="
+            ${styles.icon}
+            ${styles[color]}
+            ${styles[size]}
+            ${action ? styles.action : ''}
+        "
+        click.trigger="actionFunction()"
+    >
         <use xlink:href="#${icon}"></use>
     </svg>
 </template>
diff --git a/src/components/modal/c-modal/c-modal.html b/src/components/modal/c-modal/c-modal.html
index e23475b0..b4dc04ff 100644
--- a/src/components/modal/c-modal/c-modal.html
+++ b/src/components/modal/c-modal/c-modal.html
@@ -6,12 +6,14 @@
 <template>
 	<require from="./c-modal.css"></require>
 
-    <ux-dialog class="
-        ${styles.dialog}
-        ${styles[model.size]}
-        ${model.size == 'full' ? 'js-full' : ''}
-        ${model.size == 'large' ? 'js-large' : ''}
-    ">
+    <ux-dialog
+        class="
+            ${styles.dialog}
+            ${styles[model.size]}
+            ${model.size == 'full' ? 'js-full' : ''}
+            ${model.size == 'large' ? 'js-large' : ''}
+        "
+    >
         <ux-dialog-header class="${styles.header}">
             <l-cluster
                 spacing="var(--s-1)"
@@ -36,8 +38,8 @@
                 </div>
             </l-cluster>
             <c-button
-                click.delegate="controller.cancel()"
                 class="${styles.closeButton}"
+                click.delegate="controller.cancel()"
                 icon="x"
                 icon-position="center"
             ></c-button>
diff --git a/src/components/navs/c-nav-horizontal-item/c-nav-horizontal-item.html b/src/components/navs/c-nav-horizontal-item/c-nav-horizontal-item.html
index 7fba24a9..c91daf41 100644
--- a/src/components/navs/c-nav-horizontal-item/c-nav-horizontal-item.html
+++ b/src/components/navs/c-nav-horizontal-item/c-nav-horizontal-item.html
@@ -6,23 +6,58 @@
 <template>
 	<require from="./c-nav-horizontal-item.css"></require>
 
-    <li class="${styles.navHorizontalItem}  ${styles[state]}  ${styles[position]}" hide.bind="state === 'hidden'">
-        <a if.bind="route" href.bind="generatedLink" click.trigger="toggleMobileNav()">
+    <li
+        class="
+            ${styles.navHorizontalItem}
+            ${styles[state]}
+            ${styles[position]}
+        "
+        hide.bind="state === 'hidden'"
+    >
+        <a
+            href.bind="generatedLink"
+            click.trigger="toggleMobileNav()"
+            if.bind="route"
+        >
             ${title}
-            <div class="${styles.icon}" if.bind="icon">
-                <c-icon icon="${icon}" color="${iconColor}"></c-icon>
+            <div
+                class="${styles.icon}"
+                if.bind="icon"
+            >
+                <c-icon
+                    icon="${icon}"
+                    color="${iconColor}"
+                ></c-icon>
             </div>
         </a>
-        <a if.bind="href" href="${href}">
+        <a
+            href="${href}"
+            if.bind="href"
+        >
             ${title}
-            <div class="${styles.icon}" if.bind="icon">
-                <c-icon icon="${icon}" color="${iconColor}"></c-icon>
+            <div
+                class="${styles.icon}"
+                if.bind="icon"
+            >
+                <c-icon
+                    icon="${icon}"
+                    color="${iconColor}"
+                ></c-icon>
             </div>
         </a>
-        <a if.bind="action" click.trigger="actionFunction()">
+        <a
+            click.trigger="actionFunction()"
+            if.bind="action"
+        >
             ${title}
-            <div class="${styles.icon}" if.bind="icon">
-                <c-icon icon="${icon}" color="${iconColor}"></c-icon>
+            <div
+                class="${styles.icon}"
+                if.bind="icon"
+            >
+                <c-icon
+                    icon="${icon}"
+                    color="${iconColor}"
+                ></c-icon>
             </div>
         </a>
         <slot></slot>
diff --git a/src/components/navs/c-nav-horizontal/c-nav-horizontal.html b/src/components/navs/c-nav-horizontal/c-nav-horizontal.html
index 1d01e8a0..41688bed 100644
--- a/src/components/navs/c-nav-horizontal/c-nav-horizontal.html
+++ b/src/components/navs/c-nav-horizontal/c-nav-horizontal.html
@@ -6,12 +6,34 @@
 <template>
 	<require from="./c-nav-horizontal.css"></require>
 
-    <nav class="${styles.navHorizontal}  ${styles[size]}" hide.bind="state === 'hidden'">
-        <button class="${styles.mobileTrigger}  ${mobileNavOpen.open ? styles.mobileTriggerActive : ''}" if.bind="mobile" click.trigger="toggleMobileNav()">
+    <nav
+        class="
+            ${styles.navHorizontal}
+            ${styles[size]}
+        "
+        hide.bind="state === 'hidden'"
+    >
+        <button
+            class="
+                ${styles.mobileTrigger}
+                ${mobileNavOpen.open ? styles.mobileTriggerActive : ''}
+            "
+            click.trigger="toggleMobileNav()"
+            if.bind="mobile"
+        >
             <span>Mobile Nav</span>
         </button>
-        <l-cluster align="${align}" justify="{$justify}" spacing="${spacing}">
-            <ul class="${mobile ? styles.navMobile : ''}  ${mobileNavOpen.open ? styles.navMobileActive : ''}">
+        <l-cluster
+            align="${align}"
+            justify="{$justify}"
+            spacing="${spacing}"
+        >
+            <ul
+                class="
+                    ${mobile ? styles.navMobile : ''}
+                    ${mobileNavOpen.open ? styles.navMobileActive : ''}
+                "
+            >
                 <slot></slot>
             </ul>
         </l-cluster>
diff --git a/src/components/navs/c-nav-vertical-item/c-nav-vertical-item.html b/src/components/navs/c-nav-vertical-item/c-nav-vertical-item.html
index 9d230e80..69016ab4 100644
--- a/src/components/navs/c-nav-vertical-item/c-nav-vertical-item.html
+++ b/src/components/navs/c-nav-vertical-item/c-nav-vertical-item.html
@@ -18,19 +18,36 @@
         hide.bind="state === 'hidden'"
         drag-dropzone.bind="dropzoneActions"
     >
-        <span class="${styles.accordionArrow}" if.bind="accordionItem">
+        <span
+            class="${styles.accordionArrow}"
+            if.bind="accordionItem"
+        >
             <svg class="icon">
                 <use xlink:href="#chevron-right"></use>
             </svg>
         </span>
-        <a if.bind="accordionItem && title" click.trigger="toggleAccordion()" class="${styles.accordionLink}">
+        <a
+            click.trigger="toggleAccordion()"
+            class="${styles.accordionLink}"
+            if.bind="accordionItem && title"
+        >
             ${title}
         </a>
-        <a if.bind="!accordionItem && title" click.delegate="clickTrigger()">
+        <a
+            if.bind="!accordionItem && title"
+            click.delegate="clickTrigger()"
+        >
             ${title}
-            <span class="${styles.sub}" if.bind="subText">${subText}</span>
+            <span
+                class="${styles.sub}"
+                if.bind="subText"
+            >${subText}</span>
         </a>
-        <div if.bind="icon && iconAction" click.trigger="actionFunction()" class="${styles.iconContainer}">
+        <div
+            click.trigger="actionFunction()"
+            class="${styles.iconContainer}"
+            if.bind="icon && iconAction"
+        >
             <c-icon icon="${icon}"></c-icon>
         </div>
         <h4 if.bind="sectionTitle">${sectionTitle}</h4>
diff --git a/src/components/navs/c-nav-vertical-sliding/c-nav-vertical-sliding.html b/src/components/navs/c-nav-vertical-sliding/c-nav-vertical-sliding.html
index 979f0a0c..962052e2 100644
--- a/src/components/navs/c-nav-vertical-sliding/c-nav-vertical-sliding.html
+++ b/src/components/navs/c-nav-vertical-sliding/c-nav-vertical-sliding.html
@@ -6,20 +6,55 @@
 <template>
 	<require from="./c-nav-vertical-sliding.css"></require>
 
-    <div class="${styles.container} ${navState === 'right' ? styles[navState] : ''}  ${!showHidden ? styles.hidden : ''}" show.bind="!isPageLoading">
-        <div class="${styles.block}" repeat.for="page of nav.pages">
-            <div class="${styles.triggerContainer}  ${(isTriggerContentHidden && $index === 0) ? styles.triggerContentHidden : ''}">
+    <div
+        class="
+            ${styles.container}
+            ${navState === 'right' ? styles[navState] : ''}
+            ${!showHidden ? styles.hidden : ''}
+        "
+        show.bind="!isPageLoading"
+    >
+        <div
+            class="${styles.block}"
+            repeat.for="page of nav.pages"
+        >
+            <div
+                class="
+                    ${styles.triggerContainer}
+                    ${(isTriggerContentHidden && $index === 0) ? styles.triggerContentHidden : ''}
+                "
+            >
                 <div>
-                    <div class="${styles.trigger}" click.trigger="toggleNav()" show.bind="page.prevText && (showTrigger || $index > 0)">
-                        <c-icon icon="chevron-left" size="itzy"></c-icon>
+                    <div
+                        class="${styles.trigger}"
+                        click.trigger="toggleNav()"
+                        show.bind="page.prevText && (showTrigger || $index > 0)"
+                    >
+                        <c-icon
+                            icon="chevron-left"
+                            size="itzy"
+                        ></c-icon>
                         <span>${page.prevText}</span>
                     </div>
-                    <div class="${styles.trigger}" click.trigger="toggleNav()" show.bind="page.nextText && (showTrigger || $index > 0)">
+                    <div
+                        class="${styles.trigger}"
+                        click.trigger="toggleNav()"
+                        show.bind="page.nextText && (showTrigger || $index > 0)"
+                    >
                         <span>${page.nextText}</span>
-                        <c-icon icon="chevron-right" size="itzy"></c-icon>
+                        <c-icon
+                            icon="chevron-right"
+                            size="itzy"
+                        ></c-icon>
                     </div>
                 </div>
-                <c-h3 truncate.bind="true" dark-back.bind="true" if.bind="page.title && (showTrigger || $index > 0)">${page.title}</c-h3>
+                <c-h3
+                    truncate.bind="true"
+                    dark-back.bind="true"
+                    if.bind="page.title && (showTrigger || $index > 0)"
+                >
+                    ${page.title}
+                </c-h3>
                 <c-form-text
                     placeholder.bind="page.searchPlaceholder"
                     button="search"
@@ -27,8 +62,7 @@
                     text-value.bind="page.searchQuery"
                     button-action.call="page.searchFn(textValue)"
                     if.bind="page.searchFn && page.searchPlaceholder && (showTrigger || $index > 0)"
-                >
-                </c-form-text>
+                ></c-form-text>
                 <c-notification if.bind="!page.navs.length">No Results Found</c-notification>
             </div>
             <c-nav-vertical
@@ -69,5 +103,8 @@
             </c-nav-vertical>
         </div>
     </div>
-    <c-spinner size="small" if.bind="isPageLoading"></c-spinner>
+    <c-spinner
+        size="small"
+        if.bind="isPageLoading"
+    ></c-spinner>
 </template>
diff --git a/src/components/navs/c-nav-vertical/c-nav-vertical.html b/src/components/navs/c-nav-vertical/c-nav-vertical.html
index 1e03a4ba..ea9cfda0 100644
--- a/src/components/navs/c-nav-vertical/c-nav-vertical.html
+++ b/src/components/navs/c-nav-vertical/c-nav-vertical.html
@@ -6,11 +6,21 @@
 <template>
 	<require from="./c-nav-vertical.css"></require>
 
-    <nav class="${styles.navVertical}  ${navBottom ? styles.navBottom : ''}">
-        <ul class="${navBottom ? styles.overflow : ''}" scroll.trigger="onScroll($event) & throttle">
+    <nav
+        class="
+            ${styles.navVertical}
+            ${navBottom ? styles.navBottom : ''}"
+        >
+        <ul
+            class="${navBottom ? styles.overflow : ''}"
+            scroll.trigger="onScroll($event) & throttle"
+        >
         	<slot></slot>
         </ul>
-        <ul class="${styles.secondList}" show.bind="navBottom">
+        <ul
+            class="${styles.secondList}"
+            show.bind="navBottom"
+        >
         	<slot name="bottom"></slot>
         </ul>
     </nav>
diff --git a/src/components/notifications/c-notification/c-notification.html b/src/components/notifications/c-notification/c-notification.html
index 4ba7c6d7..28d5d8c1 100644
--- a/src/components/notifications/c-notification/c-notification.html
+++ b/src/components/notifications/c-notification/c-notification.html
@@ -6,9 +6,18 @@
 <template>
 	<require from="./c-notification.css"></require>
 
-    <div class="${styles.notification}  ${styles[type]}" show.bind="_state !== 'hidden'">
+    <div
+        class="
+            ${styles.notification}
+            ${styles[type]}
+        "
+        show.bind="_state !== 'hidden'"
+    >
         <c-icon icon="${type == 'info' ? 'info' : ''}${type == 'success' ? 'info' : ''}${type == 'warning' ? 'warning' : ''}${type == 'critical' ? 'warning' : ''}"></c-icon>
-        <div class="${styles.callout}" if.bind="calloutTitle || calloutContent">
+        <div
+            class="${styles.callout}"
+            if.bind="calloutTitle || calloutContent"
+        >
             <c-h5>${calloutTitle}</c-h5>
             <c-h2>${calloutContent}</c-h2>
         </div>
diff --git a/src/components/pills/c-pill/c-pill.html b/src/components/pills/c-pill/c-pill.html
index 3e889c9f..6b57ddb3 100644
--- a/src/components/pills/c-pill/c-pill.html
+++ b/src/components/pills/c-pill/c-pill.html
@@ -6,12 +6,37 @@
 <template>
 	<require from="./c-pill.css"></require>
 
-    <span show.bind="!href" class="${styles.pill}  ${styles[color]}">
-        <c-icon icon="${icon}" color="white" size="itzy" action.call="actionFunction()" if.bind="icon"></c-icon>
+    <span
+        show.bind="!href"
+        class="
+            ${styles.pill}
+            ${styles[color]}
+        "
+    >
+        <c-icon
+            icon="${icon}"
+            color="white"
+            size="itzy"
+            action.call="actionFunction()"
+            if.bind="icon"
+        ></c-icon>
         <slot name="pill-content"></slot>
     </span>
-    <a show.bind="href" href.bind="href" class="${styles.pill}  ${styles[color]}">
-        <c-icon icon="${icon}" color="white" size="itzy" action.call="actionFunction()" if.bind="icon"></c-icon>
+    <a
+        href.bind="href"
+        class="
+            ${styles.pill}
+            ${styles[color]}
+        "
+        show.bind="href"
+    >
+        <c-icon
+            icon="${icon}"
+            color="white"
+            size="itzy"
+            action.call="actionFunction()"
+            if.bind="icon"
+        ></c-icon>
 		<slot name="pill-link-content"></slot>
 	</a>
 </template>
diff --git a/src/components/popover/c-popover/c-popover.html b/src/components/popover/c-popover/c-popover.html
index 95b2c763..32248857 100644
--- a/src/components/popover/c-popover/c-popover.html
+++ b/src/components/popover/c-popover/c-popover.html
@@ -10,7 +10,10 @@
         class="${styles.overlay}"
         if.bind="vPopoverService.model"
     >
-        <div class="${styles.closeTrigger}" click.trigger="vPopoverService.close()"></div>
+        <div
+            class="${styles.closeTrigger}"
+            click.trigger="vPopoverService.close()"
+        ></div>
         <div
             class="
                 ${styles.popover}
@@ -26,12 +29,27 @@
                     margin-top: ${vPopoverService.model.top ? vPopoverService.model.top + 'px' : ''};
                 "
             >
-                <div class="${tipStyles.tip}  ${styles.container}" id="popover-container">
+                <div
+                    class="
+                        ${tipStyles.tip}
+                        ${styles.container}
+                    "
+                    id="popover-container"
+                >
                     <div class="${styles.containerInner}">
-                        <compose if.bind="vPopoverService.model.contentViewModel && vPopoverService.model.data" view-model.bind="vPopoverService.model.contentViewModel" model.bind="{data: vPopoverService.model.data}"></compose>
+                        <compose
+                            view-model.bind="vPopoverService.model.contentViewModel"
+                            model.bind="{data: vPopoverService.model.data}"
+                            if.bind="vPopoverService.model.contentViewModel && vPopoverService.model.data"
+                        ></compose>
                         <p else>Empty</p>
                     </div>
-                    <span class="${tipStyles.close}  ${styles.close}" click.trigger="vPopoverService.close()">×</span>
+                    <span
+                        class="${tipStyles.close}  ${styles.close}"
+                        click.trigger="vPopoverService.close()"
+                    >
+                        ×
+                    </span>
                     <span
                         class="${tipStyles.color}"
                         css="--tip-bar-color: ${vPopoverService.color};"
diff --git a/src/components/tables/c-table-fixed-header/c-table-fixed-header.html b/src/components/tables/c-table-fixed-header/c-table-fixed-header.html
index b4803bca..13e76d95 100644
--- a/src/components/tables/c-table-fixed-header/c-table-fixed-header.html
+++ b/src/components/tables/c-table-fixed-header/c-table-fixed-header.html
@@ -6,11 +6,21 @@
 <template>
 	<require from="./c-table-fixed-header.css"></require>
 
-    <div class="${styles.fixedTableHeaderBg}" css="${(totalWidth > windowWidth) ? 'width:' + totalWidth + 'px' : ''}"></div>
-    <div class="${styles.fixedTableHeader}" css="${(totalWidth > windowWidth) ? 'width:' + totalWidth + 'px' : ''}" scroll.trigger="onScroll() & throttle">
+    <div
+        class="${styles.fixedTableHeaderBg}"
+        css="${(totalWidth > windowWidth) ? 'width:' + totalWidth + 'px' : ''}"
+    ></div>
+    <div
+        class="${styles.fixedTableHeader}"
+        css="${(totalWidth > windowWidth) ? 'width:' + totalWidth + 'px' : ''}"
+        scroll.trigger="onScroll() & throttle"
+    >
         <slot></slot>
     </div>
-    <div if.bind="isLoading" class="${styles.loader}">
+    <div
+        class="${styles.loader}"
+        if.bind="isLoading"
+    >
         <c-spinner size="small"></c-spinner>
     </div>
 </template>
diff --git a/src/components/tables/c-table/c-table.html b/src/components/tables/c-table/c-table.html
index 97b74e2c..50cef036 100644
--- a/src/components/tables/c-table/c-table.html
+++ b/src/components/tables/c-table/c-table.html
@@ -8,7 +8,13 @@
 
     <table
         if.bind="_state !== 'hidden'"
-        class="${styles.table}  ${striped ? styles.striped : ''}  ${hover ? styles.hover : ''}  ${noVerticalBorders ? styles.noVerticalBorders : ''}  ${responsive ? styles.responsive : ''}"
+        class="
+            ${styles.table}
+            ${striped ? styles.striped : ''}
+            ${hover ? styles.hover : ''}
+            ${noVerticalBorders ? styles.noVerticalBorders : ''}
+            ${responsive ? styles.responsive : ''}
+        "
     >
         <colgroup>
             <col
@@ -65,5 +71,4 @@
             </tr>
         </tbody>
     </table>
-
 </template>
diff --git a/src/components/tables/c-td/c-td.html b/src/components/tables/c-td/c-td.html
index 4c5d67f9..8c51a760 100644
--- a/src/components/tables/c-td/c-td.html
+++ b/src/components/tables/c-td/c-td.html
@@ -6,7 +6,12 @@
 <template>
 	<require from="./c-td.css"></require>
 
-    <compose if.bind="col.view" view.bind="col.view" view-model.bind="col.viewModel" model.bind="modelData"></compose>
+    <compose
+        view.bind="col.view"
+        view-model.bind="col.viewModel"
+        model.bind="modelData"
+        if.bind="col.view"
+    ></compose>
     <span if.bind="!col.view">
         ${modelData.value | meta:col.valueConverter:col.valueConverterFormat}
     </span>
diff --git a/src/components/tables/td-contents/c-td-action/c-td-action.html b/src/components/tables/td-contents/c-td-action/c-td-action.html
index 38ca1d1a..f9426563 100644
--- a/src/components/tables/td-contents/c-td-action/c-td-action.html
+++ b/src/components/tables/td-contents/c-td-action/c-td-action.html
@@ -6,11 +6,28 @@
 <template>
 	<require from="./c-td-action.css"></require>
 
-    <span class="${styles.base}" if.bind="row[col.colHeadName + 'Icon'] && col.colAction" click.delegate="col.colAction(row)">
+    <span
+        class="${styles.base}"
+        if.bind="row[col.colHeadName + 'Icon'] && col.colAction"
+        click.delegate="col.colAction(row)"
+    >
         <c-icon icon="${row[col.colHeadName + 'Icon']}"></c-icon>
     </span>
-
-    <a class="${styles.base}" if.bind="row[col.colHeadName + 'URL']" href="${row[col.colHeadName + 'URL']}">${value}</a>
-
-    <span class="${styles.base}  ${styles.textAction}" if.bind="col.colAction" click.delegate="col.colAction(row)">${value}</span>
+    <a
+        class="${styles.base}"
+        href="${row[col.colHeadName + 'URL']}"
+        if.bind="row[col.colHeadName + 'URL']"
+    >
+        ${value}
+    </a>
+    <span
+        class="
+            ${styles.base}
+            ${styles.textAction}
+        "
+        click.delegate="col.colAction(row)"
+        if.bind="col.colAction"
+    >
+        ${value}
+    </span>
 </template>
diff --git a/src/components/tables/td-contents/c-td-button/c-td-button.html b/src/components/tables/td-contents/c-td-button/c-td-button.html
index cafe83b0..d88b01c5 100644
--- a/src/components/tables/td-contents/c-td-button/c-td-button.html
+++ b/src/components/tables/td-contents/c-td-button/c-td-button.html
@@ -5,12 +5,13 @@
 
 <template>
     <c-button
-            size="small"
-            color="${row[col.colHeadName + 'ButtonColor'] ? row[col.colHeadName + 'ButtonColor'] : 'primary'}"
-            state="${row[col.colHeadName + 'ButtonState']}"
-            icon="${row[col.colHeadName + 'ButtonIcon']}"
-            icon-position="center"
-            action.call="col.colAction(row)">
+        size="small"
+        color="${row[col.colHeadName + 'ButtonColor'] ? row[col.colHeadName + 'ButtonColor'] : 'primary'}"
+        state="${row[col.colHeadName + 'ButtonState']}"
+        icon="${row[col.colHeadName + 'ButtonIcon']}"
+        icon-position="center"
+        action.call="col.colAction(row)"
+    >
         ${value}
     </c-button>
 </template>
diff --git a/src/components/tables/td-contents/c-td-drag-check/c-td-drag-check.html b/src/components/tables/td-contents/c-td-drag-check/c-td-drag-check.html
index afcc8b66..b4234006 100644
--- a/src/components/tables/td-contents/c-td-drag-check/c-td-drag-check.html
+++ b/src/components/tables/td-contents/c-td-drag-check/c-td-drag-check.html
@@ -4,9 +4,6 @@
 -->
 
 <template>
-    <c-drag-handle
-        drag-options.bind="col.getDragOptions(row)"
-    >
-    </c-drag-handle>
+    <c-drag-handle drag-options.bind="col.getDragOptions(row)"></c-drag-handle>
     <c-checkbox-input checked-value.bind="row[col.colHeadName]"></c-checkbox-input>
 </template>
diff --git a/src/components/tables/td-contents/c-td-image/c-td-image.html b/src/components/tables/td-contents/c-td-image/c-td-image.html
index c6eb5352..48b1c8f2 100644
--- a/src/components/tables/td-contents/c-td-image/c-td-image.html
+++ b/src/components/tables/td-contents/c-td-image/c-td-image.html
@@ -6,5 +6,9 @@
 <template>
 	<require from="./c-td-image.css"></require>
 
-    <img class="${styles.image}" src="${value}" alt="${row[col.colHeadName + 'Alt']}">
+    <img
+        class="${styles.image}"
+        src="${value}"
+        alt="${row[col.colHeadName + 'Alt']}"
+    >
 </template>
diff --git a/src/components/tables/td-contents/c-td-text-input/c-td-text-input.html b/src/components/tables/td-contents/c-td-text-input/c-td-text-input.html
index 79f83aeb..20620ff0 100644
--- a/src/components/tables/td-contents/c-td-text-input/c-td-text-input.html
+++ b/src/components/tables/td-contents/c-td-text-input/c-td-text-input.html
@@ -4,5 +4,9 @@
 -->
 
 <template>
-    <c-form-text acl-restricted text-value.bind="row[col.colHeadName]" keyup.delegate="changeDetection(row, col)"></c-form-text>
+    <c-form-text
+        acl-restricted
+        text-value.bind="row[col.colHeadName]"
+        keyup.delegate="changeDetection(row, col)"
+    ></c-form-text>
 </template>
diff --git a/src/components/tables/td-contents/c-td-tip/c-td-tip.html b/src/components/tables/td-contents/c-td-tip/c-td-tip.html
index 4d8a71d8..f9faad0f 100644
--- a/src/components/tables/td-contents/c-td-tip/c-td-tip.html
+++ b/src/components/tables/td-contents/c-td-tip/c-td-tip.html
@@ -4,7 +4,12 @@
 -->
 
 <template>
-    <c-tip side="${row[col.colHeadName + 'TipSide']}" arrow-position="${row[col.colHeadName + 'TipArrowPosition']}" size="${row[col.colHeadName + 'TipSize']}" icon-tip.bind="true">
+    <c-tip
+        side="${row[col.colHeadName + 'TipSide']}"
+        arrow-position="${row[col.colHeadName + 'TipArrowPosition']}"
+        size="${row[col.colHeadName + 'TipSize']}"
+        icon-tip.bind="true"
+    >
         <div slot="trigger">
             <span if.bind="row[col.colHeadName + 'TipTriggerIcon']">
                 <c-icon icon="${row[col.colHeadName + 'TipTriggerIcon']}"></c-icon>
@@ -12,7 +17,11 @@
             <span if.bind="row[col.colHeadName + 'TipTriggerText']">${row[col.colHeadName + 'TipTriggerText']}</span>
         </div>
         <div slot="content">
-            <compose if.bind="row[col.colHeadName + 'TipViewModel']" view-model.bind="row[col.colHeadName + 'TipViewModel']" model.bind="{row:row, col:col}"></compose>
+            <compose
+                if.bind="row[col.colHeadName + 'TipViewModel']"
+                view-model.bind="row[col.colHeadName + 'TipViewModel']"
+                model.bind="{row:row, col:col}"
+            ></compose>
         </div>
     </c-tip>
 </template>
diff --git a/src/components/tables/td-contents/c-td-truncate/c-td-truncate.html b/src/components/tables/td-contents/c-td-truncate/c-td-truncate.html
index e759916d..1d44a9bd 100644
--- a/src/components/tables/td-contents/c-td-truncate/c-td-truncate.html
+++ b/src/components/tables/td-contents/c-td-truncate/c-td-truncate.html
@@ -7,12 +7,13 @@
 	<require from="./c-td-truncate.css"></require>
 
 	<c-tip
-	if.bind="row[col.colHeadName + 'Tip']"
-	side="${row[col.colHeadName + 'TipSide']}"
-	arrow-position="${row[col.colHeadName + 'TipArrowPosition']}"
-	size="${row[col.colHeadName + 'TipSize']}"
-	fill-width-trigger.bind="true"
-	force-close.bind="true">
+        if.bind="row[col.colHeadName + 'Tip']"
+        side="${row[col.colHeadName + 'TipSide']}"
+        arrow-position="${row[col.colHeadName + 'TipArrowPosition']}"
+        size="${row[col.colHeadName + 'TipSize']}"
+        fill-width-trigger.bind="true"
+        force-close.bind="true"
+    >
 		<div slot="trigger" >
 			<div class="${styles.container}">
 				<div class="${styles.truncate}">
@@ -22,17 +23,27 @@
 			</div>
 		</div>
 		<div slot="content">
-			<compose if.bind="row[col.colHeadName + 'TipViewModel']" view-model.bind="row[col.colHeadName + 'TipViewModel']" model.bind="{row:row, col:col}"></compose>
+			<compose
+                if.bind="row[col.colHeadName + 'TipViewModel']"
+                view-model.bind="row[col.colHeadName + 'TipViewModel']"
+                model.bind="{row:row, col:col}"
+            ></compose>
 			<div else>${value}</div>
 		</div>
 	</c-tip>
 
     <div else class="${styles.container}">
-        <c-icon icon="${row[col.colHeadName + 'Icon']}" if.bind="row[col.colHeadName + 'Icon']"></c-icon>
+        <c-icon
+            icon="${row[col.colHeadName + 'Icon']}"
+            if.bind="row[col.colHeadName + 'Icon']"
+        ></c-icon>
         <div class="${styles.truncate}">
             <span title="${value}">
                 <span if.bind="!searchHighlight">${value}</span>
-                <span if.bind="searchHighlight" innerhtml.bind="searchHighlight"></span>
+                <span
+                    if.bind="searchHighlight"
+                    innerhtml.bind="searchHighlight"
+                ></span>
             </span>
         </div>
     </div>
diff --git a/src/components/tile/c-tile/c-tile.html b/src/components/tile/c-tile/c-tile.html
index fd0686e1..4cb25521 100644
--- a/src/components/tile/c-tile/c-tile.html
+++ b/src/components/tile/c-tile/c-tile.html
@@ -6,42 +6,99 @@
 <template>
 	<require from="./c-tile.css"></require>
 
-    <div class="${styles.tile}  ${checkedValue ? styles.checked : ''}  ${hover ? styles.hover : ''}" id="${id}" if.bind="_state !== 'hidden'">
-        <div title="${title}" class="${styles.container}">
-            <c-tip side="left" size="small" icon-tip.bind="true" class="${styles.tip}" if.bind="showTip">
+    <div
+        class="
+            ${styles.tile}
+            ${checkedValue ? styles.checked : ''}
+            ${hover ? styles.hover : ''}
+        "
+        id="${id}"
+        if.bind="_state !== 'hidden'"
+    >
+        <div
+            title="${title}"
+            class="${styles.container}"
+        >
+            <c-tip
+                side="left"
+                size="small"
+                icon-tip.bind="true"
+                class="${styles.tip}"
+                if.bind="showTip"
+            >
                 <div slot="trigger">
-                    <c-icon icon="${tipIcon}" color="lightGray"></c-icon>
+                    <c-icon
+                        icon="${tipIcon}"
+                        color="lightGray"
+                    ></c-icon>
                 </div>
                 <div slot="content">
                     <template part="tip-content" replaceable></template>
                 </div>
             </c-tip>
-            <div class="${styles.image}" css="height: ${imageContainerHeight}px;" click.trigger="tileClick()">
+            <div
+                class="${styles.image}"
+                css="height: ${imageContainerHeight}px;"
+                click.trigger="tileClick()"
+            >
                 <c-drag-handle
                     class="${styles.drag}"
                     if.bind="showDrag"
                     drag-draggable.bind="dragOptions"
+                ></c-drag-handle>
+                <div
+                    class="${styles.status}  ${styles[status]}"
+                    if.bind="status"
+                ></div>
+                <img
+                    if.bind="imageUrl"
+                    src="${imageUrl}"
+                    alt="Image Loading"
+                    title="${id}"
                 >
-                </c-drag-handle>
-                <div class="${styles.status}  ${styles[status]}" if.bind="status"></div>
-                <img if.bind="imageUrl" src="${imageUrl}" alt="Image Loading" title="${id}">
-                <c-h5 color="smoke" if.bind="!imageUrl">${noImageMessage}</c-h5>
+                <c-h5
+                    color="smoke"
+                    if.bind="!imageUrl"
+                >
+                    ${noImageMessage}
+                </c-h5>
             </div>
             <div class="${styles.title}">
                 <l-cluster spacing="var(--s-4)">
                     <div>
-                        <div class="${styles.checkboxContainer}" if.bind="showCheckbox && _state !== 'disabled'">
+                        <div
+                            class="${styles.checkboxContainer}"
+                            if.bind="showCheckbox && _state !== 'disabled'"
+                        >
                             <c-checkbox-input checked-value.bind="checkedValue"></c-checkbox-input>
                         </div>
-                        <c-h4 spacing-bottom="sbNone" truncate.bind="true" click.trigger="showCheckbox && state !== 'disabled' ? checkedValue = !checkedValue : ''">
-                            <c-icon icon="${titleIcon}" size="tiny" if.bind="titleIcon"></c-icon>
+                        <c-h4
+                            truncate.bind="true"
+                            click.trigger="showCheckbox && state !== 'disabled' ? checkedValue = !checkedValue : ''"
+                        >
+                            <c-icon
+                                icon="${titleIcon}"
+                                size="tiny"
+                                if.bind="titleIcon"
+                            ></c-icon>
                             <span if.bind="!searchHighlight">${title}</span>
-                            <span if.bind="searchHighlight" innerhtml.bind="searchHighlight"></span>
+                            <span
+                                if.bind="searchHighlight"
+                                innerhtml.bind="searchHighlight"
+                            ></span>
                         </c-h4>
                     </div>
                 </l-cluster>
             </div>
-            <c-p size="small" truncate.bind="true" spacing-bottom="sbNone" click.trigger="tileClick()" if.bind="message">${message}</c-p>
+            <c-p
+                size="small"
+                truncate.bind="true"
+                spacing-bottom="sbNone"
+                click.trigger="tileClick()"
+                if.bind="message"
+            >
+                ${message}
+            </c-p>
         </div>
     </div>
 </template>
diff --git a/src/components/timeline/c-time-entry/c-time-entry-popover.html b/src/components/timeline/c-time-entry/c-time-entry-popover.html
index 1dc2196f..dc0e73d2 100644
--- a/src/components/timeline/c-time-entry/c-time-entry-popover.html
+++ b/src/components/timeline/c-time-entry/c-time-entry-popover.html
@@ -8,11 +8,21 @@
 
     <div>
         <div class="${styles.container}">
-            <div class="${styles.info}" style="padding: 0;">
-                <c-p truncate.bind="true" size="small" spacing-bottom="sbNone">
+            <div
+                class="${styles.info}"
+                style="padding: 0;"
+            >
+                <c-p
+                    truncate.bind="true"
+                    size="small"
+                >
                     ${item.title}
                 </c-p>
-                <c-p truncate.bind="true" size="small" spacing-bottom="sbNone" if.bind="item.startTime && item.endTime">
+                <c-p
+                    truncate.bind="true"
+                    size="small"
+                    if.bind="item.startTime && item.endTime"
+                >
                     ${item.startTime} - ${item.endTime}
                 </c-p>
             </div>
diff --git a/src/components/timeline/c-time-entry/c-time-entry.html b/src/components/timeline/c-time-entry/c-time-entry.html
index 0e19affa..935bdcc4 100644
--- a/src/components/timeline/c-time-entry/c-time-entry.html
+++ b/src/components/timeline/c-time-entry/c-time-entry.html
@@ -30,16 +30,41 @@
             --time-entry-color: ${item.color ? item.color : 'inherit'};
         "
     >
-        <div click.trigger="openPopover($event)" class="${styles.container}">
+        <div
+            click.trigger="openPopover($event)"
+            class="${styles.container}"
+        >
             <div class="${styles.info}  ${item.icons ? styles.infoWithIcons : ''}">
-                <c-p truncate.bind="true" size="small">
+                <c-p
+                    truncate.bind="true"
+                    size="small"
+                >
                     ${item.title}
                 </c-p>
-                <c-p truncate.bind="true" size="small" if.bind="item.startTime && item.endTime && !item.altTime">${item.startTime} - ${item.endTime}</c-p>
-                <c-p truncate.bind="true" size="small" if.bind="item.altTime">${item.altTime}</c-p>
+                <c-p
+                    truncate.bind="true"
+                    size="small"
+                    if.bind="item.startTime && item.endTime && !item.altTime"
+                >
+                    ${item.startTime} - ${item.endTime}
+                </c-p>
+                <c-p
+                    truncate.bind="true"
+                    size="small"
+                    if.bind="item.altTime"
+                >
+                    ${item.altTime}
+                </c-p>
             </div>
-            <div class="${styles.icons} ${item.shiftIcons ? styles.iconsShift : ''}" if.bind="item.icons">
-                <c-icon repeat.for="icon of item.icons" icon="${icon}" if.bind="$index < 2"></c-icon>
+            <div
+                class="${styles.icons} ${item.shiftIcons ? styles.iconsShift : ''}"
+                if.bind="item.icons"
+            >
+                <c-icon
+                    repeat.for="icon of item.icons"
+                    icon="${icon}"
+                    if.bind="$index < 2"
+                ></c-icon>
             </div>
         </div>
     </div>
diff --git a/src/components/timeline/c-timeline-block/c-timeline-block.html b/src/components/timeline/c-timeline-block/c-timeline-block.html
index d5555710..06dba3c7 100644
--- a/src/components/timeline/c-timeline-block/c-timeline-block.html
+++ b/src/components/timeline/c-timeline-block/c-timeline-block.html
@@ -7,7 +7,12 @@
 	<require from="./c-timeline-block.css"></require>
 
     <div class="${styles.timeBlock}">
-        <span if.bind="time" class="${styles.time}">${time}</span>
+        <span
+            class="${styles.time}"
+            if.bind="time"
+        >
+            ${time}
+        </span>
         <slot></slot>
     </div>
 </template>
diff --git a/src/components/timeline/c-timeline-container/c-timeline-container.html b/src/components/timeline/c-timeline-container/c-timeline-container.html
index 7f395f4a..38cd87bd 100644
--- a/src/components/timeline/c-timeline-container/c-timeline-container.html
+++ b/src/components/timeline/c-timeline-container/c-timeline-container.html
@@ -18,7 +18,10 @@
             <c-spinner if.bind="loading"></c-spinner>
             <div class="${styles.wrapper}">
                 <div
-                    class="${styles.spinner}  ${loadingBottom ? styles.spinnerLoadingBottom : ''}"
+                    class="
+                        ${styles.spinner}
+                        ${loadingBottom ? styles.spinnerLoadingBottom : ''}
+                    "
                     if.bind="loadingTop || loadingBottom"
                 >
                     <c-spinner size="small"></c-spinner>
diff --git a/src/components/timeline/c-timeline-week-container/c-timeline-week-container.html b/src/components/timeline/c-timeline-week-container/c-timeline-week-container.html
index 1fab45f7..d3539b97 100644
--- a/src/components/timeline/c-timeline-week-container/c-timeline-week-container.html
+++ b/src/components/timeline/c-timeline-week-container/c-timeline-week-container.html
@@ -9,7 +9,12 @@
     <div class="${styles.wrapper}">
         <div class="${styles.dates}">
             <span repeat.for="day of days">
-                <a click.trigger="changeDate(day.date)" class="${day.today ? styles.today : ''}">${day.date | isoToDayWeek}</a>
+                <a
+                    click.trigger="changeDate(day.date)"
+                    class="${day.today ? styles.today : ''}"
+                >
+                    ${day.date | isoToDayWeek}
+                </a>
             </span>
         </div>
         <div class="${styles.days}">
diff --git a/src/components/timeline/c-timeline/c-timeline.html b/src/components/timeline/c-timeline/c-timeline.html
index a1b0271d..f4bfad5d 100644
--- a/src/components/timeline/c-timeline/c-timeline.html
+++ b/src/components/timeline/c-timeline/c-timeline.html
@@ -6,7 +6,10 @@
 <template>
     <c-spinner if.bind="isLoading"></c-spinner>
     <c-spinner if.bind="isRendering && !isLoading"></c-spinner>
-    <div if.bind="!isLoading" id.bind="id">
+    <div
+        if.bind="!isLoading"
+        id.bind="id"
+    >
         <div show.bind="!isRendering">
             <c-timeline-container
                 if.bind="timeView === 'day'"
@@ -18,25 +21,29 @@
                 <c-timeline-block
                     repeat.for="block of blocks"
                     time.bind="block.time"
-                >
-                </c-timeline-block>
+                ></c-timeline-block>
                 <c-time-entry
                     repeat.for="entry of transformedEntries"
                     item.bind="entry"
                     class="timeline-day"
-                >
-                </c-time-entry>
+                ></c-time-entry>
                 <c-time-entry
                     if.bind="newItem"
                     item.bind="newItem"
                     view-model.ref="placeholderEntry"
-                >
-                </c-time-entry>
+                ></c-time-entry>
             </c-timeline-container>
-            <c-timeline-week-container if.bind="timeView === 'week' || timeView === 'three-day'" days.bind="displayDays" day-click.call="dayClick(date)">
+            <c-timeline-week-container
+                days.bind="displayDays"
+                day-click.call="dayClick(date)"
+                if.bind="timeView === 'week' || timeView === 'three-day'"
+            >
                 <div slot="hours">
                     <c-timeline-container>
-                        <c-timeline-block repeat.for="block of blocks" time.one-time="block.time"></c-timeline-block>
+                        <c-timeline-block
+                            repeat.for="block of blocks"
+                            time.one-time="block.time"
+                        ></c-timeline-block>
                     </c-timeline-container>
                 </div>
                 <c-timeline-container
@@ -52,9 +59,9 @@
                     >
                     </c-time-entry>
                     <c-time-entry
-                        if.bind="day.newItem"
                         item.bind="day.newItem"
                         view-model.ref="day.placeholderEntry"
+                        if.bind="day.newItem"
                     >
                     </c-time-entry>
                 </c-timeline-container>
diff --git a/src/components/toasts/c-toasts/c-toasts.html b/src/components/toasts/c-toasts/c-toasts.html
index fae222ec..29b89f1a 100644
--- a/src/components/toasts/c-toasts/c-toasts.html
+++ b/src/components/toasts/c-toasts/c-toasts.html
@@ -7,10 +7,12 @@
 	<require from="./c-toasts.css"></require>
 
     <div class="${styles.wrapper}">
-        <div repeat.for="toast of vToastsService.toasts"
-             class="${styles.toaster}  ${styles[toast.type]}"
-             mouseover.trigger="vToastsService.keepAlive(toast.id)"
-             mouseout.trigger="vToastsService.resetTimeout(toast.id)">
+        <div
+            repeat.for="toast of vToastsService.toasts"
+            class="${styles.toaster}  ${styles[toast.type]}"
+            mouseover.trigger="vToastsService.keepAlive(toast.id)"
+            mouseout.trigger="vToastsService.resetTimeout(toast.id)"
+        >
             <div class="${styles.titleBar}">
                 <div class="${styles.iconContainer}">
                     <c-icon
@@ -21,14 +23,25 @@
                     </c-icon>
                 </div>
                 <c-h4 class="${styles.title}">${toast.title}</c-h4>
-                <a href="#" class="${styles.close}" click.trigger="vToastsService.remove(toast)">
-                    <c-icon icon="x" color="lightGray" size="tiny"></c-icon>
+                <a
+                    href="#"
+                    class="${styles.close}"
+                    click.trigger="vToastsService.remove(toast)"
+                >
+                    <c-icon
+                        icon="x"
+                        color="lightGray"
+                        size="tiny"
+                    ></c-icon>
                 </a>
             </div>
 
             <!-- If there is no extra message this can be false -->
-            <div class="${styles.message}" if.bind="true">
-                <c-p spacing-bottom="sbNone">${toast.message}</c-p>
+            <div
+                class="${styles.message}"
+                if.bind="true"
+            >
+                <c-p>${toast.message}</c-p>
             </div>
         </div>
     </div>
diff --git a/src/components/type/h3/c-h3.html b/src/components/type/h3/c-h3.html
index 588a0fea..c4892bad 100644
--- a/src/components/type/h3/c-h3.html
+++ b/src/components/type/h3/c-h3.html
@@ -6,7 +6,19 @@
 <template>
 	<require from="./c-h3.css"></require>
 
-    <span class="${truncate ? styles.truncate : ''} ${truncate && darkBack ? styles.darkBack : ''}">
-        <h3 class="${styles.base} ${flushTop ? '' : styles.notFlushTop}"><slot></slot></h3>
+    <span
+        class="
+            ${truncate ? styles.truncate : ''}
+            ${truncate && darkBack ? styles.darkBack : ''}
+        "
+    >
+        <h3
+            class="
+                ${styles.base}
+                ${flushTop ? '' : styles.notFlushTop}
+            "
+        >
+            <slot></slot>
+        </h3>
     </span>
 </template>
diff --git a/src/components/type/h4/c-h4.html b/src/components/type/h4/c-h4.html
index f9615f0e..df8048d0 100644
--- a/src/components/type/h4/c-h4.html
+++ b/src/components/type/h4/c-h4.html
@@ -6,5 +6,12 @@
 <template>
 	<require from="./c-h4.css"></require>
 
-    <h4 class="${styles.base}  ${truncate ? styles.truncate : ''}"><slot></slot></h4>
+    <h4
+        class="
+            ${styles.base}
+            ${truncate ? styles.truncate : ''}
+        "
+    >
+        <slot></slot>
+    </h4>
 </template>
diff --git a/src/components/type/h5/c-h5.html b/src/components/type/h5/c-h5.html
index 1a6b8bfa..967eec18 100644
--- a/src/components/type/h5/c-h5.html
+++ b/src/components/type/h5/c-h5.html
@@ -6,5 +6,12 @@
 <template>
 	<require from="./c-h5.css"></require>
 
-    <h5 class="${styles.base}  ${styles[color]}"><slot></slot></h5>
+    <h5
+        class="
+            ${styles.base}
+            ${styles[color]}
+        "
+    >
+        <slot></slot>
+    </h5>
 </template>
diff --git a/src/components/type/list/c-list-container/c-list-container.html b/src/components/type/list/c-list-container/c-list-container.html
index 5b7a606e..f763f041 100644
--- a/src/components/type/list/c-list-container/c-list-container.html
+++ b/src/components/type/list/c-list-container/c-list-container.html
@@ -6,7 +6,14 @@
 <template>
 	<require from="./c-list-container.css"></require>
 
-    <ul class="${styles.list}  ${styles[color]}  ${styles[size]}  ${dividers ? styles.dividers : ''}">
+    <ul
+        class="
+            ${styles.list}
+            ${styles[color]}
+            ${styles[size]}
+            ${dividers ? styles.dividers : ''}
+        "
+    >
         <slot></slot>
     </ul>
 </template>
diff --git a/src/components/type/list/c-list-item/c-list-item.html b/src/components/type/list/c-list-item/c-list-item.html
index ce82e9f0..9970eb3a 100644
--- a/src/components/type/list/c-list-item/c-list-item.html
+++ b/src/components/type/list/c-list-item/c-list-item.html
@@ -6,7 +6,13 @@
 <template>
 	<require from="./c-list-item.css"></require>
 
-    <li class="${styles.listItem}  ${styles[state]}  ${wrap ? styles.wrap : ''}">
+    <li
+        class="
+            ${styles.listItem}
+            ${styles[state]}
+            ${wrap ? styles.wrap : ''}
+        "
+    >
         <slot></slot>
     </li>
 </template>
diff --git a/src/components/type/list/c-list/c-list.html b/src/components/type/list/c-list/c-list.html
index 4c587ad3..7ff8f3f6 100644
--- a/src/components/type/list/c-list/c-list.html
+++ b/src/components/type/list/c-list/c-list.html
@@ -6,13 +6,21 @@
 <template>
 	<require from="./c-list.css"></require>
 
-    <div class="${styles.labelWrapper}" show.bind="label">
+    <div
+        class="${styles.labelWrapper}"
+        show.bind="label"
+    >
         <c-label state="${state}">
             ${label}
         </c-label>
         <slot name="tip"></slot>
     </div>
-    <ul class="${styles.base}  ${noBullets ? styles.noBullets : ''}">
+    <ul
+        class="
+            ${styles.base}
+            ${noBullets ? styles.noBullets : ''}
+        "
+    >
         <slot></slot>
     </ul>
 </template>
diff --git a/src/components/utilities/c-drag-handle/c-drag-handle.html b/src/components/utilities/c-drag-handle/c-drag-handle.html
index 985bbea4..aa3e77d3 100644
--- a/src/components/utilities/c-drag-handle/c-drag-handle.html
+++ b/src/components/utilities/c-drag-handle/c-drag-handle.html
@@ -10,6 +10,10 @@
         class="${styles.base}"
         drag-draggable.bind="dragOptions"
     >
-        <c-icon icon="draggable" color="gray" size.bind="size"></c-icon>
+        <c-icon
+            icon="draggable"
+            color="gray"
+            size.bind="size"
+        ></c-icon>
     </span>
 </template>
diff --git a/src/components/utilities/c-label-box/c-label-box.html b/src/components/utilities/c-label-box/c-label-box.html
index 2310bafc..d5367260 100644
--- a/src/components/utilities/c-label-box/c-label-box.html
+++ b/src/components/utilities/c-label-box/c-label-box.html
@@ -6,8 +6,16 @@
 <template>
 	<require from="./c-label-box.css"></require>
 
-    <div class="${styles.labelWrapper}" show.bind="label">
-        <c-label editing-action.call="editFunction()" done-editing-action.call="doneFunction()" editable.bind="editable && _state !== 'disabled'" if.bind="label">
+    <div
+        class="${styles.labelWrapper}"
+        show.bind="label"
+    >
+        <c-label
+            editing-action.call="editFunction()"
+            done-editing-action.call="doneFunction()"
+            editable.bind="editable && _state !== 'disabled'"
+            if.bind="label"
+        >
             ${label}
         </c-label>
         <slot name="tip"></slot>
diff --git a/src/components/utilities/c-spinner/c-spinner.html b/src/components/utilities/c-spinner/c-spinner.html
index c87b97a8..6b3fb651 100644
--- a/src/components/utilities/c-spinner/c-spinner.html
+++ b/src/components/utilities/c-spinner/c-spinner.html
@@ -7,6 +7,11 @@
 	<require from="./c-spinner.css"></require>
 
     <div class="${styles.container}">
-        <span class="${styles.base}  ${styles[size]}"></span>
+        <span
+            class="
+                ${styles.base}
+                ${styles[size]}
+            "
+        ></span>
     </div>
 </template>
diff --git a/src/components/utilities/c-status/c-status.html b/src/components/utilities/c-status/c-status.html
index 5ff7e76a..3705a74d 100644
--- a/src/components/utilities/c-status/c-status.html
+++ b/src/components/utilities/c-status/c-status.html
@@ -6,11 +6,36 @@
 <template>
 	<require from="./c-status.css"></require>
 
-    <div class="${styles.container}" css="max-width: ${maxWidth}">
-        <div class="${styles.status}  ${styles[state]}" show.bind="state">
-            <c-icon icon="circle" color="${state === 'healthy' ? 'secondary' : state === 'warning' ? 'subTwo' : state === 'critical' ? 'primaryLight' : state === 'info' ? 'subOne' : ''}"></c-icon>
+    <div
+        class="${styles.container}"
+        css="max-width: ${maxWidth}"
+    >
+        <div
+            class="
+                ${styles.status}
+                ${styles[state]}
+            "
+            show.bind="state"
+        >
+            <c-icon
+                icon="circle"
+                color="${state === 'healthy' ? 'secondary' : state === 'warning' ? 'subTwo' : state === 'critical' ? 'primaryLight' : state === 'info' ? 'subOne' : ''}"
+            ></c-icon>
         </div>
-        <c-p spacing-bottom="sbNone" title="${text}" if.bind="!href">${text}</c-p>
-        <a href="${href}" class="${styles.link}" target="${targetNew ? '_blank' : '_self'}" title="${text}" if.bind="href">${text}</a>
+        <c-p
+            title="${text}"
+            if.bind="!href"
+        >
+            ${text}
+        </c-p>
+        <a
+            href="${href}"
+            class="${styles.link}"
+            target="${targetNew ? '_blank' : '_self'}"
+            title="${text}"
+            if.bind="href"
+        >
+            ${text}
+        </a>
     </div>
 </template>
diff --git a/src/layouts/l-box-link/l-box-link.html b/src/layouts/l-box-link/l-box-link.html
index c95011ba..3a38282d 100644
--- a/src/layouts/l-box-link/l-box-link.html
+++ b/src/layouts/l-box-link/l-box-link.html
@@ -12,6 +12,7 @@
             ${styles.backgroundHover}
             ${borderTop ? styles.borderTop : ''}
             ${scrolling ? styles.scrolling : ''}
+            ${fillSpace ? styles.fillSpace : ''}
         "
         css="
             --box-margin-ends: ${marginEnds};
diff --git a/src/layouts/l-box-link/l-box-link.test.ts b/src/layouts/l-box-link/l-box-link.test.ts
new file mode 100644
index 00000000..ee3f0f46
--- /dev/null
+++ b/src/layouts/l-box-link/l-box-link.test.ts
@@ -0,0 +1,58 @@
+/*
+Copyright 2020, Verizon Media
+Licensed under the terms of the MIT license. See the LICENSE file in the project root for license terms.
+*/
+
+import {StageComponent} from 'aurelia-testing';
+
+describe('l-box-link component', () => {
+    let component;
+
+    describe('Integration', () => {
+        afterEach(() => {
+            component.dispose();
+        });
+
+        it('is fill-space endabled', async done => {
+            component = StageComponent.withResources()
+                .inView('<l-box-link fill-space.bind="isFillSpace"></l-box-link>')
+                .boundTo({
+                    isFillSpace: 1,
+                });
+
+            try {
+                await bootStrapEnvironment(component);
+                expect(component.viewModel.fillSpace).toBe(false);
+                done();
+            } catch (e) {
+                done.fail(e);
+            }
+        });
+
+        describe('CSS Classes', () => {
+            it('css class: box', async done => {
+                component = StageComponent.withResources().inView('<l-box-link></l-box-link>');
+
+                try {
+                    await bootStrapEnvironment(component);
+                    expect(component.viewModel.styles.box).not.toBe(undefined);
+                    done();
+                } catch (e) {
+                    done.fail(e);
+                }
+            });
+
+            it('css class: scrolling', async done => {
+                component = StageComponent.withResources().inView('<l-box-link></l-box-link>');
+
+                try {
+                    await bootStrapEnvironment(component);
+                    expect(component.viewModel.styles.scrolling).not.toBe(undefined);
+                    done();
+                } catch (e) {
+                    done.fail(e);
+                }
+            });
+        });
+    });
+});
diff --git a/src/layouts/l-box-link/l-box-link.ts b/src/layouts/l-box-link/l-box-link.ts
index d58ccd05..46bb4abf 100644
--- a/src/layouts/l-box-link/l-box-link.ts
+++ b/src/layouts/l-box-link/l-box-link.ts
@@ -3,10 +3,11 @@ Copyright 2020, Verizon Media
 Licensed under the terms of the MIT license. See the LICENSE file in the project root for license terms.
 */
 
-import {bindable, containerless} from 'aurelia-framework';
+import {bindable} from 'aurelia-framework';
+import {authState} from '../../decorators/auth-state';
 import * as styles from '../l-box/l-box.css.json';
 
-@containerless
+@authState
 export class LBoxLink {
     @bindable
     public background = 'var(--c_darkGray)';
@@ -15,6 +16,8 @@ export class LBoxLink {
     @bindable
     public borderTop;
     @bindable
+    public fillSpace = false;
+    @bindable
     public color = 'var(--c_white)';
     @bindable
     public href = '#';
@@ -35,5 +38,9 @@ export class LBoxLink {
         if (this.target !== '_self' && this.target !== '_blank') {
             this.target = '_self';
         }
+
+        if (typeof this.fillSpace !== 'boolean') {
+            this.fillSpace = false;
+        }
     }
 }
diff --git a/src/layouts/l-box/l-box.css b/src/layouts/l-box/l-box.css
index 6a3a06c5..31524b7c 100644
--- a/src/layouts/l-box/l-box.css
+++ b/src/layouts/l-box/l-box.css
@@ -32,6 +32,11 @@ Licensed under the terms of the MIT license. See the LICENSE file in the project
     padding-left:  var(--box-padding-sides);
     background: var(--box-background);
     color: var(--box-color);
+    display: block;
+}
+
+.fill-space{
+    height: 100%;
 }
 
 .border-top{
diff --git a/src/layouts/l-box/l-box.html b/src/layouts/l-box/l-box.html
index c18ef6ee..cdcae2cd 100644
--- a/src/layouts/l-box/l-box.html
+++ b/src/layouts/l-box/l-box.html
@@ -11,6 +11,7 @@
             ${styles.box}
             ${borderTop ? styles.borderTop : ''}
             ${scrolling ? styles.scrolling : ''}
+            ${fillSpace ? styles.fillSpace : ''}
         "
         css="
             --box-margin-ends: ${marginEnds};
diff --git a/src/layouts/l-box/l-box.test.ts b/src/layouts/l-box/l-box.test.ts
index 46810b24..28609f06 100644
--- a/src/layouts/l-box/l-box.test.ts
+++ b/src/layouts/l-box/l-box.test.ts
@@ -29,6 +29,22 @@ describe('l-box component', () => {
             }
         });
 
+        it('is fill-space endabled', async done => {
+            component = StageComponent.withResources()
+                .inView('<l-box fill-space.bind="isFillSpace"></l-box>')
+                .boundTo({
+                    isFillSpace: 1,
+                });
+
+            try {
+                await bootStrapEnvironment(component);
+                expect(component.viewModel.fillSpace).toBe(false);
+                done();
+            } catch (e) {
+                done.fail(e);
+            }
+        });
+
         describe('CSS Classes', () => {
             it('css class: box', async done => {
                 component = StageComponent.withResources().inView('<l-box></l-box>');
diff --git a/src/layouts/l-box/l-box.ts b/src/layouts/l-box/l-box.ts
index 431bdb07..38e52e2b 100644
--- a/src/layouts/l-box/l-box.ts
+++ b/src/layouts/l-box/l-box.ts
@@ -3,10 +3,9 @@ Copyright 2020, Verizon Media
 Licensed under the terms of the MIT license. See the LICENSE file in the project root for license terms.
 */
 
-import {bindable, containerless} from 'aurelia-framework';
+import {bindable} from 'aurelia-framework';
 import * as styles from './l-box.css.json';
 
-@containerless
 export class LBox {
     @bindable
     public background = 'var(--c_darkGray)';
@@ -15,6 +14,8 @@ export class LBox {
     @bindable
     public color = 'var(--c_white)';
     @bindable
+    public fillSpace = false;
+    @bindable
     public marginSides = '0px';
     @bindable
     public marginEnds = '0px';
@@ -31,5 +32,9 @@ export class LBox {
         if (typeof this.scrolling !== 'boolean') {
             this.scrolling = false;
         }
+
+        if (typeof this.fillSpace !== 'boolean') {
+            this.fillSpace = false;
+        }
     }
 }
diff --git a/src/layouts/l-center/l-center.ts b/src/layouts/l-center/l-center.ts
index 34da378b..4d57f601 100644
--- a/src/layouts/l-center/l-center.ts
+++ b/src/layouts/l-center/l-center.ts
@@ -3,10 +3,9 @@ Copyright 2020, Verizon Media
 Licensed under the terms of the MIT license. See the LICENSE file in the project root for license terms.
 */
 
-import {bindable, containerless} from 'aurelia-framework';
+import {bindable} from 'aurelia-framework';
 import * as styles from './l-center.css.json';
 
-@containerless
 export class LCenter {
     @bindable
     public intrinsic = false;
diff --git a/src/layouts/l-cluster/l-cluster.ts b/src/layouts/l-cluster/l-cluster.ts
index 47890d22..3b33304b 100644
--- a/src/layouts/l-cluster/l-cluster.ts
+++ b/src/layouts/l-cluster/l-cluster.ts
@@ -3,10 +3,9 @@ Copyright 2020, Verizon Media
 Licensed under the terms of the MIT license. See the LICENSE file in the project root for license terms.
 */
 
-import {bindable, containerless} from 'aurelia-framework';
+import {bindable} from 'aurelia-framework';
 import * as styles from './l-cluster.css.json';
 
-@containerless
 export class LCluster {
     @bindable
     public align = 'center';
diff --git a/src/layouts/l-cover/l-cover.ts b/src/layouts/l-cover/l-cover.ts
index 92628921..5f8f6214 100644
--- a/src/layouts/l-cover/l-cover.ts
+++ b/src/layouts/l-cover/l-cover.ts
@@ -3,10 +3,9 @@ Copyright 2020, Verizon Media
 Licensed under the terms of the MIT license. See the LICENSE file in the project root for license terms.
 */
 
-import {bindable, containerless} from 'aurelia-framework';
+import {bindable} from 'aurelia-framework';
 import * as styles from './l-cover.css.json';
 
-@containerless
 export class LCover {
     @bindable
     public center = false;
diff --git a/src/layouts/l-grid/l-grid.html b/src/layouts/l-grid/l-grid.html
index 0db0f644..5c0778a1 100644
--- a/src/layouts/l-grid/l-grid.html
+++ b/src/layouts/l-grid/l-grid.html
@@ -21,7 +21,10 @@
     >
         <slot></slot>
 
-        <div if.bind="isLoading" class="${styles.loader}">
+        <div
+            class="${styles.loader}"
+            if.bind="isLoading"
+        >
             <c-spinner size="small"></c-spinner>
         </div>
     </div>
diff --git a/src/layouts/l-grid/l-grid.ts b/src/layouts/l-grid/l-grid.ts
index 41816695..03a2a15e 100644
--- a/src/layouts/l-grid/l-grid.ts
+++ b/src/layouts/l-grid/l-grid.ts
@@ -3,12 +3,11 @@ Copyright 2020, Verizon Media
 Licensed under the terms of the MIT license. See the LICENSE file in the project root for license terms.
 */
 
-import {bindable, containerless} from 'aurelia-framework';
+import {bindable} from 'aurelia-framework';
 import {generateRandom} from '../../helpers/generate-random';
 import {lazyLoadCheck} from '../../helpers/lazy-load-check';
 import * as styles from './l-grid.css.json';
 
-@containerless
 export class LGrid {
     @bindable
     public actions;
diff --git a/src/layouts/l-sidebar/l-sidebar.ts b/src/layouts/l-sidebar/l-sidebar.ts
index 23d21007..2c9e2294 100644
--- a/src/layouts/l-sidebar/l-sidebar.ts
+++ b/src/layouts/l-sidebar/l-sidebar.ts
@@ -3,11 +3,10 @@ Copyright 2020, Verizon Media
 Licensed under the terms of the MIT license. See the LICENSE file in the project root for license terms.
 */
 
-import {bindable, containerless} from 'aurelia-framework';
+import {bindable} from 'aurelia-framework';
 import {generateRandom} from '../../helpers/generate-random';
 import * as styles from './l-sidebar.css.json';
 
-@containerless
 export class LSidebar {
     @bindable
     public contentMin = '65%';
diff --git a/src/layouts/l-stack/l-stack.ts b/src/layouts/l-stack/l-stack.ts
index fe191ad8..3e3c99c7 100644
--- a/src/layouts/l-stack/l-stack.ts
+++ b/src/layouts/l-stack/l-stack.ts
@@ -3,10 +3,9 @@ Copyright 2020, Verizon Media
 Licensed under the terms of the MIT license. See the LICENSE file in the project root for license terms.
 */
 
-import {bindable, containerless} from 'aurelia-framework';
+import {bindable} from 'aurelia-framework';
 import * as styles from './l-stack.css.json';
 
-@containerless
 export class LStack {
     @bindable
     public list;
diff --git a/src/layouts/l-switcher/l-switcher.ts b/src/layouts/l-switcher/l-switcher.ts
index 1ccf81dd..8dc48786 100644
--- a/src/layouts/l-switcher/l-switcher.ts
+++ b/src/layouts/l-switcher/l-switcher.ts
@@ -3,10 +3,9 @@ Copyright 2020, Verizon Media
 Licensed under the terms of the MIT license. See the LICENSE file in the project root for license terms.
 */
 
-import {bindable, containerless} from 'aurelia-framework';
+import {bindable} from 'aurelia-framework';
 import * as styles from './l-switcher.css.json';
 
-@containerless
 export class LSwitcher {
     @bindable
     public doubleWidth;