diff --git a/packages/components/src/components/cells/markdown.tsx b/packages/components/src/components/cells/markdown.tsx
index 540d0e03..51a42ecf 100644
--- a/packages/components/src/components/cells/markdown.tsx
+++ b/packages/components/src/components/cells/markdown.tsx
@@ -86,7 +86,7 @@ export default function MarkdownCell(props: MarkdownCellProps) {
     mermaid.initialize({
       startOnLoad: false,
       theme: 'base',
-      fontFamily: 'IBM Plex Sans',
+      fontFamily: 'Instrument Sans',
       darkMode: theme === 'dark',
       themeVariables: theme === 'dark' ? MERMAID_DARK_OVERRIDES : MERMAID_LIGHT_OVERRIDES,
     });
diff --git a/packages/web/src/components/apps/panels/explorer.tsx b/packages/web/src/components/apps/panels/explorer.tsx
index 51cf0aae..a44b3096 100644
--- a/packages/web/src/components/apps/panels/explorer.tsx
+++ b/packages/web/src/components/apps/panels/explorer.tsx
@@ -16,7 +16,7 @@ type FileTreePropsType = {
 
 function FileTree({ tree, openedFile, setOpenedFile }: FileTreePropsType) {
   return (
-    <ul className="pl-3 font-mono text-sm text-tertiary-foreground leading-6">
+    <ul className="pl-3 text-sm text-tertiary-foreground leading-6">
       {tree.map((entry) =>
         entry.directory ? (
           <li key={entry.name}>
@@ -32,7 +32,7 @@ function FileTree({ tree, openedFile, setOpenedFile }: FileTreePropsType) {
               'transition-all',
               openedFile?.path === entry.file.path
                 ? 'cursor-default text-foreground font-semibold'
-                : 'cursor-pointer hover:text-foreground hover:font-semibold',
+                : 'cursor-pointer hover:text-foreground',
             )}
           >
             <button onClick={() => setOpenedFile(entry.file)}>{entry.name}</button>
diff --git a/packages/web/src/index.css b/packages/web/src/index.css
index 0bf1fa3c..6f15c968 100644
--- a/packages/web/src/index.css
+++ b/packages/web/src/index.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap');
 
 @tailwind base;
 @tailwind components;
diff --git a/packages/web/tailwind.config.js b/packages/web/tailwind.config.js
index 7ce42378..b47c2b29 100644
--- a/packages/web/tailwind.config.js
+++ b/packages/web/tailwind.config.js
@@ -21,7 +21,7 @@ module.exports = {
     extend: {
       fontFamily: {
         sans: [
-          'IBM Plex Sans',
+          'Instrument Sans',
           'ui-sans-serif',
           'system-ui',
           'sans-serif',