diff --git a/web/src/app.css b/web/src/app.css
index 746ba810a..81b58580a 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -23,11 +23,18 @@
     --immich-dark-warning: 245 124 0;
   }
 }
+@font-face {
+  font-family: 'Overpass';
+  src: url('$lib/assets/fonts/overpass/Overpass.ttf') format('truetype-variations');
+  font-weight: 1 999;
+  font-style: normal;
+}
 
 @font-face {
-  font-family: 'Work Sans';
-  src: url('$lib/assets/fonts/WorkSans-VariableFont_wght.ttf') format('truetype-variations');
+  font-family: 'Overpass Mono';
+  src: url('$lib/assets/fonts/overpass/OverpassMono.ttf') format('truetype-variations');
   font-weight: 1 999;
+  font-style: monospace;
 }
 
 @font-face {
@@ -36,7 +43,7 @@
 }
 
 :root {
-  font-family: 'Work Sans', sans-serif;
+  font-family: 'Overpass', sans-serif;
   /* Used by layouts to ensure proper spacing between navbar and content */
   --navbar-height: calc(theme(spacing.18) + 4px);
 }
@@ -44,6 +51,7 @@
 html {
   height: 100%;
   width: 100%;
+  font-size: 17px;
 }
 
 html::-webkit-scrollbar {
diff --git a/web/src/lib/assets/fonts/WorkSans-Italic-VariableFont_wght.ttf b/web/src/lib/assets/fonts/WorkSans-Italic-VariableFont_wght.ttf
deleted file mode 100644
index 03e9671c1..000000000
Binary files a/web/src/lib/assets/fonts/WorkSans-Italic-VariableFont_wght.ttf and /dev/null differ
diff --git a/web/src/lib/assets/fonts/WorkSans-VariableFont_wght.ttf b/web/src/lib/assets/fonts/WorkSans-VariableFont_wght.ttf
deleted file mode 100644
index c8d05412f..000000000
Binary files a/web/src/lib/assets/fonts/WorkSans-VariableFont_wght.ttf and /dev/null differ
diff --git a/web/src/lib/assets/fonts/overpass/Overpass-Italic.ttf b/web/src/lib/assets/fonts/overpass/Overpass-Italic.ttf
new file mode 100644
index 000000000..281dd742b
Binary files /dev/null and b/web/src/lib/assets/fonts/overpass/Overpass-Italic.ttf differ
diff --git a/web/src/lib/assets/fonts/overpass/Overpass.ttf b/web/src/lib/assets/fonts/overpass/Overpass.ttf
new file mode 100644
index 000000000..1cf730a5a
Binary files /dev/null and b/web/src/lib/assets/fonts/overpass/Overpass.ttf differ
diff --git a/web/src/lib/assets/fonts/overpass/OverpassMono.ttf b/web/src/lib/assets/fonts/overpass/OverpassMono.ttf
new file mode 100644
index 000000000..71ef818b3
Binary files /dev/null and b/web/src/lib/assets/fonts/overpass/OverpassMono.ttf differ
diff --git a/web/src/lib/components/shared-components/scrollbar/scrollbar.svelte b/web/src/lib/components/shared-components/scrollbar/scrollbar.svelte
index 6d3dec494..045cea950 100644
--- a/web/src/lib/components/shared-components/scrollbar/scrollbar.svelte
+++ b/web/src/lib/components/shared-components/scrollbar/scrollbar.svelte
@@ -134,7 +134,7 @@
         {#if segment.hasLabel}
           <div
             aria-label={segment.timeGroup + ' ' + segment.count}
-            class="absolute right-0 bottom-0 z-10 pr-5 text-xs font-medium dark:text-immich-dark-fg font-mono"
+            class="absolute right-0 bottom-0 z-10 pr-5 text-xs dark:text-immich-dark-fg font-immich-mono font-semibold"
           >
             {segment.date.year}
           </div>
diff --git a/web/src/lib/components/user-settings-page/partner-settings.svelte b/web/src/lib/components/user-settings-page/partner-settings.svelte
index dddf537cd..afabe7a25 100644
--- a/web/src/lib/components/user-settings-page/partner-settings.svelte
+++ b/web/src/lib/components/user-settings-page/partner-settings.svelte
@@ -118,7 +118,7 @@
               <p class="text-immich-fg dark:text-immich-dark-fg">
                 {partner.user.name}
               </p>
-              <p class="text-xs text-immich-fg/75 dark:text-immich-dark-fg/75">
+              <p class="text-sm text-immich-fg/75 dark:text-immich-dark-fg/75">
                 {partner.user.email}
               </p>
             </div>
diff --git a/web/src/routes/(user)/explore/+page.svelte b/web/src/routes/(user)/explore/+page.svelte
index 37f094491..88da35924 100644
--- a/web/src/routes/(user)/explore/+page.svelte
+++ b/web/src/routes/(user)/explore/+page.svelte
@@ -37,7 +37,7 @@
   $: {
     if (innerWidth && screenSize) {
       // Set the number of faces according to the screen size and the div size
-      MAX_ITEMS = screenSize < 768 ? Math.floor(innerWidth / 96) : Math.floor(innerWidth / 112);
+      MAX_ITEMS = screenSize < 768 ? Math.floor(innerWidth / 96) : Math.floor(innerWidth / 120);
     }
   }
 </script>
diff --git a/web/tailwind.config.cjs b/web/tailwind.config.cjs
index 3691e15dc..8dee52c5d 100644
--- a/web/tailwind.config.cjs
+++ b/web/tailwind.config.cjs
@@ -25,6 +25,7 @@ module.exports = {
       },
       fontFamily: {
         'immich-title': ['Snowburst One', 'cursive'],
+        'immich-mono': ['Overpass Mono', 'monospace'],
       },
       spacing: {
         18: '4.5rem',