diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index ec6923be2312e7..03028d05452714 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -21,7 +21,7 @@ repos:
         exclude: |
           (?x)^(
             .*example-layer.tar.gz|
-            .*\.(png|svg|ico|gpg)|
+            .*\.(png|svg|ico|gpg|woff2)|
             dev/version-manifest/version-manifest|
             .*gradle-wrapper\.jar
           )$
diff --git a/components/dashboard/public/fonts/JetBrainsMono-Regular.woff2 b/components/dashboard/public/fonts/JetBrainsMono-Regular.woff2
new file mode 100644
index 00000000000000..40da427651937a
Binary files /dev/null and b/components/dashboard/public/fonts/JetBrainsMono-Regular.woff2 differ
diff --git a/components/dashboard/public/index.html b/components/dashboard/public/index.html
index 0bf52894cce683..625aa4127dcd2d 100644
--- a/components/dashboard/public/index.html
+++ b/components/dashboard/public/index.html
@@ -18,6 +18,7 @@
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon192.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="stylesheet" href="/fonts/JetBrainsMono-Regular.woff2" type="font/woff2">
     <title>Dashboard — Gitpod</title>
   </head>
   <body>
diff --git a/components/dashboard/src/projects/Prebuilds.tsx b/components/dashboard/src/projects/Prebuilds.tsx
index 3804aa9a1577f3..129b9dd9bc4e83 100644
--- a/components/dashboard/src/projects/Prebuilds.tsx
+++ b/components/dashboard/src/projects/Prebuilds.tsx
@@ -281,7 +281,7 @@ export default function (props: { project?: Project; isAdminDashboard?: boolean
                                                     />
                                                 )}
                                                 Authored {formatDate(p.info.changeDate)} ·{" "}
-                                                {p.info.changeHash?.substring(0, 8)}
+                                                <span className="font-mono">{p.info.changeHash?.substring(0, 8)}</span>
                                             </p>
                                         </div>
                                     </ItemField>
