diff --git a/web-admin/src/components/nav/LeftNav.svelte b/web-admin/src/components/nav/LeftNav.svelte
new file mode 100644
index 00000000000..459a7906c85
--- /dev/null
+++ b/web-admin/src/components/nav/LeftNav.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { page } from "$app/stores";
+  import LeftNavItem from "@rilldata/web-admin/components/nav/LeftNavItem.svelte";
+
+  export let basePage: string;
+  export let baseRoute: string;
+  export let navItems: {
+    label: string;
+    route: string;
+  }[];
+</script>
+
+<div class="nav-items">
+  {#each navItems as { label, route } (route)}
+    <LeftNavItem
+      {label}
+      link={`${basePage}${route}`}
+      selected={$page.route.id === `${baseRoute}${route}`}
+    />
+  {/each}
+</div>
+
+<style lang="postcss">
+  .nav-items {
+    @apply flex flex-col gap-y-1;
+    @apply min-w-[150px];
+  }
+</style>
diff --git a/web-admin/src/components/nav/LeftNavItem.svelte b/web-admin/src/components/nav/LeftNavItem.svelte
new file mode 100644
index 00000000000..3687a9a2c8a
--- /dev/null
+++ b/web-admin/src/components/nav/LeftNavItem.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  export let label: string;
+  export let selected: boolean;
+  export let link: string;
+</script>
+
+<a class:selected href={link}>
+  {label}
+</a>
+
+<style lang="postcss">
+  a {
+    @apply p-2 flex gap-x-1 items-center;
+    @apply rounded-sm text-slate-900;
+    @apply text-sm font-medium;
+  }
+
+  .selected {
+    @apply bg-slate-100;
+  }
+
+  a:hover {
+    @apply bg-slate-50;
+  }
+</style>
diff --git a/web-admin/src/features/embeds/CustomDashboardEmbed.svelte b/web-admin/src/features/embeds/CustomDashboardEmbed.svelte
index 96222ae1d59..b9f3699f856 100644
--- a/web-admin/src/features/embeds/CustomDashboardEmbed.svelte
+++ b/web-admin/src/features/embeds/CustomDashboardEmbed.svelte
@@ -23,4 +23,4 @@
   } = dashboard || { items: [], columns: 10, gap: 2 });
 </script>
 
-<CustomDashboardEmbed {columns} {items} {gap} />
+<CustomDashboardEmbed {dashboardName} {columns} {items} {gap} />
diff --git a/web-admin/src/features/navigation/TopNavigationBar.svelte b/web-admin/src/features/navigation/TopNavigationBar.svelte
index c45f0ea53be..463c373a7c4 100644
--- a/web-admin/src/features/navigation/TopNavigationBar.svelte
+++ b/web-admin/src/features/navigation/TopNavigationBar.svelte
@@ -29,6 +29,7 @@
   import {
     isMetricsExplorerPage,
     isProjectPage,
+    withinOrganization,
     isPublicURLPage,
   } from "./nav-utils";
 
@@ -54,6 +55,7 @@
   $: onReportPage = !!report;
   $: onMetricsExplorerPage = isMetricsExplorerPage($page);
   $: onPublicURLPage = isPublicURLPage($page);
+  $: withinOrgPage = withinOrganization($page);
 
   $: loggedIn = !!$user.data?.user;
   $: rillLogoHref = !loggedIn ? "https://www.rilldata.com" : "/";
@@ -155,7 +157,7 @@
 
 <div
   class="flex items-center w-full pr-4 pl-2 py-1"
-  class:border-b={!onProjectPage}
+  class:border-b={!onProjectPage && !withinOrgPage}
 >
   <!-- Left side -->
   <a
diff --git a/web-admin/src/features/navigation/nav-utils.ts b/web-admin/src/features/navigation/nav-utils.ts
index 38ad78ff1c5..3f6803baf1e 100644
--- a/web-admin/src/features/navigation/nav-utils.ts
+++ b/web-admin/src/features/navigation/nav-utils.ts
@@ -5,6 +5,10 @@ export function isOrganizationPage(page: Page): boolean {
   return page.route.id === "/[organization]";
 }
 
