diff --git a/src/views/projects/BranchSelector.svelte b/src/views/projects/BranchSelector.svelte
index 2f35b96a5..64a23248a 100644
--- a/src/views/projects/BranchSelector.svelte
+++ b/src/views/projects/BranchSelector.svelte
@@ -1,30 +1,20 @@
 <script lang="ts" strictEvents>
   import * as utils from "@app/lib/utils";
-  import { parseRevisionToOid } from "@app/views/projects/router";
 
   import Dropdown from "@app/components/Dropdown.svelte";
   import DropdownItem from "@app/components/Dropdown/DropdownItem.svelte";
   import Floating from "@app/components/Floating.svelte";
   import ProjectLink from "@app/components/ProjectLink.svelte";
 
-  export let branches: Record<string, string>;
-  export let defaultBranch: string;
-  export let revision: string | undefined;
+  export let branches: Record<string, string> | undefined;
+  export let selectedBranch: string | undefined;
+  export let selectedCommitId: string;
 
-  let branchLabel: string | null = null;
-
-  $: branchList = Object.keys(branches)
+  $: branchList = Object.keys(branches || {})
     .sort()
     .map(b => ({ key: b, value: b, title: `Switch to ${b}`, badge: null }));
   $: showSelector = branchList.length > 1;
-  $: commit = parseRevisionToOid(revision, defaultBranch, branches);
-  $: if (revision && branches[revision]) {
-    branchLabel = revision;
-  } else if (commit === branches[defaultBranch]) {
-    branchLabel = defaultBranch;
-  } else {
-    branchLabel = null;
-  }
+  $: selectedCommitShortId = utils.formatCommit(selectedCommitId);
 </script>
 
 <style>
