diff --git a/packages/files-ui/package.json b/packages/files-ui/package.json
index c19f77449b..a8e0d81b90 100644
--- a/packages/files-ui/package.json
+++ b/packages/files-ui/package.json
@@ -8,6 +8,7 @@
     "@chainsafe/browser-storage-hooks": "^1.0.1",
     "@chainsafe/files-api-client": "^1.18.19",
     "@chainsafe/web3-context": "1.1.4",
+    "@emeraldpay/hashicon-react": "^0.5.1",
     "@lingui/core": "^3.7.2",
     "@lingui/react": "^3.7.2",
     "@material-ui/core": "^4.12.3",
diff --git a/packages/files-ui/src/Components/Layouts/AppHeader.tsx b/packages/files-ui/src/Components/Layouts/AppHeader.tsx
index 570377a9be..1e466df9e3 100644
--- a/packages/files-ui/src/Components/Layouts/AppHeader.tsx
+++ b/packages/files-ui/src/Components/Layouts/AppHeader.tsx
@@ -6,9 +6,6 @@ import {
   Typography,
   ChainsafeFilesLogo,
   HamburgerMenu,
-  MenuDropdown,
-  PowerDownSvg,
-  useHistory,
   Button,
   SearchIcon
 } from "@chainsafe/common-components"
@@ -17,7 +14,6 @@ import SearchModule from "../Modules/SearchModule"
 import { Trans } from "@lingui/macro"
 import { useThresholdKey } from "../../Contexts/ThresholdKeyContext"
 import { CSFTheme } from "../../Themes/types"
-import { useUser } from "../../Contexts/UserContext"
 import { useFilesApi } from "../../Contexts/FilesApiContext"
 import TeamModal from "../Elements/TeamModal"
 import NotificationsDropdown from "../Elements/NotificationsDropdown"
@@ -104,16 +100,6 @@ const useStyles = makeStyles(
           }
         }
       },
