diff --git a/public/index.css b/public/index.css
index 8676e7fa4..bb0468310 100644
--- a/public/index.css
+++ b/public/index.css
@@ -33,7 +33,7 @@
 	--color-yellow-background: #ffff9911;
 	--color-positive: #53db53;
 	--color-positive-background: #53db5311;
-	--color-positive-1: #21402f;
+	--color-positive-1: #11332b;
 	--color-positive-2: #2c6837;
 	--color-positive-6: #e3ffe3;
 	--color-caution: #ffc555;
@@ -42,11 +42,12 @@
 	--color-caution-6: #ffefcf;
 	--color-negative: #ff5555;
 	--color-negative-background: #ff555511;
-	--color-negative-1: #38282f;
+	--color-negative-1: #35202b;
 	--color-negative-2: #623237;
 	--color-negative-6: #ffd4d4;
 	--color-foreground: #ffffff;
 	--color-foreground-90: #dddddd;
+	--color-foreground-80: #aaaaaa;
 	--color-foreground-faded: #777788;
 	--color-foreground-subtle: #444455;
 	--color-foreground-subtler: #333344;
diff --git a/src/base/projects/Commit.svelte b/src/base/projects/Commit.svelte
index 468a040ee..50cad34a6 100644
--- a/src/base/projects/Commit.svelte
+++ b/src/base/projects/Commit.svelte
@@ -51,7 +51,25 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    align-items: flex-start;
+    align-items: center;
+  }
+  .description {
+    margin: 0.5rem 0 1rem 0;
+  }
+  .meta {
+    color: var(--color-foreground-80);
+  }
+  .email {
+    font-family: var(--font-family-monospace);
+    font-size: 0.875rem;
+  }
+  .sha1 {
+    color: var(--color-foreground-80);
+    font-size: 0.875rem;
+  }
+  .time {
+    margin-left: 0.25rem;
+    color: var(--color-foreground-faded);
   }
   @media (max-width: 960px) {
     .commit {
@@ -65,23 +83,22 @@
     <header>
       <div class="summary">
         <h3>{commit.header.summary}</h3>
-        <div class="desktop font-mono faded">
-          <span>commit</span>
+        <div class="desktop font-mono sha1">
           <span>{commit.header.sha1}</span>
         </div>
-        <div class="mobile font-mono faded">
+        <div class="mobile font-mono sha1">
           {formatCommit(commit.header.sha1)}
         </div>
       </div>
-      <pre>{commit.header.description}</pre>
-      <div>
-        <span>Committed by {commit.header.committer.name}</span>
-        <span class="font-mono faded desktop-inline">&lt;{commit.header.committer.email}&gt; </span>
-        <span class="desktop-inline">{formatCommitTime(commit.header.committerTime)}</span>
+      <pre class="description">{commit.header.description}</pre>
+      <div class="meta">
+        <span>Committed by <strong>{commit.header.committer.name}</strong></span>
+        <span class="font-mono email desktop-inline">&lt;{commit.header.committer.email}&gt; </span>
+        <span class="time desktop-inline">{formatCommitTime(commit.header.committerTime)}</span>
       </div>
-      <div>
-        <span>Authored by {commit.header.author.name} </span>
-        <span class="font-mono faded desktop-inline">&lt;{commit.header.author.email}&gt;</span>
+      <div class="meta">
+        <span>Authored by <strong>{commit.header.author.name}</strong> </span>
+        <span class="font-mono email desktop-inline">&lt;{commit.header.author.email}&gt;</span>
       </div>
     </header>
     <Changeset stats={commit.stats} diff={commit.diff} on:browse={(event) => navigateCommit(event.detail)} />
@@ -90,7 +107,6 @@
   <div class="commit">
     <div class="error error-message text-xsmall">
       <div>API request to <code class="text-xsmall">{err.url}</code> failed.</div>
-      <div>API needs to be version ^0.2.</div>
     </div>
   </div>
 {/await}
diff --git a/src/base/projects/Commit/CommitTeaser.svelte b/src/base/projects/Commit/CommitTeaser.svelte
index 76afdb4f5..526b998fc 100644
--- a/src/base/projects/Commit/CommitTeaser.svelte
+++ b/src/base/projects/Commit/CommitTeaser.svelte
@@ -20,20 +20,19 @@
     padding: 0 1rem 0 0;
   }
   .author {
-    margin-right: 8px
+    margin-right: 0.5rem;
   }
   .commit {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0 1rem 0 1rem;
-    height: 2.5rem;
-    cursor: pointer;
+    padding: 0.5rem 1rem;
   }
   .commit .right {
     display: flex;
     flex-direction: row;
     align-items: center;
+    gap: 0.5rem;
   }
   .time {
     margin-right: 0.5rem;
@@ -67,7 +66,7 @@
   </div>
   <div class="right">
     <span class="bold author">{commit.committer.name}</span>
-    <span class="desktop-inline time">{formatCommitTime(commit.committerTime)}</span>
+    <span class="desktop-inline font-mono text-small time">{formatCommitTime(commit.committerTime)}</span>
     <Icon name="browse" width={17} inline fill on:click={() => browseCommit(commit.sha1)} />
   </div>
 </div>
diff --git a/src/base/projects/Header.svelte b/src/base/projects/Header.svelte
index a90a23bad..65df26646 100644
--- a/src/base/projects/Header.svelte
+++ b/src/base/projects/Header.svelte
@@ -16,7 +16,7 @@
   export let revision: string;
   // If peerSelector should be showed.
   export let peerSelector: boolean;
-  
+
   let { urn, peer, config, project, branches, peers, anchors } = source;
 
   let dropdownState: { [key: string]: boolean } = { clone: false, seed: false, branch: false, peer: false };
diff --git a/src/base/projects/History.svelte b/src/base/projects/History.svelte
index 48df989cf..8a0a9477f 100644
--- a/src/base/projects/History.svelte
+++ b/src/base/projects/History.svelte
@@ -54,7 +54,18 @@
     background: var(--color-foreground-background);
   }
   .commit {
-    padding: 0.25rem 0;
+    cursor: pointer;
+  }
+  .commit:first-child {
+    border-top-left-radius: 0.25rem;
+    border-top-right-radius: 0.25rem;
+  }
+  .commit:last-child {
+    border-bottom-left-radius: 0.25rem;
+    border-bottom-right-radius: 0.25rem;
+  }
+  .commit:hover {
+    background: var(--color-foreground-background-lighter);
   }
   @media (max-width: 960px) {
     .history {
@@ -86,7 +97,6 @@
   <div class="history">
     <div class="error error-message text-xsmall">
       <div>API request to <code class="text-xsmall">{err.url}</code> failed.</div>
-      <div>API needs to be version ^0.2.</div>
     </div>
   </div>
 {/await}
diff --git a/src/base/projects/SourceBrowser/Changeset.svelte b/src/base/projects/SourceBrowser/Changeset.svelte
index 11e8cc6cf..7f580b649 100644
--- a/src/base/projects/SourceBrowser/Changeset.svelte
+++ b/src/base/projects/SourceBrowser/Changeset.svelte
@@ -44,10 +44,14 @@
   }
   .file-header .diff-type.created {
     color: var(--color-positive);
+    font-family: var(--font-family-monospace);
+    font-size: 0.75rem;
     background-color: var(--color-positive-1);
   }
   .file-header .diff-type.deleted {
     color: var(--color-negative);
+    font-family: var(--font-family-monospace);
+    font-size: 0.75rem;
     background-color: var(--color-negative-1);
   }
   .file-header .file-data {
diff --git a/src/base/projects/SourceBrowser/FileDiff.svelte b/src/base/projects/SourceBrowser/FileDiff.svelte
index 86e562318..982683e26 100644
--- a/src/base/projects/SourceBrowser/FileDiff.svelte
+++ b/src/base/projects/SourceBrowser/FileDiff.svelte
@@ -18,9 +18,10 @@
 <style>
   .changeset-file {
     border: 1px solid var(--color-foreground-3);
-    border-radius: 0.5rem;
+    border-radius: 0.25rem;
     min-width: var(--content-min-width);
     margin-bottom: 2rem;
+    line-height: 1.5rem;
   }
   .changeset-file header {
     cursor: pointer;
@@ -32,7 +33,7 @@
     padding: 1rem;
   }
   main {
-    border-top: 1px solid var(--color-foreground-3);
+    border-top: 1px dashed var(--color-foreground-3);
   }
   .changeset-file main {
     overflow-x: auto;
@@ -60,29 +61,32 @@
     margin: 0.5rem 0;
   }
   tr.diff-line[data-type="+"] > * {
-    background: var(--color-positive-1);
+    color: var(--color-positive);
   }
   tr.diff-line[data-type="-"] > * {
-    background: var(--color-negative-1);
+    color: var(--color-negative);
   }
   td.diff-line-number {
     text-align: right;
     user-select: none;
-    line-height: 150%;
+    line-height: 1.5rem;
+    min-width: 3rem;
   }
   td.diff-line-number[data-type="+"],
   td.diff-line-type[data-type="+"] {
+    background-color: var(--color-positive-background);
     color: var(--color-positive-6);
   }
   td.diff-line-number[data-type="-"],
   td.diff-line-type[data-type="-"] {
+    background-color: var(--color-negative-background);
     color: var(--color-negative-6);
   }
   td.diff-line-number.left {
-    padding: 0 0.25rem 0 1rem;
+    padding: 0 0.5rem 0 0.75rem;
   }
   td.diff-line-number.right {
-    padding: 0 1rem 0 0.25rem;
+    padding: 0 0.75rem 0 0.5rem;
   }
   td.diff-line-content {
     white-space: pre;
@@ -90,18 +94,19 @@
     padding-right: 0.5rem;
   }
   td.diff-line-type {
-    padding-right: 1rem;
     text-align: center;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
   }
   td.diff-expand-header {
-    background: var(--color-background);
+    padding-left: 0.5rem;
     color: var(--color-foreground-4);
   }
   td.diff-line-number {
     color: var(--color-foreground-4);
   }
   .file-path {
-    margin-left: 0.5rem;
+    font-size: 1rem;
   }
 </style>
 
@@ -109,8 +114,7 @@
   <header
     on:click={collapse}>
     <div class="actions">
-      <Icon name="chevron" width={20} inline fill />
-      <p class="bold file-path">{file.path}</p>
+      <p class="file-path">{file.path}</p>
     </div>
     <Icon name="browse" width={20} inline fill on:click={() => dispatch("browse", file.path)} />
   </header>