diff --git a/packages/app/src/components/AppMenu/index.jsx b/packages/app/src/components/AppMenu/index.jsx
new file mode 100644
index 00000000..9d57f237
--- /dev/null
+++ b/packages/app/src/components/AppMenu/index.jsx
@@ -0,0 +1,39 @@
+import React from "react"
+
+import "./index.less"
+
+const AppMenu = (props) => {
+    // TODO: Fetch from app core
+    const installedApps = []
+
+    return <div className="apps-menu">
+        <h1>Apps</h1>
+
+        {
+            installedApps.map((item) => {
+                return <div
+                    key={item.key}
+                    className="apps-menu-item"
+                    onClick={() => {
+                        if (item.location) {
+                            app.location.push(item.location)
+                        }
+
+                        props.close()
+                    }}
+                >
+                    <h3>{item.icon && createIconRender(item.icon)} {item.label}</h3>
+                </div>
+            })
+        }
+
+        {
+            installedApps.length === 0 && <Empty
+                description="No apps installed"
+                image={Empty.PRESENTED_IMAGE_SIMPLE}
+            />
+        }
+    </div>
+}
+
+export default AppMenu
\ No newline at end of file
diff --git a/packages/app/src/components/AppMenu/index.less b/packages/app/src/components/AppMenu/index.less
new file mode 100644
index 00000000..71b80226
--- /dev/null
+++ b/packages/app/src/components/AppMenu/index.less
@@ -0,0 +1,13 @@
+.apps-menu {
+    display: flex;
+    flex-direction: column;
+
+    gap: 10px;
+
+    .apps-menu-item {
+        display: flex;
+        flex-direction: row;
+
+        gap: 10px;
+    }
+}
\ No newline at end of file
diff --git a/packages/app/src/components/UserShareBadge/index.jsx b/packages/app/src/components/UserShareBadge/index.jsx
index 0432c455..8ff9d363 100644
--- a/packages/app/src/components/UserShareBadge/index.jsx
+++ b/packages/app/src/components/UserShareBadge/index.jsx
@@ -63,7 +63,6 @@ const UserShareBadge = (props) => {
                 user.badges?.length > 0 && <UserBadges user_id={user._id} />
             }
         </div>
-
     </div>
 }
 
diff --git a/packages/app/src/layouts/components/sidebar/index.jsx b/packages/app/src/layouts/components/sidebar/index.jsx
index d459ca2f..5b9473cf 100755
--- a/packages/app/src/layouts/components/sidebar/index.jsx
+++ b/packages/app/src/layouts/components/sidebar/index.jsx
@@ -13,43 +13,9 @@ import sidebarItems from "@config/sidebar"
 
 import "./index.less"
 
-const AppDrawer = (props) => {
-	// TODO: Fetch from app core
-	const installedApps = []
-
-	return <div className="app-drawer">
-		<h1>Apps</h1>
-
-		{
-			installedApps.map((item) => {
-				return <div
-					key={item.key}
-					className="app-drawer_item"
-					onClick={() => {
-						if (item.location) {
-							app.location.push(item.location)
-						}
-
-						props.close()
-					}}
-				>
-					<h3>{item.icon && createIconRender(item.icon)} {item.label}</h3>
-				</div>
-			})
-		}
-
-		{
-			installedApps.length === 0 && <Empty
-				description="No apps installed"
-				image={Empty.PRESENTED_IMAGE_SIMPLE}
-			/>
-		}
-	</div>
-}
-
 const onClickHandlers = {
 	apps: () => {
-		app.layout.drawer.open("apps", AppDrawer)
+		app.controls.openAppsMenu()
 	},
 	addons: () => {
 		window.app.location.push("/addons")
@@ -123,13 +89,13 @@ const BottomMenuDefaultItems = [
 		</Translation>,
 		icon: <Icons.Bell />,
 	},
-	{
-		key: "apps",
-		label: <Translation>
-			{(t) => t("Apps")}
-		</Translation>,
-		icon: <Icons.MdApps />,
-	},
+	// {
+	// 	key: "apps",
+	// 	label: <Translation>
+	// 		{(t) => t("Apps")}
+	// 	</Translation>,
+	// 	icon: <Icons.MdApps />,
+	// },
 	{
 		key: "settings",
 		label: <Translation>