diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index 77415ad341..0d018124cc 100644
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -36,9 +36,10 @@
     "wordInDatabase": "This word is already in the database"
   },
   "appBar": {
-    "dataEntry": "data entry",
-    "dataCleanup": "data cleanup",
-    "statistics": "data statistics"
+    "dataEntry": "Data Entry",
+    "dataCleanup": "Data Cleanup",
+    "statistics": "Data Statistics",
+    "projectSettings": "Project Settings"
   },
   "login": {
     "title": "Log In",
@@ -77,7 +78,6 @@
   },
   "userMenu": {
     "siteSettings": "Site Settings",
-    "projectSettings": "Project Settings",
     "userSettings": "User Settings",
     "logout": "Log Out",
     "userGuide": "User Guide"
diff --git a/src/components/AppBar/AppBarComponent.tsx b/src/components/AppBar/AppBarComponent.tsx
index 44b87288f9..eee9b2b0e2 100644
--- a/src/components/AppBar/AppBarComponent.tsx
+++ b/src/components/AppBar/AppBarComponent.tsx
@@ -1,4 +1,4 @@
-import { AppBar, Grid, Hidden, Toolbar } from "@mui/material";
+import { AppBar, Grid, Toolbar } from "@mui/material";
 import { ReactElement, useEffect, useState } from "react";
 import { useLocation } from "react-router-dom";
 
@@ -6,39 +6,37 @@ import { getProjectId } from "backend/localStorage";
 import { getBasePath, Path } from "browserHistory";
 import Logo from "components/AppBar/Logo";
 import NavigationButtons from "components/AppBar/NavigationButtons";
-import ProjectNameButton from "components/AppBar/ProjectNameButton";
+import ProjectButtons from "components/AppBar/ProjectButtons";
 import UserMenu from "components/AppBar/UserMenu";
 import { topBarHeight } from "components/LandingPage/TopBar";
 import DownloadButton from "components/ProjectExport/DownloadButton";
 import theme from "types/theme";
 
+export const appBarHeight = 64;
+
 /** An app bar shown at the top of all logged in pages */
 export default function AppBarComponent(): ReactElement {
   const location = useLocation();
   const [currentTab, setCurrentTab] = useState<Path>(Path.ProjScreen);
+
   useEffect(() => setCurrentTab(getBasePath(location.pathname)), [location]);
+
   return (
     <div className="NavigationBar" style={{ marginBottom: topBarHeight }}>
-      <AppBar position="fixed" style={{ zIndex: theme.zIndex.drawer + 1 }}>
+      <AppBar
+        position="fixed"
+        style={{ maxHeight: appBarHeight, zIndex: theme.zIndex.drawer + 1 }}
+      >
         <Toolbar>
-          <Grid
-            container
-            justifyContent="space-between"
-            spacing={2}
-            alignItems="center"
-          >
-            <Grid item sm={7} md={6} lg={5}>
-              <Hidden smDown>
-                <Logo />
-              </Hidden>
+          <Grid container justifyContent="space-between" alignItems="center">
+            <Grid item>
+              <Logo />
               {!!getProjectId() && (
                 <NavigationButtons currentTab={currentTab} />
               )}
             </Grid>
-            <Grid item xs={1} sm={2} md={3} lg={4}>
-              {!!getProjectId() && (
-                <ProjectNameButton currentTab={currentTab} />
-              )}
+            <Grid item>
+              {!!getProjectId() && <ProjectButtons currentTab={currentTab} />}
               <DownloadButton colorSecondary />
             </Grid>
             <Grid item>
diff --git a/src/components/AppBar/Logo.tsx b/src/components/AppBar/Logo.tsx
index 8b762a7c0a..cfca5cf384 100644
--- a/src/components/AppBar/Logo.tsx
+++ b/src/components/AppBar/Logo.tsx
@@ -8,15 +8,19 @@ import smallLogo from "resources/CombineSmallLogoV1.png";
 /** A button that redirects to the home page */
 export default function Logo(): ReactElement {
   return (
-    <Button onClick={() => history.push(Path.ProjScreen)} id="logo-button">
-      <Hidden lgDown>
-        <img src={logo} height="50" alt="Logo" />
+    <Button
+      id="logo-button"
+      onClick={() => history.push(Path.ProjScreen)}
+      style={{ minWidth: 0, padding: 0 }}
+    >
+      <Hidden mdDown>
+        <img src={logo} height="45" alt="Logo" />
       </Hidden>
-      <Hidden lgUp mdDown>
-        <img src={logo} height="40" alt="Logo" />
+      <Hidden smDown mdUp>
+        <img src={smallLogo} height="30" alt="Logo" />
       </Hidden>
-      <Hidden mdUp>
-        <img src={smallLogo} height="35" alt="Logo" />
+      <Hidden smUp>
+        <img src={smallLogo} height="15" alt="Logo" />
       </Hidden>
     </Button>
   );
diff --git a/src/components/AppBar/NavigationButtons.tsx b/src/components/AppBar/NavigationButtons.tsx
index 609af83036..4734afb7fc 100644
--- a/src/components/AppBar/NavigationButtons.tsx
+++ b/src/components/AppBar/NavigationButtons.tsx
@@ -1,89 +1,47 @@
 import { Button } from "@mui/material";
-import React, { ReactElement, useState } from "react";
+import { ReactElement } from "react";
 import { useTranslation } from "react-i18next";
 
-import { Permission } from "api";
-import * as backend from "backend";
-import * as LocalStorage from "backend/localStorage";
 import history, { Path } from "browserHistory";
-import { openTreeAction } from "components/TreeView/TreeViewActions";
-import { useAppDispatch } from "types/hooks";
+import { appBarHeight } from "components/AppBar/AppBarComponent";
 import { tabColor } from "types/theme";
 
 interface NavigationButtonsProps {
   currentTab: Path;
 }
 
-export async function getIsAdminOrOwner(): Promise<boolean> {
-  const user = LocalStorage.getCurrentUser();
-  if (user?.isAdmin) {
-    return true;
-  } else {
-    const projectId = LocalStorage.getProjectId();
-    const userRoleID = user?.projectRoles[projectId];
-    if (userRoleID) {
-      return backend.getUserRole(userRoleID).then((role) => {
-        return role.permissions.includes(Permission.Owner);
-      });
-    }
-  }
-  return false;
-}
-
 /** A button that redirects to the home page */
 export default function NavigationButtons(
   props: NavigationButtonsProps
 ): ReactElement {
-  const dispatch = useAppDispatch();
   const { t } = useTranslation();
-  const [isAdminOrOwner, setIsAdminOrOwner] = useState<boolean>(false);
-
-  getIsAdminOrOwner().then(setIsAdminOrOwner);
 
   return (
-    <React.Fragment>
+    <>
       <Button
-        id="data-entry"
-        onClick={() => {
-          dispatch(openTreeAction());
-          history.push(Path.DataEntry);
-        }}
+        id={"data-entry"}
+        onClick={() => history.push(Path.DataEntry)}
         color="inherit"
         style={{
-          width: "fit-content",
           background: tabColor(props.currentTab, Path.DataEntry),
+          maxHeight: appBarHeight,
+          width: "min-content",
         }}
       >
         {t("appBar.dataEntry")}
       </Button>
       <Button
-        id="goals"
-        onClick={() => {
-          history.push(Path.Goals);
-        }}
+        id={"data-cleanup"}
+        onClick={() => history.push(Path.Goals)}
         color="inherit"
         style={{
-          width: "fit-content",
           background: tabColor(props.currentTab, Path.Goals),
+          maxHeight: appBarHeight,
+          width: "min-content",
         }}
       >
         {t("appBar.dataCleanup")}
       </Button>
-      {isAdminOrOwner && (
-        <Button
-          id="statistics"
-          onClick={() => {
-            history.push(Path.Statistics);
-          }}
-          color="inherit"
-          style={{
-            width: "min-content",
-            background: tabColor(props.currentTab, Path.Statistics),
-          }}
-        >
-          {t("appBar.statistics")}
-        </Button>
-      )}
-    </React.Fragment>
+    </>
   );
 }
diff --git a/src/components/AppBar/ProjectButtons.tsx b/src/components/AppBar/ProjectButtons.tsx
new file mode 100644
index 0000000000..a1bb66cfb6
--- /dev/null
+++ b/src/components/AppBar/ProjectButtons.tsx
@@ -0,0 +1,85 @@
+import { BarChart, Settings } from "@mui/icons-material";
+import { Button, Hidden, Tooltip, Typography } from "@mui/material";
+import { ReactElement, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useSelector } from "react-redux";
+
+import { Permission } from "api/models";
+import { getUserRole } from "backend";
+import { getCurrentUser, getProjectId } from "backend/localStorage";
+import history, { Path } from "browserHistory";
+import { StoreState } from "types";
+import { tabColor } from "types/theme";
+
+interface ProjectButtonsProps {
+  currentTab: Path;
+}
+
+export async function getIsAdminOrOwner(): Promise<boolean> {
+  const user = getCurrentUser();
+  if (!user) {
+    return false;
+  }
+  if (user.isAdmin) {
+    return true;
+  }
+  const userRoleID = user.projectRoles[getProjectId()];
+  if (userRoleID) {
+    const role = await getUserRole(userRoleID);
+    return role.permissions.includes(Permission.Owner);
+  }
+  return false;
+}
+
+/** A button that redirects to the project settings */
+export default function ProjectButtons(
+  props: ProjectButtonsProps
+): ReactElement {
+  const projectName = useSelector(
+    (state: StoreState) => state.currentProjectState.project.name
+  );
+  const [isAdminOrOwner, setIsAdminOrOwner] = useState<boolean>(false);
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    getIsAdminOrOwner().then(setIsAdminOrOwner);
+  }, [setIsAdminOrOwner]);
+
+  return (
+    <>
+      {isAdminOrOwner && (
+        <Tooltip title={t("appBar.statistics")}>
+          <Button
+            id="project-statistics"
+            onClick={() => history.push(Path.Statistics)}
+            color="inherit"
+            style={{
+              background: tabColor(props.currentTab, Path.Statistics),
+              minWidth: 0,
+            }}
+          >
+            <BarChart />
+          </Button>
+        </Tooltip>
+      )}
+      <Tooltip title={t("appBar.projectSettings")}>
+        <Button
+          id="project-settings"
+          onClick={() => history.push(Path.ProjSettings)}
+          color="inherit"
+          style={{
+            background: tabColor(props.currentTab, Path.ProjSettings),
+            minWidth: 0,
+          }}
+        >
+          <Settings />
+        </Button>
+      </Tooltip>
+      <Hidden smDown>
+        <Typography display="inline" style={{ margin: 5 }}>
+          {projectName}
+        </Typography>
+      </Hidden>
+    </>
+  );
+}
diff --git a/src/components/AppBar/ProjectNameButton.tsx b/src/components/AppBar/ProjectNameButton.tsx
deleted file mode 100644
index 38d223f8fc..0000000000
--- a/src/components/AppBar/ProjectNameButton.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Settings } from "@mui/icons-material";
-import { Button, Hidden, Tooltip } from "@mui/material";
-import { ReactElement } from "react";
-import { useTranslation } from "react-i18next";
-import { useSelector } from "react-redux";
-
-import history, { Path } from "browserHistory";
-import { StoreState } from "types";
-import { tabColor } from "types/theme";
-
-interface ProjectNameButtonProps {
-  currentTab: Path;
-}
-
-/** A button that redirects to the project settings */
-export default function ProjectNameButton(
-  props: ProjectNameButtonProps
-): ReactElement {
-  const projectName = useSelector(
-    (state: StoreState) => state.currentProjectState.project.name
-  );
-  const { t } = useTranslation();
-
-  const background = tabColor(props.currentTab, Path.ProjSettings);
-  return (
-    <Tooltip title={t("userMenu.projectSettings")}>
-      <Button
-        id="project-name"
-        onClick={() => history.push(Path.ProjSettings)}
-        color="inherit"
-        style={{ background }}
-      >
-        <Settings />
-        <Hidden smDown>{projectName}</Hidden>
-      </Button>
-    </Tooltip>
-  );
-}
diff --git a/src/components/AppBar/UserMenu.tsx b/src/components/AppBar/UserMenu.tsx
index 64088c42c5..3a5cf38430 100644
--- a/src/components/AppBar/UserMenu.tsx
+++ b/src/components/AppBar/UserMenu.tsx
@@ -4,7 +4,14 @@ import {
   Person,
   SettingsApplications,
 } from "@mui/icons-material";
-import { Avatar, Button, Hidden, Menu, MenuItem } from "@mui/material";
+import {
+  Avatar,
+  Button,
+  Hidden,
+  Menu,
+  MenuItem,
+  Typography,
+} from "@mui/material";
 import React, { ReactElement, useState } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -50,16 +57,24 @@ export default function UserMenu(props: UserMenuProps): ReactElement {
   getIsAdmin().then(setIsAdmin);
 
   return (
-    <React.Fragment>
+    <>
       <Button
         aria-controls="user-menu"
         aria-haspopup="true"
         onClick={handleClick}
         color="secondary"
-        style={{ background: tabColor(props.currentTab, Path.UserSettings) }}
+        style={{
+          background: tabColor(props.currentTab, Path.UserSettings),
+          minWidth: 0,
+          padding: 0,
+        }}
         id={`avatar-${idAffix}`}
       >
-        <Hidden mdDown>{LocalStorage.getCurrentUser()?.username}</Hidden>
+        <Hidden mdDown>
+          <Typography style={{ margin: 5 }}>
+            {LocalStorage.getCurrentUser()?.username}
+          </Typography>
+        </Hidden>
         {avatar ? (
           <Avatar alt="User avatar" src={avatar} style={{ marginLeft: 5 }} />
         ) : (
@@ -76,7 +91,7 @@ export default function UserMenu(props: UserMenuProps): ReactElement {
       >
         <WrappedUserMenuList isAdmin={isAdmin} onSelect={handleClose} />
       </Menu>
-    </React.Fragment>
+    </>
   );
 }
 
diff --git a/src/components/AppBar/tests/AppBarComponent.test.tsx b/src/components/AppBar/tests/AppBarComponent.test.tsx
index ed2049a25d..ec24a35613 100644
--- a/src/components/AppBar/tests/AppBarComponent.test.tsx
+++ b/src/components/AppBar/tests/AppBarComponent.test.tsx
@@ -8,7 +8,7 @@ import { Path } from "browserHistory";
 import { defaultState } from "components/App/DefaultState";
 import AppBar from "components/AppBar/AppBarComponent";
 import NavigationButtons from "components/AppBar/NavigationButtons";
-import ProjectNameButton from "components/AppBar/ProjectNameButton";
+import ProjectButtons from "components/AppBar/ProjectButtons";
 import { newUser } from "types/user";
 
 const mockPath = jest.fn();
@@ -60,26 +60,26 @@ describe("NavigationButtons", () => {
 
     testRenderer = renderer.create(
       <Provider store={mockStore}>
-        <ProjectNameButton currentTab={Path.Goals} />
+        <ProjectButtons currentTab={Path.Goals} />
       </Provider>
     );
     expect(testRenderer.toJSON()).toMatchSnapshot();
 
     testRenderer = renderer.create(
       <Provider store={mockStore}>
-        <ProjectNameButton currentTab={Path.Statistics} />
+        <ProjectButtons currentTab={Path.Statistics} />
       </Provider>
     );
     expect(testRenderer.toJSON()).toMatchSnapshot();
   });
 });
 
-describe("ProjectNameButton", () => {
+describe("ProjectButtons", () => {
   it("has tab shaded when itself is called", () => {
     mockPath.mockReturnValue(Path.ProjSettings);
     testRenderer = renderer.create(
       <Provider store={mockStore}>
-        <ProjectNameButton currentTab={Path.ProjSettings} />
+        <ProjectButtons currentTab={Path.ProjSettings} />
       </Provider>
     );
     expect(testRenderer.toJSON()).toMatchSnapshot();
diff --git a/src/components/AppBar/tests/Logo.test.tsx b/src/components/AppBar/tests/Logo.test.tsx
new file mode 100644
index 0000000000..4a42ca2d30
--- /dev/null
+++ b/src/components/AppBar/tests/Logo.test.tsx
@@ -0,0 +1,28 @@
+import { Button } from "@mui/material";
+import renderer from "react-test-renderer";
+
+import { Path } from "browserHistory";
+import Logo from "components/AppBar/Logo";
+
+jest.mock("browserHistory", () => ({
+  ...jest.requireActual("browserHistory"),
+  __esModule: true,
+  default: { push: (path: Path) => mockPush(path) },
+}));
+
+const mockPush = jest.fn();
+
+let testRenderer: renderer.ReactTestRenderer;
+
+beforeAll(() => {
+  renderer.act(() => {
+    testRenderer = renderer.create(<Logo />);
+  });
+});
+
+describe("Logo", () => {
+  it("navigates to Project Screen on click", () => {
+    testRenderer.root.findByType(Button).props.onClick();
+    expect(mockPush).toBeCalledWith(Path.ProjScreen);
+  });
+});
diff --git a/src/components/AppBar/tests/ProjectButtons.test.tsx b/src/components/AppBar/tests/ProjectButtons.test.tsx
new file mode 100644
index 0000000000..496db0f4ed
--- /dev/null
+++ b/src/components/AppBar/tests/ProjectButtons.test.tsx
@@ -0,0 +1,84 @@
+import { Button } from "@mui/material";
+import { Provider } from "react-redux";
+import renderer from "react-test-renderer";
+import configureMockStore from "redux-mock-store";
+
+import "tests/reactI18nextMock";
+
+import { Permission } from "api/models";
+import { Path } from "browserHistory";
+import ProjectButtons, {
+  getIsAdminOrOwner,
+} from "components/AppBar/ProjectButtons";
+
+jest.mock("backend", () => ({
+  getUserRole: () => mockGetUserRole(),
+}));
+jest.mock("backend/localStorage", () => ({
+  getCurrentUser: () => mockGetCurrentUser(),
+  getProjectId: () => mockProjectId,
+}));
+
+const mockGetCurrentUser = jest.fn();
+const mockGetUserRole = jest.fn();
+const mockProjectId = "proj-id";
+const mockProjectRoles: { [key: string]: string } = {};
+mockProjectRoles[mockProjectId] = "non-empty-string";
+
+let testRenderer: renderer.ReactTestRenderer;
+
+const mockStore = configureMockStore()({
+  currentProjectState: { project: { name: "" } },
+});
+
+const renderProjectButtons = async () => {
+  await renderer.act(async () => {
+    testRenderer = renderer.create(
+      <Provider store={mockStore}>
+        <ProjectButtons currentTab={Path.Root} />
+      </Provider>
+    );
+  });
+};
+
+beforeEach(() => {
+  jest.resetAllMocks();
+});
+
+describe("ProjectButtons", () => {
+  it("has one button by default", async () => {
+    await renderProjectButtons();
+    expect(testRenderer.root.findAllByType(Button)).toHaveLength(1);
+  });
+
+  it("has second button for admin or project owner", async () => {
+    mockGetCurrentUser.mockReturnValueOnce({ isAdmin: true });
+    await renderProjectButtons();
+    expect(testRenderer.root.findAllByType(Button)).toHaveLength(2);
+  });
+
+  describe("getIsAdminOrOwner", () => {
+    it("returns true for admin users", async () => {
+      expect(await getIsAdminOrOwner()).toBeFalsy();
+      mockGetCurrentUser.mockReturnValueOnce({ isAdmin: true });
+      expect(await getIsAdminOrOwner()).toBeTruthy();
+    });
+
+    it("returns true for project owner but not other roles", async () => {
+      mockGetCurrentUser.mockReturnValue({ projectRoles: mockProjectRoles });
+
+      const onlyOwner = [Permission.Owner];
+      mockGetUserRole.mockResolvedValueOnce({ permissions: onlyOwner });
+      expect(await getIsAdminOrOwner()).toBeTruthy();
+
+      const allButOwner = [
+        Permission.DeleteEditSettingsAndUsers,
+        Permission.ImportExport,
+        Permission.MergeAndReviewEntries,
+        Permission.WordEntry,
+      ];
+      mockGetUserRole.mockResolvedValueOnce({ permissions: allButOwner });
+      expect(await getIsAdminOrOwner()).toBeFalsy();
+    });
+  });
+});
diff --git a/src/components/AppBar/tests/UserMenu.test.tsx b/src/components/AppBar/tests/UserMenu.test.tsx
index c344fe3a2c..ace1fd9383 100644
--- a/src/components/AppBar/tests/UserMenu.test.tsx
+++ b/src/components/AppBar/tests/UserMenu.test.tsx
@@ -49,19 +49,14 @@ describe("UserMenu", () => {
     expect(testRenderer.root.findAllByType(Button).length).toEqual(1);
   });
 
-  it("getIsAdmin returns correct value", (done) => {
+  it("getIsAdmin returns correct value", async () => {
     mockUser.isAdmin = false;
-    getIsAdmin().then((result) => {
-      expect(result).toEqual(false);
-      mockUser.isAdmin = true;
-      getIsAdmin().then((result) => {
-        expect(result).toEqual(true);
-        done();
-      });
-    });
+    expect(await getIsAdmin()).toBeFalsy();
+    mockUser.isAdmin = true;
+    expect(await getIsAdmin()).toBeTruthy();
   });
 
-  it("admin users see one more item: Site Settings", async () => {
+  it("UserMenuList has one more item for admins (Site Settings)", () => {
     renderMenuList();
     const normalMenuItems = testRenderer.root.findAllByType(MenuItem).length;
     renderMenuList(true);
diff --git a/src/components/AppBar/tests/__snapshots__/AppBarComponent.test.tsx.snap b/src/components/AppBar/tests/__snapshots__/AppBarComponent.test.tsx.snap
index a3ca8a22d5..66fef25926 100644
--- a/src/components/AppBar/tests/__snapshots__/AppBarComponent.test.tsx.snap
+++ b/src/components/AppBar/tests/__snapshots__/AppBarComponent.test.tsx.snap
@@ -22,7 +22,8 @@ Array [
     style={
       Object {
         "background": "#1976d2",
-        "width": "fit-content",
+        "maxHeight": 64,
+        "width": "min-content",
       }
     }
     tabIndex={0}
@@ -33,7 +34,7 @@ Array [
   <button
     className="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textInherit MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorInherit MuiButton-root MuiButton-text MuiButton-textInherit MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorInherit css-1y942vo-MuiButtonBase-root-MuiButton-root"
     disabled={false}
-    id="goals"
+    id="data-cleanup"
     onBlur={[Function]}
     onClick={[Function]}
     onContextMenu={[Function]}
@@ -50,7 +51,8 @@ Array [
     style={
       Object {
         "background": "inherit",
-        "width": "fit-content",
+        "maxHeight": 64,
+        "width": "min-content",
       }
     }
     tabIndex={0}
@@ -63,12 +65,12 @@ Array [
 
 exports[`NavigationButtons has only one tab shaded 2`] = `
 <button
-  aria-label="userMenu.projectSettings"
+  aria-label="appBar.projectSettings"
   aria-labelledby={null}
   className="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textInherit MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorInherit MuiButton-root MuiButton-text MuiButton-textInherit MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorInherit css-1y942vo-MuiButtonBase-root-MuiButton-root"
   data-mui-internal-clone-element={true}
   disabled={false}
-  id="project-name"
+  id="project-settings"
   onBlur={[Function]}
   onClick={[Function]}
   onContextMenu={[Function]}
@@ -86,6 +88,7 @@ exports[`NavigationButtons has only one tab shaded 2`] = `
   style={
     Object {
       "background": "inherit",
+      "minWidth": 0,
     }
   }
   tabIndex={0}
@@ -110,12 +113,12 @@ exports[`NavigationButtons has only one tab shaded 2`] = `
 
 exports[`NavigationButtons has only one tab shaded 3`] = `
 <button
-  aria-label="userMenu.projectSettings"
+  aria-label="appBar.projectSettings"
   aria-labelledby={null}
   className="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textInherit MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorInherit MuiButton-root MuiButton-text MuiButton-textInherit MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorInherit css-1y942vo-MuiButtonBase-root-MuiButton-root"
   data-mui-internal-clone-element={true}
   disabled={false}
-  id="project-name"
+  id="project-settings"
   onBlur={[Function]}
   onClick={[Function]}
   onContextMenu={[Function]}
@@ -133,6 +136,7 @@ exports[`NavigationButtons has only one tab shaded 3`] = `
   style={
     Object {
       "background": "inherit",
+      "minWidth": 0,
     }
   }
   tabIndex={0}
@@ -155,14 +159,14 @@ exports[`NavigationButtons has only one tab shaded 3`] = `
 </button>
 `;
 
-exports[`ProjectNameButton has tab shaded when itself is called 1`] = `
+exports[`ProjectButtons has tab shaded when itself is called 1`] = `
 <button
-  aria-label="userMenu.projectSettings"
+  aria-label="appBar.projectSettings"
   aria-labelledby={null}
   className="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textInherit MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorInherit MuiButton-root MuiButton-text MuiButton-textInherit MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorInherit css-1y942vo-MuiButtonBase-root-MuiButton-root"
   data-mui-internal-clone-element={true}
   disabled={false}
-  id="project-name"
+  id="project-settings"
   onBlur={[Function]}
   onClick={[Function]}
   onContextMenu={[Function]}
@@ -180,6 +184,7 @@ exports[`ProjectNameButton has tab shaded when itself is called 1`] = `
   style={
     Object {
       "background": "#1976d2",
+      "minWidth": 0,
     }
   }
   tabIndex={0}
diff --git a/src/components/DataEntry/DataEntryComponent.tsx b/src/components/DataEntry/DataEntryComponent.tsx
index 1aad3f785a..e247896196 100644
--- a/src/components/DataEntry/DataEntryComponent.tsx
+++ b/src/components/DataEntry/DataEntryComponent.tsx
@@ -103,6 +103,7 @@ export default class DataEntryComponent extends React.Component<
   }
 
   componentDidMount(): void {
+    this.props.openTree();
     window.addEventListener("resize", () => this.handleWindowSizeChange());
   }
 
diff --git a/src/goals/MergeDupGoal/MergeDupStep/DragDropComponents/MergeDragDrop.tsx b/src/goals/MergeDupGoal/MergeDupStep/DragDropComponents/MergeDragDrop.tsx
index 37e069fd84..5efa4dc738 100644
--- a/src/goals/MergeDupGoal/MergeDupStep/DragDropComponents/MergeDragDrop.tsx
+++ b/src/goals/MergeDupGoal/MergeDupStep/DragDropComponents/MergeDragDrop.tsx
@@ -5,6 +5,7 @@ import { DragDropContext, Droppable, DropResult } from "react-beautiful-dnd";
 import { useTranslation } from "react-i18next";
 import { v4 } from "uuid";
 
+import { appBarHeight } from "components/AppBar/AppBarComponent";
 import CancelConfirmDialog from "components/Buttons/CancelConfirmDialog";
 import DropWord from "goals/MergeDupGoal/MergeDupStep/DragDropComponents/DropWord";
 import SidebarDrop from "goals/MergeDupGoal/MergeDupStep/DragDropComponents/SidebarDrop";
@@ -108,6 +109,12 @@ export default function MergeDragDrop(): ReactElement {
         anchor="right"
         variant="persistent"
         open={sidebar.senses.length > 1}
+        SlideProps={{
+          style: {
+            height: `calc(100% - ${appBarHeight}px)`,
+            top: appBarHeight,
+          },
+        }}
       >
         <SidebarDrop
           sidebar={sidebar}
diff --git a/src/goals/MergeDupGoal/MergeDupStep/DragDropComponents/SidebarDrop.tsx b/src/goals/MergeDupGoal/MergeDupStep/DragDropComponents/SidebarDrop.tsx
index d84b3d55bb..8902ac8ea8 100644
--- a/src/goals/MergeDupGoal/MergeDupStep/DragDropComponents/SidebarDrop.tsx
+++ b/src/goals/MergeDupGoal/MergeDupStep/DragDropComponents/SidebarDrop.tsx
@@ -28,13 +28,7 @@ export default function SidebarDrop(props: SidebarDropProps): ReactElement {
         <div
           ref={providedDroppable.innerRef}
           {...providedDroppable.droppableProps}
-          /* Add the height of the app bar (64) to the top padding. */
-          style={{
-            backgroundColor: "lightblue",
-            height: "100%",
-            padding: 30,
-            paddingTop: 64 + 30,
-          }}
+          style={{ backgroundColor: "lightblue", height: "100%", padding: 20 }}
         >
           <IconButton
             onClick={() => dispatch(setSidebar())}