diff --git a/web/graph.ts b/web/graph.ts
index a17c4eba..87a363b1 100644
--- a/web/graph.ts
+++ b/web/graph.ts
@@ -573,6 +573,30 @@ class Graph {
 		return muted;
 	}
 
+	public getFirstParentIndex(i: number) {
+		const parents = this.vertices[i].getParents();
+		return parents.length > 0 ? parents[0].id : -1;
+	}
+
+	public getFirstChildIndex(i: number) {
+		const children = this.vertices[i].getChildren();
+		if (children.length > 0) {
+			// The vertex has children
+			const branch = this.vertices[i].getBranch();
+			let childOnSameBranch;
+			if (branch !== null && (childOnSameBranch = children.find((child) => child.isOnThisBranch(branch)))) {
+				// If a child could be found on the same branch as the vertex
+				return childOnSameBranch.id;
+			} else {
+				// No child could be found on the same branch as the vertex
+				return Math.max(...children.map((child) => child.id));
+			}
+		} else {
+			// The vertex has no children
+			return -1;
+		}
+	}
+
 
 	/* Width Adjustment Methods */
 
diff --git a/web/main.ts b/web/main.ts
index b4d0a422..562dcf16 100644
--- a/web/main.ts
+++ b/web/main.ts
@@ -1772,41 +1772,51 @@ class GitGraphView {
 				if (e.key === 'Escape') {
 					contextMenu.close();
 				}
-			} else {
+			} else if (this.expandedCommit !== null && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
+				let curHashIndex = this.commitLookup[this.expandedCommit.commitHash], newHashIndex = -1;
+
 				if (e.ctrlKey || e.metaKey) {
-					if (e.key === 'r') {
-						this.refresh(true);
-						handledEvent(e);
-					} else if (e.key === 'f') {
-						this.findWidget.show(true);
-						handledEvent(e);
-					} else if (e.key === 'h' && this.commitHead !== null) {
-						this.scrollToCommit(this.commitHead, true, true);
-						handledEvent(e);
-					} else if (e.key.toLowerCase() === 's') {
-						this.scrollToStash(!e.shiftKey);
-						handledEvent(e);
+					// Up / Down navigates according to the order of commits on the branch
+					if (e.key === 'ArrowUp') {
+						newHashIndex = this.graph.getFirstChildIndex(curHashIndex);
+					} else if (e.key === 'ArrowDown') {
+						newHashIndex = this.graph.getFirstParentIndex(curHashIndex);
+					}
+				} else {
+					// Up / Down navigates according to the order of commits in the table
+					if (e.key === 'ArrowUp' && curHashIndex > 0) {
+						newHashIndex = curHashIndex - 1;
+					} else if (e.key === 'ArrowDown' && curHashIndex < this.commits.length - 1) {
+						newHashIndex = curHashIndex + 1;
 					}
-				} else if (e.key === 'Escape' && this.settingsWidget.isVisible()) {
+				}
+
+				if (newHashIndex > -1) {
+					handledEvent(e);
+					const elem = findCommitElemWithId(getCommitElems(), newHashIndex);
+					if (elem !== null) this.loadCommitDetails(elem);
+				}
+			} else if (e.ctrlKey || e.metaKey) {
+				if (e.key === 'r') {
+					this.refresh(true);
+					handledEvent(e);
+				} else if (e.key === 'f') {
+					this.findWidget.show(true);
+					handledEvent(e);
+				} else if (e.key === 'h' && this.commitHead !== null) {
+					this.scrollToCommit(this.commitHead, true, true);
+					handledEvent(e);
+				} else if (e.key.toLowerCase() === 's') {
+					this.scrollToStash(!e.shiftKey);
+					handledEvent(e);
+				}
+			} else if (e.key === 'Escape') {
+				if (this.settingsWidget.isVisible()) {
 					this.settingsWidget.close();
-				} else if (e.key === 'Escape' && this.findWidget.isVisible()) {
+				} else if (this.findWidget.isVisible()) {
 					this.findWidget.close();
-				} else if (this.expandedCommit !== null) { // Commit Details View is open
-					if (e.key === 'Escape') {
-						this.closeCommitDetails(true);
-					} else if ((e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
-						let curHashIndex = this.commitLookup[this.expandedCommit.commitHash], newHashIndex = -1;
-						if (e.key === 'ArrowUp' && curHashIndex > 0) {
-							newHashIndex = curHashIndex - 1;
-						} else if (e.key === 'ArrowDown' && curHashIndex < this.commits.length - 1) {
-							newHashIndex = curHashIndex + 1;
-						}
-						if (newHashIndex > -1) {
-							e.preventDefault();
-							let elem = findCommitElemWithId(getCommitElems(), newHashIndex);
-							if (elem !== null) this.loadCommitDetails(elem);
-						}
-					}
+				} else if (this.expandedCommit !== null) {
+					this.closeCommitDetails(true);
 				}
 			}
 		});