diff --git a/packages/server/src/ui/components/pill.css b/packages/server/src/ui/components/pill.css
index c8cdb1a8e..91fbead8f 100644
--- a/packages/server/src/ui/components/pill.css
+++ b/packages/server/src/ui/components/pill.css
@@ -7,7 +7,9 @@
 .pill {
   --pill-vertical-padding: calc((var(--pill-height) - var(--pill-content-height) - 2px) / 2);
 
-  display: inline-block;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
   height: var(--pill-height);
 
   margin: 0 var(--pill-spacing);
@@ -56,3 +58,9 @@
   height: var(--pill-content-height);
   line-height: var(--pill-content-height);
 }
+
+.pill__avatar {
+  border-radius: 100%;
+  margin-left: -5px;
+  margin-right: calc(var(--base-spacing) / 2);
+}
diff --git a/packages/server/src/ui/components/pill.jsx b/packages/server/src/ui/components/pill.jsx
index 1e6dea756..8892231da 100644
--- a/packages/server/src/ui/components/pill.jsx
+++ b/packages/server/src/ui/components/pill.jsx
@@ -4,13 +4,13 @@
  * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
  */
 
-import {h} from 'preact';
+import {h, Fragment} from 'preact';
 import clsx from 'clsx';
 import './pill.css';
 
