diff --git a/site/e2e/expectUrl.ts b/site/e2e/expectUrl.ts
index eb3777f577907..0ed0d99649cdd 100644
--- a/site/e2e/expectUrl.ts
+++ b/site/e2e/expectUrl.ts
@@ -23,7 +23,12 @@ export const expectUrl = expect.extend({
       pass,
       actual,
       expected,
-      message: () => "The page does not have the expected URL pathname.",
+      message: () =>
+        "The page does not have the expected URL pathname.\n" +
+        `Expected: ${this.isNot ? "not" : ""}${this.utils.printExpected(
+          expected,
+        )}\n` +
+        `Actual: ${this.utils.printReceived(actual)}`,
     };
   },
 });
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
index a98ce16afc61b..7aeefe98a444c 100644
--- a/site/src/api/api.ts
+++ b/site/src/api/api.ts
@@ -516,73 +516,97 @@ class ApiMethods {
     return response.data;
   };
 
+  /**
+   * @param organization Can be the organization's ID or name
+   */
   updateOrganization = async (
-    organizationId: string,
+    organization: string,
     params: TypesGen.UpdateOrganizationRequest,
   ) => {
     const response = await this.axios.patch<TypesGen.Organization>(
-      `/api/v2/organizations/${organizationId}`,
+      `/api/v2/organizations/${organization}`,
       params,
     );
     return response.data;
   };
 
