diff --git a/.storybook/decorators/OrgContextDecorator.svelte b/.storybook/decorators/OrgContextDecorator.svelte
new file mode 100644
index 000000000..92fe35cdd
--- /dev/null
+++ b/.storybook/decorators/OrgContextDecorator.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { setContext } from "svelte";
+  import { writable, type Writable } from "svelte/store";
+  import type { Org } from "@/api/types";
+  import { organization } from "@/test/fixtures/accounts";
+  const orgStore: Writable<Org> = writable(null);
+  $: orgStore.set(organization as Org);
+  setContext("org", orgStore);
+</script>
+
+<slot />
diff --git a/.storybook/decorators/UserContextDecorator.svelte b/.storybook/decorators/UserContextDecorator.svelte
index 509d82ee6..1baf0b4a4 100644
--- a/.storybook/decorators/UserContextDecorator.svelte
+++ b/.storybook/decorators/UserContextDecorator.svelte
@@ -2,7 +2,7 @@
   import { setContext } from "svelte";
   import { writable, type Writable } from "svelte/store";
   import type { User } from "@/api/types";
-  import { me } from "@/api/fixtures/orgAndUser.fixtures";
+  import { me } from "@/test/fixtures/accounts";
   const userStore: Writable<User> = writable(null);
   $: userStore.set(me as User);
   setContext("me", userStore);
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 1af76b7d0..003515698 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -2,6 +2,7 @@ import type { Preview } from "@storybook/svelte";
 import { initialize, mswLoader } from "msw-storybook-addon";
 import { mockDateDecorator } from "storybook-mock-date-decorator";
 import UserContextDecorator from "./decorators/UserContextDecorator.svelte";
+import OrgContextDecorator from "./decorators/OrgContextDecorator.svelte";
 
 import "@/style/kit.css";
 import "../src/lib/i18n/index.js";
