diff --git a/packages/app/.config.js b/packages/app/.config.js
index e788dd49..379fd0c2 100644
--- a/packages/app/.config.js
+++ b/packages/app/.config.js
@@ -14,6 +14,7 @@ const aliases = {
     components: path.join(__dirname, "src/components"),
     models: path.join(__dirname, "src/models"),
     utils: path.join(__dirname, "src/utils"),
+    layouts: path.join(__dirname, "src/layouts"),
 }
 
 module.exports = (config = {}) => {
diff --git a/packages/app/src/components/index.js b/packages/app/src/components/index.js
index 96914a13..56bb8880 100644
--- a/packages/app/src/components/index.js
+++ b/packages/app/src/components/index.js
@@ -1,3 +1,5 @@
+import * as Layout from "./Layout"
+
 // COMPLEX COMPONENTS
 export { default as FormGenerator } from "./FormGenerator"
 export { default as Settings } from "./Settings"
@@ -41,4 +43,6 @@ export { default as FollowersList } from "./FollowersList"
 // OTHERS
 export * as AdminTools from "./AdminTools"
 export * as AboutApp from "./AboutApp"
-export * as Window from "./RenderWindow"
\ No newline at end of file
+export * as Window from "./RenderWindow"
+
+export { Layout }
\ No newline at end of file
diff --git a/packages/app/src/layout/bottombar/index.jsx b/packages/app/src/components/layout/bottomBar/index.jsx
similarity index 100%
rename from packages/app/src/layout/bottombar/index.jsx
rename to packages/app/src/components/layout/bottomBar/index.jsx
diff --git a/packages/app/src/layout/bottombar/index.less b/packages/app/src/components/layout/bottomBar/index.less
similarity index 100%
rename from packages/app/src/layout/bottombar/index.less
rename to packages/app/src/components/layout/bottomBar/index.less
diff --git a/packages/app/src/layout/drawer/index.jsx b/packages/app/src/components/layout/drawer/index.jsx
similarity index 100%
rename from packages/app/src/layout/drawer/index.jsx
rename to packages/app/src/components/layout/drawer/index.jsx
diff --git a/packages/app/src/layout/drawer/index.less b/packages/app/src/components/layout/drawer/index.less
similarity index 100%
rename from packages/app/src/layout/drawer/index.less
rename to packages/app/src/components/layout/drawer/index.less
diff --git a/packages/app/src/layout/header/index.jsx b/packages/app/src/components/layout/header/index.jsx
similarity index 100%
rename from packages/app/src/layout/header/index.jsx
rename to packages/app/src/components/layout/header/index.jsx
diff --git a/packages/app/src/layout/header/index.less b/packages/app/src/components/layout/header/index.less
similarity index 100%
rename from packages/app/src/layout/header/index.less
rename to packages/app/src/components/layout/header/index.less
diff --git a/packages/app/src/components/layout/index.js b/packages/app/src/components/layout/index.js
new file mode 100644
index 00000000..1d62e785
--- /dev/null
+++ b/packages/app/src/components/layout/index.js
@@ -0,0 +1,5 @@
+export { default as BottomBar } from "./bottomBar"
+export { default as Header } from "./header"
+export { default as Drawer } from "./drawer"
+export { default as Sidebar } from "./sidebar"
+export { default as Sidedrawer } from "./sidedrawer"
\ No newline at end of file
diff --git a/packages/app/src/layout/sidebar/components/editor/index.jsx b/packages/app/src/components/layout/sidebar/components/editor/index.jsx
similarity index 100%
rename from packages/app/src/layout/sidebar/components/editor/index.jsx
rename to packages/app/src/components/layout/sidebar/components/editor/index.jsx
diff --git a/packages/app/src/layout/sidebar/components/editor/index.less b/packages/app/src/components/layout/sidebar/components/editor/index.less
similarity index 100%
rename from packages/app/src/layout/sidebar/components/editor/index.less
rename to packages/app/src/components/layout/sidebar/components/editor/index.less
diff --git a/packages/app/src/layout/sidebar/components/index.js b/packages/app/src/components/layout/sidebar/components/index.js
similarity index 100%
rename from packages/app/src/layout/sidebar/components/index.js
rename to packages/app/src/components/layout/sidebar/components/index.js
diff --git a/packages/app/src/layout/sidebar/components/selector/index.jsx b/packages/app/src/components/layout/sidebar/components/selector/index.jsx
similarity index 100%
rename from packages/app/src/layout/sidebar/components/selector/index.jsx
rename to packages/app/src/components/layout/sidebar/components/selector/index.jsx
diff --git a/packages/app/src/layout/sidebar/components/selector/index.less b/packages/app/src/components/layout/sidebar/components/selector/index.less
similarity index 100%
rename from packages/app/src/layout/sidebar/components/selector/index.less
rename to packages/app/src/components/layout/sidebar/components/selector/index.less
diff --git a/packages/app/src/layout/sidebar/index.jsx b/packages/app/src/components/layout/sidebar/index.jsx
similarity index 100%
rename from packages/app/src/layout/sidebar/index.jsx
rename to packages/app/src/components/layout/sidebar/index.jsx
diff --git a/packages/app/src/layout/sidebar/index.less b/packages/app/src/components/layout/sidebar/index.less
similarity index 100%
rename from packages/app/src/layout/sidebar/index.less
rename to packages/app/src/components/layout/sidebar/index.less
diff --git a/packages/app/src/layout/sidedrawer/index.jsx b/packages/app/src/components/layout/sidedrawer/index.jsx
similarity index 100%
rename from packages/app/src/layout/sidedrawer/index.jsx
rename to packages/app/src/components/layout/sidedrawer/index.jsx
diff --git a/packages/app/src/layout/sidedrawer/index.less b/packages/app/src/components/layout/sidedrawer/index.less
similarity index 100%
rename from packages/app/src/layout/sidedrawer/index.less
rename to packages/app/src/components/layout/sidedrawer/index.less
diff --git a/packages/app/src/layout/index.jsx b/packages/app/src/layout.jsx
similarity index 75%
rename from packages/app/src/layout/index.jsx
rename to packages/app/src/layout.jsx
index 9b2eac9c..f5a63cff 100644
--- a/packages/app/src/layout/index.jsx
+++ b/packages/app/src/layout.jsx
@@ -1,46 +1,12 @@
 import React from "react"
-import classnames from "classnames"
 import * as antd from "antd"
 import progressBar from "nprogress"
 
-import Sidebar from "./sidebar"
-import Drawer from "./drawer"
-import Sidedrawer from "./sidedrawer"
-import BottomBar from "./bottomBar"
-
 import config from "config"
 
 import routes from "schemas/routes"
 
-const LayoutRenders = {
-	mobile: (props) => {
-		return <antd.Layout className={classnames("app_layout", ["mobile"])} style={{ height: "100%" }}>
-			<antd.Layout className="content_layout">
-				<antd.Layout.Content className={classnames("layout_page", ...props.layoutPageModesClassnames ?? [])}>
-					<div id="transitionLayer" className="fade-transverse-active">
-						{React.cloneElement(props.children, props)}
-					</div>
-				</antd.Layout.Content>
-			</antd.Layout>
-			<BottomBar user={props.user} />
-			<Drawer />
-		</antd.Layout>
-	},
-	default: (props) => {
-		return <antd.Layout className="app_layout" style={{ height: "100%" }}>
-			<Drawer />
-			<Sidebar user={props.user} />
-			<Sidedrawer />
-			<antd.Layout className="content_layout">
-				<antd.Layout.Content className={classnames("layout_page", ...props.layoutPageModesClassnames ?? [])}>
-					<div id="transitionLayer" className="fade-transverse-active">
-						{React.cloneElement(props.children, props)}
-					</div>
-				</antd.Layout.Content>
-			</antd.Layout>
-		</antd.Layout>
-	}
-}
+import Layouts from "layouts"
 
 export default class Layout extends React.Component {
 	progressBar = progressBar.configure({ parent: "html", showSpinner: false })
@@ -163,7 +129,11 @@ export default class Layout extends React.Component {
 			...this.state,
 		}
 
-		const Layout = LayoutRenders[layoutType]
+		const Layout = Layouts[layoutType]
+
+		if (!Layout) {
+			return app.eventBus.emit("runtime.crash", new Error(`Layout type [${layoutType}] not found`))
+		}
 
 		return <Layout {...layoutComponentProps}>
 			{this.state.renderLock ? InitializationComponent : this.props.children}
diff --git a/packages/app/src/layouts/default/index.jsx b/packages/app/src/layouts/default/index.jsx
new file mode 100644
index 00000000..d6347595
--- /dev/null
+++ b/packages/app/src/layouts/default/index.jsx
@@ -0,0 +1,20 @@
+import React from "react"
+import classnames from "classnames"
+import * as antd from "antd"
+
+import { Sidebar, Drawer, Sidedrawer } from "components/layout"
+
+export default (props) => {
+    return <antd.Layout className="app_layout" style={{ height: "100%" }}>
+        <Drawer />
+        <Sidebar user={props.user} />
+        <Sidedrawer />
+        <antd.Layout className="content_layout">
+            <antd.Layout.Content className={classnames("layout_page", ...props.layoutPageModesClassnames ?? [])}>
+                <div id="transitionLayer" className="fade-transverse-active">
+                    {React.cloneElement(props.children, props)}
+                </div>
+            </antd.Layout.Content>
+        </antd.Layout>
+    </antd.Layout>
+}
\ No newline at end of file
diff --git a/packages/app/src/layouts/index.js b/packages/app/src/layouts/index.js
new file mode 100644
index 00000000..b845a0ca
--- /dev/null
+++ b/packages/app/src/layouts/index.js
@@ -0,0 +1,9 @@
+import Default from "./default"
+import Mobile from "./mobile"
+import Login from "./login"
+
+export default {
+    default: Default,
+    mobile: Mobile,
+    login: Login,
+}
\ No newline at end of file
diff --git a/packages/app/src/layouts/login/index.jsx b/packages/app/src/layouts/login/index.jsx
new file mode 100644
index 00000000..9efba9d7
--- /dev/null
+++ b/packages/app/src/layouts/login/index.jsx
@@ -0,0 +1,7 @@
+import React from "react"
+
+export default (props) => {
+    return <div>
+        {props.children}
+    </div>
+}
\ No newline at end of file
diff --git a/packages/app/src/layouts/mobile/index.jsx b/packages/app/src/layouts/mobile/index.jsx
new file mode 100644
index 00000000..a570c388
--- /dev/null
+++ b/packages/app/src/layouts/mobile/index.jsx
@@ -0,0 +1,19 @@
+import React from "react"
+import classnames from "classnames"
+import * as antd from "antd"
+
+import { Drawer, BottomBar } from "components/layout"
+
+export default (props) => {
+    return <antd.Layout className={classnames("app_layout", ["mobile"])} style={{ height: "100%" }}>
+        <antd.Layout className="content_layout">
+            <antd.Layout.Content className={classnames("layout_page", ...props.layoutPageModesClassnames ?? [])}>
+                <div id="transitionLayer" className="fade-transverse-active">
+                    {React.cloneElement(props.children, props)}
+                </div>
+            </antd.Layout.Content>
+        </antd.Layout>
+        <BottomBar user={props.user} />
+        <Drawer />
+    </antd.Layout>
+}
\ No newline at end of file