diff --git a/src/view/screens/Profile.tsx b/src/view/screens/Profile.tsx
index 1a52ded844..2425579aa8 100644
--- a/src/view/screens/Profile.tsx
+++ b/src/view/screens/Profile.tsx
@@ -100,13 +100,15 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
   let items: any[] = []
   if (uiState) {
     if (uiState.isInitialLoading) {
-      items.push(LOADING_ITEM)
+      items = items.concat([LOADING_ITEM])
       renderItem = () => <PostFeedLoadingPlaceholder />
     } else if (uiState.currentView.hasError) {
-      items.push({
-        _reactKey: '__error__',
-        error: uiState.currentView.error,
-      })
+      items = items.concat([
+        {
+          _reactKey: '__error__',
+          error: uiState.currentView.error,
+        },
+      ])
       renderItem = (item: any) => (
         <View style={s.p5}>
           <ErrorMessage
@@ -129,7 +131,7 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
             items = uiState.feed.feed.slice()
           }
           if (!uiState.feed.hasMore) {
-            items.push(END_ITEM)
+            items = items.concat([END_ITEM])
           }
           renderItem = (item: any) => {
             if (item === END_ITEM) {
@@ -138,7 +140,7 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
             return <FeedItem item={item} />
           }
         } else if (uiState.feed.isEmpty) {
-          items.push(EMPTY_ITEM)
+          items = items.concat([EMPTY_ITEM])
           if (uiState.profile.isScene) {
             renderItem = () => (
               <EmptyState
@@ -170,7 +172,7 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
             )
           }
         } else if (uiState.memberships.isEmpty) {
-          items.push(EMPTY_ITEM)
+          items = items.concat([EMPTY_ITEM])
           renderItem = () => (
             <EmptyState
               icon="user-group"
@@ -207,7 +209,7 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
             )
           }
         } else if (uiState.members.isEmpty) {
-          items.push(EMPTY_ITEM)
+          items = items.concat([EMPTY_ITEM])
           renderItem = () => (
             <EmptyState
               icon="user-group"
@@ -216,7 +218,7 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
           )
         }
       } else {
-        items.push(EMPTY_ITEM)
+        items = items.concat([EMPTY_ITEM])
         renderItem = () => <Text>TODO</Text>
       }
     }
