diff --git a/web/renderer/components/DatabaseHeaderAndNav/index.module.css b/web/renderer/components/DatabaseHeaderAndNav/index.module.css
index 5e158d2d..675874d2 100644
--- a/web/renderer/components/DatabaseHeaderAndNav/index.module.css
+++ b/web/renderer/components/DatabaseHeaderAndNav/index.module.css
@@ -19,10 +19,10 @@
 }
 
 .smallHeader {
-  @apply hidden h-24 pt-4;
+  @apply hidden h-24;
 
   @screen lg {
-    @apply h-16 flex items-center;
+    @apply h-16 flex items-center justify-between;
   }
 }
 
diff --git a/web/renderer/components/DatabaseNav/Item.tsx b/web/renderer/components/DatabaseNav/Item.tsx
index 3148a325..3507ec4c 100644
--- a/web/renderer/components/DatabaseNav/Item.tsx
+++ b/web/renderer/components/DatabaseNav/Item.tsx
@@ -20,7 +20,7 @@ export default function NavItem(props: Props) {
       <li className={css.disabledTab}>
         <span
           className={css.innerTab}
-          data-tooltip-position="top"
+          data-tooltip-place="left"
           data-tooltip-id="disabled-database-nav-item"
           data-tooltip-content={`${props.name} tab is only available for Dolt databases`}
         >
diff --git a/web/renderer/components/DatabaseTableNav/index.module.css b/web/renderer/components/DatabaseTableNav/index.module.css
index fba45e98..0aa66e29 100644
--- a/web/renderer/components/DatabaseTableNav/index.module.css
+++ b/web/renderer/components/DatabaseTableNav/index.module.css
@@ -28,9 +28,6 @@
 
 .topLine {
   @apply flex justify-between items-center w-full pb-2 px-4;
-  @screen lg {
-    @apply pl-4 pr-3;
-  }
 }
 
 .menuIcon {
diff --git a/web/renderer/components/DiffSelector/ForBranchCommitAndTag.tsx b/web/renderer/components/DiffSelector/ForBranchCommitAndTag.tsx
new file mode 100644
index 00000000..ac6b813c
--- /dev/null
+++ b/web/renderer/components/DiffSelector/ForBranchCommitAndTag.tsx
@@ -0,0 +1,62 @@
+import { RefParams } from "@lib/params";
+import BranchCommitAndTagSelector from "@components/FormSelectForRefs/BranchCommitAndTagSelector";
+import { useState } from "react";
+import { BsArrowLeft } from "@react-icons/all-files/bs/BsArrowLeft";
+import Link from "@components/links/Link";
+import { diff } from "@lib/urls";
+import { Button } from "@dolthub/react-components";
+import DiffSelector from "./component";
+import css from "./index.module.css";
+
+type Props = {
+  params: RefParams;
+};
+
+export default function ForBranchCommitAndTag({ params }: Props) {
+  const [fromRef, setFromRef] = useState("");
+  const [toRef, setToRef] = useState("");
+
+  return (
+    <DiffSelector>
+      <div className={css.container}>
+        <div className={css.top}>
+          <div className={css.title}>Pick to revision</div>
+          <div className={css.title}>Pick from revision</div>
+        </div>
+        <div className={css.selectors}>
+          <div className={css.branchCommitTag}>
+            <BranchCommitAndTagSelector
+              params={params}
+              selectedValue={toRef}
+              onChangeValue={s => setToRef(s || "")}
+            />
+          </div>
+          <div className={css.arrow}>
+            <BsArrowLeft />
+          </div>
+          <div className={css.branchCommitTag}>
+            <BranchCommitAndTagSelector
+              params={params}
+              selectedValue={fromRef}
+              onChangeValue={s => setFromRef(s || "")}
+            />
+          </div>
+        </div>
+      </div>
+      {fromRef && toRef && (
+        <Link
+          {...diff({
+            ...params,
+            fromCommitId: fromRef,
+            toCommitId: toRef,
+          })}
+          className={css.viewDiffButton}
+        >
+          <Button disabled={fromRef === toRef} className={css.button}>
+            View Diff
+          </Button>
+        </Link>
+      )}
+    </DiffSelector>
+  );
+}
diff --git a/web/renderer/components/DiffSelector/index.module.css b/web/renderer/components/DiffSelector/index.module.css
index e3b88bfb..cfad25c4 100644
--- a/web/renderer/components/DiffSelector/index.module.css
+++ b/web/renderer/components/DiffSelector/index.module.css
@@ -6,6 +6,34 @@
   }
 }
 