-      accountControls: {
-        display: "flex",
-        justifyContent: "flex-end",
-        alignItems: "center",
-        flexDirection: "row",
-
-        "& > *:first-child": {
-          marginRight: constants.generalUnit * 2
-        }
-      },
       searchModule: {
         [breakpoints.down("md")]: {
           height: constants.mobileHeaderHeight,
@@ -122,31 +108,6 @@ const useStyles = makeStyles(
           zIndex: zIndex?.background
         }
       },
-      options: {
-        backgroundColor: constants.header.optionsBackground,
-        color: constants.header.optionsTextColor,
-        border: `1px solid ${constants.header.optionsBorder}`,
-        minWidth: 145
-      },
-      menuItem: {
-        width: "100%",
-        display: "flex",
-        flexDirection: "row",
-        alignItems: "center",
-        color: constants.header.menuItemTextColor,
-        "& svg": {
-          width: constants.generalUnit * 2,
-          height: constants.generalUnit * 2,
-          marginRight: constants.generalUnit,
-          fill: palette.additional["gray"][7],
-          stroke: palette.additional["gray"][7]
-        }
-      },
-      icon: {
-        "& svg": {
-          fill: constants.header.iconColor
-        }
-      },
       title : {
         marginLeft: constants.generalUnit
       },
@@ -183,21 +144,9 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
   const { desktop } = useThemeSwitcher()
   const classes = useStyles()
   const { isLoggedIn, secured } = useFilesApi()
-  const { publicKey, isNewDevice, shouldInitializeAccount, logout } = useThresholdKey()
-  const { getProfileTitle, removeUser } = useUser()
+  const { publicKey, isNewDevice, shouldInitializeAccount } = useThresholdKey()
   const [searchActive, setSearchActive] = useState(false)
   const [isTeamModalOpen, setIsTeamModalOpen] = useState(false)
-  const { history } = useHistory()
-
-  const signOut = useCallback(async () => {
-    logout()
-      .catch(console.error)
-      .finally(() => {
-        removeUser()
-        history.replace("/", {})
-      })
-
-  }, [logout, removeUser, history])
 
   const onReportBugClick = useCallback(() => {
     window.open(ROUTE_LINKS.DiscordInvite, "_blank")
@@ -258,33 +207,6 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
                   notifications={[]}
                 />
               </section>
-              <section className={classes.accountControls}>
-                <MenuDropdown
-                  title={getProfileTitle()}
-                  anchor="bottom-right"
-                  classNames={{
-                    icon: classes.icon,
-                    options: classes.options
-                  }}
-                  testId="sign-out"
-                  menuItems={[
-                    {
-                      onClick: () => signOut(),
-                      contents: (
-                        <div
-                          data-cy="menu-sign-out"
-                          className={classes.menuItem}
-                        >
-                          <PowerDownSvg />
-                          <Typography>
-                            <Trans>Sign Out</Trans>
-                          </Typography>
-                        </div>
-                      )
-                    }
-                  ]}
-                />
-              </section>
             </section>
           ) : (
             <>
diff --git a/packages/files-ui/src/Components/Layouts/AppNav.tsx b/packages/files-ui/src/Components/Layouts/AppNav.tsx
index 84eb9caf98..f0a43c9b92 100644
--- a/packages/files-ui/src/Components/Layouts/AppNav.tsx
+++ b/packages/files-ui/src/Components/Layouts/AppNav.tsx
@@ -5,14 +5,14 @@ import clsx from "clsx"
 import {
   Link,
   Typography,
-  ChainsafeFilesLogo,
   DatabaseSvg,
   SettingSvg,
   PowerDownSvg,
   ProgressBar,
   formatBytes,
   DeleteSvg,
-  UserShareSvg
+  UserShareSvg,
+  MenuDropdown
 } from "@chainsafe/common-components"
 import { ROUTE_LINKS } from "../FilesRoutes"
 import { Trans } from "@lingui/macro"
@@ -20,6 +20,8 @@ import { useThresholdKey } from "../../Contexts/ThresholdKeyContext"
 import { CSFTheme } from "../../Themes/types"
 import { useUser } from "../../Contexts/UserContext"
 import { useFilesApi } from "../../Contexts/FilesApiContext"
+import { Hashicon } from "@emeraldpay/hashicon-react"
+
 const useStyles = makeStyles(
   ({ palette, animation, breakpoints, constants, zIndex }: CSFTheme) => {
     return createStyles({
@@ -80,30 +82,9 @@ const useStyles = makeStyles(
         }
       },
       logo: {
-        textDecoration: "none",
-        display: "flex",
-        flexDirection: "row",
-        alignItems: "center",
-
-        [breakpoints.up("md")]: {
-          "& img": {
-            height: constants.generalUnit * 5,
-            width: "auto"
-          },
-          "& > *:first-child": {
-            marginRight: constants.generalUnit
-          }
-        },
-        [breakpoints.down("md")]: {
-          position: "absolute",
-          left: "50%",
-          top: "50%",
-          transform: "translate(-50%,-50%)",
-          "& img": {
-            height: constants.generalUnit * 3.25,
-            width: "auto"
-          }
-        }
+        width: constants.generalUnit * 2,
+        height: constants.generalUnit * 2,
+        marginRight: constants.generalUnit
       },
       navMenu: {
         display: "flex",
@@ -179,24 +160,48 @@ const useStyles = makeStyles(
         }
       },
       menuItem: {
-        width: 100,
+        width: "100%",
         display: "flex",
         flexDirection: "row",
         alignItems: "center",
+        color: constants.header.menuItemTextColor,
         "& svg": {
           width: constants.generalUnit * 2,
           height: constants.generalUnit * 2,
-          marginRight: constants.generalUnit
+          marginRight: constants.generalUnit,
+          fill: palette.additional["gray"][7],
+          stroke: palette.additional["gray"][7]
         }
       },
       spaceUsedMargin: {
         marginBottom: constants.generalUnit
       },
-      betaCaption: {
-        marginBottom: constants.generalUnit * 0.5
+      profileButton: {
+        borderRadius: 4,
+        display: "flex",
+        alignItems: "center",
+        padding: constants.generalUnit,
+        background: palette.additional["gray"][1],
+        boxShadow: constants.nav.profileButtonShadow
+      },
+      options: {
+        backgroundColor: constants.header.optionsBackground,
+        color: constants.header.optionsTextColor,
+        border: `1px solid ${constants.header.optionsBorder}`,
+        minWidth: 145
       },
-      supportButton: {
-        margin: "auto"
+      icon: {
+        "& svg": {
+          fill: constants.header.iconColor
+        }
+      },
+      hashIconContainer: {
+        marginRight: constants.generalUnit,
+        display: "flex",
+        alignItems: "center"
+      },
+      menuTitle: {
+        padding: `${constants.generalUnit * 1.5}px 0`
       }
     })
   }
@@ -213,7 +218,7 @@ const AppNav = ({ navOpen, setNavOpen }: IAppNav) => {
   const { storageSummary } = useFiles()
   const { isLoggedIn, secured } = useFilesApi()
   const { publicKey, isNewDevice, shouldInitializeAccount, logout } = useThresholdKey()
-  const { removeUser } = useUser()
+  const { removeUser, getProfileTitle, profile } = useUser()
 
   const signOut = useCallback(() => {
     logout()
@@ -226,6 +231,8 @@ const AppNav = ({ navOpen, setNavOpen }: IAppNav) => {
     }
   }, [desktop, navOpen, setNavOpen])
 
+  const profileTitle = getProfileTitle()
+
   return (
     <section
       className={clsx(classes.root, {
@@ -245,24 +252,50 @@ const AppNav = ({ navOpen, setNavOpen }: IAppNav) => {
         !shouldInitializeAccount && (
         <>
           {desktop && (
-            <div>
-              <Link
-                className={classes.logo}
-                to={ROUTE_LINKS.Drive("/")}
+            <section>
+              <MenuDropdown
+                anchor="bottom-left"
+                testId="sign-out"
+                hideIndicator={true}
+                classNames={{
+                  icon: classes.icon,
+                  options: classes.options,
+                  title: classes.menuTitle
+                }}
+                className={classes.menuItem}
+                menuItems={[
+                  {
+                    onClick: () => signOut(),
+                    contents: (
+                      <div
+                        data-cy="menu-sign-out"
+                        className={classes.menuItem}
+                      >
+                        <PowerDownSvg />
+                        <Typography>
+                          <Trans>Sign Out</Trans>
+                        </Typography>
+                      </div>
+                    )
+                  }
+                ]}
               >
-                <ChainsafeFilesLogo />
-                <Typography variant="h5">
-                  Files
-                </Typography>
-                &nbsp;
-                <Typography
-                  variant="caption"
-                  className={classes.betaCaption}
-                >
-                  beta
-                </Typography>
-              </Link>
-            </div>
+                {!!profileTitle &&
+                  <div className={classes.profileButton}>
+                    <div className={classes.hashIconContainer}>
+                      <Hashicon value={profile?.userId || ""}
+                        size={20} />
+                    </div>
+                    <Typography
+                      variant="body1"
+                      component="p"
+                    >
+                      {profileTitle}
+                    </Typography>
+                  </div>
+                }
+              </MenuDropdown>
+            </section>
           )}
           <div className={classes.linksArea}>
             <Typography className={classes.navHead}>
diff --git a/packages/files-ui/src/Themes/Constants.ts b/packages/files-ui/src/Themes/Constants.ts
index 5ca6a1e648..d330f074a7 100644
--- a/packages/files-ui/src/Themes/Constants.ts
+++ b/packages/files-ui/src/Themes/Constants.ts
@@ -61,6 +61,7 @@ export interface CsfColors extends IConstants {
     itemColorHover: string
     itemIconColor: string
     itemIconColorHover: string
+    profileButtonShadow: string
   }
   createFolder: {
     backgroundColor: string
diff --git a/packages/files-ui/src/Themes/DarkTheme.ts b/packages/files-ui/src/Themes/DarkTheme.ts
index e3595b853b..e7587c0b17 100644
--- a/packages/files-ui/src/Themes/DarkTheme.ts
+++ b/packages/files-ui/src/Themes/DarkTheme.ts
@@ -379,7 +379,8 @@ export const darkTheme = createTheme<CsfColors>({
           itemColor: "var(--gray9)",
           itemColorHover: "var(--gray9)",
           itemIconColor: "var(--gray9)",
-          itemIconColorHover: "var(--gray9)"
+          itemIconColorHover: "var(--gray9)",
+          profileButtonShadow: "0px 1px 2px rgba(0, 0, 0, 0.25)"
         },
         createFolder: {
           backgroundColor: "var(--gray2)",
diff --git a/packages/files-ui/src/Themes/LightTheme.ts b/packages/files-ui/src/Themes/LightTheme.ts
index 24c30df245..8d8e88f9be 100644
--- a/packages/files-ui/src/Themes/LightTheme.ts
+++ b/packages/files-ui/src/Themes/LightTheme.ts
@@ -66,7 +66,8 @@ export const lightTheme = createTheme<CsfColors>({
           itemColor: "inherit",
           itemColorHover: "var(--gray7)",
           itemIconColor: "inherit",
-          itemIconColorHover: "var(--gray7)"
+          itemIconColorHover: "var(--gray7)",
+          profileButtonShadow: "0px 1px 2px rgba(0, 0, 0, 0.25)"
         },
         createFolder: {
           backgroundColor: "var(--gray1)",
diff --git a/yarn.lock b/yarn.lock
index 53bd35cc85..41eb650088 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1934,15 +1934,6 @@
     "@redocly/openapi-core" "^1.0.0-beta.58"
     redoc-cli "^0.12.3"
 
-"@chainsafe/files-api-client@^1.18.18":
-  version "1.18.18"
-  resolved "https://registry.yarnpkg.com/@chainsafe/files-api-client/-/files-api-client-1.18.18.tgz#1fc8e7fe2a657d95a8aec8e1e7d69b0c1e2a9a38"
-  integrity sha512-MkMsEUebgsY/7RtWQU3WMcVKa0xuj9nq/6V87P5YiQ3B7cxqOyFZsmsU3u2dVS15crBWXcEiey0LUUDrvbVNOg==
-  dependencies:
-    "@redocly/openapi-cli" "^1.0.0-beta.58"
-    "@redocly/openapi-core" "^1.0.0-beta.58"
-    redoc-cli "^0.12.3"
-
 "@chainsafe/web3-context@1.1.4":
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/@chainsafe/web3-context/-/web3-context-1.1.4.tgz#ce0f140af8ccf93af1a189fbdbd6f018b9bf5fb7"
@@ -2059,6 +2050,23 @@
     debug "^3.1.0"
     lodash.once "^4.1.1"
 
+"@emeraldpay/hashicon-react@^0.5.1":
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/@emeraldpay/hashicon-react/-/hashicon-react-0.5.1.tgz#975c57fdad22b8f043ad24004a620eb1012ba728"
+  integrity sha512-WoLPBpdwseNexAQHDmr0f9nxc8HfNpQxNI2bw/04yYpoeQg61r52iwk3EHV/QCg5hnAcF6wKdyCnybyU8UBtHQ==
+  dependencies:
+    "@emeraldpay/hashicon" "^0.5.1"
+    react "^16.8.0"
+
+"@emeraldpay/hashicon@^0.5.1":
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/@emeraldpay/hashicon/-/hashicon-0.5.1.tgz#f2fd30dace08d3fed9db66732f803b0e6f60ce05"
+  integrity sha512-pMvnz6CkCqzoB2srA3B/gCKIi6h24O1Chfj919OqyCC08Kc0zCCok6iQoJ2cP5T+P2utGeR/El7jE4Q2JgmP+A==
+  dependencies:
+    "@stablelib/blake2s" "^1.0.0"
+    js-sha3 "^0.8.0"
+    text-encoding "^0.7.0"
+
 "@emotion/cache@^10.0.27", "@emotion/cache@^10.0.9":
   version "10.0.29"
   resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0"
@@ -4707,6 +4715,37 @@
     semver "^6.3.0"
     tiny-secp256k1 "^1.1.6"
 
+"@stablelib/binary@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@stablelib/binary/-/binary-1.0.1.tgz#c5900b94368baf00f811da5bdb1610963dfddf7f"
+  integrity sha512-ClJWvmL6UBM/wjkvv/7m5VP3GMr9t0osr4yVgLZsLCOz4hGN9gIAFEqnJ0TsSMAN+n840nf2cHZnA5/KFqHC7Q==
+  dependencies:
+    "@stablelib/int" "^1.0.1"
+
+"@stablelib/blake2s@^1.0.0":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@stablelib/blake2s/-/blake2s-1.0.1.tgz#0a3de2e2780172cafc9675784251a87849cf41c0"
+  integrity sha512-Nnp7ULL65b4zEOkf3IdfL74xHhZXMCg7HBjBYO666a0o+DIY6GDEhUCqH6dws8nsSZgZO+V5+s2VyYKKGdFMZw==
+  dependencies:
+    "@stablelib/binary" "^1.0.1"
+    "@stablelib/hash" "^1.0.1"
+    "@stablelib/wipe" "^1.0.1"
+
+"@stablelib/hash@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@stablelib/hash/-/hash-1.0.1.tgz#3c944403ff2239fad8ebb9015e33e98444058bc5"
+  integrity sha512-eTPJc/stDkdtOcrNMZ6mcMK1e6yBbqRBaNW55XA1jU8w/7QdnCF0CmMmOD1m7VSkBR44PWrMHU2l6r8YEQHMgg==
+
+"@stablelib/int@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@stablelib/int/-/int-1.0.1.tgz#75928cc25d59d73d75ae361f02128588c15fd008"
+  integrity sha512-byr69X/sDtDiIjIV6m4roLVWnNNlRGzsvxw+agj8CIEazqWGOQp2dTYgQhtyVXV9wpO6WyXRQUzLV/JRNumT2w==
+
+"@stablelib/wipe@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@stablelib/wipe/-/wipe-1.0.1.tgz#d21401f1d59ade56a62e139462a97f104ed19a36"
+  integrity sha512-WfqfX/eXGiAd3RJe4VU2snh/ZPwtSjLG4ynQ/vYzvghTh7dHFcI1wl+nrkWG6lGhukOxOsUHfv8dUXr58D0ayg==
+
 "@storybook/addon-actions@^5.3.21":
   version "5.3.21"
   resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-5.3.21.tgz#16eed3eb24996adfcbf70bd476a261324d6de593"
@@ -21016,7 +21055,7 @@ react-zoom-pan-pinch@^1.6.1:
   resolved "https://registry.yarnpkg.com/react-zoom-pan-pinch/-/react-zoom-pan-pinch-1.6.1.tgz#da16267c258ab37e8ebcdc7c252794a9633e91ec"
   integrity sha512-J2eM0gZ04XiUWvmKZrOhSAB2zjyoK7kw2POIeN1X0yTTlmp6HPGV0zYfjnlkhgt8nQwpvXAbsF/oAnkuiwk1kA==
 
-react@16.14.0, react@^16.14.0, react@^16.8.3:
+react@16.14.0, react@^16.14.0, react@^16.8.0, react@^16.8.3:
   version "16.14.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
   integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
@@ -23414,6 +23453,11 @@ testrpc@0.0.1:
   resolved "https://registry.yarnpkg.com/testrpc/-/testrpc-0.0.1.tgz#83e2195b1f5873aec7be1af8cbe6dcf39edb7aed"
   integrity sha512-afH1hO+SQ/VPlmaLUFj2636QMeDvPCeQMc/9RBMW0IfjNe9gFD9Ra3ShqYkB7py0do1ZcCna/9acHyzTJ+GcNA==
 
+text-encoding@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/text-encoding/-/text-encoding-0.7.0.tgz#f895e836e45990624086601798ea98e8f36ee643"
+  integrity sha512-oJQ3f1hrOnbRLOcwKz0Liq2IcrvDeZRHXhd9RgLrsT+DjWY/nty1Hi7v3dtkaEYbPYe0mUoOfzRrMwfXXwgPUA==
+
 text-table@0.2.0, text-table@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"