+export function withinOrganization(page: Page): boolean {
+  return !!page.route?.id?.startsWith("/[organization]");
+}
+
 export function isProjectPage(page: Page): boolean {
   return (
     page.route.id === "/[organization]/[project]" ||
diff --git a/web-admin/src/features/organizations/OrganizationTabs.svelte b/web-admin/src/features/organizations/OrganizationTabs.svelte
new file mode 100644
index 00000000000..68b77b48cae
--- /dev/null
+++ b/web-admin/src/features/organizations/OrganizationTabs.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+  import { page } from "$app/stores";
+  import { createAdminServiceGetOrganization } from "@rilldata/web-admin/client";
+
+  $: ({
+    url: { pathname },
+    params: { organization },
+  } = $page);
+
+  // Get the list of tabs to display, depending on the user's permissions
+  $: tabsQuery = createAdminServiceGetOrganization(organization, {
+    query: {
+      select: (data) => {
+        let tabs = [
+          {
+            route: `/${organization}`,
+            label: "Projects",
+          },
+        ];
+
+        if (data.permissions.manageOrgMembers) {
+          // TODO: users page
+        }
+
+        if (data.permissions.manageOrg) {
+          // TODO: once settings page is filled in we add these
+          // tabs.push({
+          //   route: `/${organization}/-/settings`,
+          //   label: "Settings",
+          // });
+        }
+
+        return tabs;
+      },
+    },
+  });
+
+  $: tabs = $tabsQuery.data;
+  // 1st entry is always the default page. so findLastIndex will make sure the correct page is matched.
+  $: selectedIndex = tabs?.findLastIndex((t) => pathname.startsWith(t.route));
+</script>
+
+<!-- Hide the tabs when there is only one entry -->
+{#if tabs?.length && tabs?.length > 1}
+  <nav>
+    {#each tabs as tab, i (tab.route)}
+      <a href={tab.route} class:selected={selectedIndex === i}>
+        {tab.label}
+      </a>
+    {/each}
+  </nav>
+{:else}
+  <!-- Add a border to keep things consistent. It is cleaner to handle this here. -->
+  <div class="border-b"></div>
+{/if}
+
+<style lang="postcss">
+  a {
+    @apply p-2 flex gap-x-1 items-center;
+    @apply rounded-sm text-gray-500;
+    @apply text-xs font-medium justify-center;
+  }
+
+  .selected {
+    @apply text-gray-900;
+  }
+
+  a:hover {
+    @apply bg-slate-100 text-gray-700;
+  }
+
+  nav {
+    @apply flex gap-x-6 px-[17px] border-b pt-1 pb-[3px];
+  }
+</style>
diff --git a/web-admin/src/routes/+layout.svelte b/web-admin/src/routes/+layout.svelte
index d7e4cd8af25..f4d63d648d6 100644
--- a/web-admin/src/routes/+layout.svelte
+++ b/web-admin/src/routes/+layout.svelte
@@ -1,6 +1,11 @@
 <script lang="ts">
   import { page } from "$app/stores";
-  import { isProjectInvitePage } from "@rilldata/web-admin/features/navigation/nav-utils";
+  import {
+    isProjectInvitePage,
+    withinOrganization,
+    withinProject,
+  } from "@rilldata/web-admin/features/navigation/nav-utils";
+  import OrganizationTabs from "@rilldata/web-admin/features/organizations/OrganizationTabs.svelte";
   import { initCloudMetrics } from "@rilldata/web-admin/features/telemetry/initCloudMetrics";
   import BannerCenter from "@rilldata/web-common/components/banner/BannerCenter.svelte";
   import NotificationCenter from "@rilldata/web-common/components/notifications/NotificationCenter.svelte";
@@ -45,6 +50,8 @@
   $: isEmbed = $page.url.pathname === "/-/embed";
   // invite page shouldn't show the top bar because it is considered an onboard step
   $: hideTopBar = isProjectInvitePage($page);
+
+  $: withinOnlyOrg = withinOrganization($page) && !withinProject($page);
 </script>
 
 <svelte:head>
@@ -60,6 +67,10 @@
           createMagicAuthTokens={projectPermissions?.createMagicAuthTokens}
           manageProjectMembers={projectPermissions?.manageProjectMembers}
         />
+
+        {#if withinOnlyOrg}
+          <OrganizationTabs />
+        {/if}
       {/if}
       <ErrorBoundary>
         <slot />
diff --git a/web-admin/src/routes/[organization]/-/settings/+layout.svelte b/web-admin/src/routes/[organization]/-/settings/+layout.svelte
new file mode 100644
index 00000000000..bfcf3494552
--- /dev/null
+++ b/web-admin/src/routes/[organization]/-/settings/+layout.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { page } from "$app/stores";
+  import LeftNav from "@rilldata/web-admin/components/nav/LeftNav.svelte";
+
+  $: organization = $page.params.organization;
+  $: basePage = `/${organization}/-/settings`;
+
+  const navItems = [
+    {
+      label: "General",
+      route: "",
+    },
+    {
+      label: "Billing",
+      route: "/billing",
+    },
+    {
+      label: "Usage",
+      route: "/usage",
+    },
+  ];
+</script>
+
+<div class="layout-container">
+  <h3>Settings</h3>
+  <div class="container">
+    <LeftNav {basePage} baseRoute="/[organization]/-/settings" {navItems} />
+    <slot />
+  </div>
+</div>
+
+<style lang="postcss">
+  .layout-container {
+    @apply px-32 py-10;
+  }
+
+  h3 {
+    @apply text-2xl font-semibold;
+  }
+
+  .container {
+    @apply flex flex-row pt-6 gap-x-6;
+  }
+</style>
diff --git a/web-admin/src/routes/[organization]/-/settings/+page.svelte b/web-admin/src/routes/[organization]/-/settings/+page.svelte
new file mode 100644
index 00000000000..3c0b0b060f8
--- /dev/null
+++ b/web-admin/src/routes/[organization]/-/settings/+page.svelte
@@ -0,0 +1 @@
+Coming soon
diff --git a/web-admin/src/routes/[organization]/-/settings/billing/+page.svelte b/web-admin/src/routes/[organization]/-/settings/billing/+page.svelte
new file mode 100644
index 00000000000..3c0b0b060f8
--- /dev/null
+++ b/web-admin/src/routes/[organization]/-/settings/billing/+page.svelte
@@ -0,0 +1 @@
+Coming soon
diff --git a/web-admin/src/routes/[organization]/-/settings/usage/+page.svelte b/web-admin/src/routes/[organization]/-/settings/usage/+page.svelte
new file mode 100644
index 00000000000..3c0b0b060f8
--- /dev/null
+++ b/web-admin/src/routes/[organization]/-/settings/usage/+page.svelte
@@ -0,0 +1 @@
+Coming soon
diff --git a/web-admin/src/routes/[organization]/[project]/-/dashboards/[dashboard]/+page.svelte b/web-admin/src/routes/[organization]/[project]/-/dashboards/[dashboard]/+page.svelte
index 901c1c56b63..0b207f9c224 100644
--- a/web-admin/src/routes/[organization]/[project]/-/dashboards/[dashboard]/+page.svelte
+++ b/web-admin/src/routes/[organization]/[project]/-/dashboards/[dashboard]/+page.svelte
@@ -25,4 +25,4 @@
   } = dashboard || { items: [], columns: 10, gap: 2 });
 </script>
 
-<CustomDashboardEmbed {columns} {items} {gap} />
+<CustomDashboardEmbed {dashboardName} {columns} {items} {gap} />