-/** @param {{children: string|JSX.Element|JSX.Element[], className?: string, variant?: 'base'|'compare'|'master-branch'|'dev-branch', onClick?: () => void, solid?: boolean}} props */
+/** @param {{children: string|JSX.Element|JSX.Element[], className?: string, variant?: 'base'|'compare'|'master-branch'|'dev-branch', onClick?: () => void, solid?: boolean, avatar?: Pick<LHCI.ServerCommand.Build, 'avatarUrl'|'author'>}} props */
 export const Pill = props => {
-  const {children, variant = 'base'} = props;
+  const {children, avatar, variant = 'base'} = props;
   return (
     <div
       className={clsx('pill', props.className, `pill--${variant}`, {
@@ -19,6 +19,16 @@ export const Pill = props => {
       })}
       onClick={props.onClick}
     >
+      {avatar ? (
+        <img
+          className="pill__avatar"
+          title={avatar.author}
+          alt={avatar.author}
+          src={avatar.avatarUrl}
+        />
+      ) : (
+        <Fragment />
+      )}
       <span>{children}</span>
     </div>
   );
diff --git a/packages/server/src/ui/routes/build-view/build-hash-selector.css b/packages/server/src/ui/routes/build-view/build-hash-selector.css
index a9de8dd4e..8aa2bd27b 100644
--- a/packages/server/src/ui/routes/build-view/build-hash-selector.css
+++ b/packages/server/src/ui/routes/build-view/build-hash-selector.css
@@ -99,14 +99,6 @@
   font-family: var(--monospace-font-family);
 }
 
-.build-hash-selector__avatar {
-  width: var(--avatar-image-size);
-  height: var(--avatar-image-size);
-
-  border-radius: 100%;
-  margin: 0 var(--base-spacing);
-}
-
 .build-hash-selector__commit {
   flex-grow: 1;
   flex-shrink: 10;
diff --git a/packages/server/src/ui/routes/build-view/build-hash-selector.jsx b/packages/server/src/ui/routes/build-view/build-hash-selector.jsx
index 4f7f4c823..bcc62fcc1 100644
--- a/packages/server/src/ui/routes/build-view/build-hash-selector.jsx
+++ b/packages/server/src/ui/routes/build-view/build-hash-selector.jsx
@@ -102,10 +102,9 @@ const BuildLineItem = props => {
           withDevBranchArc={props.withDevBranchArc}
           withDevLine={props.withDevLine}
         />
-        <Pill variant={variant}>
+        <Pill variant={variant} avatar={build}>
           <span className="build-hash-selector__hash">{build.hash.slice(0, 8)}</span>
         </Pill>{' '}
-        <img className="build-hash-selector__avatar" alt={build.author} src={build.avatarUrl} />
         <span className="build-hash-selector__commit">{build.commitMessage}</span>
         <span className="build-hash-selector__links">
           {build.externalBuildUrl ? <a href={build.externalBuildUrl}>View Build</a> : <Fragment />}
diff --git a/packages/server/src/ui/routes/project-dashboard/project-dashboard.css b/packages/server/src/ui/routes/project-dashboard/project-dashboard.css
index 52baa100d..d18b9a304 100644
--- a/packages/server/src/ui/routes/project-dashboard/project-dashboard.css
+++ b/packages/server/src/ui/routes/project-dashboard/project-dashboard.css
@@ -16,6 +16,7 @@
 
 .dashboard__build-list {
   width: calc(100% - var(--base-spacing) * 2);
+  max-width: calc(100% - var(--base-spacing) * 2);
   margin-left: var(--base-spacing);
 }
 
@@ -40,19 +41,16 @@
   margin: 0 calc(var(--base-spacing) / 2);
 }
 
-.build-list__avatar img {
-  width: 36px;
-  height: 36px;
-  border-radius: 100%;
-}
-
 .build-list__commit,
 .build-list__branch {
   font-weight: var(--medium-font-weight);
 }
 
-.build-list__hash,
 .build-list__date {
   color: var(--secondary-text-color);
   white-space: nowrap;
 }
+
+.build-list__hash .pill {
+  width: fit-content;
+}
diff --git a/packages/server/src/ui/routes/project-dashboard/project-dashboard.jsx b/packages/server/src/ui/routes/project-dashboard/project-dashboard.jsx
index 4a4ce2939..0168f1d82 100644
--- a/packages/server/src/ui/routes/project-dashboard/project-dashboard.jsx
+++ b/packages/server/src/ui/routes/project-dashboard/project-dashboard.jsx
@@ -15,6 +15,7 @@ import {Page} from '../../layout/page.jsx';
 import {ProjectGraphs} from './project-graphs.jsx';
 
 import './project-dashboard.css';
+import {Pill} from '../../components/pill';
 
 /** @param {{project: LHCI.ServerCommand.Project, builds: Array<LHCI.ServerCommand.Build>, runUrl?: string, branch?: string}} props */
 const ProjectDashboard_ = props => {
@@ -31,8 +32,8 @@ const ProjectDashboard_ = props => {
                 key={build.id}
                 onClick={() => route(`/app/projects/${project.id}/builds/${build.id}`)}
               >
-                <td className="build-list__avatar" data-tooltip={build.author}>
-                  <img src={build.avatarUrl} alt={build.author} />
+                <td className="build-list__hash" data-tooltip={build.author}>
+                  <Pill avatar={build}>{build.hash.slice(0, 8)}</Pill>
                 </td>
                 <td className="build-list__commit">{build.commitMessage}</td>
                 <td className="build-list__branch">
@@ -41,7 +42,6 @@ const ProjectDashboard_ = props => {
                     {build.branch}
                   </div>
                 </td>
-                <td className="build-list__hash">{build.hash.slice(0, 8)}</td>
                 <td className="build-list__date">
                   {new Date(build.runAt).toDateString().replace(/\w+ (.*) \d{4}/, '$1')}{' '}
                   {new Date(build.runAt).toLocaleTimeString().replace(/:\d{2} /, ' ')}
diff --git a/packages/server/test/e2e/__image_snapshots__/project-dashboard-test-js-project-dashboard-render-the-dashboard-should-look-correct-1-snap.png b/packages/server/test/e2e/__image_snapshots__/project-dashboard-test-js-project-dashboard-render-the-dashboard-should-look-correct-1-snap.png
index 6d853e362..9f57d2a5d 100644
Binary files a/packages/server/test/e2e/__image_snapshots__/project-dashboard-test-js-project-dashboard-render-the-dashboard-should-look-correct-1-snap.png and b/packages/server/test/e2e/__image_snapshots__/project-dashboard-test-js-project-dashboard-render-the-dashboard-should-look-correct-1-snap.png differ
diff --git a/packages/server/test/e2e/project-dashboard.test.js b/packages/server/test/e2e/project-dashboard.test.js
index 1f630c840..69b538352 100644
--- a/packages/server/test/e2e/project-dashboard.test.js
+++ b/packages/server/test/e2e/project-dashboard.test.js
@@ -24,11 +24,11 @@ describe('Project dashboard', () => {
 
       expect(commits).toMatchInlineSnapshot(`
         Array [
-          "test: empty basecall_splitmaster824cbea4Oct 09 8:15 PM",
-          "test(unmatched-ancestor): a really really really really long messagecall_splitmissing_ancestorba5b0ad9Aug 09 8:13 PM",
-          "test(matched-ancestor): a really really really really really long messagecall_splitmaster5b0ad9f6Aug 09 6:55 PM",
-          "feat: improves TTIcall_splittest_1c1ea447bAug 09 6:15 PM",
-          "feat: regresses TTIcall_splittest_0aaa5b0a3Aug 09 3:15 PM",
+          "824cbea4test: empty basecall_splitmasterOct 09 8:15 PM",
+          "ba5b0ad9test(unmatched-ancestor): a really really really really long messagecall_splitmissing_ancestorAug 09 8:13 PM",
+          "5b0ad9f6test(matched-ancestor): a really really really really really long messagecall_splitmasterAug 09 6:55 PM",
+          "c1ea447bfeat: improves TTIcall_splittest_1Aug 09 6:15 PM",
+          "aaa5b0a3feat: regresses TTIcall_splittest_0Aug 09 3:15 PM",
         ]
       `);
     });