diff --git a/src/app/main/main.component.scss b/src/app/main/main.component.scss
index 85dcb0f1..2c1b6977 100644
--- a/src/app/main/main.component.scss
+++ b/src/app/main/main.component.scss
@@ -6,12 +6,6 @@ fuse-main {
     width: 100%;
     height: 100%;
 
-    &.boxed {
-        max-width: 1200px;
-        margin: 0 auto;
-        @include mat-elevation(8);
-    }
-
     > .mat-sidenav-container {
         display: flex;
         flex: 1;
@@ -72,4 +66,10 @@ fuse-main {
             }
         }
     }
+
+    &[fuse-layout-mode="boxed"] {
+        max-width: 1200px;
+        margin: 0 auto;
+        @include mat-elevation(8);
+    }
 }
diff --git a/src/app/main/main.component.ts b/src/app/main/main.component.ts
index c7896e3c..a8a7ce5c 100644
--- a/src/app/main/main.component.ts
+++ b/src/app/main/main.component.ts
@@ -14,7 +14,7 @@ export class FuseMainComponent implements OnInit, OnDestroy
 {
     onSettingsChanged: Subscription;
     fuseSettings: any;
-    @HostBinding('class.boxed') boxed;
+    @HostBinding('attr.fuse-layout-mode') layoutMode;
 
     constructor(
         private _renderer: Renderer2,
@@ -29,7 +29,7 @@ export class FuseMainComponent implements OnInit, OnDestroy
                 .subscribe(
                     (newSettings) => {
                         this.fuseSettings = newSettings;
-                        this.boxed = this.fuseSettings.layout.mode === 'boxed';
+                        this.layoutMode = this.fuseSettings.layout.mode;
                     }
                 );