diff --git a/packages/app/src/layouts/mobile/index.jsx b/packages/app/src/layouts/mobile/index.jsx
index e991d5da..0131f103 100755
--- a/packages/app/src/layouts/mobile/index.jsx
+++ b/packages/app/src/layouts/mobile/index.jsx
@@ -2,18 +2,20 @@ import React from "react"
 import classnames from "classnames"
 import * as antd from "antd"
 
-import { Drawer, BottomBar } from "components/Layout"
+import { BottomBar, Drawer, Sidedrawer, Modal } 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} />
+        <Modal />
+
+        <antd.Layout.Content className={classnames("content_layout", ...props.layoutPageModesClassnames ?? [])}>
+            <div id="transitionLayer" className="fade-transverse-active">
+                {React.cloneElement(props.children, props)}
+            </div>
+        </antd.Layout.Content>
+
+        <BottomBar />
+        <Sidedrawer />
         <Drawer />
     </antd.Layout>
 }