+.container {
+  @apply w-[54rem];
+}
+
 .branch {
   @apply mb-6;
 }
+
+.branchCommitTag {
+  @apply w-96;
+}
+
+.selectors {
+  @apply flex mt-4 mb-6 mx-4 items-center;
+}
+
+.top {
+  @apply flex mx-4 mt-8 justify-between;
+}
+
+.title {
+  @apply font-semibold w-96;
+}
+
+.arrow {
+  @apply text-2xl mx-6;
+}
+
+.button {
+  @apply ml-4;
+}
diff --git a/web/renderer/components/DiffSelector/index.tsx b/web/renderer/components/DiffSelector/index.tsx
index e5873c57..7ef66323 100644
--- a/web/renderer/components/DiffSelector/index.tsx
+++ b/web/renderer/components/DiffSelector/index.tsx
@@ -1,8 +1,10 @@
 import DiffSelector from "./component";
 import ForBranch from "./ForBranch";
+import ForBranchCommitAndTag from "./ForBranchCommitAndTag";
 import ForPull from "./ForPull";
 
 export default Object.assign(DiffSelector, {
   ForBranch,
   ForPull,
+  ForBranchCommitAndTag,
 });
diff --git a/web/renderer/components/DiffTableNav/CommitInfo/index.module.css b/web/renderer/components/DiffTableNav/CommitInfo/index.module.css
index a0720cee..7d152eab 100644
--- a/web/renderer/components/DiffTableNav/CommitInfo/index.module.css
+++ b/web/renderer/components/DiffTableNav/CommitInfo/index.module.css
@@ -6,7 +6,11 @@
   @apply mx-3 mb-3;
 }
 
-.hash {
+.fixedWidth {
+  @apply inline-block w-12;
+}
+
+.bold {
   @apply font-mono font-semibold text-sm;
 }
 
diff --git a/web/renderer/components/DiffTableNav/CommitInfo/index.test.tsx b/web/renderer/components/DiffTableNav/CommitInfo/index.test.tsx
index a20c6602..df3c25e5 100644
--- a/web/renderer/components/DiffTableNav/CommitInfo/index.test.tsx
+++ b/web/renderer/components/DiffTableNav/CommitInfo/index.test.tsx
@@ -2,7 +2,7 @@ import { MockedProvider } from "@apollo/client/testing";
 import useMockRouter from "@hooks/useMockRouter";
 import { render, screen } from "@testing-library/react";
 import { commit as commitLink, diff } from "@lib/urls";
-import CommitInfo, { getDiffRange } from ".";
+import CommitInfo from ".";
 import * as mocks from "./mocks";
 
 const jestRouter = jest.spyOn(require("next/router"), "useRouter");
@@ -73,9 +73,8 @@ describe("test CommitInfo", () => {
       <CommitInfo params={{ ...mocks.params, toCommitId, fromCommitId }} />,
     );
 
-    expect(
-      screen.getByText(getDiffRange(fromCommitId, toCommitId)),
-    ).toBeVisible();
+    expect(screen.getByText(fromCommitId)).toBeVisible();
+    expect(screen.getByText(toCommitId)).toBeVisible();
     expect(screen.queryByText("1 parent")).not.toBeInTheDocument();
   });
 });
diff --git a/web/renderer/components/DiffTableNav/CommitInfo/index.tsx b/web/renderer/components/DiffTableNav/CommitInfo/index.tsx
index c05398ae..53806d24 100644
--- a/web/renderer/components/DiffTableNav/CommitInfo/index.tsx
+++ b/web/renderer/components/DiffTableNav/CommitInfo/index.tsx
@@ -2,7 +2,7 @@ import { QueryHandler } from "@dolthub/react-components";
 import { useHistoryForCommitQuery } from "@gen/graphql-types";
 import { RefParams } from "@lib/params";
 import { useRouter } from "next/router";