diff --git a/src/view/shell/mobile/Menu.tsx b/src/view/shell/mobile/Menu.tsx
index 173f9563c3..793b052768 100644
--- a/src/view/shell/mobile/Menu.tsx
+++ b/src/view/shell/mobile/Menu.tsx
@@ -32,7 +32,8 @@ export const Menu = ({
   useEffect(() => {
     if (visible) {
       // trigger a refresh in case memberships have changed recently
-      store.me.refreshMemberships()
+      // TODO this impacts performance, need to find the right time to do this
+      // store.me.refreshMemberships()
     }
   }, [store, visible])
 
@@ -97,34 +98,37 @@ export const Menu = ({
 
   return (
     <View style={styles.view}>
+      <TouchableOpacity
+        onPress={() => onNavigate(`/profile/${store.me.handle}`)}
+        style={styles.profileCard}>
+        <UserAvatar
+          size={60}
+          displayName={store.me.displayName}
+          handle={store.me.handle}
+          avatar={store.me.avatar}
+        />
+        <View style={s.flex1}>
+          <Text style={styles.profileCardDisplayName}>
+            {store.me.displayName}
+          </Text>
+          <Text style={styles.profileCardHandle}>{store.me.handle}</Text>
+        </View>
+      </TouchableOpacity>
       <TouchableOpacity
         style={styles.searchBtn}
         onPress={() => onNavigate('/search')}>
         <MagnifyingGlassIcon
           style={{color: colors.gray5} as StyleProp<ViewStyle>}
-          size={21}
+          size={25}
         />
         <Text style={styles.searchBtnLabel}>Search</Text>
       </TouchableOpacity>
       <View style={styles.section}>
-        <MenuItem
-          icon={
-            <UserAvatar
-              size={24}
-              displayName={store.me.displayName}
-              handle={store.me.handle}
-              avatar={store.me.avatar}
-            />
-          }
-          label={store.me.displayName || store.me.handle}
-          bold
-          url={`/profile/${store.me.handle}`}
-        />
         <MenuItem
           icon={
             <HomeIcon
-              style={{color: colors.gray5} as StyleProp<ViewStyle>}
-              size="24"
+              style={{color: colors.gray6} as StyleProp<ViewStyle>}
+              size="26"
             />
           }
           label="Home"
@@ -133,45 +137,24 @@ export const Menu = ({
         <MenuItem
           icon={
             <BellIcon
-              style={{color: colors.gray5} as StyleProp<ViewStyle>}
-              size="24"
+              style={{color: colors.gray6} as StyleProp<ViewStyle>}
+              size="28"
             />
           }
           label="Notifications"
           url="/notifications"
           count={store.me.notificationCount}
         />
-        <MenuItem
-          icon={
-            <CogIcon
-              style={{color: colors.gray6} as StyleProp<ViewStyle>}
-              size="24"
-              strokeWidth={2}
-            />
-          }
-          label="Settings"
-          url="/settings"
-        />
       </View>
       <View style={styles.section}>
         <Text style={styles.heading}>Scenes</Text>
-        <MenuItem
-          icon={
-            <UserGroupIcon
-              style={{color: colors.gray6} as StyleProp<ViewStyle>}
-              size="24"
-            />
-          }
-          label="Create a scene"
-          onPress={onPressCreateScene}
-        />
         {store.me.memberships
           ? store.me.memberships.memberships.map((membership, i) => (
               <MenuItem
                 key={i}
                 icon={
                   <UserAvatar
-                    size={24}
+                    size={34}
                     displayName={membership.displayName}
                     handle={membership.handle}
                     avatar={membership.avatar}
@@ -183,6 +166,29 @@ export const Menu = ({
             ))
           : undefined}
       </View>
+      <View style={styles.section}>
+        <MenuItem
+          icon={
+            <UserGroupIcon
+              style={{color: colors.gray6} as StyleProp<ViewStyle>}
+              size="30"
+            />
+          }
+          label="Create a scene"
+          onPress={onPressCreateScene}
+        />
+        <MenuItem
+          icon={
+            <CogIcon
+              style={{color: colors.gray6} as StyleProp<ViewStyle>}
+              size="30"
+              strokeWidth={2}
+            />
+          }
+          label="Settings"
+          url="/settings"
+        />
+      </View>
       <View style={styles.footer}>
         <Text style={s.gray4}>
           Build version {VersionNumber.appVersion} ({VersionNumber.buildVersion}
@@ -212,6 +218,24 @@ const styles = StyleSheet.create({
     paddingHorizontal: 4,
   },
 
+  profileCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    margin: 10,
+    marginBottom: 6,
+  },
+  profileCardDisplayName: {
+    marginLeft: 12,
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: colors.gray7,
+  },
+  profileCardHandle: {
+    marginLeft: 12,
+    fontSize: 18,
+    color: colors.gray6,
+  },
+
   searchBtn: {
     flexDirection: 'row',
     backgroundColor: colors.gray1,
@@ -223,7 +247,7 @@ const styles = StyleSheet.create({
   },
   searchBtnLabel: {
     marginLeft: 8,
-    fontSize: 18,
+    fontSize: 19,
     color: colors.gray6,
   },
 
@@ -231,17 +255,17 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     paddingVertical: 8,
-    paddingHorizontal: 2,
+    paddingHorizontal: 6,
   },
   menuItemIconWrapper: {
-    width: 30,
-    height: 30,
+    width: 36,
+    height: 36,
     alignItems: 'center',
     justifyContent: 'center',
-    marginRight: 10,
+    marginRight: 12,
   },
   menuItemLabel: {
-    fontSize: 17,
+    fontSize: 19,
     color: colors.gray7,
   },
   menuItemLabelBold: {
diff --git a/src/view/shell/mobile/index.tsx b/src/view/shell/mobile/index.tsx
index 1506b52e61..ef980066c7 100644
--- a/src/view/shell/mobile/index.tsx
+++ b/src/view/shell/mobile/index.tsx
@@ -245,18 +245,19 @@ export const MobileShell: React.FC = observer(() => {
     ? {transform: [{translateX: swipeTranslateX}]}
     : undefined
   let menuTranslateX
+  const menuDrawerWidth = winDim.width - 100
   if (isMenuActive) {
     // menu is active, interpret swipes as closes
-    menuTranslateX = Animated.multiply(swipeGestureInterp, winDim.width * -1)
+    menuTranslateX = Animated.multiply(swipeGestureInterp, menuDrawerWidth * -1)
   } else if (!store.nav.tab.canGoBack) {
     // at back of history, interpret swipes as opens
     menuTranslateX = Animated.subtract(
-      winDim.width * -1,
-      Animated.multiply(swipeGestureInterp, winDim.width),
+      menuDrawerWidth * -1,
+      Animated.multiply(swipeGestureInterp, menuDrawerWidth),
     )
   } else {
     // not at back of history, leave off screen
-    menuTranslateX = winDim.width * -1
+    menuTranslateX = menuDrawerWidth * -1
   }
   const menuSwipeTransform = {
     transform: [{translateX: menuTranslateX}],
@@ -369,7 +370,7 @@ export const MobileShell: React.FC = observer(() => {
               },
             )}
           </ScreenContainer>
-          {menuSwipingDirection !== 0 ? (
+          {isMenuActive || menuSwipingDirection !== 0 ? (
             <Animated.View style={[styles.screenMask, menuSwipeOpacity]} />
           ) : undefined}
           <Animated.View style={[styles.menuDrawer, menuSwipeTransform]}>
@@ -500,14 +501,14 @@ const styles = StyleSheet.create({
     left: 0,
     right: 0,
     backgroundColor: '#000',
-    opacity: 0.5,
+    opacity: 0.6,
   },
   menuDrawer: {
     position: 'absolute',
     top: 0,
     bottom: 0,
     left: 0,
-    right: 0,
+    right: 100,
   },
   topBarProtector: {
     position: 'absolute',