-  deleteOrganization = async (organizationId: string) => {
+  /**
+   * @param organization Can be the organization's ID or name
+   */
+  deleteOrganization = async (organization: string) => {
     await this.axios.delete<TypesGen.Organization>(
-      `/api/v2/organizations/${organizationId}`,
+      `/api/v2/organizations/${organization}`,
     );
   };
 
+  /**
+   * @param organization Can be the organization's ID or name
+   */
   getOrganization = async (
-    organizationId: string,
+    organization: string,
   ): Promise<TypesGen.Organization> => {
     const response = await this.axios.get<TypesGen.Organization>(
-      `/api/v2/organizations/${organizationId}`,
+      `/api/v2/organizations/${organization}`,
     );
 
     return response.data;
   };
 
-  getOrganizationMembers = async (organizationId: string) => {
+  /**
+   * @param organization Can be the organization's ID or name
+   */
+  getOrganizationMembers = async (organization: string) => {
     const response = await this.axios.get<
       TypesGen.OrganizationMemberWithUserData[]
-    >(`/api/v2/organizations/${organizationId}/members`);
+    >(`/api/v2/organizations/${organization}/members`);
 
     return response.data;
   };
 
-  getOrganizationRoles = async (organizationId: string) => {
+  /**
+   * @param organization Can be the organization's ID or name
+   */
+  getOrganizationRoles = async (organization: string) => {
     const response = await this.axios.get<TypesGen.AssignableRoles[]>(
-      `/api/v2/organizations/${organizationId}/members/roles`,
+      `/api/v2/organizations/${organization}/members/roles`,
     );
 
     return response.data;
   };
 
+  /**
+   * @param organization Can be the organization's ID or name
+   */
   updateOrganizationMemberRoles = async (
-    organizationId: string,
+    organization: string,
     userId: string,
     roles: TypesGen.SlimRole["name"][],
   ): Promise<TypesGen.User> => {
     const response = await this.axios.put<TypesGen.User>(
-      `/api/v2/organizations/${organizationId}/members/${userId}/roles`,
+      `/api/v2/organizations/${organization}/members/${userId}/roles`,
       { roles },
     );
 
     return response.data;
   };
 
-  addOrganizationMember = async (organizationId: string, userId: string) => {
+  /**
+   * @param organization Can be the organization's ID or name
+   */
+  addOrganizationMember = async (organization: string, userId: string) => {
     const response = await this.axios.post<TypesGen.OrganizationMember>(
-      `/api/v2/organizations/${organizationId}/members/${userId}`,
+      `/api/v2/organizations/${organization}/members/${userId}`,
     );
 
     return response.data;
   };
 
-  removeOrganizationMember = async (organizationId: string, userId: string) => {
+  /**
+   * @param organization Can be the organization's ID or name
+   */
+  removeOrganizationMember = async (organization: string, userId: string) => {
     await this.axios.delete(
-      `/api/v2/organizations/${organizationId}/members/${userId}`,
+      `/api/v2/organizations/${organization}/members/${userId}`,
     );
   };
 
@@ -601,8 +625,11 @@ class ApiMethods {
     return response.data;
   };
 
+  /**
+   * @param organization Can be the organization's ID or name
+   */
   getTemplates = async (
-    organizationId: string,
+    organization: string,
     options?: TemplateOptions,
   ): Promise<TypesGen.Template[]> => {
     const params: Record<string, string> = {};
@@ -614,19 +641,22 @@ class ApiMethods {
     }
 
     const response = await this.axios.get<TypesGen.Template[]>(
-      `/api/v2/organizations/${organizationId}/templates`,
+      `/api/v2/organizations/${organization}/templates`,
       { params },
     );
 
     return response.data;
   };
 
+  /**
+   * @param organization Can be the organization's ID or name
+   */
   getTemplateByName = async (
-    organizationId: string,
+    organization: string,
     name: string,
   ): Promise<TypesGen.Template> => {
     const response = await this.axios.get<TypesGen.Template>(
-      `/api/v2/organizations/${organizationId}/templates/${name}`,
+      `/api/v2/organizations/${organization}/templates/${name}`,
     );
 
     return response.data;
@@ -675,26 +705,32 @@ class ApiMethods {
     return response.data;
   };
 
+  /**
+   * @param organization Can be the organization's ID or name
+   */
   getTemplateVersionByName = async (
-    organizationId: string,
+    organization: string,
     templateName: string,
     versionName: string,
   ): Promise<TypesGen.TemplateVersion> => {
     const response = await this.axios.get<TypesGen.TemplateVersion>(
-      `/api/v2/organizations/${organizationId}/templates/${templateName}/versions/${versionName}`,
+      `/api/v2/organizations/${organization}/templates/${templateName}/versions/${versionName}`,
     );
 
     return response.data;
   };
 
+  /**
+   * @param organization Can be the organization's ID or name
+   */
   getPreviousTemplateVersionByName = async (
-    organizationId: string,
+    organization: string,
     templateName: string,
     versionName: string,
   ) => {
     try {
       const response = await this.axios.get<TypesGen.TemplateVersion>(
-        `/api/v2/organizations/${organizationId}/templates/${templateName}/versions/${versionName}/previous`,
+        `/api/v2/organizations/${organization}/templates/${templateName}/versions/${versionName}/previous`,
       );
 
       return response.data;
@@ -713,12 +749,15 @@ class ApiMethods {
     }
   };
 
+  /**
+   * @param organization Can be the organization's ID or name
+   */
   createTemplateVersion = async (
-    organizationId: string,
+    organization: string,
     data: TypesGen.CreateTemplateVersionRequest,
   ): Promise<TypesGen.TemplateVersion> => {
     const response = await this.axios.post<TypesGen.TemplateVersion>(
-      `/api/v2/organizations/${organizationId}/templateversions`,
+      `/api/v2/organizations/${organization}/templateversions`,
       data,
     );
 
@@ -744,12 +783,15 @@ class ApiMethods {
     return response.data;
   };
 
+  /**
+   * @param organization Can be the organization's ID or name
+   */
   createTemplate = async (
-    organizationId: string,
+    organization: string,
     data: TypesGen.CreateTemplateRequest,
   ): Promise<TypesGen.Template> => {
     const response = await this.axios.post(
-      `/api/v2/organizations/${organizationId}/templates`,
+      `/api/v2/organizations/${organization}/templates`,
       data,
     );
 
@@ -1480,31 +1522,40 @@ class ApiMethods {
     return response.data;
   };
 
-  getGroups = async (organizationId: string): Promise<TypesGen.Group[]> => {
+  /**
+   * @param organization Can be the organization's ID or name
+   */
+  getGroups = async (organization: string): Promise<TypesGen.Group[]> => {
     const response = await this.axios.get(
-      `/api/v2/organizations/${organizationId}/groups`,
+      `/api/v2/organizations/${organization}/groups`,
     );
 
     return response.data;
   };
 
+  /**
+   * @param organization Can be the organization's ID or name
+   */
   createGroup = async (
-    organizationId: string,
+    organization: string,
     data: TypesGen.CreateGroupRequest,
   ): Promise<TypesGen.Group> => {
     const response = await this.axios.post(
-      `/api/v2/organizations/${organizationId}/groups`,
+      `/api/v2/organizations/${organization}/groups`,
       data,
     );
     return response.data;
   };
 
+  /**
+   * @param organization Can be the organization's ID or name
+   */
   getGroup = async (
-    organizationId: string,
+    organization: string,
     groupName: string,
   ): Promise<TypesGen.Group> => {
     const response = await this.axios.get(
-      `/api/v2/organizations/${organizationId}/groups/${groupName}`,
+      `/api/v2/organizations/${organization}/groups/${groupName}`,
     );
     return response.data;
   };
@@ -1673,11 +1724,14 @@ class ApiMethods {
     return response.data;
   };
 
+  /**
+   * @param organization Can be the organization's ID or name
+   */
   getTemplateExamples = async (
-    organizationId: string,
+    organization: string,
   ): Promise<TypesGen.TemplateExample[]> => {
     const response = await this.axios.get(
-      `/api/v2/organizations/${organizationId}/templates/examples`,
+      `/api/v2/organizations/${organization}/templates/examples`,
     );
 
     return response.data;
diff --git a/site/src/api/queries/groups.ts b/site/src/api/queries/groups.ts
index 7658abd8e5304..ed670c5d17a9d 100644
--- a/site/src/api/queries/groups.ts
+++ b/site/src/api/queries/groups.ts
@@ -8,38 +8,38 @@ import type {
 
 type GroupSortOrder = "asc" | "desc";
 
-const getGroupsQueryKey = (organizationId: string) => [
+const getGroupsQueryKey = (organization: string) => [
   "organization",
-  organizationId,
+  organization,
   "groups",
 ];
 
-export const groups = (organizationId: string) => {
+export const groups = (organization: string) => {
   return {
-    queryKey: getGroupsQueryKey(organizationId),
-    queryFn: () => API.getGroups(organizationId),
+    queryKey: getGroupsQueryKey(organization),
+    queryFn: () => API.getGroups(organization),
   } satisfies UseQueryOptions<Group[]>;
 };
 
-const getGroupQueryKey = (organizationId: string, groupName: string) => [
+const getGroupQueryKey = (organization: string, groupName: string) => [
   "organization",
-  organizationId,
+  organization,
   "group",
   groupName,
 ];
 
-export const group = (organizationId: string, groupName: string) => {
+export const group = (organization: string, groupName: string) => {
   return {
-    queryKey: getGroupQueryKey(organizationId, groupName),
-    queryFn: () => API.getGroup(organizationId, groupName),
+    queryKey: getGroupQueryKey(organization, groupName),
+    queryFn: () => API.getGroup(organization, groupName),
   };
 };
 
 export type GroupsByUserId = Readonly<Map<string, readonly Group[]>>;
 
-export function groupsByUserId(organizationId: string) {
+export function groupsByUserId(organization: string) {
   return {
-    ...groups(organizationId),
+    ...groups(organization),
     select: (allGroups) => {
       // Sorting here means that nothing has to be sorted for the individual
       // user arrays later
@@ -63,9 +63,9 @@ export function groupsByUserId(organizationId: string) {
   } satisfies UseQueryOptions<Group[], unknown, GroupsByUserId>;
 }
 
-export function groupsForUser(organizationId: string, userId: string) {
+export function groupsForUser(organization: string, userId: string) {
   return {
-    ...groups(organizationId),
+    ...groups(organization),
     select: (allGroups) => {
       const groupsForUser = allGroups.filter((group) => {
         const groupMemberIds = group.members.map((member) => member.id);
@@ -95,15 +95,12 @@ export const groupPermissions = (groupId: string) => {
   };
 };
 
-export const createGroup = (
-  queryClient: QueryClient,
-  organizationId: string,
-) => {
+export const createGroup = (queryClient: QueryClient, organization: string) => {
   return {
     mutationFn: (request: CreateGroupRequest) =>
-      API.createGroup(organizationId, request),
+      API.createGroup(organization, request),
     onSuccess: async () => {
-      await queryClient.invalidateQueries(getGroupsQueryKey(organizationId));
+      await queryClient.invalidateQueries(getGroupsQueryKey(organization));
     },
   };
 };
@@ -148,12 +145,12 @@ export const removeMember = (queryClient: QueryClient) => {
 
 export const invalidateGroup = (
   queryClient: QueryClient,
-  organizationId: string,
+  organization: string,
   groupId: string,
 ) =>
   Promise.all([
-    queryClient.invalidateQueries(getGroupsQueryKey(organizationId)),
-    queryClient.invalidateQueries(getGroupQueryKey(organizationId, groupId)),
+    queryClient.invalidateQueries(getGroupsQueryKey(organization)),
+    queryClient.invalidateQueries(getGroupQueryKey(organization, groupId)),
   ]);
 
 export function sortGroupsByName(
diff --git a/site/src/api/queries/templates.ts b/site/src/api/queries/templates.ts
index 605ef54e0b35b..46d3d03507e08 100644
--- a/site/src/api/queries/templates.ts
+++ b/site/src/api/queries/templates.ts
@@ -13,11 +13,19 @@ import type {
 import { delay } from "utils/delay";
 import { getTemplateVersionFiles } from "utils/templateVersion";
 
+export const templateKey = (templateId: string) => ["template", templateId];
+
+export const template = (templateId: string): QueryOptions<Template> => {
+  return {
+    queryKey: templateKey(templateId),
+    queryFn: async () => API.getTemplate(templateId),
+  };
+};
+
 export const templateByNameKey = (organization: string, name: string) => [
   organization,
   "template",
   name,
-  "settings",
 ];
 
 export const templateByName = (
@@ -148,13 +156,10 @@ export const createTemplateVersion = (organizationId: string) => {
   };
 };
 
-export const createAndBuildTemplateVersion = (organizationId: string) => {
+export const createAndBuildTemplateVersion = (organization: string) => {
   return {
     mutationFn: async (request: CreateTemplateVersionRequest) => {
-      const newVersion = await API.createTemplateVersion(
-        organizationId,
-        request,
-      );
+      const newVersion = await API.createTemplateVersion(organization, request);
       await waitBuildToBeFinished(newVersion);
       return newVersion;
     },
@@ -209,7 +214,7 @@ export const createTemplate = () => {
 };
 
 export type CreateTemplateOptions = {
-  organizationId: string;
+  organization: string;
   version: CreateTemplateVersionRequest;
   template: Omit<CreateTemplateRequest, "template_version_id">;
   onCreateVersion?: (version: TemplateVersion) => void;
@@ -218,12 +223,12 @@ export type CreateTemplateOptions = {
 
 const createTemplateFn = async (options: CreateTemplateOptions) => {
   const version = await API.createTemplateVersion(
-    options.organizationId,
+    options.organization,
     options.version,
   );
   options.onCreateVersion?.(version);
   await waitBuildToBeFinished(version, options.onTemplateVersionChanges);
-  return API.createTemplate(options.organizationId, {
+  return API.createTemplate(options.organization, {
     ...options.template,
     template_version_id: version.id,
   });
diff --git a/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx b/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx
new file mode 100644
index 0000000000000..2bbf73502a6c6
--- /dev/null
+++ b/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx
@@ -0,0 +1,133 @@
+import { css } from "@emotion/css";
+import Autocomplete from "@mui/material/Autocomplete";
+import CircularProgress from "@mui/material/CircularProgress";
+import TextField from "@mui/material/TextField";
+import {
+  type ChangeEvent,
+  type ComponentProps,
+  type FC,
+  useState,
+} from "react";
+import { useQuery } from "react-query";
+import { organizations } from "api/queries/organizations";
+import type { Organization } from "api/typesGenerated";
+import { Avatar } from "components/Avatar/Avatar";
+import { AvatarData } from "components/AvatarData/AvatarData";
+import { useDebouncedFunction } from "hooks/debounce";
+
+export type OrganizationAutocompleteProps = {
+  value: Organization | null;
+  onChange: (organization: Organization | null) => void;
+  label?: string;
+  className?: string;
+  size?: ComponentProps<typeof TextField>["size"];
+  required?: boolean;
+};
+
+export const OrganizationAutocomplete: FC<OrganizationAutocompleteProps> = ({
+  value,
+  onChange,
+  label,
+  className,
+  size = "small",
+  required,
+}) => {
+  const [autoComplete, setAutoComplete] = useState<{
+    value: string;
+    open: boolean;
+  }>({
+    value: value?.name ?? "",
+    open: false,
+  });
+  const organizationsQuery = useQuery(organizations());
+
+  const { debounced: debouncedInputOnChange } = useDebouncedFunction(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      setAutoComplete((state) => ({
+        ...state,
+        value: event.target.value,
+      }));
+    },
+    750,
+  );
+
+  return (
+    <Autocomplete
+      noOptionsText="No organizations found"
+      className={className}
+      options={organizationsQuery.data ?? []}
+      loading={organizationsQuery.isLoading}
+      value={value}
+      data-testid="organization-autocomplete"
+      open={autoComplete.open}
+      isOptionEqualToValue={(a, b) => a.name === b.name}
+      getOptionLabel={(option) => option.display_name}
+      onOpen={() => {
+        setAutoComplete((state) => ({
+          ...state,
+          open: true,
+        }));
+      }}
+      onClose={() => {
+        setAutoComplete({
+          value: value?.name ?? "",
+          open: false,
+        });
+      }}
+      onChange={(_, newValue) => {
+        onChange(newValue);
+      }}
+      renderOption={({ key, ...props }, option) => (
+        <li key={key} {...props}>
+          <AvatarData
+            title={option.display_name}
+            subtitle={option.name}
+            src={option.icon}
+          />
+        </li>
+      )}
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          required={required}
+          fullWidth
+          size={size}
+          label={label}
+          autoFocus
+          placeholder="Organization name"
+          css={{
+            "&:not(:has(label))": {
+              margin: 0,
+            },
+          }}
+          InputProps={{
+            ...params.InputProps,
+            onChange: debouncedInputOnChange,
+            startAdornment: value && (
+              <Avatar size="sm" src={value.icon}>
+                {value.name}
+              </Avatar>
+            ),
+            endAdornment: (
+              <>
+                {organizationsQuery.isFetching && autoComplete.open && (
+                  <CircularProgress size={16} />
+                )}
+                {params.InputProps.endAdornment}
+              </>
+            ),
+            classes: { root },
+          }}
+          InputLabelProps={{
+            shrink: true,
+          }}
+        />
+      )}
+    />
+  );
+};
+
+const root = css`
+  padding-left: 14px !important; // Same padding left as input
+  gap: 4px;
+`;
diff --git a/site/src/components/UserAutocomplete/UserAutocomplete.tsx b/site/src/components/UserAutocomplete/UserAutocomplete.tsx
index c907f2757e41b..cfd4f036bb9f2 100644
--- a/site/src/components/UserAutocomplete/UserAutocomplete.tsx
+++ b/site/src/components/UserAutocomplete/UserAutocomplete.tsx
@@ -22,6 +22,7 @@ export type UserAutocompleteProps = {
   label?: string;
   className?: string;
   size?: ComponentProps<typeof TextField>["size"];
+  required?: boolean;
 };
 
 export const UserAutocomplete: FC<UserAutocompleteProps> = ({
@@ -30,6 +31,7 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = ({
   label,
   className,
   size = "small",
+  required,
 }) => {
   const [autoComplete, setAutoComplete] = useState<{
     value: string;
@@ -59,16 +61,15 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = ({
 
   return (
     <Autocomplete
-      // Since the values are filtered by the API we don't need to filter them
-      // in the FE because it can causes some mismatches.
-      filterOptions={(user) => user}
       noOptionsText="No users found"
       className={className}
       options={usersQuery.data?.users ?? []}
       loading={usersQuery.isLoading}
       value={value}
-      id="user-autocomplete"
+      data-testid="user-autocomplete"
       open={autoComplete.open}
+      isOptionEqualToValue={(a, b) => a.username === b.username}
+      getOptionLabel={(option) => option.email}
       onOpen={() => {
         setAutoComplete((state) => ({
           ...state,
@@ -84,12 +85,8 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = ({
       onChange={(_, newValue) => {
         onChange(newValue);
       }}
-      isOptionEqualToValue={(option: User, value: User) =>
-        option.username === value.username
-      }
-      getOptionLabel={(option) => option.email}
-      renderOption={(props, option) => (
-        <li {...props}>
+      renderOption={({ key, ...props }, option) => (
+        <li key={key} {...props}>
           <AvatarData
             title={option.username}
             subtitle={option.email}
@@ -100,6 +97,7 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = ({
       renderInput={(params) => (
         <TextField
           {...params}
+          required={required}
           fullWidth
           size={size}
           label={label}
@@ -119,9 +117,9 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = ({
             ),
             endAdornment: (
               <>
-                {usersQuery.isFetching && autoComplete.open ? (
+                {usersQuery.isFetching && autoComplete.open && (
                   <CircularProgress size={16} />
-                ) : null}
+                )}
                 {params.InputProps.endAdornment}
               </>
             ),
diff --git a/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx b/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx
index ca71b1db95f12..65e973e5672f1 100644
--- a/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx
+++ b/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx
@@ -10,7 +10,7 @@ import {
   PopoverTrigger,
   usePopover,
 } from "components/Popover/Popover";
-import { AUDIT_LINK, USERS_LINK } from "modules/navigation";
+import { linkToAuditing, linkToUsers } from "modules/navigation";
 
 interface DeploymentDropdownProps {
   canViewDeployment: boolean;
@@ -114,7 +114,7 @@ const DeploymentDropdownContent: FC<DeploymentDropdownProps> = ({
       {canViewAllUsers && (
         <MenuItem
           component={NavLink}
-          to={canViewOrganizations ? `/deployment${USERS_LINK}` : USERS_LINK}
+          to={canViewOrganizations ? `/deployment${linkToUsers}` : linkToUsers}
           css={styles.menuItem}
           onClick={onPopoverClose}
         >
@@ -124,7 +124,11 @@ const DeploymentDropdownContent: FC<DeploymentDropdownProps> = ({
       {canViewAuditLog && (
         <MenuItem
           component={NavLink}
-          to={canViewOrganizations ? `/deployment${AUDIT_LINK}` : AUDIT_LINK}
+          to={
+            canViewOrganizations
+              ? `/deployment${linkToAuditing}`
+              : linkToAuditing
+          }
           css={styles.menuItem}
           onClick={onPopoverClose}
         >
diff --git a/site/src/modules/navigation.ts b/site/src/modules/navigation.ts
index a659226ecc727..7e76bdefd1904 100644
--- a/site/src/modules/navigation.ts
+++ b/site/src/modules/navigation.ts
@@ -2,10 +2,33 @@
  * @fileoverview TODO: centralize navigation code here! URL constants, URL formatting, all of it
  */
 
+import { useEffectEvent } from "hooks/hookPolyfills";
+import type { DashboardValue } from "./dashboard/DashboardProvider";
+import { selectFeatureVisibility } from "./dashboard/entitlements";
+import { useDashboard } from "./dashboard/useDashboard";
+
+type LinkThunk = (state: DashboardValue) => string;
+
+export function useLinks() {
+  const dashboard = useDashboard();
+  // Needs to be safe to call `get` from inside of a `useEffect` without causing
+  // excess triggers from adding it as a dependency.
+  const get = useEffectEvent((thunk: LinkThunk): string => thunk(dashboard));
+  return get;
+}
+
 export function withFilter(path: string, filter: string) {
   return path + (filter ? `?filter=${encodeURIComponent(filter)}` : "");
 }
 
-export const AUDIT_LINK = "/audit";
+export const linkToAuditing = "/audit";
+
+export const linkToUsers = withFilter("/users", "status:active");
 
-export const USERS_LINK = withFilter("/users", "status:active");
+export const linkToTemplate =
+  (organizationName: string, templateName: string): LinkThunk =>
+  (dashboard) =>
+    dashboard.experiments.includes("multi-organization") &&
+    selectFeatureVisibility(dashboard.entitlements).multiple_organizations
+      ? `/templates/${organizationName}/${templateName}`
+      : `/templates/${templateName}`;
diff --git a/site/src/modules/templates/TemplateFiles/TemplateFiles.stories.tsx b/site/src/modules/templates/TemplateFiles/TemplateFiles.stories.tsx
index 8222a9bb4cca3..a9078acc4ffc0 100644
--- a/site/src/modules/templates/TemplateFiles/TemplateFiles.stories.tsx
+++ b/site/src/modules/templates/TemplateFiles/TemplateFiles.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { chromatic } from "testHelpers/chromatic";
+import { withDashboardProvider } from "testHelpers/storybook";
 import { TemplateFiles } from "./TemplateFiles";
 
 const exampleFiles = {
@@ -13,6 +14,7 @@ const exampleFiles = {
 
 const meta: Meta<typeof TemplateFiles> = {
   title: "modules/templates/TemplateFiles",
+  decorators: [withDashboardProvider],
   parameters: { chromatic },
   component: TemplateFiles,
   args: {
diff --git a/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx b/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx
index 415feae8932f5..e1c629d78c322 100644
--- a/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx
+++ b/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx
@@ -5,29 +5,34 @@ import set from "lodash/fp/set";
 import { type FC, useCallback, useMemo } from "react";
 import { Link } from "react-router-dom";
 import { SyntaxHighlighter } from "components/SyntaxHighlighter/SyntaxHighlighter";
+import { linkToTemplate, useLinks } from "modules/navigation";
 import type { FileTree } from "utils/filetree";
 import type { TemplateVersionFiles } from "utils/templateVersion";
 import { TemplateFileTree } from "./TemplateFileTree";
 
 interface TemplateFilesProps {
+  organizationName: string;
+  templateName: string;
+  versionName: string;
   currentFiles: TemplateVersionFiles;
   /**
    * Files used to compare with current files
    */
   baseFiles?: TemplateVersionFiles;
-  versionName: string;
-  templateName: string;
 }
 
 export const TemplateFiles: FC<TemplateFilesProps> = ({
+  organizationName,
+  templateName,
+  versionName,
   currentFiles,
   baseFiles,
-  versionName,
-  templateName,
 }) => {
-  const filenames = Object.keys(currentFiles);
+  const getLink = useLinks();
   const theme = useTheme();
 
+  const filenames = Object.keys(currentFiles);
+
   const fileInfo = useCallback(
     (filename: string) => {
       const value = currentFiles[filename].trim();
@@ -52,13 +57,17 @@ export const TemplateFiles: FC<TemplateFilesProps> = ({
     return tree;
   }, [fileInfo, filenames]);
 
+  const versionLink = `${getLink(
+    linkToTemplate(organizationName, templateName),
+  )}/versions/${versionName}`;
+
   return (
     <div>
       <div css={{ display: "flex", alignItems: "flex-start", gap: 32 }}>
         <div css={styles.sidebar}>
           <TemplateFileTree
             fileTree={fileTree}
-            onSelect={function (path: string): void {
+            onSelect={(path: string) => {
               window.location.hash = path;
             }}
             Label={({ path, filename, isFolder }) => {
@@ -69,11 +78,7 @@ export const TemplateFiles: FC<TemplateFilesProps> = ({
               const hasDiff = fileInfo(path).hasDiff;
               return (
                 <span
-                  css={{
-                    color: hasDiff
-                      ? theme.roles.warning.fill.outline
-                      : undefined,
-                  }}
+                  css={hasDiff && { color: theme.roles.warning.fill.outline }}
                 >
                   {filename}
                 </span>
@@ -104,7 +109,7 @@ export const TemplateFiles: FC<TemplateFilesProps> = ({
 
                     <div css={{ marginLeft: "auto" }}>
                       <Link
-                        to={`/templates/${templateName}/versions/${versionName}/edit?path=${filename}`}
+                        to={`${versionLink}/edit?path=${filename}`}
                         css={{
                           display: "flex",
                           gap: 4,
diff --git a/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.stories.tsx b/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.stories.tsx
index 75fce5653ea8e..d175996df1f7d 100644
--- a/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.stories.tsx
+++ b/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.stories.tsx
@@ -2,11 +2,13 @@ import { action } from "@storybook/addon-actions";
 import type { Meta, StoryObj } from "@storybook/react";
 import { expect, userEvent, waitFor, within } from "@storybook/test";
 import { MockTemplateVersion, MockTemplate } from "testHelpers/entities";
+import { withDashboardProvider } from "testHelpers/storybook";
 import { WorkspaceOutdatedTooltip } from "./WorkspaceOutdatedTooltip";
 
 const meta: Meta<typeof WorkspaceOutdatedTooltip> = {
   title: "modules/workspaces/WorkspaceOutdatedTooltip",
   component: WorkspaceOutdatedTooltip,
+  decorators: [withDashboardProvider],
   parameters: {
     queries: [
       {
diff --git a/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx b/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx
index 605b66323fa45..df5cc5f195bfc 100644
--- a/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx
+++ b/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx
@@ -16,6 +16,7 @@ import {
   HelpTooltipTrigger,
 } from "components/HelpTooltip/HelpTooltip";
 import { usePopover } from "components/Popover/Popover";
+import { linkToTemplate, useLinks } from "modules/navigation";
 
 export const Language = {
   outdatedLabel: "Outdated",
@@ -25,9 +26,10 @@ export const Language = {
 };
 
 interface TooltipProps {
-  onUpdateVersion: () => void;
+  organizationName: string;
   templateName: string;
   latestVersionId: string;
+  onUpdateVersion: () => void;
   ariaLabel?: string;
 }
 
@@ -48,17 +50,23 @@ export const WorkspaceOutdatedTooltip: FC<TooltipProps> = (props) => {
 };
 
 export const WorkspaceOutdatedTooltipContent: FC<TooltipProps> = ({
+  organizationName,
+  templateName,
+  latestVersionId,
   onUpdateVersion,
   ariaLabel,
-  latestVersionId,
-  templateName,
 }) => {
+  const getLink = useLinks();
+  const theme = useTheme();
   const popover = usePopover();
   const { data: activeVersion } = useQuery({
     ...templateVersion(latestVersionId),
     enabled: popover.open,
   });
-  const theme = useTheme();
+
+  const versionLink = `${getLink(
+    linkToTemplate(organizationName, templateName),
+  )}`;
 
   return (
     <HelpTooltipContent>
@@ -71,7 +79,7 @@ export const WorkspaceOutdatedTooltipContent: FC<TooltipProps> = ({
           <div>
             {activeVersion ? (
               <Link
-                href={`/templates/${templateName}/versions/${activeVersion.name}`}
+                href={`${versionLink}/versions/${activeVersion.name}`}
                 target="_blank"
                 css={{ color: theme.palette.primary.light }}
               >
diff --git a/site/src/pages/CreateTemplatePage/CreateTemplateForm.stories.tsx b/site/src/pages/CreateTemplatePage/CreateTemplateForm.stories.tsx
index 893de4d6bd688..6f62439ae3d45 100644
--- a/site/src/pages/CreateTemplatePage/CreateTemplateForm.stories.tsx
+++ b/site/src/pages/CreateTemplatePage/CreateTemplateForm.stories.tsx
@@ -34,12 +34,26 @@ export const Upload: Story = {
   },
 };
 
+export const UploadWithOrgPicker: Story = {
+  args: {
+    ...Upload.args,
+    showOrganizationPicker: true,
+  },
+};
+
 export const StarterTemplate: Story = {
   args: {
     starterTemplate: MockTemplateExample,
   },
 };
 
+export const StarterTemplateWithOrgPicker: Story = {
+  args: {
+    ...StarterTemplate.args,
+    showOrganizationPicker: true,
+  },
+};
+
 export const DuplicateTemplateWithVariables: Story = {
   args: {
     copiedTemplate: MockTemplate,
diff --git a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
index bbc7f45288385..929c4fc313a0f 100644
--- a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
+++ b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
@@ -2,10 +2,11 @@ import TextField from "@mui/material/TextField";
 import { useFormik } from "formik";
 import camelCase from "lodash/camelCase";
 import capitalize from "lodash/capitalize";
-import type { FC } from "react";
+import { useState, type FC } from "react";
 import { useSearchParams } from "react-router-dom";
 import * as Yup from "yup";
 import type {
+  Organization,
   ProvisionerJobLog,
   ProvisionerType,
   Template,
@@ -20,6 +21,7 @@ import {
   FormFooter,
 } from "components/Form/Form";
 import { IconField } from "components/IconField/IconField";
+import { OrganizationAutocomplete } from "components/OrganizationAutocomplete/OrganizationAutocomplete";
 import { SelectedTemplate } from "pages/CreateWorkspacePage/SelectedTemplate";
 import {
   nameValidator,
@@ -37,7 +39,7 @@ import { VariableInput } from "./VariableInput";
 
 const MAX_DESCRIPTION_CHAR_LIMIT = 128;
 
-export interface CreateTemplateData {
+export interface CreateTemplateFormData {
   name: string;
   display_name: string;
   description: string;
@@ -53,6 +55,7 @@ export interface CreateTemplateData {
   user_variable_values?: VariableValue[];
   allow_everyone_group_access: boolean;
   provisioner_type: ProvisionerType;
+  organization: string;
 }
 
 const validationSchema = Yup.object({
@@ -65,7 +68,7 @@ const validationSchema = Yup.object({
   icon: Yup.string().optional(),
 });
 
-const defaultInitialValues: CreateTemplateData = {
+const defaultInitialValues: CreateTemplateFormData = {
   name: "",
   display_name: "",
   description: "",
@@ -85,6 +88,7 @@ const defaultInitialValues: CreateTemplateData = {
   allow_user_autostop: false,
   allow_everyone_group_access: true,
   provisioner_type: "terraform",
+  organization: "default",
 };
 
 type GetInitialValuesParams = {
@@ -163,7 +167,7 @@ export type CreateTemplateFormProps = (
   | UploadTemplateForm
 ) & {
   onCancel: () => void;
-  onSubmit: (data: CreateTemplateData) => void;
+  onSubmit: (data: CreateTemplateFormData) => void;
   onOpenBuildLogsDrawer: () => void;
   isSubmitting: boolean;
   variables?: TemplateVersionVariable[];
@@ -172,10 +176,12 @@ export type CreateTemplateFormProps = (
   logs?: ProvisionerJobLog[];
   allowAdvancedScheduling: boolean;
   variablesSectionRef: React.RefObject<HTMLDivElement>;
+  showOrganizationPicker?: boolean;
 };
 
 export const CreateTemplateForm: FC<CreateTemplateFormProps> = (props) => {
   const [searchParams] = useSearchParams();
+  const [selectedOrg, setSelectedOrg] = useState<Organization | null>(null);
   const {
     onCancel,
     onSubmit,
@@ -187,9 +193,10 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = (props) => {
     logs,
     allowAdvancedScheduling,
     variablesSectionRef,
+    showOrganizationPicker,
   } = props;
 
-  const form = useFormik<CreateTemplateData>({
+  const form = useFormik<CreateTemplateFormData>({
     initialValues: getInitialValues({
       allowAdvancedScheduling,
       fromExample:
@@ -201,7 +208,7 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = (props) => {
     validationSchema,
     onSubmit,
   });
-  const getFieldHelpers = getFormHelpers<CreateTemplateData>(form, error);
+  const getFieldHelpers = getFormHelpers<CreateTemplateFormData>(form, error);
 
   return (
     <HorizontalForm onSubmit={form.handleSubmit}>
@@ -214,9 +221,6 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = (props) => {
           {"starterTemplate" in props && (
             <SelectedTemplate template={props.starterTemplate} />
           )}
-          {"copiedTemplate" in props && (
-            <SelectedTemplate template={props.copiedTemplate} />
-          )}
           {"upload" in props && (
             <TemplateUpload
               {...props.upload}
@@ -227,11 +231,28 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = (props) => {
             />
           )}
 
+          {showOrganizationPicker && (
+            <OrganizationAutocomplete
+              {...getFieldHelpers("organization_id")}
+              required
+              label="Belongs to"
+              value={selectedOrg}
+              onChange={(newValue) => {
+                setSelectedOrg(newValue);
+                void form.setFieldValue("organization", newValue?.id || "");
+              }}
+              size="medium"
+            />
+          )}
+
+          {"copiedTemplate" in props && (
+            <SelectedTemplate template={props.copiedTemplate} />
+          )}
+
           <TextField
             {...getFieldHelpers("name")}
             disabled={isSubmitting}
             onChange={onChangeTrimmed(form)}
-            autoFocus
             fullWidth
             required
             label="Name"
@@ -336,7 +357,7 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = (props) => {
 
 const fillNameAndDisplayWithFilename = async (
   filename: string,
-  form: ReturnType<typeof useFormik<CreateTemplateData>>,
+  form: ReturnType<typeof useFormik<CreateTemplateFormData>>,
 ) => {
   const [name, _extension] = filename.split(".");
   await Promise.all([
diff --git a/site/src/pages/CreateTemplatePage/CreateTemplatePage.test.tsx b/site/src/pages/CreateTemplatePage/CreateTemplatePage.test.tsx
index 956d385ccd75a..8722ce655f5db 100644
--- a/site/src/pages/CreateTemplatePage/CreateTemplatePage.test.tsx
+++ b/site/src/pages/CreateTemplatePage/CreateTemplatePage.test.tsx
@@ -18,7 +18,10 @@ const renderPage = async (searchParams: URLSearchParams) => {
     route: `/templates/new?${searchParams.toString()}`,
     path: "/templates/new",
     // We need this because after creation, the user will be redirected to here
-    extraRoutes: [{ path: "templates/:template/files", element: <></> }],
+    extraRoutes: [
+      { path: "templates/:organization/:template/files", element: <></> },
+      { path: "templates/:template/files", element: <></> },
+    ],
   });
   // It is lazy loaded, so we have to wait for it to be rendered to not get an
   // act error
@@ -95,20 +98,17 @@ test("Create template from starter template", async () => {
   expect(router.state.location.pathname).toEqual(
     `/templates/${MockTemplate.name}/files`,
   );
-  expect(API.createTemplateVersion).toHaveBeenCalledWith(
-    "00000000-0000-0000-0000-000000000000",
-    {
-      example_id: "aws-windows",
-      provisioner: "terraform",
-      storage_method: "file",
-      tags: {},
-      user_variable_values: [
-        { name: "first_variable", value: "First value" },
-        { name: "second_variable", value: "2" },
-        { name: "third_variable", value: "true" },
-      ],
-    },
-  );
+  expect(API.createTemplateVersion).toHaveBeenCalledWith("default", {
+    example_id: "aws-windows",
+    provisioner: "terraform",
+    storage_method: "file",
+    tags: {},
+    user_variable_values: [
+      { name: "first_variable", value: "First value" },
+      { name: "second_variable", value: "2" },
+      { name: "third_variable", value: "true" },
+    ],
+  });
 });
 
 test("Create template from duplicating a template", async () => {
@@ -119,7 +119,7 @@ test("Create template from duplicating a template", async () => {
     .mockResolvedValue([MockTemplateVersionVariable1]);
 
   const searchParams = new URLSearchParams({
-    fromTemplate: MockTemplate.name,
+    fromTemplate: MockTemplate.id,
   });
   const { router } = await renderPage(searchParams);
   // Name and display name are using copy prefixes
diff --git a/site/src/pages/CreateTemplatePage/CreateTemplatePage.tsx b/site/src/pages/CreateTemplatePage/CreateTemplatePage.tsx
index e427fa6b32ff8..c5ad589805ec8 100644
--- a/site/src/pages/CreateTemplatePage/CreateTemplatePage.tsx
+++ b/site/src/pages/CreateTemplatePage/CreateTemplatePage.tsx
@@ -5,6 +5,7 @@ import { useNavigate, useSearchParams } from "react-router-dom";
 import { createTemplate } from "api/queries/templates";
 import type { TemplateVersion } from "api/typesGenerated";
 import { FullPageHorizontalForm } from "components/FullPageForm/FullPageHorizontalForm";
+import { linkToTemplate, useLinks } from "modules/navigation";
 import { pageTitle } from "utils/page";
 import { BuildLogsDrawer } from "./BuildLogsDrawer";
 import { DuplicateTemplateView } from "./DuplicateTemplateView";
@@ -14,6 +15,7 @@ import { UploadTemplateView } from "./UploadTemplateView";
 
 const CreateTemplatePage: FC = () => {
   const navigate = useNavigate();
+  const getLink = useLinks();
   const [searchParams] = useSearchParams();
   const [isBuildLogsOpen, setIsBuildLogsOpen] = useState(false);
   const [templateVersion, setTemplateVersion] = useState<TemplateVersion>();
@@ -32,7 +34,9 @@ const CreateTemplatePage: FC = () => {
         onCreateVersion: setTemplateVersion,
         onTemplateVersionChanges: setTemplateVersion,
       });
-      navigate(`/templates/${template.name}/files`);
+      navigate(
+        `${getLink(linkToTemplate(options.organization, template.name))}/files`,
+      );
     },
     onOpenBuildLogsDrawer: () => setIsBuildLogsOpen(true),
     error: createTemplateMutation.error,
diff --git a/site/src/pages/CreateTemplatePage/DuplicateTemplateView.tsx b/site/src/pages/CreateTemplatePage/DuplicateTemplateView.tsx
index d108d89ca1ba0..794296006a755 100644
--- a/site/src/pages/CreateTemplatePage/DuplicateTemplateView.tsx
+++ b/site/src/pages/CreateTemplatePage/DuplicateTemplateView.tsx
@@ -3,7 +3,7 @@ import { useQuery } from "react-query";
 import { useNavigate, useSearchParams } from "react-router-dom";
 import {
   templateVersionLogs,
-  templateByName,
+  template,
   templateVersion,
   templateVersionVariables,
   JobError,
@@ -23,26 +23,24 @@ export const DuplicateTemplateView: FC<CreateTemplatePageViewProps> = ({
   isCreating,
 }) => {
   const navigate = useNavigate();
-  const { entitlements, organizationId } = useDashboard();
+  const { entitlements } = useDashboard();
   const [searchParams] = useSearchParams();
-  const templateByNameQuery = useQuery(
-    templateByName(organizationId, searchParams.get("fromTemplate")!),
-  );
-  const activeVersionId = templateByNameQuery.data?.active_version_id ?? "";
+  const templateQuery = useQuery(template(searchParams.get("fromTemplate")!));
+  const activeVersionId = templateQuery.data?.active_version_id ?? "";
   const templateVersionQuery = useQuery({
     ...templateVersion(activeVersionId),
-    enabled: templateByNameQuery.isSuccess,
+    enabled: templateQuery.isSuccess,
   });
   const templateVersionVariablesQuery = useQuery({
     ...templateVersionVariables(activeVersionId),
-    enabled: templateByNameQuery.isSuccess,
+    enabled: templateQuery.isSuccess,
   });
   const isLoading =
-    templateByNameQuery.isLoading ||
+    templateQuery.isLoading ||
     templateVersionQuery.isLoading ||
     templateVersionVariablesQuery.isLoading;
   const loadingError =
-    templateByNameQuery.error ||
+    templateQuery.error ||
     templateVersionQuery.error ||
     templateVersionVariablesQuery.error;
 
@@ -67,7 +65,7 @@ export const DuplicateTemplateView: FC<CreateTemplatePageViewProps> = ({
       {...formPermissions}
       variablesSectionRef={variablesSectionRef}
       onOpenBuildLogsDrawer={onOpenBuildLogsDrawer}
-      copiedTemplate={templateByNameQuery.data!}
+      copiedTemplate={templateQuery.data!}
       error={error}
       isSubmitting={isCreating}
       variables={templateVersionVariablesQuery.data}
@@ -76,7 +74,7 @@ export const DuplicateTemplateView: FC<CreateTemplatePageViewProps> = ({
       logs={templateVersionLogsQuery.data}
       onSubmit={async (formData) => {
         await onCreateTemplate({
-          organizationId,
+          organization: templateQuery.data!.organization_name,
           version: firstVersionFromFile(
             templateVersionQuery.data!.job.file_id,
             formData.user_variable_values,
diff --git a/site/src/pages/CreateTemplatePage/ImportStarterTemplateView.tsx b/site/src/pages/CreateTemplatePage/ImportStarterTemplateView.tsx
index e62cda910f847..922ee6ae11b2b 100644
--- a/site/src/pages/CreateTemplatePage/ImportStarterTemplateView.tsx
+++ b/site/src/pages/CreateTemplatePage/ImportStarterTemplateView.tsx
@@ -10,6 +10,7 @@ import {
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { Loader } from "components/Loader/Loader";
 import { useDashboard } from "modules/dashboard/useDashboard";
+import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
 import { CreateTemplateForm } from "./CreateTemplateForm";
 import type { CreateTemplatePageViewProps } from "./types";
 import {
@@ -26,13 +27,18 @@ export const ImportStarterTemplateView: FC<CreateTemplatePageViewProps> = ({
   isCreating,
 }) => {
   const navigate = useNavigate();
-  const { entitlements, organizationId } = useDashboard();
+  const { entitlements, experiments } = useDashboard();
+  const { multiple_organizations: organizationsEnabled } =
+    useFeatureVisibility();
   const [searchParams] = useSearchParams();
-  const templateExamplesQuery = useQuery(templateExamples(organizationId));
+  const templateExamplesQuery = useQuery(templateExamples("default"));
   const templateExample = templateExamplesQuery.data?.find(
     (e) => e.id === searchParams.get("exampleId")!,
   );
 
+  const showOrganizationPicker =
+    experiments.includes("multi-organization") && organizationsEnabled;
+
   const isLoading = templateExamplesQuery.isLoading;
   const loadingError = templateExamplesQuery.error;
 
@@ -71,9 +77,10 @@ export const ImportStarterTemplateView: FC<CreateTemplatePageViewProps> = ({
       onCancel={() => navigate(-1)}
       jobError={isJobError ? error.job.error : undefined}
       logs={templateVersionLogsQuery.data}
+      showOrganizationPicker={showOrganizationPicker}
       onSubmit={async (formData) => {
         await onCreateTemplate({
-          organizationId,
+          organization: formData.organization,
           version: firstVersionFromExample(
             templateExample!,
             formData.user_variable_values,
diff --git a/site/src/pages/CreateTemplatePage/UploadTemplateView.tsx b/site/src/pages/CreateTemplatePage/UploadTemplateView.tsx
index b9f49d4a46b94..1c800d25cde97 100644
--- a/site/src/pages/CreateTemplatePage/UploadTemplateView.tsx
+++ b/site/src/pages/CreateTemplatePage/UploadTemplateView.tsx
@@ -8,6 +8,7 @@ import {
   templateVersionVariables,
 } from "api/queries/templates";
 import { useDashboard } from "modules/dashboard/useDashboard";
+import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
 import { CreateTemplateForm } from "./CreateTemplateForm";
 import type { CreateTemplatePageViewProps } from "./types";
 import { firstVersionFromFile, getFormPermissions, newTemplate } from "./utils";
@@ -20,10 +21,14 @@ export const UploadTemplateView: FC<CreateTemplatePageViewProps> = ({
   error,
 }) => {
   const navigate = useNavigate();
-
-  const { entitlements, organizationId } = useDashboard();
+  const { entitlements, experiments } = useDashboard();
+  const { multiple_organizations: organizationsEnabled } =
+    useFeatureVisibility();
   const formPermissions = getFormPermissions(entitlements);
 
+  const showOrganizationPicker =
+    experiments.includes("multi-organization") && organizationsEnabled;
+
   const uploadFileMutation = useMutation(uploadFile());
   const uploadedFile = uploadFileMutation.data;
 
@@ -56,9 +61,10 @@ export const UploadTemplateView: FC<CreateTemplatePageViewProps> = ({
         onRemove: uploadFileMutation.reset,
         file: uploadFileMutation.variables,
       }}
+      showOrganizationPicker={showOrganizationPicker}
       onSubmit={async (formData) => {
         await onCreateTemplate({
-          organizationId,
+          organization: formData.organization,
           version: firstVersionFromFile(
             uploadedFile!.hash,
             formData.user_variable_values,
diff --git a/site/src/pages/CreateTemplatePage/utils.ts b/site/src/pages/CreateTemplatePage/utils.ts
index a1536b8a4ce5c..3078e89cf4b5b 100644
--- a/site/src/pages/CreateTemplatePage/utils.ts
+++ b/site/src/pages/CreateTemplatePage/utils.ts
@@ -1,3 +1,4 @@
+import type { CreateTemplateOptions } from "api/queries/templates";
 import type {
   CreateTemplateVersionRequest,
   Entitlements,
@@ -6,9 +7,11 @@ import type {
   VariableValue,
 } from "api/typesGenerated";
 import { calculateAutostopRequirementDaysValue } from "utils/schedule";
-import type { CreateTemplateData } from "./CreateTemplateForm";
+import type { CreateTemplateFormData } from "./CreateTemplateForm";
 
-export const newTemplate = (formData: CreateTemplateData) => {
+export const newTemplate = (
+  formData: CreateTemplateFormData,
+): CreateTemplateOptions["template"] => {
   const { autostop_requirement_days_of_week, autostop_requirement_weeks } =
     formData;
 
diff --git a/site/src/pages/StarterTemplatesPage/StarterTemplatesPage.tsx b/site/src/pages/CreateTemplatesGalleryPage/CreateTemplatesGalleryPage.tsx
similarity index 54%
rename from site/src/pages/StarterTemplatesPage/StarterTemplatesPage.tsx
rename to site/src/pages/CreateTemplatesGalleryPage/CreateTemplatesGalleryPage.tsx
index d52c92a12df82..e7cae2724486d 100644
--- a/site/src/pages/StarterTemplatesPage/StarterTemplatesPage.tsx
+++ b/site/src/pages/CreateTemplatesGalleryPage/CreateTemplatesGalleryPage.tsx
@@ -6,26 +6,34 @@ import type { TemplateExample } from "api/typesGenerated";
 import { useDashboard } from "modules/dashboard/useDashboard";
 import { pageTitle } from "utils/page";
 import { getTemplatesByTag } from "utils/starterTemplates";
+import { CreateTemplatesPageView } from "./CreateTemplatesPageView";
 import { StarterTemplatesPageView } from "./StarterTemplatesPageView";
 
-const StarterTemplatesPage: FC = () => {
-  const { organizationId } = useDashboard();
-  const templateExamplesQuery = useQuery(templateExamples(organizationId));
+const CreateTemplatesGalleryPage: FC = () => {
+  const { experiments } = useDashboard();
+  const templateExamplesQuery = useQuery(templateExamples("default"));
   const starterTemplatesByTag = templateExamplesQuery.data
     ? // Currently, the scratch template should not be displayed on the starter templates page.
       getTemplatesByTag(removeScratchExample(templateExamplesQuery.data))
     : undefined;
+  const multiOrgExperimentEnabled = experiments.includes("multi-organization");
 
   return (
     <>
       <Helmet>
-        <title>{pageTitle("Starter Templates")}</title>
+        <title>{pageTitle("Create a Template")}</title>
       </Helmet>
-
-      <StarterTemplatesPageView
-        error={templateExamplesQuery.error}
-        starterTemplatesByTag={starterTemplatesByTag}
-      />
+      {multiOrgExperimentEnabled ? (
+        <CreateTemplatesPageView
+          error={templateExamplesQuery.error}
+          starterTemplatesByTag={starterTemplatesByTag}
+        />
+      ) : (
+        <StarterTemplatesPageView
+          error={templateExamplesQuery.error}
+          starterTemplatesByTag={starterTemplatesByTag}
+        />
+      )}
     </>
   );
 };
@@ -34,4 +42,4 @@ const removeScratchExample = (data: TemplateExample[]) => {
   return data.filter((example) => example.id !== "scratch");
 };
 
-export default StarterTemplatesPage;
+export default CreateTemplatesGalleryPage;
diff --git a/site/src/pages/CreateTemplatesGalleryPage/CreateTemplatesPageView.tsx b/site/src/pages/CreateTemplatesGalleryPage/CreateTemplatesPageView.tsx
new file mode 100644
index 0000000000000..4abd28902307b
--- /dev/null
+++ b/site/src/pages/CreateTemplatesGalleryPage/CreateTemplatesPageView.tsx
@@ -0,0 +1,151 @@
+import type { Interpolation, Theme } from "@emotion/react";
+import Card from "@mui/material/Card";
+import CardActionArea from "@mui/material/CardActionArea";
+import CardContent from "@mui/material/CardContent";
+import Stack from "@mui/material/Stack";
+import type { FC } from "react";
+import { Link as RouterLink } from "react-router-dom";
+import { ErrorAlert } from "components/Alert/ErrorAlert";
+import { ExternalImage } from "components/ExternalImage/ExternalImage";
+import { Loader } from "components/Loader/Loader";
+import { Margins } from "components/Margins/Margins";
+import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
+import type { StarterTemplatesByTag } from "utils/starterTemplates";
+import { StarterTemplates } from "./StarterTemplates";
+
+export interface CreateTemplatePageViewProps {
+  starterTemplatesByTag?: StarterTemplatesByTag;
+  error?: unknown;
+}
+
+export const CreateTemplatesPageView: FC<CreateTemplatePageViewProps> = ({
+  starterTemplatesByTag,
+  error,
+}) => {
+  return (
+    <Margins>
+      <PageHeader>
+        <PageHeaderTitle>Create a Template</PageHeaderTitle>
+      </PageHeader>
+      <Stack spacing={8}>
+        <Stack direction="row" spacing={4}>
+          <div css={{ width: 202 }}>
+            <h2 css={styles.sectionTitle}>
+              Choose a starting point for your new template
+            </h2>
+          </div>
+          <div
+            css={{
+              display: "flex",
+              flexWrap: "wrap",
+              gap: 32,
+              height: "max-content",
+            }}
+          >
+            <Card variant="outlined" css={{ width: 320, borderRadius: 6 }}>
+              <CardActionArea
+                component={RouterLink}
+                to="/templates/new?exampleId=scratch"
+                sx={{ height: 115, padding: 1 }}
+              >
+                <CardContent>
+                  <Stack
+                    direction="row"
+                    spacing={3}
+                    css={{ alignItems: "center" }}
+                  >
+                    <div css={styles.icon}>
+                      <ExternalImage
+                        src="/emojis/1f4c4.png"
+                        css={{ width: "100%", height: "100%" }}
+                      />
+                    </div>
+                    <div>
+                      <h4 css={styles.cardTitle}>Scratch Template</h4>
+                      <span css={styles.cardDescription}>
+                        Create a minimal starter template that you can customize
+                      </span>
+                    </div>
+                  </Stack>
+                </CardContent>
+              </CardActionArea>
+            </Card>
+            <Card variant="outlined" css={{ width: 320, borderRadius: 6 }}>
+              <CardActionArea
+                component={RouterLink}
+                to="/templates/new"
+                sx={{ height: 115, padding: 1 }}
+              >
+                <CardContent>
+                  <Stack
+                    direction="row"
+                    spacing={3}
+                    css={{ alignItems: "center" }}
+                  >
+                    <div css={styles.icon}>
+                      <ExternalImage
+                        src="/emojis/1f4e1.png"
+                        css={{
+                          width: "100%",
+                          height: "100%",
+                        }}
+                      />
+                    </div>
+                    <div>
+                      <h4 css={styles.cardTitle}>Upload Template</h4>
+                      <span css={styles.cardDescription}>
+                        Get started by uploading an existing template
+                      </span>
+                    </div>
+                  </Stack>
+                </CardContent>
+              </CardActionArea>
+            </Card>
+          </div>
+        </Stack>
+
+        {Boolean(error) && <ErrorAlert error={error} />}
+
+        {Boolean(!starterTemplatesByTag) && <Loader />}
+
+        <StarterTemplates starterTemplatesByTag={starterTemplatesByTag} />
+      </Stack>
+    </Margins>
+  );
+};
+
+const styles = {
+  sectionTitle: (theme) => ({
+    color: theme.palette.text.primary,
+    fontSize: 16,
+    fontWeight: 400,
+    margin: 0,
+  }),
+
+  cardTitle: (theme) => ({
+    color: theme.palette.text.secondary,
+    fontSize: 14,
+    fontWeight: 600,
+    margin: 0,
+    marginBottom: 4,
+  }),
+
+  cardDescription: (theme) => ({
+    fontSize: 13,
+    color: theme.palette.text.secondary,
+    lineHeight: "1.6",
+    display: "block",
+  }),
+
+  icon: {
+    flexShrink: 0,
+    width: 32,
+    height: 32,
+  },
+
+  menuItemIcon: (theme) => ({
+    color: theme.palette.text.secondary,
+    width: 20,
+    height: 20,
+  }),
+} satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/pages/CreateTemplatesGalleryPage/StarterTemplates.tsx b/site/src/pages/CreateTemplatesGalleryPage/StarterTemplates.tsx
new file mode 100644
index 0000000000000..a99d80d2db031
--- /dev/null
+++ b/site/src/pages/CreateTemplatesGalleryPage/StarterTemplates.tsx
@@ -0,0 +1,114 @@
+import type { Interpolation, Theme } from "@emotion/react";
+import type { FC } from "react";
+import { Link, useSearchParams } from "react-router-dom";
+import { Stack } from "components/Stack/Stack";
+import { TemplateExampleCard } from "modules/templates/TemplateExampleCard/TemplateExampleCard";
+import type { StarterTemplatesByTag } from "utils/starterTemplates";
+
+const getTagLabel = (tag: string) => {
+  const labelByTag: Record<string, string> = {
+    all: "All templates",
+    digitalocean: "DigitalOcean",
+    aws: "AWS",
+    google: "Google Cloud",
+  };
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- this can be undefined
+  return labelByTag[tag] ?? tag;
+};
+
+const selectTags = (starterTemplatesByTag: StarterTemplatesByTag) => {
+  return starterTemplatesByTag
+    ? Object.keys(starterTemplatesByTag).sort((a, b) => a.localeCompare(b))
+    : undefined;
+};
+
+export interface StarterTemplatesProps {
+  starterTemplatesByTag?: StarterTemplatesByTag;
+}
+
+export const StarterTemplates: FC<StarterTemplatesProps> = ({
+  starterTemplatesByTag,
+}) => {
+  const [urlParams] = useSearchParams();
+  const tags = starterTemplatesByTag
+    ? selectTags(starterTemplatesByTag)
+    : undefined;
+  const activeTag = urlParams.get("tag") ?? "all";
+  const visibleTemplates = starterTemplatesByTag
+    ? starterTemplatesByTag[activeTag]
+    : undefined;
+
+  return (
+    <Stack direction="row" spacing={4} alignItems="flex-start">
+      {starterTemplatesByTag && tags && (
+        <Stack css={{ width: 202, flexShrink: 0, position: "sticky" }}>
+          <h2 css={styles.sectionTitle}>Choose a starter template</h2>
+          <span css={styles.filterCaption}>Filter</span>
+          {tags.map((tag) => (
+            <Link
+              key={tag}
+              to={`?tag=${tag}`}
+              css={[styles.tagLink, tag === activeTag && styles.tagLinkActive]}
+            >
+              {getTagLabel(tag)} ({starterTemplatesByTag[tag].length})
+            </Link>
+          ))}
+        </Stack>
+      )}
+
+      <div
+        css={{
+          display: "flex",
+          flexWrap: "wrap",
+          gap: 32,
+          height: "max-content",
+        }}
+      >
+        {visibleTemplates &&
+          visibleTemplates.map((example) => (
+            <TemplateExampleCard
+              css={(theme) => ({
+                backgroundColor: theme.palette.background.paper,
+              })}
+              example={example}
+              key={example.id}
+              activeTag={activeTag}
+            />
+          ))}
+      </div>
+    </Stack>
+  );
+};
+
+const styles = {
+  filterCaption: (theme) => ({
+    textTransform: "uppercase",
+    fontWeight: 600,
+    fontSize: 12,
+    color: theme.palette.text.secondary,
+    letterSpacing: "0.1em",
+  }),
+
+  tagLink: (theme) => ({
+    color: theme.palette.text.secondary,
+    textDecoration: "none",
+    fontSize: 14,
+    textTransform: "capitalize",
+
+    "&:hover": {
+      color: theme.palette.text.primary,
+    },
+  }),
+
+  tagLinkActive: (theme) => ({
+    color: theme.palette.text.primary,
+    fontWeight: 600,
+  }),
+
+  sectionTitle: (theme) => ({
+    color: theme.palette.text.primary,
+    fontSize: 16,
+    fontWeight: 400,
+    margin: 0,
+  }),
+} satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/pages/StarterTemplatesPage/StarterTemplatesPage.test.tsx b/site/src/pages/CreateTemplatesGalleryPage/StarterTemplatesPage.test.tsx
similarity index 95%
rename from site/src/pages/StarterTemplatesPage/StarterTemplatesPage.test.tsx
rename to site/src/pages/CreateTemplatesGalleryPage/StarterTemplatesPage.test.tsx
index 9d03587adf005..2e9d6ad9daee1 100644
--- a/site/src/pages/StarterTemplatesPage/StarterTemplatesPage.test.tsx
+++ b/site/src/pages/CreateTemplatesGalleryPage/StarterTemplatesPage.test.tsx
@@ -8,7 +8,7 @@ import {
   MockTemplateExample2,
 } from "testHelpers/entities";
 import { server } from "testHelpers/server";
-import StarterTemplatesPage from "./StarterTemplatesPage";
+import StarterTemplatesPage from "./CreateTemplatesGalleryPage";
 
 test("does not display the scratch template", async () => {
   server.use(
diff --git a/site/src/pages/StarterTemplatesPage/StarterTemplatesPageView.stories.tsx b/site/src/pages/CreateTemplatesGalleryPage/StarterTemplatesPageView.stories.tsx
similarity index 100%
rename from site/src/pages/StarterTemplatesPage/StarterTemplatesPageView.stories.tsx
rename to site/src/pages/CreateTemplatesGalleryPage/StarterTemplatesPageView.stories.tsx
diff --git a/site/src/pages/CreateTemplatesGalleryPage/StarterTemplatesPageView.tsx b/site/src/pages/CreateTemplatesGalleryPage/StarterTemplatesPageView.tsx
new file mode 100644
index 0000000000000..485f53b39f313
--- /dev/null
+++ b/site/src/pages/CreateTemplatesGalleryPage/StarterTemplatesPageView.tsx
@@ -0,0 +1,38 @@
+import type { FC } from "react";
+import { ErrorAlert } from "components/Alert/ErrorAlert";
+import { Loader } from "components/Loader/Loader";
+import { Margins } from "components/Margins/Margins";
+import {
+  PageHeader,
+  PageHeaderSubtitle,
+  PageHeaderTitle,
+} from "components/PageHeader/PageHeader";
+import type { StarterTemplatesByTag } from "utils/starterTemplates";
+import { StarterTemplates } from "./StarterTemplates";
+
+export interface StarterTemplatesPageViewProps {
+  starterTemplatesByTag?: StarterTemplatesByTag;
+  error?: unknown;
+}
+
+export const StarterTemplatesPageView: FC<StarterTemplatesPageViewProps> = ({
+  starterTemplatesByTag,
+  error,
+}) => {
+  return (
+    <Margins>
+      <PageHeader>
+        <PageHeaderTitle>Starter Templates</PageHeaderTitle>
+        <PageHeaderSubtitle>
+          Import a built-in template to start developing in the cloud
+        </PageHeaderSubtitle>
+      </PageHeader>
+
+      {Boolean(error) && <ErrorAlert error={error} />}
+
+      {Boolean(!starterTemplatesByTag) && <Loader />}
+
+      <StarterTemplates starterTemplatesByTag={starterTemplatesByTag} />
+    </Margins>
+  );
+};
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.test.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.test.tsx
index 74a5f2b0ba6bc..131081b1fb35d 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.test.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.test.tsx
@@ -27,7 +27,7 @@ const validationNumberNotInRangeText = "Value must be between 1 and 3.";
 
 const renderCreateWorkspacePage = () => {
   return renderWithAuth(<CreateWorkspacePage />, {
-    route: "/templates/" + MockTemplate.name + "/workspace",
+    route: `/templates/${MockTemplate.name}/workspace`,
     path: "/templates/:template/workspace",
   });
 };
@@ -75,10 +75,7 @@ describe("CreateWorkspacePage", () => {
       .mockResolvedValueOnce([MockTemplateVersionParameter1]);
 
     renderWithAuth(<CreateWorkspacePage />, {
-      route:
-        "/templates/" +
-        MockTemplate.name +
-        `/workspace?param.${param}=${paramValue}`,
+      route: `/templates/${MockTemplate.name}/workspace?param.${param}=${paramValue}`,
       path: "/templates/:template/workspace",
     });
 
@@ -276,10 +273,10 @@ describe("CreateWorkspacePage", () => {
 
     renderWithAuth(<CreateWorkspacePage />, {
       route:
-        "/templates/" +
+        "/templates/default/" +
         MockTemplate.name +
         `/workspace?param.${param}=${paramValue}&mode=auto`,
-      path: "/templates/:template/workspace",
+      path: "/templates/:organization/:template/workspace",
     });
 
     await waitFor(() => {
@@ -310,10 +307,10 @@ describe("CreateWorkspacePage", () => {
 
     renderWithAuth(<CreateWorkspacePage />, {
       route:
-        "/templates/" +
+        "/templates/default/" +
         MockTemplate.name +
         `/workspace?param.${param}=${paramValue}&mode=auto`,
-      path: "/templates/:template/workspace",
+      path: "/templates/:organization/:template/workspace",
     });
     await waitForLoaderToBeRemoved();
 
@@ -335,10 +332,10 @@ describe("CreateWorkspacePage", () => {
 
     renderWithAuth(<CreateWorkspacePage />, {
       route:
-        "/templates/" +
+        "/templates/default/" +
         MockTemplate.name +
         `/workspace?param.${param}=${paramValue}&mode=auto&version=test-template-version`,
-      path: "/templates/:template/workspace",
+      path: "/templates/:organization/:template/workspace",
     });
 
     await waitFor(() => {
@@ -362,8 +359,10 @@ describe("CreateWorkspacePage", () => {
     });
 
     renderWithAuth(<CreateWorkspacePage />, {
-      path: "/templates/:template/workspace",
-      route: `/templates/${MockWorkspace.name}/workspace?${params.toString()}`,
+      path: "/templates/:organization/:template/workspace",
+      route: `/templates/default/${
+        MockWorkspace.name
+      }/workspace?${params.toString()}`,
     });
 
     const warningMessage = await screen.findByTestId("duplication-warning");
diff --git a/site/src/pages/CreateWorkspacePage/useWorkspaceDuplication.test.tsx b/site/src/pages/CreateWorkspacePage/useWorkspaceDuplication.test.tsx
index 6c3510a56d552..90cbdca352ec8 100644
--- a/site/src/pages/CreateWorkspacePage/useWorkspaceDuplication.test.tsx
+++ b/site/src/pages/CreateWorkspacePage/useWorkspaceDuplication.test.tsx
@@ -1,11 +1,10 @@
 import { act, waitFor } from "@testing-library/react";
 import type { Workspace } from "api/typesGenerated";
-import { MockWorkspace } from "testHelpers/entities";
+import * as M from "testHelpers/entities";
 import {
   type GetLocationSnapshot,
   renderHookWithAuth,
 } from "testHelpers/hooks";
-import * as M from "../../testHelpers/entities";
 import CreateWorkspacePage from "./CreateWorkspacePage";
 import { useWorkspaceDuplication } from "./useWorkspaceDuplication";
 
@@ -16,6 +15,10 @@ function render(workspace?: Workspace) {
       renderOptions: { initialProps: { workspace } },
       routingOptions: {
         extraRoutes: [
+          {
+            path: "/templates/:organization/:template/workspace",
+            element: <CreateWorkspacePage />,
+          },
           {
             path: "/templates/:template/workspace",
             element: <CreateWorkspacePage />,
@@ -36,7 +39,7 @@ async function performNavigation(
   await waitFor(() => expect(result.current.isDuplicationReady).toBe(true));
   act(() => result.current.duplicateWorkspace());
 
-  const templateName = MockWorkspace.template_name;
+  const templateName = M.MockWorkspace.template_name;
   return waitFor(() => {
     const { pathname } = getLocationSnapshot();
     expect(pathname).toEqual(`/templates/${templateName}/workspace`);
@@ -55,13 +58,13 @@ describe(`${useWorkspaceDuplication.name}`, () => {
   });
 
   it("Will become ready when workspace is provided and build params are successfully fetched", async () => {
-    const { result } = await render(MockWorkspace);
+    const { result } = await render(M.MockWorkspace);
     expect(result.current.isDuplicationReady).toBe(false);
     await waitFor(() => expect(result.current.isDuplicationReady).toBe(true));
   });
 
   it("Is able to navigate the user to the workspace creation page", async () => {
-    const { result, getLocationSnapshot } = await render(MockWorkspace);
+    const { result, getLocationSnapshot } = await render(M.MockWorkspace);
     await performNavigation(result, getLocationSnapshot);
   });
 
@@ -74,7 +77,7 @@ describe(`${useWorkspaceDuplication.name}`, () => {
       M.MockWorkspaceBuildParameter5,
     ];
 
-    const { result, getLocationSnapshot } = await render(MockWorkspace);
+    const { result, getLocationSnapshot } = await render(M.MockWorkspace);
     await performNavigation(result, getLocationSnapshot);
 
     const { search } = getLocationSnapshot();
@@ -87,11 +90,11 @@ describe(`${useWorkspaceDuplication.name}`, () => {
   test("Navigating appends other necessary metadata to the search params", async () => {
     const extraMetadataEntries: readonly [string, string][] = [
       ["mode", "duplicate"],
-      ["name", `${MockWorkspace.name}-copy`],
-      ["version", MockWorkspace.template_active_version_id],
+      ["name", `${M.MockWorkspace.name}-copy`],
+      ["version", M.MockWorkspace.template_active_version_id],
     ];
 
-    const { result, getLocationSnapshot } = await render(MockWorkspace);
+    const { result, getLocationSnapshot } = await render(M.MockWorkspace);
     await performNavigation(result, getLocationSnapshot);
 
     const { search } = getLocationSnapshot();
diff --git a/site/src/pages/CreateWorkspacePage/useWorkspaceDuplication.ts b/site/src/pages/CreateWorkspacePage/useWorkspaceDuplication.ts
index 042eb4f6ce45e..f37e757938521 100644
--- a/site/src/pages/CreateWorkspacePage/useWorkspaceDuplication.ts
+++ b/site/src/pages/CreateWorkspacePage/useWorkspaceDuplication.ts
@@ -3,6 +3,7 @@ import { useQuery } from "react-query";
 import { useNavigate } from "react-router-dom";
 import { workspaceBuildParameters } from "api/queries/workspaceBuilds";
 import type { Workspace, WorkspaceBuildParameter } from "api/typesGenerated";
+import { linkToTemplate, useLinks } from "modules/navigation";
 import type { CreateWorkspaceMode } from "./CreateWorkspacePage";
 
 function getDuplicationUrlParams(
@@ -32,6 +33,7 @@ function getDuplicationUrlParams(
  */
 export function useWorkspaceDuplication(workspace?: Workspace) {
   const navigate = useNavigate();
+  const getLink = useLinks();
   const buildParametersQuery = useQuery(
     workspace !== undefined
       ? workspaceBuildParameters(workspace.latest_build.id)
@@ -55,11 +57,13 @@ export function useWorkspaceDuplication(workspace?: Workspace) {
     // code defensively and have some redundancy in case someone forgets
     void Promise.resolve().then(() => {
       navigate({
-        pathname: `/templates/${workspace.template_name}/workspace`,
+        pathname: `${getLink(
+          linkToTemplate(workspace.organization_name, workspace.template_name),
+        )}/workspace`,
         search: newUrlParams.toString(),
       });
     });
-  }, [navigate, workspace, buildParametersQuery.data]);
+  }, [getLink, navigate, workspace, buildParametersQuery.data]);
 
   return {
     duplicateWorkspace,
diff --git a/site/src/pages/HealthPage/DERPRegionPage.tsx b/site/src/pages/HealthPage/DERPRegionPage.tsx
index 39f37b4455b61..3f25b3efa5d1a 100644
--- a/site/src/pages/HealthPage/DERPRegionPage.tsx
+++ b/site/src/pages/HealthPage/DERPRegionPage.tsx
@@ -40,7 +40,7 @@ export const DERPRegionPage: FC = () => {
   return (
     <>
       <Helmet>
-        <title>{pageTitle(`${region.RegionName} - Health`)}</title>
+        <title>{pageTitle(region.RegionName, "Health")}</title>
       </Helmet>
 
       <Header>
diff --git a/site/src/pages/ManagementSettingsPage/Sidebar.tsx b/site/src/pages/ManagementSettingsPage/Sidebar.tsx
index 5f89b24f2b762..5fb728117738c 100644
--- a/site/src/pages/ManagementSettingsPage/Sidebar.tsx
+++ b/site/src/pages/ManagementSettingsPage/Sidebar.tsx
@@ -10,7 +10,7 @@ import { Stack } from "components/Stack/Stack";
 import { UserAvatar } from "components/UserAvatar/UserAvatar";
 import { type ClassName, useClassName } from "hooks/useClassName";
 import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
-import { AUDIT_LINK, USERS_LINK, withFilter } from "modules/navigation";
+import { linkToAuditing, linkToUsers, withFilter } from "modules/navigation";
 import { useOrganizationSettings } from "./ManagementSettingsLayout";
 
 export const Sidebar: FC = () => {
@@ -101,13 +101,13 @@ const DeploymentSettingsNavigation: FC<DeploymentSettingsNavigationProps> = ({
           <SidebarNavSubItem href="observability">
             Observability
           </SidebarNavSubItem>
-          <SidebarNavSubItem href={USERS_LINK.slice(1)}>
+          <SidebarNavSubItem href={linkToUsers.slice(1)}>
             Users
           </SidebarNavSubItem>
           {!organizationsEnabled && (
             <SidebarNavSubItem href="groups">Groups</SidebarNavSubItem>
           )}
-          <SidebarNavSubItem href={AUDIT_LINK.slice(1)}>
+          <SidebarNavSubItem href={linkToAuditing.slice(1)}>
             Auditing
           </SidebarNavSubItem>
         </Stack>
@@ -160,7 +160,7 @@ export const OrganizationSettingsNavigation: FC<
               to serve a copy of the audit page or even delete this link. */}
           <SidebarNavSubItem
             href={`/deployment${withFilter(
-              AUDIT_LINK,
+              linkToAuditing,
               `organization:${organization.name}`,
             )}`}
           >
diff --git a/site/src/pages/StarterTemplatePage/StarterTemplatePage.tsx b/site/src/pages/StarterTemplatePage/StarterTemplatePage.tsx
index ed7b5b1c9d92f..df042a7cca743 100644
--- a/site/src/pages/StarterTemplatePage/StarterTemplatePage.tsx
+++ b/site/src/pages/StarterTemplatePage/StarterTemplatePage.tsx
@@ -3,14 +3,12 @@ import { Helmet } from "react-helmet-async";
 import { useQuery } from "react-query";
 import { useParams } from "react-router-dom";
 import { templateExamples } from "api/queries/templates";
-import { useDashboard } from "modules/dashboard/useDashboard";
 import { pageTitle } from "utils/page";
 import { StarterTemplatePageView } from "./StarterTemplatePageView";
 
 const StarterTemplatePage: FC = () => {
   const { exampleId } = useParams() as { exampleId: string };
-  const { organizationId } = useDashboard();
-  const templateExamplesQuery = useQuery(templateExamples(organizationId));
+  const templateExamplesQuery = useQuery(templateExamples("default"));
   const starterTemplate = templateExamplesQuery.data?.find(
     (example) => example.id === exampleId,
   );
diff --git a/site/src/pages/StarterTemplatesPage/StarterTemplatesPageView.tsx b/site/src/pages/StarterTemplatesPage/StarterTemplatesPageView.tsx
deleted file mode 100644
index e0a6c4b975747..0000000000000
--- a/site/src/pages/StarterTemplatesPage/StarterTemplatesPageView.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-import type { Interpolation, Theme } from "@emotion/react";
-import type { FC } from "react";
-import { Link, useSearchParams } from "react-router-dom";
-import { ErrorAlert } from "components/Alert/ErrorAlert";
-import { Loader } from "components/Loader/Loader";
-import { Margins } from "components/Margins/Margins";
-import {
-  PageHeader,
-  PageHeaderSubtitle,
-  PageHeaderTitle,
-} from "components/PageHeader/PageHeader";
-import { Stack } from "components/Stack/Stack";
-import { TemplateExampleCard } from "modules/templates/TemplateExampleCard/TemplateExampleCard";
-import type { StarterTemplatesByTag } from "utils/starterTemplates";
-
-const getTagLabel = (tag: string) => {
-  const labelByTag: Record<string, string> = {
-    all: "All templates",
-    digitalocean: "DigitalOcean",
-    aws: "AWS",
-    google: "Google Cloud",
-  };
-  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- this can be undefined
-  return labelByTag[tag] ?? tag;
-};
-
-const selectTags = (starterTemplatesByTag: StarterTemplatesByTag) => {
-  return starterTemplatesByTag
-    ? Object.keys(starterTemplatesByTag).sort((a, b) => a.localeCompare(b))
-    : undefined;
-};
-export interface StarterTemplatesPageViewProps {
-  starterTemplatesByTag?: StarterTemplatesByTag;
-  error?: unknown;
-}
-
-export const StarterTemplatesPageView: FC<StarterTemplatesPageViewProps> = ({
-  starterTemplatesByTag,
-  error,
-}) => {
-  const [urlParams] = useSearchParams();
-  const tags = starterTemplatesByTag
-    ? selectTags(starterTemplatesByTag)
-    : undefined;
-  const activeTag = urlParams.get("tag") ?? "all";
-  const visibleTemplates = starterTemplatesByTag
-    ? starterTemplatesByTag[activeTag]
-    : undefined;
-
-  return (
-    <Margins>
-      <PageHeader>
-        <PageHeaderTitle>Starter Templates</PageHeaderTitle>
-        <PageHeaderSubtitle>
-          Import a built-in template to start developing in the cloud
-        </PageHeaderSubtitle>
-      </PageHeader>
-
-      {Boolean(error) && <ErrorAlert error={error} />}
-
-      {Boolean(!starterTemplatesByTag) && <Loader />}
-
-      <Stack direction="row" spacing={4} alignItems="flex-start">
-        {starterTemplatesByTag && tags && (
-          <Stack
-            css={{ width: 208, flexShrink: 0, position: "sticky", top: 48 }}
-          >
-            <span css={styles.filterCaption}>Filter</span>
-            {tags.map((tag) => (
-              <Link
-                key={tag}
-                to={`?tag=${tag}`}
-                css={[
-                  styles.tagLink,
-                  tag === activeTag && styles.tagLinkActive,
-                ]}
-              >
-                {getTagLabel(tag)} ({starterTemplatesByTag[tag].length})
-              </Link>
-            ))}
-          </Stack>
-        )}
-
-        <div
-          css={{
-            display: "flex",
-            flexWrap: "wrap",
-            gap: 32,
-            height: "max-content",
-          }}
-        >
-          {visibleTemplates &&
-            visibleTemplates.map((example) => (
-              <TemplateExampleCard
-                css={(theme) => ({
-                  backgroundColor: theme.palette.background.paper,
-                })}
-                example={example}
-                key={example.id}
-                activeTag={activeTag}
-              />
-            ))}
-        </div>
-      </Stack>
-    </Margins>
-  );
-};
-
-const styles = {
-  filterCaption: (theme) => ({
-    textTransform: "uppercase",
-    fontWeight: 600,
-    fontSize: 12,
-    color: theme.palette.text.secondary,
-    letterSpacing: "0.1em",
-  }),
-
-  tagLink: (theme) => ({
-    color: theme.palette.text.secondary,
-    textDecoration: "none",
-    fontSize: 14,
-    textTransform: "capitalize",
-
-    "&:hover": {
-      color: theme.palette.text.primary,
-    },
-  }),
-
-  tagLinkActive: (theme) => ({
-    color: theme.palette.text.primary,
-    fontWeight: 600,
-  }),
-} satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.tsx b/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.tsx
index f8273df9c79d4..fba943daf15be 100644
--- a/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.tsx
+++ b/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.tsx
@@ -14,7 +14,7 @@ export default function TemplateDocsPage() {
   return (
     <>
       <Helmet>
-        <title>{pageTitle(`${template.name} · Documentation`)}</title>
+        <title>{pageTitle(template.name, "Documentation")}</title>
       </Helmet>
 
       <div
diff --git a/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.test.tsx b/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.test.tsx
index d2867a80085b6..29ec2325fa145 100644
--- a/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.test.tsx
+++ b/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.test.tsx
@@ -23,8 +23,8 @@ test("Users can fill the parameters and copy the open in coder url", async () =>
       <TemplateEmbedPage />
     </TemplateLayout>,
     {
-      route: `/templates/${MockTemplate.name}/embed`,
-      path: "/templates/:template/embed",
+      route: `/templates/${MockTemplate.organization_name}/${MockTemplate.name}/embed`,
+      path: "/templates/:organization/:template/embed",
     },
   );
   await waitForLoaderToBeRemoved();
@@ -47,6 +47,6 @@ test("Users can fill the parameters and copy the open in coder url", async () =>
   const copyButton = screen.getByRole("button", { name: /copy/i });
   await userEvent.click(copyButton);
   expect(window.navigator.clipboard.writeText).toBeCalledWith(
-    `[![Open in Coder](http://localhost/open-in-coder.svg)](http://localhost/templates/test-template/workspace?mode=manual&param.first_parameter=firstParameterValue&param.second_parameter=123456)`,
+    `[![Open in Coder](http://localhost/open-in-coder.svg)](http://localhost/templates/${MockTemplate.organization_name}/${MockTemplate.name}/workspace?mode=manual&param.first_parameter=firstParameterValue&param.second_parameter=123456)`,
   );
 });
diff --git a/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx b/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx
index 643f9c166fb7b..ee120bf290afd 100644
--- a/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx
+++ b/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx
@@ -31,7 +31,7 @@ const TemplateEmbedPage: FC = () => {
   return (
     <>
       <Helmet>
-        <title>{pageTitle(`${template.name} · Embed`)}</title>
+        <title>{pageTitle(template.name)}</title>
       </Helmet>
       <TemplateEmbedPageView
         template={template}
@@ -50,10 +50,11 @@ interface TemplateEmbedPageViewProps {
 
 function getClipboardCopyContent(
   templateName: string,
+  organization: string,
   buttonValues: ButtonValues | undefined,
 ): string {
   const deploymentUrl = `${window.location.protocol}//${window.location.host}`;
-  const createWorkspaceUrl = `${deploymentUrl}/templates/${templateName}/workspace`;
+  const createWorkspaceUrl = `${deploymentUrl}/templates/${organization}/${templateName}/workspace`;
   const createWorkspaceParams = new URLSearchParams(buttonValues);
   const buttonUrl = `${createWorkspaceUrl}?${createWorkspaceParams.toString()}`;
 
@@ -66,7 +67,11 @@ export const TemplateEmbedPageView: FC<TemplateEmbedPageViewProps> = ({
 }) => {
   const [buttonValues, setButtonValues] = useState<ButtonValues | undefined>();
   const clipboard = useClipboard({
-    textToCopy: getClipboardCopyContent(template.name, buttonValues),
+    textToCopy: getClipboardCopyContent(
+      template.name,
+      template.organization_name,
+      buttonValues,
+    ),
   });
 
   // template parameters is async so we need to initialize the values after it
@@ -88,7 +93,7 @@ export const TemplateEmbedPageView: FC<TemplateEmbedPageViewProps> = ({
   return (
     <>
       <Helmet>
-        <title>{pageTitle(`${template.name} · Embed`)}</title>
+        <title>{pageTitle(template.name)}</title>
       </Helmet>
       {!buttonValues || !templateParameters ? (
         <Loader />
diff --git a/site/src/pages/TemplatePage/TemplateFilesPage/TemplateFilesPage.tsx b/site/src/pages/TemplatePage/TemplateFilesPage/TemplateFilesPage.tsx
index 915241780c3fa..2a22129da766b 100644
--- a/site/src/pages/TemplatePage/TemplateFilesPage/TemplateFilesPage.tsx
+++ b/site/src/pages/TemplatePage/TemplateFilesPage/TemplateFilesPage.tsx
@@ -1,15 +1,17 @@
 import type { FC } from "react";
 import { Helmet } from "react-helmet-async";
 import { useQuery } from "react-query";
+import { useParams } from "react-router-dom";
 import { previousTemplateVersion, templateFiles } from "api/queries/templates";
 import { Loader } from "components/Loader/Loader";
-import { useDashboard } from "modules/dashboard/useDashboard";
 import { TemplateFiles } from "modules/templates/TemplateFiles/TemplateFiles";
 import { useTemplateLayoutContext } from "pages/TemplatePage/TemplateLayout";
 import { getTemplatePageTitle } from "../utils";
 
 const TemplateFilesPage: FC = () => {
-  const { organizationId } = useDashboard();
+  const { organization: organizationId = "default" } = useParams() as {
+    organization: string;
+  };
   const { template, activeVersion } = useTemplateLayoutContext();
   const { data: currentFiles } = useQuery(
     templateFiles(activeVersion.job.file_id),
@@ -35,10 +37,11 @@ const TemplateFilesPage: FC = () => {
 
       {shouldDisplayFiles ? (
         <TemplateFiles
+          organizationName={template.organization_name}
+          templateName={template.name}
+          versionName={activeVersion.name}
           currentFiles={currentFiles}
           baseFiles={previousFiles}
-          versionName={activeVersion.name}
-          templateName={template.name}
         />
       ) : (
         <Loader />
diff --git a/site/src/pages/TemplatePage/TemplateLayout.tsx b/site/src/pages/TemplatePage/TemplateLayout.tsx
index bd53a6dc39052..00e4aeaf9ef1a 100644
--- a/site/src/pages/TemplatePage/TemplateLayout.tsx
+++ b/site/src/pages/TemplatePage/TemplateLayout.tsx
@@ -13,7 +13,6 @@ import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { Loader } from "components/Loader/Loader";
 import { Margins } from "components/Margins/Margins";
 import { TAB_PADDING_Y, TabLink, Tabs, TabsList } from "components/Tabs/Tabs";
-import { useDashboard } from "modules/dashboard/useDashboard";
 import { TemplatePageHeader } from "./TemplatePageHeader";
 
 const templatePermissions = (
@@ -72,15 +71,18 @@ export const TemplateLayout: FC<PropsWithChildren> = ({
   children = <Outlet />,
 }) => {
   const navigate = useNavigate();
-  const { organizationId } = useDashboard();
-  const { template: templateName } = useParams() as { template: string };
+  const { template: templateName, organization: organizationId = "default" } =
+    useParams() as {
+      template: string;
+      organization: string;
+    };
   const { data, error, isLoading } = useQuery({
     queryKey: ["template", templateName],
     queryFn: () => fetchTemplate(organizationId, templateName),
   });
   const location = useLocation();
   const paths = location.pathname.split("/");
-  const activeTab = paths[3] ?? "summary";
+  const activeTab = paths.at(-1) === templateName ? "summary" : paths.at(-1)!;
   // Auditors should also be able to view insights, but do not automatically
   // have permission to update templates. Need both checks.
   const shouldShowInsights =
@@ -115,31 +117,25 @@ export const TemplateLayout: FC<PropsWithChildren> = ({
       >
         <Margins>
           <TabsList>
-            <TabLink to={`/templates/${templateName}`} value="summary">
+            <TabLink to="" value="summary">
               Summary
             </TabLink>
-            <TabLink to={`/templates/${templateName}/docs`} value="docs">
+            <TabLink to="docs" value="docs">
               Docs
             </TabLink>
             {data.permissions.canUpdateTemplate && (
-              <TabLink to={`/templates/${templateName}/files`} value="files">
+              <TabLink to="files" value="files">
                 Source Code
               </TabLink>
             )}
-            <TabLink
-              to={`/templates/${templateName}/versions`}
-              value="versions"
-            >
+            <TabLink to="versions" value="versions">
               Versions
             </TabLink>
-            <TabLink to={`/templates/${templateName}/embed`} value="embed">
+            <TabLink to="embed" value="embed">
               Embed
             </TabLink>
             {shouldShowInsights && (
-              <TabLink
-                to={`/templates/${templateName}/insights`}
-                value="insights"
-              >
+              <TabLink to="insights" value="insights">
                 Insights
               </TabLink>
             )}
diff --git a/site/src/pages/TemplatePage/TemplatePageHeader.stories.tsx b/site/src/pages/TemplatePage/TemplatePageHeader.stories.tsx
index e17651d3b5427..b11f4cab1ebb7 100644
--- a/site/src/pages/TemplatePage/TemplatePageHeader.stories.tsx
+++ b/site/src/pages/TemplatePage/TemplatePageHeader.stories.tsx
@@ -1,10 +1,12 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { MockTemplate, MockTemplateVersion } from "testHelpers/entities";
+import { withDashboardProvider } from "testHelpers/storybook";
 import { TemplatePageHeader } from "./TemplatePageHeader";
 
 const meta: Meta<typeof TemplatePageHeader> = {
   title: "pages/TemplatePage/TemplatePageHeader",
   component: TemplatePageHeader,
+  decorators: [withDashboardProvider],
   args: {
     template: MockTemplate,
     activeVersion: MockTemplateVersion,
diff --git a/site/src/pages/TemplatePage/TemplatePageHeader.tsx b/site/src/pages/TemplatePage/TemplatePageHeader.tsx
index 7b74d2924da69..0f0c2097ad029 100644
--- a/site/src/pages/TemplatePage/TemplatePageHeader.tsx
+++ b/site/src/pages/TemplatePage/TemplatePageHeader.tsx
@@ -33,9 +33,11 @@ import {
 } from "components/PageHeader/PageHeader";
 import { Pill } from "components/Pill/Pill";
 import { Stack } from "components/Stack/Stack";
+import { linkToTemplate, useLinks } from "modules/navigation";
 import { useDeletionDialogState } from "./useDeletionDialogState";
 
 type TemplateMenuProps = {
+  organizationName: string;
   templateName: string;
   templateVersion: string;
   templateId: string;
@@ -43,6 +45,7 @@ type TemplateMenuProps = {
 };
 
 const TemplateMenu: FC<TemplateMenuProps> = ({
+  organizationName,
   templateName,
   templateVersion,
   templateId,
@@ -50,6 +53,7 @@ const TemplateMenu: FC<TemplateMenuProps> = ({
 }) => {
   const dialogState = useDeletionDialogState(templateId, onDelete);
   const navigate = useNavigate();
+  const getLink = useLinks();
   const queryText = `template:${templateName}`;
   const workspaceCountQuery = useQuery({
     ...workspaces({ q: queryText }),
@@ -57,6 +61,8 @@ const TemplateMenu: FC<TemplateMenuProps> = ({
   });
   const safeToDeleteTemplate = workspaceCountQuery.data === 0;
 
+  const templateLink = getLink(linkToTemplate(organizationName, templateName));
+
   return (
     <>
       <MoreMenu>
@@ -66,7 +72,7 @@ const TemplateMenu: FC<TemplateMenuProps> = ({
         <MoreMenuContent>
           <MoreMenuItem
             onClick={() => {
-              navigate(`/templates/${templateName}/settings`);
+              navigate(`${templateLink}/settings`);
             }}
           >
             <SettingsIcon />
@@ -75,9 +81,7 @@ const TemplateMenu: FC<TemplateMenuProps> = ({
 
           <MoreMenuItem
             onClick={() => {
-              navigate(
-                `/templates/${templateName}/versions/${templateVersion}/edit`,
-              );
+              navigate(`${templateLink}/versions/${templateVersion}/edit`);
             }}
           >
             <EditIcon />
@@ -86,7 +90,7 @@ const TemplateMenu: FC<TemplateMenuProps> = ({
 
           <MoreMenuItem
             onClick={() => {
-              navigate(`/templates/new?fromTemplate=${templateName}`);
+              navigate(`/templates/new?fromTemplate=${templateId}`);
             }}
           >
             <CopyIcon />
@@ -165,7 +169,11 @@ export const TemplatePageHeader: FC<TemplatePageHeaderProps> = ({
   permissions,
   onDeleteTemplate,
 }) => {
+  const getLink = useLinks();
   const hasIcon = template.icon && template.icon !== "";
+  const templateLink = getLink(
+    linkToTemplate(template.organization_name, template.name),
+  );
 
   return (
     <Margins>
@@ -177,7 +185,7 @@ export const TemplatePageHeader: FC<TemplatePageHeaderProps> = ({
                 variant="contained"
                 startIcon={<AddIcon />}
                 component={RouterLink}
-                to={`/templates/${template.name}/workspace`}
+                to={`${templateLink}/workspace`}
               >
                 Create Workspace
               </Button>
@@ -185,9 +193,10 @@ export const TemplatePageHeader: FC<TemplatePageHeaderProps> = ({
 
             {permissions.canUpdateTemplate && (
               <TemplateMenu
-                templateVersion={activeVersion.name}
-                templateName={template.name}
+                organizationName={template.organization_name}
                 templateId={template.id}
+                templateName={template.name}
+                templateVersion={activeVersion.name}
                 onDelete={onDeleteTemplate}
               />
             )}
diff --git a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx b/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx
index fcf662ea2dc48..eba1e7c5f28ac 100644
--- a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx
+++ b/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx
@@ -28,7 +28,7 @@ export const TemplateSummaryPageView: FC<TemplateSummaryPageViewProps> = ({
     if (location.hash === "#readme") {
       // We moved the readme to the docs page, but we known that some users
       // have bookmarked the readme or linked it elsewhere. Redirect them to the docs page.
-      navigate(`/templates/${template.name}/docs`, { replace: true });
+      navigate("docs", { replace: true });
     }
   }, [template, navigate, location]);
 
diff --git a/site/src/pages/TemplateSettingsPage/Sidebar.tsx b/site/src/pages/TemplateSettingsPage/Sidebar.tsx
index c2c22bb75a90e..f136882239578 100644
--- a/site/src/pages/TemplateSettingsPage/Sidebar.tsx
+++ b/site/src/pages/TemplateSettingsPage/Sidebar.tsx
@@ -10,12 +10,15 @@ import {
   SidebarHeader,
   SidebarNavItem,
 } from "components/Sidebar/Sidebar";
+import { linkToTemplate, useLinks } from "modules/navigation";
 
 interface SidebarProps {
   template: Template;
 }
 
 export const Sidebar: FC<SidebarProps> = ({ template }) => {
+  const getLink = useLinks();
+
   return (
     <BaseSidebar>
       <SidebarHeader
@@ -23,7 +26,9 @@ export const Sidebar: FC<SidebarProps> = ({ template }) => {
           <ExternalAvatar src={template.icon} variant="square" fitImage />
         }
         title={template.display_name || template.name}
-        linkTo={`/templates/${template.name}`}
+        linkTo={getLink(
+          linkToTemplate(template.organization_name, template.name),
+        )}
         subtitle={template.name}
       />
 
diff --git a/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsPage.tsx b/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsPage.tsx
index 674505afd89e0..7418f36501882 100644
--- a/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsPage.tsx
+++ b/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsPage.tsx
@@ -7,6 +7,7 @@ import { templateByNameKey } from "api/queries/templates";
 import type { UpdateTemplateMeta } from "api/typesGenerated";
 import { displaySuccess } from "components/GlobalSnackbar/utils";
 import { useDashboard } from "modules/dashboard/useDashboard";
+import { linkToTemplate, useLinks } from "modules/navigation";
 import { pageTitle } from "utils/page";
 import { useTemplateSettings } from "../TemplateSettingsLayout";
 import { TemplateSettingsPageView } from "./TemplateSettingsPageView";
@@ -14,9 +15,10 @@ import { TemplateSettingsPageView } from "./TemplateSettingsPageView";
 export const TemplateSettingsPage: FC = () => {
   const { template: templateName } = useParams() as { template: string };
   const navigate = useNavigate();
+  const getLink = useLinks();
   const { template } = useTemplateSettings();
   const queryClient = useQueryClient();
-  const { entitlements, organizationId } = useDashboard();
+  const { entitlements } = useDashboard();
   const accessControlEnabled = entitlements.features.access_control.enabled;
   const advancedSchedulingEnabled =
     entitlements.features.advanced_template_scheduling.enabled;
@@ -43,11 +45,11 @@ export const TemplateSettingsPage: FC = () => {
           //
           // we use data.name because an admin may have updated templateName to something new
           await queryClient.invalidateQueries(
-            templateByNameKey(organizationId, data.name),
+            templateByNameKey(template.organization_name, data.name),
           );
         }
         displaySuccess("Template updated successfully");
-        navigate(`/templates/${data.name}`);
+        navigate(getLink(linkToTemplate(data.organization_name, data.name)));
       },
     },
   );
@@ -55,14 +57,16 @@ export const TemplateSettingsPage: FC = () => {
   return (
     <>
       <Helmet>
-        <title>{pageTitle([template.name, "General Settings"])}</title>
+        <title>{pageTitle(template.name, "General Settings")}</title>
       </Helmet>
       <TemplateSettingsPageView
         isSubmitting={isSubmitting}
         template={template}
         submitError={submitError}
         onCancel={() => {
-          navigate(`/templates/${templateName}`);
+          navigate(
+            getLink(linkToTemplate(template.organization_name, templateName)),
+          );
         }}
         onSubmit={(templateSettings) => {
           updateTemplate({
diff --git a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPage.tsx b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPage.tsx
index 6af149bd20462..fa6cdbc98801c 100644
--- a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPage.tsx
+++ b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPage.tsx
@@ -27,7 +27,7 @@ export const TemplatePermissionsPage: FC = () => {
   return (
     <>
       <Helmet>
-        <title>{pageTitle([template.name, "Permissions"])}</title>
+        <title>{pageTitle(template.name, "Permissions")}</title>
       </Helmet>
       {!isTemplateRBACEnabled ? (
         <Paywall
diff --git a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateSchedulePage.tsx b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateSchedulePage.tsx
index 45f87bdda5a5b..cf95bf3ba1422 100644
--- a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateSchedulePage.tsx
+++ b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateSchedulePage.tsx
@@ -16,7 +16,10 @@ const TemplateSchedulePage: FC = () => {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
   const { template } = useTemplateSettings();
-  const { entitlements, organizationId } = useDashboard();
+  const { entitlements } = useDashboard();
+  const { organization: organizationId = "default" } = useParams() as {
+    organization: string;
+  };
   const allowAdvancedScheduling =
     entitlements.features["advanced_template_scheduling"].enabled;
 
@@ -42,7 +45,7 @@ const TemplateSchedulePage: FC = () => {
   return (
     <>
       <Helmet>
-        <title>{pageTitle([template.name, "Schedule"])}</title>
+        <title>{pageTitle(template.name, "Schedule")}</title>
       </Helmet>
       <TemplateSchedulePageView
         allowAdvancedScheduling={allowAdvancedScheduling}
@@ -50,7 +53,7 @@ const TemplateSchedulePage: FC = () => {
         template={template}
         submitError={submitError}
         onCancel={() => {
-          navigate(`/templates/${templateName}`);
+          navigate(`/templates/${organizationId}/${templateName}`);
         }}
         onSubmit={(templateScheduleSettings) => {
           updateTemplate({
diff --git a/site/src/pages/TemplateSettingsPage/TemplateSettingsLayout.tsx b/site/src/pages/TemplateSettingsPage/TemplateSettingsLayout.tsx
index 8e157dac3bd95..57ed629ea0684 100644
--- a/site/src/pages/TemplateSettingsPage/TemplateSettingsLayout.tsx
+++ b/site/src/pages/TemplateSettingsPage/TemplateSettingsLayout.tsx
@@ -9,7 +9,6 @@ import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { Loader } from "components/Loader/Loader";
 import { Margins } from "components/Margins/Margins";
 import { Stack } from "components/Stack/Stack";
-import { useDashboard } from "modules/dashboard/useDashboard";
 import { pageTitle } from "utils/page";
 import { Sidebar } from "./Sidebar";
 
@@ -27,9 +26,14 @@ export function useTemplateSettings() {
 }
 
 export const TemplateSettingsLayout: FC = () => {
-  const { organizationId } = useDashboard();
-  const { template: templateName } = useParams() as { template: string };
-  const templateQuery = useQuery(templateByName(organizationId, templateName));
+  const { organization: organizationName = "default", template: templateName } =
+    useParams() as {
+      organization: string;
+      template: string;
+    };
+  const templateQuery = useQuery(
+    templateByName(organizationName, templateName),
+  );
   const permissionsQuery = useQuery({
     ...checkAuthorization({
       checks: {
@@ -52,7 +56,7 @@ export const TemplateSettingsLayout: FC = () => {
   return (
     <>
       <Helmet>
-        <title>{pageTitle([templateName, "Settings"])}</title>
+        <title>{pageTitle(templateName, "Settings")}</title>
       </Helmet>
 
       <Margins>
diff --git a/site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPage.tsx b/site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPage.tsx
index e717e24a2aab5..830186a379d13 100644
--- a/site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPage.tsx
+++ b/site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPage.tsx
@@ -16,17 +16,15 @@ import type {
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { displaySuccess } from "components/GlobalSnackbar/utils";
 import { Loader } from "components/Loader/Loader";
-import { useDashboard } from "modules/dashboard/useDashboard";
 import { pageTitle } from "utils/page";
 import { useTemplateSettings } from "../TemplateSettingsLayout";
 import { TemplateVariablesPageView } from "./TemplateVariablesPageView";
 
 export const TemplateVariablesPage: FC = () => {
-  const { template: templateName } = useParams() as {
+  const { organization = "default", template: templateName } = useParams() as {
     organization: string;
     template: string;
   };
-  const { organizationId } = useDashboard();
   const { template } = useTemplateSettings();
   const navigate = useNavigate();
   const queryClient = useQueryClient();
@@ -50,7 +48,7 @@ export const TemplateVariablesPage: FC = () => {
     mutateAsync: sendCreateAndBuildTemplateVersion,
     error: buildError,
     isLoading: isBuilding,
-  } = useMutation(createAndBuildTemplateVersion(organizationId));
+  } = useMutation(createAndBuildTemplateVersion(organization));
   const {
     mutateAsync: sendUpdateActiveTemplateVersion,
     error: publishError,
@@ -87,7 +85,7 @@ export const TemplateVariablesPage: FC = () => {
   return (
     <>
       <Helmet>
-        <title>{pageTitle([template.name, "Template variables"])}</title>
+        <title>{pageTitle(template.name, "Template variables")}</title>
       </Helmet>
 
       <TemplateVariablesPageView
@@ -99,7 +97,7 @@ export const TemplateVariablesPage: FC = () => {
           publishError,
         }}
         onCancel={() => {
-          navigate(`/templates/${templateName}`);
+          navigate(`/templates/${organization}/${templateName}`);
         }}
         onSubmit={async (formData) => {
           const request = filterEmptySensitiveVariables(formData, variables);
diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.stories.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.stories.tsx
index 853f41d2ed360..39729cf491998 100644
--- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.stories.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.stories.tsx
@@ -16,15 +16,17 @@ import {
   MockWorkspaceResourceSensitive,
   MockWorkspaceVolumeResource,
 } from "testHelpers/entities";
+import { withDashboardProvider } from "testHelpers/storybook";
 import { TemplateVersionEditor } from "./TemplateVersionEditor";
 
 const meta: Meta<typeof TemplateVersionEditor> = {
   title: "pages/TemplateVersionEditor",
+  component: TemplateVersionEditor,
+  decorators: [withDashboardProvider],
   parameters: {
     chromatic,
     layout: "fullscreen",
   },
-  component: TemplateVersionEditor,
   args: {
     activePath: "main.tf",
     template: MockTemplate,
diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
index 955fde47d95f9..a284ff5ada7d8 100644
--- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
@@ -33,6 +33,7 @@ import {
   TopbarIconButton,
 } from "components/FullPageLayout/Topbar";
 import { Loader } from "components/Loader/Loader";
+import { linkToTemplate, useLinks } from "modules/navigation";
 import { isBinaryData } from "modules/templates/TemplateFiles/isBinaryData";
 import { TemplateFileTree } from "modules/templates/TemplateFiles/TemplateFileTree";
 import { TemplateResourcesTable } from "modules/templates/TemplateResourcesTable/TemplateResourcesTable";
@@ -117,6 +118,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
   activePath,
   onActivePathChange,
 }) => {
+  const getLink = useLinks();
   const theme = useTheme();
   const [selectedTab, setSelectedTab] = useState<Tab>(defaultTab);
   const [fileTree, setFileTree] = useState(defaultFileTree);
@@ -185,6 +187,9 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
   useLeaveSiteWarning(dirty);
 
   const canBuild = !isBuilding;
+  const templateLink = getLink(
+    linkToTemplate(template.organization_name, template.name),
+  );
 
   return (
     <>
@@ -198,10 +203,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
         >
           <div>
             <Tooltip title="Back to the template">
-              <TopbarIconButton
-                component={RouterLink}
-                to={`/templates/${template.name}`}
-              >
+              <TopbarIconButton component={RouterLink} to={templateLink}>
                 <ArrowBackOutlined />
               </TopbarIconButton>
             </Tooltip>
@@ -210,7 +212,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
           <TopbarData>
             <TopbarAvatar src={template.icon} />
             <RouterLink
-              to={`/templates/${template.name}`}
+              to={templateLink}
               css={{
                 color: theme.palette.text.primary,
                 textDecoration: "none",
diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx
index 2c3098aa82c10..a80afc99a9d50 100644
--- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx
@@ -18,7 +18,7 @@ import type {
 } from "api/typesGenerated";
 import { displayError } from "components/GlobalSnackbar/utils";
 import { Loader } from "components/Loader/Loader";
-import { useDashboard } from "modules/dashboard/useDashboard";
+import { linkToTemplate, useLinks } from "modules/navigation";
 import { useWatchVersionLogs } from "modules/templates/useWatchVersionLogs";
 import { type FileTree, traverse } from "utils/filetree";
 import { pageTitle } from "utils/page";
@@ -26,20 +26,25 @@ import { TarReader, TarWriter } from "utils/tar";
 import { createTemplateVersionFileTree } from "utils/templateVersion";
 import { TemplateVersionEditor } from "./TemplateVersionEditor";
 
-type Params = {
-  version: string;
-  template: string;
-};
-
 export const TemplateVersionEditorPage: FC = () => {
+  const getLink = useLinks();
   const queryClient = useQueryClient();
   const navigate = useNavigate();
-  const { version: versionName, template: templateName } =
-    useParams() as Params;
-  const { organizationId } = useDashboard();
-  const templateQuery = useQuery(templateByName(organizationId, templateName));
+  const {
+    organization: organizationName = "default",
+    template: templateName,
+    version: versionName,
+  } = useParams() as {
+    organization: string;
+    template: string;
+    version: string;
+  };
+  const [searchParams, setSearchParams] = useSearchParams();
+  const templateQuery = useQuery(
+    templateByName(organizationName, templateName),
+  );
   const templateVersionOptions = templateVersionByName(
-    organizationId,
+    organizationName,
     templateName,
     versionName,
   );
@@ -53,7 +58,7 @@ export const TemplateVersionEditorPage: FC = () => {
   const { data: activeTemplateVersion } = activeTemplateVersionQuery;
   const uploadFileMutation = useMutation(uploadFile());
   const createTemplateVersionMutation = useMutation(
-    createTemplateVersion(organizationId),
+    createTemplateVersion(organizationName),
   );
   const resourcesQuery = useQuery({
     ...resources(activeTemplateVersion?.id ?? ""),
@@ -75,7 +80,7 @@ export const TemplateVersionEditorPage: FC = () => {
     mutationFn: publishVersion,
     onSuccess: async () => {
       await queryClient.invalidateQueries(
-        templateByNameKey(organizationId, templateName),
+        templateByNameKey(organizationName, templateName),
       );
     },
   });
@@ -83,7 +88,6 @@ export const TemplateVersionEditorPage: FC = () => {
     useState<TemplateVersion>();
 
   // File navigation
-  const [searchParams, setSearchParams] = useSearchParams();
   // It can be undefined when a selected file is deleted
   const activePath: string | undefined =
     searchParams.get("path") ?? findInitialFile(fileTree ?? {});
@@ -98,7 +102,9 @@ export const TemplateVersionEditorPage: FC = () => {
 
   const navigateToVersion = (version: TemplateVersion) => {
     return navigate(
-      `/templates/${templateName}/versions/${version.name}/edit`,
+      `${getLink(linkToTemplate(organizationName, templateName))}/versions/${
+        version.name
+      }/edit`,
       { replace: true },
     );
   };
@@ -121,7 +127,7 @@ export const TemplateVersionEditorPage: FC = () => {
   return (
     <>
       <Helmet>
-        <title>{pageTitle(`${templateName} · Template Editor`)}</title>
+        <title>{pageTitle(templateName, "Template Editor")}</title>
       </Helmet>
 
       {!(templateQuery.data && activeTemplateVersion && fileTree) ? (
@@ -188,7 +194,7 @@ export const TemplateVersionEditorPage: FC = () => {
               params.set("version", publishedVersion.id);
             }
             navigate(
-              `/templates/${templateName}/workspace?${params.toString()}`,
+              `/templates/${organizationName}/${templateName}/workspace?${params.toString()}`,
             );
           }}
           isBuilding={
diff --git a/site/src/pages/TemplateVersionPage/TemplateVersionPage.tsx b/site/src/pages/TemplateVersionPage/TemplateVersionPage.tsx
index dba108caa750b..5fd027a06476c 100644
--- a/site/src/pages/TemplateVersionPage/TemplateVersionPage.tsx
+++ b/site/src/pages/TemplateVersionPage/TemplateVersionPage.tsx
@@ -9,26 +9,28 @@ import {
   templateVersionByName,
 } from "api/queries/templates";
 import { useAuthenticated } from "contexts/auth/RequireAuth";
-import { useDashboard } from "modules/dashboard/useDashboard";
 import { pageTitle } from "utils/page";
 import TemplateVersionPageView from "./TemplateVersionPageView";
 
-type Params = {
-  version: string;
-  template: string;
-};
-
 export const TemplateVersionPage: FC = () => {
-  const { version: versionName, template: templateName } =
-    useParams() as Params;
-  const { organizationId } = useDashboard();
+  const {
+    organization: organizationName = "default",
+    template: templateName,
+    version: versionName,
+  } = useParams() as {
+    organization: string;
+    template: string;
+    version: string;
+  };
 
   /**
    * Template version files
    */
-  const templateQuery = useQuery(templateByName(organizationId, templateName));
+  const templateQuery = useQuery(
+    templateByName(organizationName, templateName),
+  );
   const selectedVersionQuery = useQuery(
-    templateVersionByName(organizationId, templateName, versionName),
+    templateVersionByName(organizationName, templateName, versionName),
   );
   const selectedVersionFilesQuery = useQuery({
     ...templateFiles(selectedVersionQuery.data?.job.file_id ?? ""),
@@ -49,15 +51,15 @@ export const TemplateVersionPage: FC = () => {
     const params = new URLSearchParams();
     if (versionId) {
       params.set("version", versionId);
-      return `/templates/${templateName}/workspace?${params.toString()}`;
+      return `/templates/${organizationName}/${templateName}/workspace?${params.toString()}`;
     }
     return undefined;
-  }, [templateName, versionId]);
+  }, [templateName, versionId, organizationName]);
 
   return (
     <>
       <Helmet>
-        <title>{pageTitle(`Version ${versionName} · ${templateName}`)}</title>
+        <title>{pageTitle(versionName, templateName)}</title>
       </Helmet>
 
       <TemplateVersionPageView
@@ -73,6 +75,7 @@ export const TemplateVersionPage: FC = () => {
         baseFiles={activeVersionFilesQuery.data}
         versionName={versionName}
         templateName={templateName}
+        organizationName={organizationName}
         createWorkspaceUrl={
           permissions.updateTemplates ? createWorkspaceUrl : undefined
         }
diff --git a/site/src/pages/TemplateVersionPage/TemplateVersionPageView.stories.tsx b/site/src/pages/TemplateVersionPage/TemplateVersionPageView.stories.tsx
index 1d04cf599182d..edac3ed0368df 100644
--- a/site/src/pages/TemplateVersionPage/TemplateVersionPageView.stories.tsx
+++ b/site/src/pages/TemplateVersionPage/TemplateVersionPageView.stories.tsx
@@ -5,6 +5,7 @@ import {
   MockTemplateVersion,
   MockTemplateVersionWithMarkdownMessage,
 } from "testHelpers/entities";
+import { withDashboardProvider } from "testHelpers/storybook";
 import {
   TemplateVersionPageView,
   type TemplateVersionPageViewProps,
@@ -22,6 +23,7 @@ You can add instructions here
 \`\`\``;
 
 const defaultArgs: TemplateVersionPageViewProps = {
+  organizationName: MockTemplate.organization_name,
   templateName: MockTemplate.name,
   versionName: MockTemplateVersion.name,
   currentVersion: MockTemplateVersion,
@@ -37,6 +39,7 @@ const defaultArgs: TemplateVersionPageViewProps = {
 
 const meta: Meta<typeof TemplateVersionPageView> = {
   title: "pages/TemplateVersionPage",
+  decorators: [withDashboardProvider],
   component: TemplateVersionPageView,
   args: defaultArgs,
 };
diff --git a/site/src/pages/TemplateVersionPage/TemplateVersionPageView.tsx b/site/src/pages/TemplateVersionPage/TemplateVersionPageView.tsx
index c9de8562d59f6..cc4103ed06d62 100644
--- a/site/src/pages/TemplateVersionPage/TemplateVersionPageView.tsx
+++ b/site/src/pages/TemplateVersionPage/TemplateVersionPageView.tsx
@@ -14,14 +14,16 @@ import {
 } from "components/PageHeader/PageHeader";
 import { Stack } from "components/Stack/Stack";
 import { Stats, StatsItem } from "components/Stats/Stats";
+import { linkToTemplate, useLinks } from "modules/navigation";
 import { TemplateFiles } from "modules/templates/TemplateFiles/TemplateFiles";
 import { TemplateUpdateMessage } from "modules/templates/TemplateUpdateMessage";
 import { createDayString } from "utils/createDayString";
 import type { TemplateVersionFiles } from "utils/templateVersion";
 
 export interface TemplateVersionPageViewProps {
-  versionName: string;
+  organizationName: string;
   templateName: string;
+  versionName: string;
   createWorkspaceUrl?: string;
   error: unknown;
   currentVersion: TemplateVersion | undefined;
@@ -30,14 +32,18 @@ export interface TemplateVersionPageViewProps {
 }
 
 export const TemplateVersionPageView: FC<TemplateVersionPageViewProps> = ({
-  versionName,
+  organizationName,
   templateName,
+  versionName,
   createWorkspaceUrl,
   currentVersion,
   currentFiles,
   baseFiles,
   error,
 }) => {
+  const getLink = useLinks();
+  const templateLink = getLink(linkToTemplate(organizationName, templateName));
+
   return (
     <Margins>
       <PageHeader
@@ -56,7 +62,7 @@ export const TemplateVersionPageView: FC<TemplateVersionPageViewProps> = ({
             <Button
               startIcon={<EditIcon />}
               component={RouterLink}
-              to={`/templates/${templateName}/versions/${versionName}/edit`}
+              to={`${templateLink}/versions/${versionName}/edit`}
             >
               Edit
             </Button>
@@ -82,9 +88,7 @@ export const TemplateVersionPageView: FC<TemplateVersionPageViewProps> = ({
               <StatsItem
                 label="Template"
                 value={
-                  <RouterLink to={`/templates/${templateName}`}>
-                    {templateName}
-                  </RouterLink>
+                  <RouterLink to={templateLink}>{templateName}</RouterLink>
                 }
               />
               <StatsItem
@@ -98,10 +102,11 @@ export const TemplateVersionPageView: FC<TemplateVersionPageViewProps> = ({
             </Stats>
 
             <TemplateFiles
-              currentFiles={currentFiles}
-              baseFiles={baseFiles}
+              organizationName={organizationName}
               templateName={templateName}
               versionName={versionName}
+              currentFiles={currentFiles}
+              baseFiles={baseFiles}
             />
           </>
         )}
diff --git a/site/src/pages/TemplatesPage/CreateTemplateButton.stories.tsx b/site/src/pages/TemplatesPage/CreateTemplateButton.stories.tsx
deleted file mode 100644
index 4022fd3b07086..0000000000000
--- a/site/src/pages/TemplatesPage/CreateTemplateButton.stories.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { userEvent, screen } from "@storybook/test";
-import { CreateTemplateButton } from "./CreateTemplateButton";
-
-const meta: Meta<typeof CreateTemplateButton> = {
-  title: "pages/TemplatesPage/CreateTemplateButton",
-  component: CreateTemplateButton,
-};
-
-export default meta;
-type Story = StoryObj<typeof CreateTemplateButton>;
-
-export const Close: Story = {};
-
-export const Open: Story = {
-  play: async ({ step }) => {
-    const user = userEvent.setup();
-    await step("click on trigger", async () => {
-      await user.click(screen.getByRole("button"));
-    });
-  },
-};
diff --git a/site/src/pages/TemplatesPage/CreateTemplateButton.tsx b/site/src/pages/TemplatesPage/CreateTemplateButton.tsx
deleted file mode 100644
index f5b2b68a3e184..0000000000000
--- a/site/src/pages/TemplatesPage/CreateTemplateButton.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import AddIcon from "@mui/icons-material/AddOutlined";
-import Inventory2 from "@mui/icons-material/Inventory2";
-import NoteAddOutlined from "@mui/icons-material/NoteAddOutlined";
-import UploadOutlined from "@mui/icons-material/UploadOutlined";
-import Button from "@mui/material/Button";
-import type { FC } from "react";
-import {
-  MoreMenu,
-  MoreMenuContent,
-  MoreMenuItem,
-  MoreMenuTrigger,
-} from "components/MoreMenu/MoreMenu";
-
-type CreateTemplateButtonProps = {
-  onNavigate: (path: string) => void;
-};
-
-export const CreateTemplateButton: FC<CreateTemplateButtonProps> = ({
-  onNavigate,
-}) => {
-  return (
-    <MoreMenu>
-      <MoreMenuTrigger>
-        <Button startIcon={<AddIcon />} variant="contained">
-          Create Template
-        </Button>
-      </MoreMenuTrigger>
-      <MoreMenuContent>
-        <MoreMenuItem
-          onClick={() => {
-            onNavigate(`/templates/new?exampleId=scratch`);
-          }}
-        >
-          <NoteAddOutlined />
-          From scratch
-        </MoreMenuItem>
-        <MoreMenuItem
-          onClick={() => {
-            onNavigate("/templates/new");
-          }}
-        >
-          <UploadOutlined />
-          Upload template
-        </MoreMenuItem>
-        <MoreMenuItem
-          onClick={() => {
-            onNavigate("/starter-templates");
-          }}
-        >
-          <Inventory2 />
-          Choose a starter template
-        </MoreMenuItem>
-      </MoreMenuContent>
-    </MoreMenu>
-  );
-};
diff --git a/site/src/pages/TemplatesPage/TemplatesPage.test.tsx b/site/src/pages/TemplatesPage/TemplatesPage.test.tsx
index 670362416338b..535949b6d9dee 100644
--- a/site/src/pages/TemplatesPage/TemplatesPage.test.tsx
+++ b/site/src/pages/TemplatesPage/TemplatesPage.test.tsx
@@ -17,7 +17,7 @@ test("create template from scratch", async () => {
             element: <TemplatesPage />,
           },
           {
-            path: "/templates/new",
+            path: "/starter-templates",
             element: <div data-testid="new-template-page" />,
           },
         ],
@@ -34,9 +34,6 @@ test("create template from scratch", async () => {
     name: "Create Template",
   });
   await user.click(createTemplateButton);
-  const fromScratchMenuItem = await screen.findByText("From scratch");
-  await user.click(fromScratchMenuItem);
   await screen.findByTestId("new-template-page");
-  expect(router.state.location.pathname).toBe("/templates/new");
-  expect(router.state.location.search).toBe("?exampleId=scratch");
+  expect(router.state.location.pathname).toBe("/starter-templates");
 });
diff --git a/site/src/pages/TemplatesPage/TemplatesPage.tsx b/site/src/pages/TemplatesPage/TemplatesPage.tsx
index 75c98d5221320..a5bb98dfa44d2 100644
--- a/site/src/pages/TemplatesPage/TemplatesPage.tsx
+++ b/site/src/pages/TemplatesPage/TemplatesPage.tsx
@@ -13,7 +13,7 @@ export const TemplatesPage: FC = () => {
 
   const templatesQuery = useQuery(templates(organizationId));
   const examplesQuery = useQuery({
-    ...templateExamples(organizationId),
+    ...templateExamples("default"),
     enabled: permissions.createTemplates,
   });
   const error = templatesQuery.error || examplesQuery.error;
diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx
index 07aecdb173ae9..6267f899df651 100644
--- a/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx
+++ b/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx
@@ -6,10 +6,12 @@ import {
   MockTemplateExample,
   MockTemplateExample2,
 } from "testHelpers/entities";
+import { withDashboardProvider } from "testHelpers/storybook";
 import { TemplatesPageView } from "./TemplatesPageView";
 
 const meta: Meta<typeof TemplatesPageView> = {
   title: "pages/TemplatesPage",
+  decorators: [withDashboardProvider],
   parameters: { chromatic: chromaticWithTablet },
   component: TemplatesPageView,
 };
diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
index fd7be676da6cb..17092e2705ee7 100644
--- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx
+++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
@@ -1,4 +1,5 @@
 import type { Interpolation, Theme } from "@emotion/react";
+import AddIcon from "@mui/icons-material/AddOutlined";
 import ArrowForwardOutlined from "@mui/icons-material/ArrowForwardOutlined";
 import Button from "@mui/material/Button";
 import Skeleton from "@mui/material/Skeleton";
@@ -37,13 +38,13 @@ import {
   TableRowSkeleton,
 } from "components/TableLoader/TableLoader";
 import { useClickableTableRow } from "hooks/useClickableTableRow";
+import { linkToTemplate, useLinks } from "modules/navigation";
 import { createDayString } from "utils/createDayString";
 import { docs } from "utils/docs";
 import {
   formatTemplateBuildTime,
   formatTemplateActiveDevelopers,
 } from "utils/templates";
-import { CreateTemplateButton } from "./CreateTemplateButton";
 import { EmptyTemplates } from "./EmptyTemplates";
 
 export const Language = {
@@ -84,7 +85,10 @@ interface TemplateRowProps {
 }
 
 const TemplateRow: FC<TemplateRowProps> = ({ template }) => {
-  const templatePageLink = `/templates/${template.name}`;
+  const getLink = useLinks();
+  const templatePageLink = getLink(
+    linkToTemplate(template.organization_name, template.name),
+  );
   const hasIcon = template.icon && template.icon !== "";
   const navigate = useNavigate();
 
@@ -139,7 +143,7 @@ const TemplateRow: FC<TemplateRowProps> = ({ template }) => {
             title={`Create a workspace using the ${template.display_name} template`}
             onClick={(e) => {
               e.stopPropagation();
-              navigate(`/templates/${template.name}/workspace`);
+              navigate(`${templatePageLink}/workspace`);
             }}
           >
             Create Workspace
@@ -171,7 +175,17 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = ({
     <Margins>
       <PageHeader
         actions={
-          canCreateTemplates && <CreateTemplateButton onNavigate={navigate} />
+          canCreateTemplates && (
+            <Button
+              startIcon={<AddIcon />}
+              variant="contained"
+              onClick={() => {
+                navigate("/starter-templates");
+              }}
+            >
+              Create Template
+            </Button>
+          )
         }
       >
         <PageHeaderTitle>
diff --git a/site/src/pages/UsersPage/UsersLayout.tsx b/site/src/pages/UsersPage/UsersLayout.tsx
index 12ab40d409e15..3002c7bb7662f 100644
--- a/site/src/pages/UsersPage/UsersLayout.tsx
+++ b/site/src/pages/UsersPage/UsersLayout.tsx
@@ -15,7 +15,7 @@ import { TAB_PADDING_Y, TabLink, Tabs, TabsList } from "components/Tabs/Tabs";
 import { useAuthenticated } from "contexts/auth/RequireAuth";
 import { useDashboard } from "modules/dashboard/useDashboard";
 import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
-import { USERS_LINK } from "modules/navigation";
+import { linkToUsers } from "modules/navigation";
 
 export const UsersLayout: FC = () => {
   const { permissions } = useAuthenticated();
@@ -68,7 +68,7 @@ export const UsersLayout: FC = () => {
         >
           <Margins>
             <TabsList>
-              <TabLink to={USERS_LINK} value="users">
+              <TabLink to={linkToUsers} value="users">
                 Users
               </TabLink>
               <TabLink to="/groups" value="groups">
diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.stories.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.stories.tsx
index c50f1ac8dfffe..79ffc58480aff 100644
--- a/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.stories.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.stories.tsx
@@ -2,7 +2,10 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { userEvent, within, expect } from "@storybook/test";
 import { buildLogsKey, agentLogsKey } from "api/queries/workspaces";
 import * as Mocks from "testHelpers/entities";
-import { withDesktopViewport } from "testHelpers/storybook";
+import {
+  withDashboardProvider,
+  withDesktopViewport,
+} from "testHelpers/storybook";
 import { WorkspaceActions } from "./WorkspaceActions";
 
 const meta: Meta<typeof WorkspaceActions> = {
@@ -11,7 +14,7 @@ const meta: Meta<typeof WorkspaceActions> = {
   args: {
     isUpdating: false,
   },
-  decorators: [withDesktopViewport],
+  decorators: [withDashboardProvider, withDesktopViewport],
 };
 
 export default meta;
diff --git a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx
index d05f7c7c66453..5be32d251b696 100644
--- a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx
@@ -23,6 +23,7 @@ import { HelpTooltipContent } from "components/HelpTooltip/HelpTooltip";
 import { Popover, PopoverTrigger } from "components/Popover/Popover";
 import { UserAvatar } from "components/UserAvatar/UserAvatar";
 import { useDashboard } from "modules/dashboard/useDashboard";
+import { linkToTemplate, useLinks } from "modules/navigation";
 import { WorkspaceStatusBadge } from "modules/workspaces/WorkspaceStatusBadge/WorkspaceStatusBadge";
 import { displayDormantDeletion } from "utils/dormant";
 import type { WorkspacePermissions } from "./permissions";
@@ -86,6 +87,7 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
   latestVersion,
   permissions,
 }) => {
+  const getLink = useLinks();
   const theme = useTheme();
 
   // Quota
@@ -110,6 +112,10 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
     workspace.latest_build.status === "deleted" ||
     workspace.latest_build.status === "deleting";
 
+  const templateLink = getLink(
+    linkToTemplate(workspace.organization_name, workspace.template_name),
+  );
+
   return (
     <Topbar css={{ gridArea: "topbar" }}>
       <Tooltip title="Back to workspaces">
@@ -156,20 +162,14 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
             </PopoverTrigger>
 
             <HelpTooltipContent
-              anchorOrigin={{
-                vertical: "bottom",
-                horizontal: "center",
-              }}
-              transformOrigin={{
-                vertical: "top",
-                horizontal: "center",
-              }}
+              anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
+              transformOrigin={{ vertical: "top", horizontal: "center" }}
             >
               <AvatarData
                 title={
                   <Link
                     component={RouterLink}
-                    to={`/templates/${workspace.template_name}`}
+                    to={templateLink}
                     css={{ color: "inherit" }}
                   >
                     {workspace.template_display_name.length > 0
@@ -180,7 +180,7 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
                 subtitle={
                   <Link
                     component={RouterLink}
-                    to={`/templates/${workspace.template_name}/versions/${workspace.latest_build.template_version_name}`}
+                    to={`${templateLink}/versions/${workspace.latest_build.template_version_name}`}
                     css={{ color: "inherit" }}
                   >
                     {workspace.latest_build.template_version_name}
@@ -217,7 +217,7 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
             </TopbarIcon>
             <Link
               component={RouterLink}
-              to={`/templates/${workspace.template_name}/settings/schedule`}
+              to={`${templateLink}/settings/schedule`}
               title="Schedule settings"
               css={{ color: "inherit" }}
             >
diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.tsx
index 7da0fc203d401..168e5dfb0612f 100644
--- a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.tsx
+++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.tsx
@@ -62,7 +62,7 @@ const WorkspaceParametersPage: FC = () => {
   return (
     <>
       <Helmet>
-        <title>{pageTitle([workspace.name, "Parameters"])}</title>
+        <title>{pageTitle(workspace.name, "Parameters")}</title>
       </Helmet>
 
       <WorkspaceParametersPageView
diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx
index 79b14bec16184..b139fa10833cf 100644
--- a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx
+++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx
@@ -74,7 +74,7 @@ export const WorkspaceSchedulePage: FC = () => {
   return (
     <>
       <Helmet>
-        <title>{pageTitle([workspaceName, "Schedule"])}</title>
+        <title>{pageTitle(workspaceName, "Schedule")}</title>
       </Helmet>
       <PageHeader css={{ paddingTop: 0 }}>
         <PageHeaderTitle>Workspace Schedule</PageHeaderTitle>
diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsLayout.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsLayout.tsx
index 815275d8c4df0..bb86c644b9f0d 100644
--- a/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsLayout.tsx
+++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsLayout.tsx
@@ -45,7 +45,7 @@ export const WorkspaceSettingsLayout: FC = () => {
   return (
     <>
       <Helmet>
-        <title>{pageTitle([workspaceName, "Settings"])}</title>
+        <title>{pageTitle(workspaceName, "Settings")}</title>
       </Helmet>
 
       <Margins>
diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsPage.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsPage.tsx
index 09bf002fd7cb9..935f5d3a157ee 100644
--- a/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsPage.tsx
+++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsPage.tsx
@@ -38,7 +38,7 @@ const WorkspaceSettingsPage: FC = () => {
   return (
     <>
       <Helmet>
-        <title>{pageTitle([workspaceName, "Settings"])}</title>
+        <title>{pageTitle(workspaceName, "Settings")}</title>
       </Helmet>
 
       <WorkspaceSettingsPageView
diff --git a/site/src/pages/WorkspacesPage/WorkspacesButton.tsx b/site/src/pages/WorkspacesPage/WorkspacesButton.tsx
index 95df46d32316f..bd1e24852b067 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesButton.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesButton.tsx
@@ -19,6 +19,7 @@ import {
   PopoverTrigger,
 } from "components/Popover/Popover";
 import { SearchEmpty, searchStyles } from "components/Search/Search";
+import { linkToTemplate, useLinks } from "modules/navigation";
 
 const ICON_SIZE = 18;
 
@@ -125,9 +126,14 @@ interface WorkspaceResultsRowProps {
 }
 
 const WorkspaceResultsRow: FC<WorkspaceResultsRowProps> = ({ template }) => {
+  const getLink = useLinks();
+  const templateLink = getLink(
+    linkToTemplate(template.organization_name, template.name),
+  );
+
   return (
     <PopoverLink
-      to={`/templates/${template.name}/workspace`}
+      to={`${templateLink}/workspace`}
       css={{
         display: "flex",
         gap: 12,
diff --git a/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx b/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx
index bf877d580bc07..e865599e68446 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx
@@ -1,16 +1,25 @@
 import ArrowForwardOutlined from "@mui/icons-material/ArrowForwardOutlined";
 import Button from "@mui/material/Button";
+import type { FC } from "react";
 import { Link } from "react-router-dom";
 import type { Template } from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
 import { TableEmpty } from "components/TableEmpty/TableEmpty";
+import { linkToTemplate, useLinks } from "modules/navigation";
 
-export const WorkspacesEmpty = (props: {
+interface WorkspacesEmptyProps {
   isUsingFilter: boolean;
   templates?: Template[];
   canCreateTemplate: boolean;
+}
+
+export const WorkspacesEmpty: FC<WorkspacesEmptyProps> = ({
+  isUsingFilter,
+  templates,
+  canCreateTemplate,
 }) => {
-  const { isUsingFilter, templates, canCreateTemplate } = props;
+  const getLink = useLinks();
+
   const totalFeaturedTemplates = 6;
   const featuredTemplates = templates?.slice(0, totalFeaturedTemplates);
   const defaultTitle = "Create a workspace";
@@ -93,7 +102,9 @@ export const WorkspacesEmpty = (props: {
             {featuredTemplates?.map((t) => (
               <Link
                 key={t.id}
-                to={`/templates/${t.name}/workspace`}
+                to={`${getLink(
+                  linkToTemplate(t.organization_name, t.name),
+                )}/workspace`}
                 css={(theme) => ({
                   width: "320px",
                   padding: 16,
diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
index 4eb8c686f3bf7..0650d106d8b41 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
@@ -163,6 +163,7 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
                             )}
                             {workspace.outdated && (
                               <WorkspaceOutdatedTooltip
+                                organizationName={workspace.organization_name}
                                 templateName={workspace.template_name}
                                 latestVersionId={
                                   workspace.template_active_version_id
diff --git a/site/src/router.tsx b/site/src/router.tsx
index dea9995f52882..615d12969e184 100644
--- a/site/src/router.tsx
+++ b/site/src/router.tsx
@@ -168,8 +168,8 @@ const TemplateVersionPage = lazy(
 const TemplateVersionEditorPage = lazy(
   () => import("./pages/TemplateVersionEditorPage/TemplateVersionEditorPage"),
 );
-const StarterTemplatesPage = lazy(
-  () => import("./pages/StarterTemplatesPage/StarterTemplatesPage"),
+const CreateTemplatesGalleryPage = lazy(
+  () => import("./pages/CreateTemplatesGalleryPage/CreateTemplatesGalleryPage"),
 );
 const StarterTemplatePage = lazy(
   () => import("pages/StarterTemplatePage/StarterTemplatePage"),
@@ -271,6 +271,36 @@ const RoutesWithSuspense = () => {
   );
 };
 
+const templateRouter = () => {
+  return (
+    <Route path=":template">
+      <Route element={<TemplateLayout />}>
+        <Route index element={<TemplateSummaryPage />} />
+        <Route path="docs" element={<TemplateDocsPage />} />
+        <Route path="files" element={<TemplateFilesPage />} />
+        <Route path="versions" element={<TemplateVersionsPage />} />
+        <Route path="embed" element={<TemplateEmbedPage />} />
+        <Route path="insights" element={<TemplateInsightsPage />} />
+      </Route>
+
+      <Route path="workspace" element={<CreateWorkspacePage />} />
+
+      <Route path="settings" element={<TemplateSettingsLayout />}>
+        <Route index element={<TemplateSettingsPage />} />
+        <Route path="permissions" element={<TemplatePermissionsPage />} />
+        <Route path="variables" element={<TemplateVariablesPage />} />
+        <Route path="schedule" element={<TemplateSchedulePage />} />
+      </Route>
+
+      <Route path="versions">
+        <Route path=":version">
+          <Route index element={<TemplateVersionPage />} />
+        </Route>
+      </Route>
+    </Route>
+  );
+};
+
 const groupsRouter = () => {
   return (
     <Route path="groups">
@@ -305,41 +335,15 @@ export const router = createBrowserRouter(
           <Route path="/workspaces" element={<WorkspacesPage />} />
 
           <Route path="/starter-templates">
-            <Route index element={<StarterTemplatesPage />} />
+            <Route index element={<CreateTemplatesGalleryPage />} />
             <Route path=":exampleId" element={<StarterTemplatePage />} />
           </Route>
 
           <Route path="/templates">
             <Route index element={<TemplatesPage />} />
             <Route path="new" element={<CreateTemplatePage />} />
-            <Route path=":template">
-              <Route element={<TemplateLayout />}>
-                <Route index element={<TemplateSummaryPage />} />
-                <Route path="docs" element={<TemplateDocsPage />} />
-                <Route path="files" element={<TemplateFilesPage />} />
-                <Route path="versions" element={<TemplateVersionsPage />} />
-                <Route path="embed" element={<TemplateEmbedPage />} />
-                <Route path="insights" element={<TemplateInsightsPage />} />
-              </Route>
-
-              <Route path="workspace" element={<CreateWorkspacePage />} />
-
-              <Route path="settings" element={<TemplateSettingsLayout />}>
-                <Route index element={<TemplateSettingsPage />} />
-                <Route
-                  path="permissions"
-                  element={<TemplatePermissionsPage />}
-                />
-                <Route path="variables" element={<TemplateVariablesPage />} />
-                <Route path="schedule" element={<TemplateSchedulePage />} />
-              </Route>
-
-              <Route path="versions">
-                <Route path=":version">
-                  <Route index element={<TemplateVersionPage />} />
-                </Route>
-              </Route>
-            </Route>
+            <Route path=":organization">{templateRouter()}</Route>
+            {templateRouter()}
           </Route>
 
           <Route path="/users">
@@ -469,7 +473,7 @@ export const router = createBrowserRouter(
         {/* Pages that don't have the dashboard layout */}
         <Route path="/:username/:workspace" element={<WorkspacePage />} />
         <Route
-          path="/templates/:template/versions/:version/edit"
+          path="/templates/:organization/:template/versions/:version/edit"
           element={<TemplateVersionEditorPage />}
         />
         <Route
diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
index 0254093481f0d..6a2310bcad40e 100644
--- a/site/src/testHelpers/entities.ts
+++ b/site/src/testHelpers/entities.ts
@@ -549,8 +549,8 @@ export const MockTemplate: TypesGen.Template = {
   created_at: "2022-05-17T17:39:01.382927298Z",
   updated_at: "2022-05-18T17:39:01.382927298Z",
   organization_id: MockOrganization.id,
-  organization_name: "default",
-  organization_display_name: "Default",
+  organization_name: MockOrganization.name,
+  organization_display_name: MockOrganization.display_name,
   organization_icon: "/emojis/1f5fa.png",
   name: "test-template",
   display_name: "Test Template",
diff --git a/site/src/utils/page.ts b/site/src/utils/page.ts
index 965d27e0d712c..400ba046a7ec7 100644
--- a/site/src/utils/page.ts
+++ b/site/src/utils/page.ts
@@ -1,4 +1,3 @@
-export const pageTitle = (prefix: string | string[]): string => {
-  const title = Array.isArray(prefix) ? prefix.join(" · ") : prefix;
-  return `${title} - Coder`;
+export const pageTitle = (...crumbs: string[]): string => {
+  return [...crumbs, "Coder"].join(" - ");
 };