@@ -290,7 +290,7 @@ export default function (props: { project?: Project; isAdminDashboard?: boolean
                                             <a href={p.info.changeUrl} className="cursor-pointer">
                                                 <div className="flex space-x-2 truncate">
                                                     <span
-                                                        className="font-medium text-gray-500 dark:text-gray-50 truncate"
+                                                        className="font-medium text-gray-500 dark:text-gray-50 truncate font-mono"
                                                         title={p.info.branch}
                                                     >
                                                         {p.info.branch}
diff --git a/components/dashboard/src/projects/Project.tsx b/components/dashboard/src/projects/Project.tsx
index 7f8ba4ee305a26..4282f4d8d9b02d 100644
--- a/components/dashboard/src/projects/Project.tsx
+++ b/components/dashboard/src/projects/Project.tsx
@@ -338,10 +338,10 @@ export default function () {
                                             <ItemField className="flex items-center my-auto">
                                                 <div>
                                                     <a href={branch.url}>
-                                                        <div className="text-base text-gray-600 hover:text-gray-800 dark:text-gray-50 dark:hover:text-gray-200 font-medium mb-1">
+                                                        <div className="text-base text-gray-600 hover:text-gray-800 dark:text-gray-50 dark:hover:text-gray-200 font-medium mb-1 font-mono">
                                                             {branch.name}
                                                             {branch.isDefault && (
-                                                                <span className="ml-2 self-center rounded-xl py-0.5 px-2 text-sm bg-blue-50 text-blue-40 dark:bg-blue-500 dark:text-blue-100">
+                                                                <span className="ml-2 self-center rounded-xl py-0.5 px-2 text-sm font-sans bg-blue-50 text-blue-40 dark:bg-blue-500 dark:text-blue-100">
                                                                     DEFAULT
                                                                 </span>
                                                             )}
@@ -356,7 +356,9 @@ export default function () {
                                                     </div>
                                                     <p>
                                                         {avatar}Authored {formatDate(branch.changeDate)} ·{" "}
-                                                        {branch.changeHash?.substring(0, 8)}
+                                                        <span className="font-mono">
+                                                            {branch.changeHash?.substring(0, 8)}
+                                                        </span>
                                                     </p>
                                                 </div>
                                             </ItemField>
diff --git a/components/dashboard/src/projects/ProjectListItem.tsx b/components/dashboard/src/projects/ProjectListItem.tsx
index 7639a67edbf434..8e8128aba65697 100644
--- a/components/dashboard/src/projects/ProjectListItem.tsx
+++ b/components/dashboard/src/projects/ProjectListItem.tsx
@@ -87,7 +87,7 @@ export const ProjectListItem: FunctionComponent<ProjectListItemProps> = ({ proje
                         >
                             {prebuildStatusIcon(prebuild)}
                             <div
-                                className="font-semibold text-gray-500 dark:text-gray-400 truncate"
+                                className="font-semibold text-gray-500 dark:text-gray-400 truncate font-mono"
                                 title={prebuild?.info?.branch}
                             >
                                 {prebuild?.info?.branch}
diff --git a/components/dashboard/src/projects/ProjectVariables.tsx b/components/dashboard/src/projects/ProjectVariables.tsx
index 91eb6e70ccd091..4ce408b6210200 100644
--- a/components/dashboard/src/projects/ProjectVariables.tsx
+++ b/components/dashboard/src/projects/ProjectVariables.tsx
@@ -77,7 +77,7 @@ export default function () {
                         {envVars.map((variable) => {
                             return (
                                 <Item className="grid grid-cols-3 items-center">
-                                    <ItemField className="truncate">{variable.name}</ItemField>
+                                    <ItemField className="truncate font-mono">{variable.name}</ItemField>
                                     <ItemField>{variable.censored ? "Hidden" : "Visible"}</ItemField>
                                     <ItemField className="flex justify-end">
                                         <ItemFieldContextMenu
@@ -148,7 +148,7 @@ function AddVariableModal(props: { project?: Project; onClose: () => void }) {
                     <h4>Name</h4>
                     <input
                         autoFocus
-                        className="w-full"
+                        className="w-full font-mono"
                         type="text"
                         name="name"
                         value={name}
@@ -158,7 +158,7 @@ function AddVariableModal(props: { project?: Project; onClose: () => void }) {
                 <div className="mt-4">
                     <h4>Value</h4>
                     <input
-                        className="w-full"
+                        className="w-full font-mono"
                         type="text"
                         name="value"
                         value={value}
diff --git a/components/dashboard/src/settings/EnvironmentVariables.tsx b/components/dashboard/src/settings/EnvironmentVariables.tsx
index 7957c723b40cb3..74ebc2c6f65222 100644
--- a/components/dashboard/src/settings/EnvironmentVariables.tsx
+++ b/components/dashboard/src/settings/EnvironmentVariables.tsx
@@ -61,7 +61,7 @@ function AddEnvVarModal(p: EnvVarModalProps) {
                     <h4>Name</h4>
                     <input
                         autoFocus
-                        className="w-full"
+                        className="w-full font-mono"
                         type="text"
                         value={ev.name}
                         onChange={(v) => {
@@ -72,7 +72,7 @@ function AddEnvVarModal(p: EnvVarModalProps) {
                 <div className="mt-4">
                     <h4>Value</h4>
                     <input
-                        className="w-full"
+                        className="w-full font-mono"
                         type="text"
                         value={ev.value}
                         onChange={(v) => {
@@ -83,7 +83,7 @@ function AddEnvVarModal(p: EnvVarModalProps) {
                 <div className="mt-4">
                     <h4>Scope</h4>
                     <input
-                        className="w-full"
+                        className="w-full font-mono"
                         type="text"
                         value={ev.repositoryPattern}
                         placeholder="e.g. owner/repository"
@@ -128,8 +128,8 @@ function DeleteEnvVarModal(p: { variable: UserEnvVarValue; deleteVariable: () =>
                 <span className="truncate">Scope</span>
             </div>
             <div className="grid grid-cols-2 gap-4 p-3 mt-3 text-gray-400 bg-gray-100 dark:bg-gray-800 rounded-xl">
-                <span className="truncate text-gray-900 dark:text-gray-50">{p.variable.name}</span>
-                <span className="truncate text-sm">{p.variable.repositoryPattern}</span>
+                <span className="truncate text-gray-900 dark:text-gray-50 font-mono">{p.variable.name}</span>
+                <span className="truncate text-sm font-mono">{p.variable.repositoryPattern}</span>
             </div>
         </ConfirmationModal>
     );
@@ -262,10 +262,10 @@ export default function EnvVars() {
                     {envVars.map((variable) => {
                         return (
                             <Item className="whitespace-nowrap">
-                                <ItemField className="w-5/12 overflow-ellipsis truncate my-auto">
+                                <ItemField className="w-5/12 overflow-ellipsis truncate my-auto font-mono">
                                     {variable.name}
                                 </ItemField>
-                                <ItemField className="w-5/12 overflow-ellipsis truncate text-sm text-gray-400 my-auto">
+                                <ItemField className="w-5/12 overflow-ellipsis truncate text-sm text-gray-400 my-auto font-mono">
                                     {variable.repositoryPattern}
                                 </ItemField>
                                 <ItemFieldContextMenu
diff --git a/components/dashboard/src/workspaces/WorkspaceEntry.tsx b/components/dashboard/src/workspaces/WorkspaceEntry.tsx
index 45374f8627624b..e7bbdc63eb702c 100644
--- a/components/dashboard/src/workspaces/WorkspaceEntry.tsx
+++ b/components/dashboard/src/workspaces/WorkspaceEntry.tsx
@@ -198,7 +198,9 @@ export function WorkspaceEntry({ desc, model, isAdmin, stopWorkspace }: Props) {
                 </a>
             </ItemField>
             <ItemField className="w-2/12 flex flex-col my-auto">
-                <div className="text-gray-500 dark:text-gray-400 overflow-ellipsis truncate">{currentBranch}</div>
+                <div className="text-gray-500 dark:text-gray-400 overflow-ellipsis truncate font-mono">
+                    {currentBranch}
+                </div>
                 <div className="mr-auto">
                     <PendingChangesDropdown workspaceInstance={desc.latestInstance} />
                 </div>
diff --git a/components/dashboard/src/workspaces/WorkspaceEntryNew.tsx b/components/dashboard/src/workspaces/WorkspaceEntryNew.tsx
index 23ecd2396d1c5a..0a1466912870c8 100644
--- a/components/dashboard/src/workspaces/WorkspaceEntryNew.tsx
+++ b/components/dashboard/src/workspaces/WorkspaceEntryNew.tsx
@@ -68,7 +68,9 @@ export const WorkspaceEntry: FunctionComponent<Props> = ({ info }) => {
                 </a>
             </ItemField>
             <ItemField className="w-2/12 flex flex-col my-auto">
-                <div className="text-gray-500 dark:text-gray-400 overflow-ellipsis truncate">{currentBranch}</div>
+                <div className="text-gray-500 dark:text-gray-400 overflow-ellipsis truncate font-mono">
+                    {currentBranch}
+                </div>
                 <div className="mr-auto">
                     <PendingChangesDropdown workspaceInstance={info.latestInstance} />
                 </div>
diff --git a/components/dashboard/tailwind.config.js b/components/dashboard/tailwind.config.js
index 8d3ab6f29dc9d2..e9bb1cb42997b4 100644
--- a/components/dashboard/tailwind.config.js
+++ b/components/dashboard/tailwind.config.js
@@ -64,7 +64,7 @@ module.exports = {
                 "Segoe UI Symbol",
                 "Noto Color Emoji",
             ],
-            mono: ["SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", "monospace"],
+            mono: ["JetBrains Mono", "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", "monospace"],
         },
         underlineThickness: {
             thin: "2px",