@@ -70,20 +60,22 @@
 <div class="commit" title="Current branch">
   <!-- Check for branches listing feature -->
   {#if branchList.length > 0}
-    {#if branchLabel}
+    {#if selectedBranch}
       <Floating disabled={!showSelector}>
         <div
           slot="toggle"
           title="Change branch"
           class="stat branch"
           class:not-allowed={!showSelector}>
-          {branchLabel}
+          {selectedBranch}
         </div>
         <svelte:fragment slot="modal">
           <Dropdown items={branchList}>
             <svelte:fragment slot="item" let:item>
               <ProjectLink projectParams={{ revision: item.value }} on:click>
-                <DropdownItem selected={item.value === branchLabel} size="tiny">
+                <DropdownItem
+                  selected={item.value === selectedBranch}
+                  size="tiny">
                   {item.value}
                 </DropdownItem>
               </ProjectLink>
@@ -92,30 +84,30 @@
         </svelte:fragment>
       </Floating>
       <div class="hash layout-desktop">
-        {utils.formatCommit(commit)}
+        {selectedCommitShortId}
       </div>
     {:else}
       <div class="unlabeled hash layout-desktop">
-        {commit}
+        {selectedCommitId}
       </div>
     {/if}
     <div class="hash layout-mobile">
-      {utils.formatCommit(commit)}
+      {selectedCommitShortId}
     </div>
     <!-- If there is no branch listing available, show default branch name if commit is head and else show entire commit -->
-  {:else if commit === branches[defaultBranch]}
+  {:else if selectedBranch}
     <div class="stat branch not-allowed">
-      {defaultBranch}
+      {selectedBranch}
     </div>
     <div class="hash">
-      {utils.formatCommit(commit)}
+      {selectedCommitShortId}
     </div>
   {:else}
     <div class="unlabeled hash layout-desktop">
-      {commit}
+      {selectedCommitId}
     </div>
     <div class="hash layout-mobile">
-      {utils.formatCommit(commit)}
+      {selectedCommitShortId}
     </div>
   {/if}
 </div>
diff --git a/src/views/projects/Browser.svelte b/src/views/projects/Browser.svelte
index df9cd6fbe..5b0154c46 100644
--- a/src/views/projects/Browser.svelte
+++ b/src/views/projects/Browser.svelte
@@ -14,7 +14,7 @@
   import TreeComponent from "./Tree.svelte";
 
   export let baseUrl: BaseUrl;
-  export let branches: Record<string, string>;
+  export let branches: Record<string, string> | undefined;
   export let commit: string;
   export let commitCount: number;
   export let contributorCount: number;
@@ -128,6 +128,7 @@
 </style>
 
 <SourceBrowsingHeader
+  commitId={tree.lastCommit.id}
   defaultBranch={project.defaultBranch}
   projectId={project.id}
   {baseUrl}
diff --git a/src/views/projects/Commit.svelte b/src/views/projects/Commit.svelte
index dee7149fd..29fff9bd0 100644
--- a/src/views/projects/Commit.svelte
+++ b/src/views/projects/Commit.svelte
@@ -11,7 +11,7 @@
   import SourceBrowsingHeader from "./SourceBrowsingHeader.svelte";
 
   export let baseUrl: BaseUrl;
-  export let branches: Record<string, string>;
+  export let branches: Record<string, string> | undefined;
   export let commit: Commit;
   export let commitCount: number;
   export let contributorCount: number;
@@ -61,6 +61,7 @@
 <SourceBrowsingHeader
   defaultBranch={project.defaultBranch}
   projectId={project.id}
+  commitId={commit.commit.id}
   {baseUrl}
   {branches}
   {commitCount}
diff --git a/src/views/projects/History.svelte b/src/views/projects/History.svelte
index 9437145bf..6b44a1dc3 100644
--- a/src/views/projects/History.svelte
+++ b/src/views/projects/History.svelte
@@ -13,7 +13,7 @@
   import { COMMITS_PER_PAGE } from "./router";
 
   export let baseUrl: BaseUrl;
-  export let branches: Record<string, string>;
+  export let branches: Record<string, string> | undefined;
   export let commitCount: number;
   export let commitHeaders: CommitHeader[];
   export let contributorCount: number;
@@ -85,6 +85,7 @@
 <SourceBrowsingHeader
   defaultBranch={project.defaultBranch}
   projectId={project.id}
+  commitId={commitHeaders[0].id}
   {baseUrl}
   {branches}
   {commitCount}
diff --git a/src/views/projects/SourceBrowsingHeader.svelte b/src/views/projects/SourceBrowsingHeader.svelte
index 6c8e7bd33..d46944961 100644
--- a/src/views/projects/SourceBrowsingHeader.svelte
+++ b/src/views/projects/SourceBrowsingHeader.svelte
@@ -11,16 +11,28 @@
   import SquareButton from "@app/components/SquareButton.svelte";
 
   export let baseUrl: BaseUrl;
-  export let branches: Record<string, string>;
+  export let branches: Record<string, string> | undefined;
+  export let commitCount: number;
+  export let contributorCount: number;
   export let defaultBranch: string;
   export let peer: string | undefined;
   export let peers: Remote[];
   export let projectId: string;
   export let resource: LoadedSourceBrowsingView["resource"];
   export let revision: string | undefined;
+  export let commitId: string;
 
-  export let commitCount: number;
-  export let contributorCount: number;
+  let selectedBranch: string | undefined;
+
+  // Revision may be a commit ID, a branch name or `undefined` which means the
+  // default branch. We assign `selectedBranch` accordingly.
+  // TODO: Move this logic out of here and have `selectedBranch` be passed as a
+  // prop.
+  $: if (revision === commitId) {
+    selectedBranch = undefined;
+  } else {
+    selectedBranch = revision ?? defaultBranch;
+  }
 </script>
 
 <style>
@@ -52,9 +64,9 @@
 
   <BranchSelector
     {branches}
-    {revision}
-    on:click={() => closeFocused()}
-    {defaultBranch} />
+    selectedCommitId={commitId}
+    {selectedBranch}
+    on:click={() => closeFocused()} />
 
   <Link
     route={{