-import Inner, { shortCommit } from "./Inner";
+import Inner from "./Inner";
 import css from "./index.module.css";
 
 type Props = {
@@ -39,10 +39,17 @@ export default function CommitInfo({ params }: Props) {
       <div className={css.container} data-cy="commit-info">
         <div className={css.top}>
           <div data-cy="viewing-message">
-            Viewing changes from{" "}
-            <span className={css.hash}>
-              {getDiffRange(fromCommitForInfo, params.toCommitId)}
-            </span>
+            Viewing changes
+            <div className={css.hashes}>
+              <div>
+                <span className={css.fixedWidth}>from</span>
+                <span className={css.bold}>{fromCommitForInfo}</span>
+              </div>
+              <div>
+                <span className={css.fixedWidth}>to</span>{" "}
+                <span className={css.bold}>{params.toCommitId}</span>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -52,7 +59,7 @@ export default function CommitInfo({ params }: Props) {
 }
 
 export function getDiffRange(fromCommit: string, toCommit: string): string {
-  return `${shortCommit(fromCommit)}..${shortCommit(toCommit)}`;
+  return `${fromCommit}..${toCommit}`;
 }
 
 function isDiffRange(asPath: string) {
diff --git a/web/renderer/components/DiffTableNav/ForRef.tsx b/web/renderer/components/DiffTableNav/ForRef.tsx
index 71388c37..7fa5c5f4 100644
--- a/web/renderer/components/DiffTableNav/ForRef.tsx
+++ b/web/renderer/components/DiffTableNav/ForRef.tsx
@@ -1,4 +1,3 @@
-import DiffSelector from "@components/DiffSelector";
 import { RefParams } from "@lib/params";
 import DiffTableNav from "./component";
 import css from "./index.module.css";
@@ -13,10 +12,9 @@ export default function ForRef(props: Props) {
       {...props}
       diffStat={
         <p className={css.noDiff} data-cy="diff-layout-no-diff">
-          Select commit to view diff
+          Select revision to view diff
         </p>
       }
-      diffSelector={<DiffSelector.ForBranch params={props.params} />}
       diffTables={null}
     />
   );
diff --git a/web/renderer/components/FormSelectForRefs/BranchCommitAndTagSelector.tsx b/web/renderer/components/FormSelectForRefs/BranchCommitAndTagSelector.tsx
new file mode 100644
index 00000000..0d989bd1
--- /dev/null
+++ b/web/renderer/components/FormSelectForRefs/BranchCommitAndTagSelector.tsx
@@ -0,0 +1,58 @@
+import { FormSelect } from "@dolthub/react-components";
+import { Maybe } from "@dolthub/web-utils";
+import { OptionalRefParams } from "@lib/params";
+import useGetBranchOptionsForSelect from "@components/FormSelectForRefs/useGetBranchOptionsForSelect";
+import useGetCommitOptionsForSelect from "@components/FormSelectForRefs/useGetCommitOptionsForSelect";
+import getGroupOption from "./getGroupOption";
+import useGetTagOptionsForSelect from "./useGetTagOptionsForSelect";
+import css from "./index.module.css";
+
+type Props = {
+  params: OptionalRefParams;
+  selectedValue: Maybe<string>;
+  onChangeValue: (s: Maybe<string>) => void;
+};
+
+export default function BranchCommitAndTagSelector(props: Props) {
+  const {
+    branchOptions,
+    error: branchErr,
+    loading: branchLoading,
+  } = useGetBranchOptionsForSelect(props.params);
+  const {
+    commitOptions,
+    error: commitErr,
+    loading: commitLoading,
+  } = useGetCommitOptionsForSelect(props.params);
+  const {
+    tagOptions,
+    error: tagErr,
+    loading: tagLoading,
+  } = useGetTagOptionsForSelect(props.params);
+
+  const handleChangeRef = async (refName: Maybe<string>) => {
+    if (!refName) return;
+    props.onChangeValue(refName);
+  };
+
+  const options = [
+    getGroupOption(branchOptions, "Branches", undefined, branchErr),
+    getGroupOption(commitOptions, "Commits", undefined, commitErr),
+    getGroupOption(tagOptions, "Tags", undefined, tagErr),
+  ];
+
+  return (
+    <FormSelect.Grouped
+      isLoading={branchLoading || commitLoading || tagLoading}
+      value={[...branchOptions, ...commitOptions, ...tagOptions].find(
+        t => t.value === props.selectedValue,
+      )}
+      onChange={async e => handleChangeRef(e?.value)}
+      options={options}
+      placeholder="select a branch, commit or tag..."
+      className={css.branchAndCommitSelect}
+      selectedOptionFirst
+      light
+    />
+  );
+}
diff --git a/web/renderer/components/FormSelectForRefs/getGroupOption.tsx b/web/renderer/components/FormSelectForRefs/getGroupOption.tsx
index d0d2825f..0bfc2eae 100644
--- a/web/renderer/components/FormSelectForRefs/getGroupOption.tsx
+++ b/web/renderer/components/FormSelectForRefs/getGroupOption.tsx
@@ -6,7 +6,7 @@ import { ApolloErrorType } from "@lib/errors/types";
 export default function getGroupOption(
   options: Array<FormSelectTypes.Option<string>>,
   label: string,
-  footerRoute: Route,
+  footerRoute?: Route,
   error?: ApolloErrorType,
 ): FormSelectTypes.CustomGroupBase<FormSelectTypes.Option<string>> {
   const lowerLabel = label.toLowerCase();
@@ -16,6 +16,6 @@ export default function getGroupOption(
     noOptionsMsg: error
       ? `Error getting ${lowerLabel}: ${error.message}`
       : `No ${lowerLabel} found`,
-    footer: <Link {...footerRoute}>View all {lowerLabel}</Link>,
+    footer: footerRoute && <Link {...footerRoute}>View all {lowerLabel}</Link>,
   };
 }
diff --git a/web/renderer/components/pageComponents/DatabasePage/ForBranches/BranchesPage/index.module.css b/web/renderer/components/pageComponents/DatabasePage/ForBranches/BranchesPage/index.module.css
index d6405a58..8491e490 100644
--- a/web/renderer/components/pageComponents/DatabasePage/ForBranches/BranchesPage/index.module.css
+++ b/web/renderer/components/pageComponents/DatabasePage/ForBranches/BranchesPage/index.module.css
@@ -69,3 +69,7 @@
 .iconGray {
   @apply fill-storm-200;
 }
+
+.button {
+  @apply mr-4;
+}
diff --git a/web/renderer/components/pageComponents/DatabasePage/ForBranches/BranchesPage/index.tsx b/web/renderer/components/pageComponents/DatabasePage/ForBranches/BranchesPage/index.tsx
index 5eb5c940..0d818b22 100644
--- a/web/renderer/components/pageComponents/DatabasePage/ForBranches/BranchesPage/index.tsx
+++ b/web/renderer/components/pageComponents/DatabasePage/ForBranches/BranchesPage/index.tsx
@@ -18,11 +18,11 @@ import { gqlDepNotFound } from "@lib/errors/graphql";
 import { errorMatches } from "@lib/errors/helpers";
 import { OptionalRefParams } from "@lib/params";
 import { refetchBranchQueries } from "@lib/refetchQueries";
-import { newBranch } from "@lib/urls";
+import { compare, newBranch } from "@lib/urls";
 import { useState } from "react";
 import BranchList from "./BranchList";
-import css from "./index.module.css";
 import { useBranchList } from "./useBranchList";
+import css from "./index.module.css";
 
 type Props = {
   params: OptionalRefParams;
@@ -39,6 +39,7 @@ type InnerProps = {
 function Inner(props: InnerProps): JSX.Element {
   const [isDeleteModalOpen, setDeleteModalOpen] = useState(false);
   const [branchNameToDelete, setBranchNameToDelete] = useState("");
+
   const createUrl = newBranch({
     ...props.params,
     refName:
@@ -71,6 +72,11 @@ function Inner(props: InnerProps): JSX.Element {
             isClearable
             horizontal
           />
+          {props.branches.length && (
+            <Link {...compare(props.params)}>
+              <Button className={css.button}>Diff Branches</Button>
+            </Link>
+          )}
           <HideForNoWritesWrapper params={props.params}>
             <Link {...createUrl} className={css.white}>
               <Button>Create Branch</Button>
diff --git a/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/index.module.css b/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/index.module.css
index 911731f5..2d96a283 100644
--- a/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/index.module.css
+++ b/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/index.module.css
@@ -6,6 +6,14 @@
   @apply flex justify-between;
 }
 
+.buttons {
+  @apply flex;
+}
+
+.button {
+  @apply mr-4;
+}
+
 .title {
   @apply mx-6;
 }
diff --git a/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/index.tsx b/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/index.tsx
index c7572c46..5d717f2d 100644
--- a/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/index.tsx
+++ b/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/index.tsx
@@ -1,9 +1,11 @@
 import Page404 from "@components/Page404";
-import { Loader } from "@dolthub/react-components";
+import { Button, Loader } from "@dolthub/react-components";
 import { useAnchorTag, useReactiveWidth } from "@dolthub/react-hooks";
 import { CommitForHistoryFragment } from "@gen/graphql-types";
+import Link from "@components/links/Link";
 import { useCommitListForBranch } from "@hooks/useCommitListForBranch";
 import { RefParams } from "@lib/params";
+import { compare } from "@lib/urls";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import InfiniteScroll from "react-infinite-scroller";
@@ -50,7 +52,12 @@ function Inner({ commits, ...props }: InnerProps) {
         <div className={css.container}>
           <div className={css.top}>
             <h1 className={css.title}>Commit Log</h1>
-            <CommitGraphButton params={props.params} />
+            <Button.Group className={css.buttons}>
+              <Link {...compare(props.params)}>
+                <Button className={css.button}>Diff Commits</Button>
+              </Link>
+              <CommitGraphButton params={props.params} />
+            </Button.Group>
           </div>
           <InfiniteScroll
             loadMore={props.loadMore}
diff --git a/web/renderer/components/pageComponents/DatabasePage/ForCommits/DiffPage/ForBranch.tsx b/web/renderer/components/pageComponents/DatabasePage/ForCommits/DiffPage/ForBranch.tsx
index 22c92116..0768d5d7 100644
--- a/web/renderer/components/pageComponents/DatabasePage/ForCommits/DiffPage/ForBranch.tsx
+++ b/web/renderer/components/pageComponents/DatabasePage/ForCommits/DiffPage/ForBranch.tsx
@@ -1,4 +1,5 @@
 import DiffTableNav from "@components/DiffTableNav";
+import DiffSelector from "@components/DiffSelector";
 import CommitDiffBreadcrumbs from "@components/breadcrumbs/CommitDiffBreadcrumbs";
 import { RefParams } from "@lib/params";
 import { commitLog } from "@lib/urls";
@@ -18,7 +19,7 @@ export default function ForBranch(props: Props) {
       routeRefChangeTo={commitLog}
       smallHeaderBreadcrumbs={<CommitDiffBreadcrumbs params={props.params} />}
     >
-      <div />
+      <DiffSelector.ForBranchCommitAndTag params={props.params} />
     </DatabasePage>
   );
 }
diff --git a/web/renderer/components/pageComponents/DatabasePage/ForReleases/ReleaseList/index.module.css b/web/renderer/components/pageComponents/DatabasePage/ForReleases/ReleaseList/index.module.css
index f35976d4..486a1760 100644
--- a/web/renderer/components/pageComponents/DatabasePage/ForReleases/ReleaseList/index.module.css
+++ b/web/renderer/components/pageComponents/DatabasePage/ForReleases/ReleaseList/index.module.css
@@ -108,3 +108,7 @@
     @apply block ml-2;
   }
 }
+
+.button {
+  @apply mr-4;
+}
diff --git a/web/renderer/components/pageComponents/DatabasePage/ForReleases/ReleaseList/index.tsx b/web/renderer/components/pageComponents/DatabasePage/ForReleases/ReleaseList/index.tsx
index 50c95b67..6e10071a 100644
--- a/web/renderer/components/pageComponents/DatabasePage/ForReleases/ReleaseList/index.tsx
+++ b/web/renderer/components/pageComponents/DatabasePage/ForReleases/ReleaseList/index.tsx
@@ -9,11 +9,11 @@ import { gqlDepNotFound } from "@lib/errors/graphql";
 import { errorMatches } from "@lib/errors/helpers";
 import { OptionalRefParams } from "@lib/params";
 import { refetchTagQueries } from "@lib/refetchQueries";
-import { newRelease } from "@lib/urls";
+import { compare, newRelease } from "@lib/urls";
 import { useState } from "react";
 import List from "./List";
-import css from "./index.module.css";
 import { useTagList } from "./useTagList";
+import css from "./index.module.css";
 
 type Props = {
   params: OptionalRefParams;
@@ -38,22 +38,29 @@ function Inner({ tags, ...props }: InnerProps) {
     <div className={css.container}>
       <div className={css.top}>
         <h1>Releases</h1>
-        <HideForNoWritesWrapper params={props.params}>
-          <Link
-            {...newRelease({
-              ...props.params,
-              refName:
-                tagNameToDelete === props.params.refName
-                  ? undefined
-                  : props.params.refName,
-            })}
-          >
-            <Button>Create Release</Button>
+        <div>
+          <Link {...compare(props.params)} className={css.button}>
+            <Button>Diff Releases</Button>
           </Link>
-        </HideForNoWritesWrapper>
+          <HideForNoWritesWrapper params={props.params}>
+            <Link
+              {...newRelease({
+                ...props.params,
+                refName:
+                  tagNameToDelete === props.params.refName
+                    ? undefined
+                    : props.params.refName,
+              })}
+            >
+              <Button>Create Release</Button>
+            </Link>
+          </HideForNoWritesWrapper>
+        </div>
       </div>
       {tags?.length ? (
-        <List {...props} tags={tags} openDeleteModal={openDeleteModal} />
+        <div>
+          <List {...props} tags={tags} openDeleteModal={openDeleteModal} />
+        </div>
       ) : (
         <p className={css.noReleases} data-cy="release-list-no-releases">
           No releases found
diff --git a/web/renderer/components/pageComponents/DatabasePage/ForRemotes/RemotesPage/FetchRemoteModal/RemoteBranchRow.tsx b/web/renderer/components/pageComponents/DatabasePage/ForRemotes/RemotesPage/FetchRemoteModal/RemoteBranchRow.tsx
index 890888f6..942ef53c 100644
--- a/web/renderer/components/pageComponents/DatabasePage/ForRemotes/RemotesPage/FetchRemoteModal/RemoteBranchRow.tsx
+++ b/web/renderer/components/pageComponents/DatabasePage/ForRemotes/RemotesPage/FetchRemoteModal/RemoteBranchRow.tsx
@@ -1,13 +1,16 @@
-import { QueryHandler } from "@dolthub/react-components";
+import { Button, QueryHandler } from "@dolthub/react-components";
 import {
   BranchFragment,
   RemoteFragment,
   useRemoteBranchDiffCountsQuery,
 } from "@gen/graphql-types";
 import { OptionalRefParams } from "@lib/params";
+import { diff } from "@lib/urls";
+import Link from "@components/links/Link";
 import { getBranchName } from "./utils";
 import SyncButton from "./SyncButton";
 import BehindAheadCount from "./BehindAheadCount";
+import css from "./index.module.css";
 
 type Props = {
   branch: BranchFragment;
@@ -53,6 +56,22 @@ export default function RemoteBranchRow({
               currentBranch={currentBranch}
             />
           </td>
+          <td>
+            {(!!data.remoteBranchDiffCounts.ahead ||
+              !!data.remoteBranchDiffCounts.behind) && (
+              <Link
+                {...diff({
+                  ...params,
+                  refName: currentBranch,
+                  fromCommitId: branchNameWithRemoteName,
+                  toCommitId: currentBranch,
+                })}
+                className={css.viewDiffButton}
+              >
+                <Button.Link>View Diff</Button.Link>
+              </Link>
+            )}
+          </td>
         </tr>
       )}
     />
diff --git a/web/renderer/components/pageComponents/DatabasePage/ForRemotes/RemotesPage/FetchRemoteModal/RemoteBranches.tsx b/web/renderer/components/pageComponents/DatabasePage/ForRemotes/RemotesPage/FetchRemoteModal/RemoteBranches.tsx
index 4b87afba..4beb8a64 100644
--- a/web/renderer/components/pageComponents/DatabasePage/ForRemotes/RemotesPage/FetchRemoteModal/RemoteBranches.tsx
+++ b/web/renderer/components/pageComponents/DatabasePage/ForRemotes/RemotesPage/FetchRemoteModal/RemoteBranches.tsx
@@ -28,6 +28,7 @@ function Inner(props: InnerProps) {
           <th>Remote {pluralize(props.remoteBranches.length, "branch")}</th>
           <th>Behind | Ahead</th>
           <th>Sync</th>
+          <th>Diff</th>
         </tr>
       </thead>
       <tbody>
diff --git a/web/renderer/components/pageComponents/DatabasePage/ForRemotes/RemotesPage/FetchRemoteModal/index.module.css b/web/renderer/components/pageComponents/DatabasePage/ForRemotes/RemotesPage/FetchRemoteModal/index.module.css
index 66162228..c03fec92 100644
--- a/web/renderer/components/pageComponents/DatabasePage/ForRemotes/RemotesPage/FetchRemoteModal/index.module.css
+++ b/web/renderer/components/pageComponents/DatabasePage/ForRemotes/RemotesPage/FetchRemoteModal/index.module.css
@@ -79,3 +79,9 @@
 .buttons {
   @apply flex items-center justify-between;
 }
+
+.viewDiffButton {
+  button {
+    @apply text-left mt-2 mb-4 lg:my-0;
+  }
+}
diff --git a/web/renderer/components/pageComponents/FileUploadPage/Layout/index.module.css b/web/renderer/components/pageComponents/FileUploadPage/Layout/index.module.css
index a0e5a56c..7e2cb847 100644
--- a/web/renderer/components/pageComponents/FileUploadPage/Layout/index.module.css
+++ b/web/renderer/components/pageComponents/FileUploadPage/Layout/index.module.css
@@ -1,5 +1,5 @@
 .header {
-  @apply w-full bg-storm-500 text-center p-4 justify-between hidden lg:flex;
+  @apply w-full bg-storm-500 text-center p-4 justify-between hidden absolute top-12 lg:flex;
 
   h1 {
     @apply text-white text-2xl font-normal;
diff --git a/web/renderer/lib/diffRange.tsx b/web/renderer/lib/diffRange.tsx
index 7f4e5086..d8431769 100644
--- a/web/renderer/lib/diffRange.tsx
+++ b/web/renderer/lib/diffRange.tsx
@@ -4,6 +4,6 @@ type Commits = {
 };
 
 export default function splitDiffRange(diffRange: string): Commits {
-  const [fromCommitId, toCommitId] = diffRange.split(/\.+/);
+  const [fromCommitId, toCommitId] = diffRange.split(/\.{2,}/);
   return { fromCommitId, toCommitId };
 }
diff --git a/web/renderer/lib/urls.ts b/web/renderer/lib/urls.ts
index 97df2c0d..b91a22cd 100644
--- a/web/renderer/lib/urls.ts
+++ b/web/renderer/lib/urls.ts
@@ -87,10 +87,13 @@ export const commit = (p: ps.CommitParams): Route =>
 export const diff = (p: ps.DiffParams): Route =>
   commit({ ...p, commitId: getDiffRange(p) });
 
+export const compare = (p: ps.DatabaseParams): Route =>
+  database(p).addStatic("compare");
+
 function getDiffRange(p: ps.DiffParams): string {
   if (!p.fromCommitId && !p.toCommitId) return "";
   if (!p.toCommitId) return p.fromCommitId ?? "";
-  return `${p.fromCommitId ?? ""}..${p.toCommitId}`;
+  return encodeURIComponent(`${p.fromCommitId ?? ""}..${p.toCommitId}`);
 }
 
 export const releases = (p: ps.OptionalRefParams): Route =>