@@ -30,6 +31,10 @@ const preview: Preview = {
 // Provide the MSW addon loader globally
 export const loaders = [mswLoader];
 
-export let decorators = [mockDateDecorator, () => UserContextDecorator];
+export let decorators = [
+  mockDateDecorator,
+  () => UserContextDecorator,
+  () => OrgContextDecorator,
+];
 
 export default preview;
diff --git a/src/common/Dropdown2.svelte b/src/common/Dropdown2.svelte
index c6ae14619..d34e9134a 100644
--- a/src/common/Dropdown2.svelte
+++ b/src/common/Dropdown2.svelte
@@ -133,8 +133,9 @@
   .title {
     display: block;
     cursor: pointer;
-    padding: 0.5rem;
-    border-radius: var(--radius);
+    padding: 0.25rem;
+    color: var(--gray-5);
+    fill: var(--gray-4);
   }
   .title.border {
     border: 1px solid rgba(0, 0, 0, 0.1);
diff --git a/src/common/Menu.svelte b/src/common/Menu.svelte
index 8947bdd3f..62a1e2d76 100644
--- a/src/common/Menu.svelte
+++ b/src/common/Menu.svelte
@@ -2,18 +2,22 @@
   <slot>Define some menu items</slot>
 </div>
 
-<style lang="scss">
+<style>
   .menu {
-    @include menu;
-
-    border: 1px solid #cdcdcd;
-    padding: 7px 0;
-
-    :global(.small) {
-      color: $gray;
-      font-size: 11px;
-      text-transform: uppercase;
-      margin: 3px 0 0 0;
-    }
+    display: flex;
+    flex-direction: column;
+    margin-top: 0.25rem;
+    background: var(--white, #ffffff);
+    border-radius: 0.5rem;
+    border: 1px solid var(--gray-1);
+    box-shadow: var(--shadow);
+    padding: 0.5rem;
+    gap: 0.25rem;
+  }
+  :global(.menu.small) {
+    color: var(--gray-3);
+    font-size: 11px;
+    text-transform: uppercase;
+    margin: 3px 0 0 0;
   }
 </style>
diff --git a/src/common/MenuTitle.svelte b/src/common/MenuTitle.svelte
index 971aad4bf..add474c21 100644
--- a/src/common/MenuTitle.svelte
+++ b/src/common/MenuTitle.svelte
@@ -1,17 +1,20 @@
 <script lang="ts">
+  import { ChevronDown16 } from "svelte-octicons";
+
   export let label: string;
 </script>
 
 <span class="title">
   {#if $$slots.icon}<span class="icon"><slot name="icon" /></span>{/if}
   <span class="label">{label}</span>
-  <span class="dropper">▼</span>
+  <span class="dropper"><ChevronDown16 /></span>
 </span>
 
 <style>
   .title {
     display: flex;
     align-items: center;
+    gap: 0.5rem;
   }
   .label {
     flex: 1 1 auto;
diff --git a/src/config/config.js b/src/config/config.js
index 473668561..9b6e3232c 100644
--- a/src/config/config.js
+++ b/src/config/config.js
@@ -33,9 +33,9 @@ export const BASE_API_URL = DC_BASE + API;
 export const DC_LOGIN = "/accounts/login/squarelet";
 export const DC_LOGOUT = "/accounts/logout/";
 export const SQUARELET_SIGNUP = "/accounts/signup/?intent=documentcloud&next=";
-export const SIGN_IN_URL = DC_BASE + DC_LOGIN;
-export const SIGN_UP_URL = SQUARELET_BASE + SQUARELET_SIGNUP;
-export const SIGN_OUT_URL = DC_BASE + DC_LOGOUT;
+export const SIGN_IN_URL = new URL(DC_LOGIN, DC_BASE).toString();
+export const SIGN_UP_URL = new URL(SQUARELET_SIGNUP, SQUARELET_BASE).toString();
+export const SIGN_OUT_URL = new URL(DC_LOGOUT, DC_BASE).toString();
 
 export const LANGUAGES = [
   ["US English", "en", "🇺🇸"],
diff --git a/src/lib/api/accounts.test.ts b/src/lib/api/accounts.test.ts
new file mode 100644
index 000000000..cee7523ae
--- /dev/null
+++ b/src/lib/api/accounts.test.ts
@@ -0,0 +1,64 @@
+import { vi, test, describe, it, expect, beforeEach, afterEach } from "vitest";
+
+import { BASE_API_URL } from "@/config/config";
+import * as fixtures from "@/test/fixtures/accounts";
+
+import { getMe, getOrg } from "./accounts";
+
+describe("getMe", async () => {
+  let mockFetch;
+  beforeEach(() => {
+    mockFetch = vi.fn().mockImplementation(async () => ({
+      ok: true,
+      json: vi.fn().mockReturnValue(fixtures.me),
+    }));
+  });
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("returns the expected data", async () => {
+    const resp = await getMe(mockFetch);
+    expect(resp).toBe(fixtures.me);
+  });
+
+  it("calls the expected endpoint", async () => {
+    await getMe(mockFetch);
+    const expectedEndpoint = new URL(`users/me/`, BASE_API_URL);
+    expectedEndpoint.searchParams.set("expand", "organization");
+    expect(mockFetch).toHaveBeenCalledWith(expectedEndpoint, {
+      credentials: "include",
+    });
+  });
+
+  it("returns undefined upon server error", async () => {
+    mockFetch = vi.fn().mockImplementation(async () => ({
+      ok: false,
+      json: vi.fn().mockReturnValue(fixtures.me),
+    }));
+    const resp = await getMe(mockFetch);
+    expect(resp).toBeUndefined();
+  });
+
+  it("returns undefined upon fetch error", async () => {
+    mockFetch = vi.fn().mockRejectedValue(new Error("Fetch Error"));
+    const resp = await getMe(mockFetch);
+    expect(resp).toBeUndefined();
+  });
+});
+
+test("getOrg", async () => {
+  const mockFetch = vi.fn().mockImplementation(async () => ({
+    ok: true,
+    json: vi.fn().mockReturnValue(fixtures.organization),
+  }));
+  const resp = await getOrg(mockFetch, 1);
+  expect(resp).toEqual(fixtures.organization);
+  expect(mockFetch).toHaveBeenCalledWith(
+    new URL("organizations/1/", BASE_API_URL),
+    { credentials: "include" },
+  );
+});
+
+test.todo("users.get");
+test.todo("users.list");
diff --git a/src/lib/api/accounts.ts b/src/lib/api/accounts.ts
new file mode 100644
index 000000000..58ac435ee
--- /dev/null
+++ b/src/lib/api/accounts.ts
@@ -0,0 +1,23 @@
+import type { Maybe, User, Org } from "@/api/types";
+import { BASE_API_URL } from "@/config/config.js";
+
+type Fetch = typeof globalThis.fetch;
+
+/** Get the logged-in user */
+export async function getMe(fetch: Fetch): Promise<Maybe<User>> {
+  const endpoint = new URL("users/me/", BASE_API_URL);
+  endpoint.searchParams.set("expand", "organization");
+  try {
+    const resp = await fetch(endpoint, { credentials: "include" });
+    if (!resp.ok) return;
+    return resp.json();
+  } catch (e) {
+    return;
+  }
+}
+
+export async function getOrg(fetch: Fetch, id: number): Promise<Org> {
+  const endpoint = new URL(`organizations/${id}/`, BASE_API_URL);
+  const resp = await fetch(endpoint, { credentials: "include" });
+  return resp.json();
+}
diff --git a/src/lib/api/fixtures/users/me.json b/src/lib/api/fixtures/users/me.json
deleted file mode 100644
index c85458ce6..000000000
--- a/src/lib/api/fixtures/users/me.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
-  "id": 1020,
-  "avatar_url": "https://cdn.muckrock.com/media/avatars/20140211-0O1A7147-2.jpg",
-  "feature_level": 2,
-  "is_staff": true,
-  "name": "Chris Amico",
-  "organization": {
-    "id": 125,
-    "avatar_url": "https://cdn.muckrock.com/media/org_avatars/logo.png",
-    "individual": false,
-    "name": "MuckRock",
-    "slug": "muckrock",
-    "uuid": "97109cc6-e52e-41e7-adb7-834ab7c6819c",
-    "monthly_credits": 7083,
-    "purchased_credits": 0,
-    "credit_reset_date": "2023-12-16",
-    "monthly_credit_allowance": 10000,
-    "plan": "Admin"
-  },
-  "organizations": [19198, 170, 125],
-  "admin_organizations": [19198, 170],
-  "username": "chrisamico",
-  "uuid": "800bbb85-ea7a-46e9-8f56-16f862e66e52",
-  "verified_journalist": true
-}
diff --git a/src/lib/api/users.js b/src/lib/api/users.js
deleted file mode 100644
index 73b526e9c..000000000
--- a/src/lib/api/users.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { BASE_API_URL } from "@/config/config.js";
-
-/**
- * Get the current logged-in user, or null
- *
- * @param {globalThis.fetch} fetch
- * @return {import('@/api/types/orgAndUser.d.ts').User}
- */
-export async function getMe(fetch) {
-  const endpoint = new URL("users/me/", BASE_API_URL);
-  const resp = await fetch(endpoint, { credentials: "include" }).catch((e) => ({
-    ok: false, // catch errors here to prevent 500s
-  }));
-
-  if (!resp.ok) {
-    return null;
-  }
-
-  return resp.json();
-}
diff --git a/src/lib/api/users.tests.js b/src/lib/api/users.tests.js
deleted file mode 100644
index 65e413bff..000000000
--- a/src/lib/api/users.tests.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { test, describe } from "vitest";
-
-import * as users from "./users.js";
-
-describe("users and orgs tests", () => {
-  test.todo("users.get");
-  test.todo("users.list");
-  test.todo("users.getMe");
-});
diff --git a/src/lib/components/ContentLayout.svelte b/src/lib/components/ContentLayout.svelte
index 6f2a4a1bb..3341a8a1b 100644
--- a/src/lib/components/ContentLayout.svelte
+++ b/src/lib/components/ContentLayout.svelte
@@ -23,6 +23,7 @@
     flex: 1 0 0;
     align-self: stretch;
     position: relative;
+    width: 100%;
   }
   header {
     flex: 0 0 0;
diff --git a/src/lib/components/MainLayout.svelte b/src/lib/components/MainLayout.svelte
index 3e8f1324e..1d2716f27 100644
--- a/src/lib/components/MainLayout.svelte
+++ b/src/lib/components/MainLayout.svelte
@@ -1,12 +1,17 @@
 <script lang="ts">
+  import type { Writable } from "svelte/store";
+  import { type Org, type User } from "@/api/types";
+
   import { getContext } from "svelte";
-  import OrgMenu from "./OrgMenu.svelte";
+  import { SidebarCollapse16, SidebarExpand16 } from "svelte-octicons";
+
   import Button from "./common/Button.svelte";
+  import Flex from "./common/Flex.svelte";
   import Logo from "./common/Logo.svelte";
   import SignedIn from "./common/SignedIn.svelte";
-  import { SidebarCollapse16, SidebarExpand16 } from "svelte-octicons";
-  import type { Writable } from "svelte/store";
-  import type { User } from "@/api/types";
+  import UserMenu from "./accounts/UserMenu.svelte";
+  import OrgMenu from "./accounts/OrgMenu.svelte";
+
   import { SIGN_IN_URL } from "@/config/config";
 
   export let modal: boolean = false;
@@ -35,57 +40,70 @@
   }
 
   const me = getContext<Writable<User>>("me");
+  const org = getContext<Writable<Org>>("org");
 </script>
 
 <div class="container">
-  <nav class="small">
-    <Button mode="ghost" on:click={openPanel("navigation")}>
-      <SidebarCollapse16 />
-    </Button>
+  <header>
+    {#if $$slots.navigation}
+      <div class="small openPane">
+        <Button mode="ghost" on:click={openPanel("navigation")}>
+          <SidebarCollapse16 />
+        </Button>
+      </div>
+    {/if}
     <a href="/" class="logo"><Logo /></a>
-    <Button mode="ghost" on:click={openPanel("action")}>
-      <SidebarExpand16 />
-    </Button>
-  </nav>
-  <nav
-    class="navigation left large"
-    class:active={panel === "navigation"}
-    id="navigation"
-  >
-    <header class="header">
-      <div class="small closePane">
-        <Button mode="ghost" on:click={closePanel}>
+    <div class="breadcrumbs"></div>
+    <SignedIn>
+      <Flex>
+        <OrgMenu org={$org} />
+        <UserMenu user={$me} />
+      </Flex>
+      <Button slot="signedOut" mode="primary" href={SIGN_IN_URL}>
+        Sign In
+      </Button>
+    </SignedIn>
+    {#if $$slots.action}
+      <div class="small openPane">
+        <Button mode="ghost" on:click={openPanel("action")}>
           <SidebarExpand16 />
         </Button>
       </div>
-      <a href="/" class="logo"><Logo /></a>
-    </header>
-    <main><slot name="navigation" /></main>
-  </nav>
-  <main class="content">
-    <slot name="content" />
+    {/if}
+  </header>
+
+  <main>
+    {#if $$slots.navigation}
+      <nav
+        class="navigation left"
+        class:active={panel === "navigation"}
+        id="navigation"
+      >
+        <div class="small closePane">
+          <Button mode="ghost" on:click={closePanel}>
+            <SidebarExpand16 />
+          </Button>
+        </div>
+        <slot name="navigation" />
+      </nav>
+    {/if}
+
+    <article class="content">
+      <slot name="content" />
+    </article>
+
+    {#if $$slots.action}
+      <nav class="action right" class:active={panel === "action"} id="action">
+        <div class="small closePane">
+          <Button mode="ghost" on:click={closePanel}>
+            <SidebarCollapse16 />
+          </Button>
+        </div>
+        <slot name="action" />
+      </nav>
+    {/if}
   </main>
-  <nav class="action right large" class:active={panel === "action"} id="action">
-    <header class="header">
-      <SignedIn>
-        <OrgMenu />
-        <Button slot="signedOut" mode="primary" href={SIGN_IN_URL}
-          >Sign In</Button
-        >
-      </SignedIn>
-      <div class="small closePane">
-        <Button mode="ghost" on:click={closePanel}>
-          <SidebarCollapse16 />
-        </Button>
-      </div>
-    </header>
-    <main><slot name="action" /></main>
-    <footer>
-      <SignedIn>{$me.name}</SignedIn>
-      <p>Language</p>
-      <p>Help</p>
-    </footer>
-  </nav>
+
   <div
     class="small overlay"
     class:active={panel !== null}
@@ -98,59 +116,74 @@
 <style>
   .container {
     display: flex;
+    flex-direction: column;
     width: 100vw;
     height: 100vh;
     gap: 0;
     flex-shrink: 0;
     background: var(--gray-1, #f5f6f7);
   }
+
   header {
     display: flex;
-    padding: 1rem;
-    gap: 0.5rem;
-    align-items: flex-start;
-    align-self: stretch;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    background: var(--white, #ffffff);
+    border-bottom: 1px solid var(--gray-2, #d8dee2);
+    box-shadow: var(--shadow);
+    flex: 0 0 auto;
+    padding: 0 1rem;
+    z-index: 1;
   }
+
   main {
-    display: flex;
-    flex-direction: column;
-    padding: 1rem;
-    gap: 2rem;
     flex: 1 0 0;
-    max-height: 100%;
-    overflow-y: auto;
+    display: flex;
+    flex-direction: row;
+    overflow: hidden;
   }
+
   nav {
     flex: 1 0 0;
     min-width: 16rem;
     max-width: 18rem;
+    max-height: 100%;
+    overflow-y: auto;
     display: flex;
     flex-direction: column;
     position: relative;
+    padding: 1rem;
+    gap: 1rem;
+  }
+
+  article {
+    flex: 1 0 0;
+    display: flex;
+    flex-direction: row;
+    max-height: 100%;
+    max-width: 100%;
+    overflow-y: auto;
   }
+
   .logo {
-    height: 2rem;
+    height: 1.5rem;
     width: auto;
+    padding: 0 0.5rem;
   }
+
+  .breadcrumbs {
+    flex: 1 0 0;
+  }
+
   .navigation {
     border-right: 1px solid var(--gray-2, #d8dee2);
   }
+
   .action {
     border-left: 1px solid var(--gray-2, #d8dee2);
   }
-  .action footer {
-    display: flex;
-    width: 100%;
-    position: sticky;
-    bottom: 0;
-    padding: 1rem;
-    z-index: 1;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.875rem;
 
-    background: var(--gray-1, #f5f6f7);
-  }
   .content {
     padding: 0;
   }
@@ -165,35 +198,15 @@
     display: none;
   }
 
-  nav.small {
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0.5rem;
-    flex: 0 0 0;
-    max-width: unset;
-
-    border-bottom: 1px solid var(--gray-2, #d8dee2);
-  }
-
-  nav.small .logo {
-    height: 1.5rem;
-    width: auto;
-  }
-
-  .small.overlay {
-    display: block;
-    visibility: hidden;
-  }
-
   @media (max-width: 64rem) {
-    .container {
-      flex-direction: column;
-    }
     .small {
       display: block;
     }
-    nav.large {
+    header {
+      gap: 0.5rem;
+      overflow-x: auto;
+    }
+    nav {
       min-width: 33vh;
       max-width: 100vh;
       display: flex;
@@ -205,35 +218,25 @@
       transition: transform 0.25s ease-in-out;
       overflow: hidden;
     }
-    nav.large.right {
+    nav.right {
       transform: translateX(100%);
       right: 0;
       border-top-left-radius: 1rem;
       border-bottom-left-radius: 1rem;
     }
-    nav.large.left {
+    nav.left {
       left: 0;
       transform: translateX(-100%);
       border-top-right-radius: 1rem;
       border-bottom-right-radius: 1rem;
     }
-    nav.large.active {
+    nav.active {
       display: flex;
       transform: translateX(0);
       transition: transform 0.25s ease-in-out;
     }
-    nav.large header {
-      align-items: center;
-      flex-direction: row-reverse;
-      padding: 0.5rem;
-    }
-    nav.large .logo {
-      display: none;
-    }
-    nav.small {
-      display: flex;
-    }
     .small.overlay {
+      visibility: hidden;
       position: fixed;
       z-index: 1;
       background: var(--gray-5, #233944);
diff --git a/src/lib/components/OrgMenu.svelte b/src/lib/components/accounts/OrgMenu.svelte
similarity index 58%
rename from src/lib/components/OrgMenu.svelte
rename to src/lib/components/accounts/OrgMenu.svelte
index b538e6f1a..399a91228 100644
--- a/src/lib/components/OrgMenu.svelte
+++ b/src/lib/components/accounts/OrgMenu.svelte
@@ -1,22 +1,17 @@
 <script lang="ts">
-  import Premium from "@/common/icons/Premium.svelte";
-  import { TriangleDown16 } from "svelte-octicons";
+  import type { Org } from "@/api/types";
+  import { ChevronDown16 } from "svelte-octicons";
 
-  const name = "MuckRock";
-  const src =
-    "https://squarelet-staging.s3.amazonaws.com/media/org_avatars/logo_uEHCMva.png";
+  export let org: Org;
 </script>
 
 <div class="container">
   <div class="org">
     <div class="avatar">
-      <img alt="MuckRock's avatar" {src} />
+      <img alt="MuckRock's avatar" src={org.avatar_url} />
     </div>
-    <p class="name">{name}</p>
-    <span class="arrow"><TriangleDown16 /></span>
-  </div>
-  <div class="premium">
-    <Premium size={2} />
+    <p class="name">{org.name}</p>
+    <span class="arrow"><ChevronDown16 /></span>
   </div>
 </div>
 
@@ -34,8 +29,8 @@
     flex: 1 0 0;
   }
   .avatar {
-    width: 2rem;
-    height: 2rem;
+    width: 1.5rem;
+    height: 1.5rem;
 
     overflow: hidden;
     border-radius: 0.75rem;
@@ -49,7 +44,6 @@
   .name {
     color: #233944;
     font-family: var(--font-sans, "Source Sans Pro");
-    font-size: var(--font-xl, 1.5rem);
     font-weight: var(--font-semibold, 600);
     line-height: 1rem;
   }
@@ -58,6 +52,8 @@
     height: 1rem;
     fill: #5c717c;
   }
+
+  /* unused
   .premium {
     display: flex;
     justify-content: center;
@@ -67,20 +63,12 @@
     fill: var(--premium);
     height: 2rem;
     width: 2rem;
-  }
+  } 
+  */
 
-  /* Small styles */
   @media (max-width: 64rem) {
-    .avatar {
-      height: 1.5rem;
-      width: 1.5rem;
-    }
     .name {
-      font-size: var(--font-l, 1.25rem);
-    }
-    .premium {
-      height: 1.5rem;
-      width: 1.5rem;
+      display: none;
     }
   }
 </style>
diff --git a/src/lib/components/accounts/UserMenu.svelte b/src/lib/components/accounts/UserMenu.svelte
new file mode 100644
index 000000000..0b78089cb
--- /dev/null
+++ b/src/lib/components/accounts/UserMenu.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+  import type { User } from "@/api/types";
+
+  import { _ } from "svelte-i18n";
+  import { page } from "$app/stores";
+
+  import Dropdown, { closeDropdown } from "@/common/Dropdown2.svelte";
+  import SidebarItem from "../sidebar/SidebarItem.svelte";
+  import {
+    ChevronDown16,
+    Gear16,
+    Paperclip16,
+    SignOut16,
+  } from "svelte-octicons";
+  import Menu from "@/common/Menu.svelte";
+
+  import { SQUARELET_BASE, SIGN_OUT_URL } from "@/config/config.js";
+
+  export let user: User;
+
+  const dropdownId = "user-menu";
+  function close() {
+    closeDropdown(dropdownId);
+  }
+</script>
+
+<Dropdown id={dropdownId} position="right">
+  <SidebarItem slot="title">
+    <img src={user.avatar_url} alt="Avatar" class="avatar" />
+    <span class="name">{user.name}</span>
+    <div class="dropdownArrow"><ChevronDown16 /></div>
+  </SidebarItem>
+  <Menu>
+    <SidebarItem href={SQUARELET_BASE} target="_blank" on:click={close}>
+      <Gear16 />
+      {$_("authSection.user.acctSettings")}
+    </SidebarItem>
+    <!-- TODO mailkey page -->
+    <SidebarItem hover on:click={close}>
+      <Paperclip16 />
+      {$_("authSection.user.uploadEmail")}
+    </SidebarItem>
+    <SidebarItem href={SIGN_OUT_URL} on:click={close}>
+      <SignOut16 />
+      {$_("authSection.user.signOut")}
+    </SidebarItem>
+  </Menu>
+</Dropdown>
+
+<style>
+  .avatar {
+    height: 1.5rem;
+    width: 1.5rem;
+    border-radius: 0.75rem;
+  }
+
+  .dropdownArrow {
+    display: flex;
+    align-items: center;
+  }
+
+  @media (max-width: 64rem) {
+    .name {
+      display: none;
+    }
+  }
+</style>
diff --git a/src/lib/components/stories/OrgMenu.stories.svelte b/src/lib/components/accounts/stories/OrgMenu.stories.svelte
similarity index 77%
rename from src/lib/components/stories/OrgMenu.stories.svelte
rename to src/lib/components/accounts/stories/OrgMenu.stories.svelte
index 28aecbb30..2443f68c5 100644
--- a/src/lib/components/stories/OrgMenu.stories.svelte
+++ b/src/lib/components/accounts/stories/OrgMenu.stories.svelte
@@ -2,6 +2,8 @@
   import { Story } from "@storybook/addon-svelte-csf";
   import OrgMenu from "../OrgMenu.svelte";
 
+  import { organization } from "@/test/fixtures/accounts";
+
   export const meta = {
     title: "Components / Org Menu",
     component: OrgMenu,
@@ -10,5 +12,5 @@
 </script>
 
 <Story name="Org Menu" id="orgMenu">
-  <OrgMenu />
+  <OrgMenu org={organization} />
 </Story>
diff --git a/src/lib/components/documents/DocumentListItem.svelte b/src/lib/components/documents/DocumentListItem.svelte
index 9e0cbb237..e9a475867 100644
--- a/src/lib/components/documents/DocumentListItem.svelte
+++ b/src/lib/components/documents/DocumentListItem.svelte
@@ -130,6 +130,7 @@ It's deliberately minimal and can be wrapped in other components to add addition
     text-overflow: ellipsis;
     white-space: nowrap;
     max-width: 100ch;
+    width: 100%;
   }
 
   .actions {
diff --git a/src/lib/components/sidebar/SidebarItem.svelte b/src/lib/components/sidebar/SidebarItem.svelte
index a827d775b..4ca2eeb1d 100644
--- a/src/lib/components/sidebar/SidebarItem.svelte
+++ b/src/lib/components/sidebar/SidebarItem.svelte
@@ -39,14 +39,16 @@
     border-radius: 0.25rem;
     border: none;
 
-    color: var(--gray-5, #233944);
-    fill: var(--gray-5, #233944);
+    color: inherit;
+    fill: inherit;
     background: transparent;
 
     font-family: var(--font-sans, "Source Sans Pro");
     font-size: var(--font-m, 1rem);
     font-weight: var(--font-semibold, 600);
     text-decoration: none;
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
 
   /* Hover */
diff --git a/src/lib/components/stories/MainLayout.stories.svelte b/src/lib/components/stories/MainLayout.stories.svelte
index 21a3e8cac..54523f9f9 100644
--- a/src/lib/components/stories/MainLayout.stories.svelte
+++ b/src/lib/components/stories/MainLayout.stories.svelte
@@ -29,7 +29,7 @@
   import PageToolbar from "../common/PageToolbar.svelte";
   import Search from "../Search.svelte";
 
-  import { addons } from "@/addons/browser/stories/mockData";
+  import { addons } from "@/test/handlers/addons";
 
   let results = documents as DocumentResults;
 
@@ -41,6 +41,13 @@
       msw: {
         handlers: [addons.data],
       },
+      sveltekit_experimental: {
+        stores: {
+          page: {
+            url: "/",
+          },
+        },
+      },
     },
   };
 
@@ -92,7 +99,7 @@
       <PageToolbar slot="header">
         <Search slot="center" />
       </PageToolbar>
-      <ResultsList {results} />
+      <ResultsList results={results.results} />
       <PageToolbar slot="footer" />
     </ContentLayout>
     <svelte:fragment slot="action">
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index f7821ac7d..02758e22c 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,19 +1,22 @@
 <script lang="ts">
   import type { LayoutData } from "./$types";
-  import type { User } from "@/api/types/orgAndUser.d.ts";
+  import type { Org, User } from "@/api/types/orgAndUser.d.ts";
 
   import { setContext } from "svelte";
   import { writable, type Writable } from "svelte/store";
 
   export let data: LayoutData;
 
-  const me: Writable<User> = writable(null);
+  const me: Writable<User> = writable();
+  const org: Writable<Org> = writable();
 
-  // set the $me store whenever we load user data
+  // set the $me and $org store whenever we load user data
   $: me.set(data.me);
+  $: org.set(data.org);
 
   // update context so other components can access and update
   setContext("me", me);
+  setContext("org", org);
 </script>
 
 <slot />
diff --git a/src/routes/+layout.js b/src/routes/+layout.ts
similarity index 69%
rename from src/routes/+layout.js
rename to src/routes/+layout.ts
index 1c9dd4185..90708bf8a 100644
--- a/src/routes/+layout.js
+++ b/src/routes/+layout.ts
@@ -1,12 +1,11 @@
 import { locale, waitLocale } from "svelte-i18n";
 import { browser } from "$app/environment";
-import { getMe } from "$lib/api/users.js";
+import { getMe, getOrg } from "$lib/api/accounts";
 
 import "$lib/i18n/index.js"; // Import to initialize. Important :)
 
 export const trailingSlash = "always";
 
-/** @type {import('./$types').LayoutLoad} */
 export async function load({ fetch, url }) {
   if (browser) {
     locale.set(window.navigator.language);
@@ -18,6 +17,12 @@ export async function load({ fetch, url }) {
 
   // todo: ensure this doesn't load for embeds
   const me = await getMe(fetch);
+  let org;
+  if (typeof me.organization === "number") {
+    org = await getOrg(fetch, me.organization);
+  } else {
+    org = me.organization;
+  }
 
-  return { me, embed };
+  return { me, org, embed };
 }