diff --git a/client/web/index.html b/client/web/index.html
index 264608bcd..08952dd4b 100644
--- a/client/web/index.html
+++ b/client/web/index.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQflAx4QGA4EvmzDAAAA30lEQVRIx2NgGAWMCKa8JKM4A8Ovt88ekyLCDGOoyDBJMjExMbFy8zF8/EKsCAMDE8yAPyIwFps48SJIBpAL4AZwvoSx/r0lXgQpDN58EWL5x/7/H+vL20+JFxluQKVe5b3Ke5V+0kQQCamfoYKBg4GDwUKI8d0BYkWQkrLKewYBKPPDHUFiRaiZkBgmwhj/F5IgggyUJ6i8V3mv0kCayDAAeEsklXqGAgYGhgV3CnGrwVciYSYk0kokhgS44/JxqqFpiYSZbEgskd4dEBRk1GD4wdB5twKXmlHAwMDAAACdEZau06NQUwAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMC0wNy0xNVQxNTo1Mzo0MCswMDowMCVXsDIAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjAtMDctMTVUMTU6NTM6NDArMDA6MDBUCgiOAAAAAElFTkSuQmCC" />
     <link rel="stylesheet" type="text/css" href="/src/index.css" />
+    <link rel="preload" as="font" href="/src/assets/fonts/Inter.var.latin.woff2" type="font/woff2" crossorigin />
   </head>
   <body>
     <noscript>
diff --git a/client/web/src/assets/fonts/Inter.var.latin.woff2 b/client/web/src/assets/fonts/Inter.var.latin.woff2
new file mode 100644
index 000000000..980853fec
Binary files /dev/null and b/client/web/src/assets/fonts/Inter.var.latin.woff2 differ
diff --git a/client/web/src/icons/arrow-right.svg b/client/web/src/assets/icons/arrow-right.svg
similarity index 100%
rename from client/web/src/icons/arrow-right.svg
rename to client/web/src/assets/icons/arrow-right.svg
diff --git a/client/web/src/icons/arrow-up-circle.svg b/client/web/src/assets/icons/arrow-up-circle.svg
similarity index 100%
rename from client/web/src/icons/arrow-up-circle.svg
rename to client/web/src/assets/icons/arrow-up-circle.svg
diff --git a/client/web/src/icons/check-circle.svg b/client/web/src/assets/icons/check-circle.svg
similarity index 100%
rename from client/web/src/icons/check-circle.svg
rename to client/web/src/assets/icons/check-circle.svg
diff --git a/client/web/src/icons/check.svg b/client/web/src/assets/icons/check.svg
similarity index 100%
rename from client/web/src/icons/check.svg
rename to client/web/src/assets/icons/check.svg
diff --git a/client/web/src/icons/chevron-down.svg b/client/web/src/assets/icons/chevron-down.svg
similarity index 100%
rename from client/web/src/icons/chevron-down.svg
rename to client/web/src/assets/icons/chevron-down.svg
diff --git a/client/web/src/icons/connected-device.svg b/client/web/src/assets/icons/connected-device.svg
similarity index 100%
rename from client/web/src/icons/connected-device.svg
rename to client/web/src/assets/icons/connected-device.svg
diff --git a/client/web/src/icons/eye.svg b/client/web/src/assets/icons/eye.svg
similarity index 100%
rename from client/web/src/icons/eye.svg
rename to client/web/src/assets/icons/eye.svg
diff --git a/client/web/src/icons/search.svg b/client/web/src/assets/icons/search.svg
similarity index 100%
rename from client/web/src/icons/search.svg
rename to client/web/src/assets/icons/search.svg
diff --git a/client/web/src/icons/tailscale-icon.svg b/client/web/src/assets/icons/tailscale-icon.svg
similarity index 100%
rename from client/web/src/icons/tailscale-icon.svg
rename to client/web/src/assets/icons/tailscale-icon.svg
diff --git a/client/web/src/icons/tailscale-logo.svg b/client/web/src/assets/icons/tailscale-logo.svg
similarity index 100%
rename from client/web/src/icons/tailscale-logo.svg
rename to client/web/src/assets/icons/tailscale-logo.svg
diff --git a/client/web/src/icons/user.svg b/client/web/src/assets/icons/user.svg
similarity index 100%
rename from client/web/src/icons/user.svg
rename to client/web/src/assets/icons/user.svg
diff --git a/client/web/src/icons/x-circle.svg b/client/web/src/assets/icons/x-circle.svg
similarity index 100%
rename from client/web/src/icons/x-circle.svg
rename to client/web/src/assets/icons/x-circle.svg
diff --git a/client/web/src/components/app.tsx b/client/web/src/components/app.tsx
index 106b2e847..232bd4a6c 100644
--- a/client/web/src/components/app.tsx
+++ b/client/web/src/components/app.tsx
@@ -1,5 +1,6 @@
 import cx from "classnames"
 import React, { useEffect } from "react"
+import { ReactComponent as TailscaleIcon } from "src/assets/icons/tailscale-icon.svg"
 import LoginToggle from "src/components/login-toggle"
 import DeviceDetailsView from "src/components/views/device-details-view"
 import HomeView from "src/components/views/home-view"
@@ -8,7 +9,6 @@ import SSHView from "src/components/views/ssh-view"
 import { UpdatingView } from "src/components/views/updating-view"
 import useAuth, { AuthResponse } from "src/hooks/auth"
 import useNodeData, { NodeData } from "src/hooks/node-data"
-import { ReactComponent as TailscaleIcon } from "src/icons/tailscale-icon.svg"
 import { Link, Route, Router, Switch, useLocation } from "wouter"
 
 export default function App() {
diff --git a/client/web/src/components/exit-node-selector.tsx b/client/web/src/components/exit-node-selector.tsx
index cb113d065..3bd643e1a 100644
--- a/client/web/src/components/exit-node-selector.tsx
+++ b/client/web/src/components/exit-node-selector.tsx
@@ -1,5 +1,7 @@
 import cx from "classnames"
-import { default as React, useCallback, useMemo, useState } from "react"
+import React, { useCallback, useMemo, useState } from "react"
+import { ReactComponent as Check } from "src/assets/icons/check.svg"
+import { ReactComponent as ChevronDown } from "src/assets/icons/chevron-down.svg"
 import useExitNodes, {
   ExitNode,
   noExitNode,
@@ -7,8 +9,6 @@ import useExitNodes, {
   trimDNSSuffix,
 } from "src/hooks/exit-nodes"
 import { NodeData, NodeUpdate, PrefsUpdate } from "src/hooks/node-data"
-import { ReactComponent as Check } from "src/icons/check.svg"
-import { ReactComponent as ChevronDown } from "src/icons/chevron-down.svg"
 import Popover from "src/ui/popover"
 import SearchInput from "src/ui/search-input"
 
diff --git a/client/web/src/components/login-toggle.tsx b/client/web/src/components/login-toggle.tsx
index 0ca903aa9..bb291268e 100644
--- a/client/web/src/components/login-toggle.tsx
+++ b/client/web/src/components/login-toggle.tsx
@@ -1,10 +1,10 @@
 import cx from "classnames"
 import React, { useCallback, useEffect, useState } from "react"
+import { ReactComponent as ChevronDown } from "src/assets/icons/chevron-down.svg"
+import { ReactComponent as Eye } from "src/assets/icons/eye.svg"
+import { ReactComponent as User } from "src/assets/icons/user.svg"
 import { AuthResponse, AuthType } from "src/hooks/auth"
 import { NodeData } from "src/hooks/node-data"
-import { ReactComponent as ChevronDown } from "src/icons/chevron-down.svg"
-import { ReactComponent as Eye } from "src/icons/eye.svg"
-import { ReactComponent as User } from "src/icons/user.svg"
 import Popover from "src/ui/popover"
 import ProfilePic from "src/ui/profile-pic"
 
diff --git a/client/web/src/components/views/home-view.tsx b/client/web/src/components/views/home-view.tsx
index fa9adf4db..2e8c73210 100644
--- a/client/web/src/components/views/home-view.tsx
+++ b/client/web/src/components/views/home-view.tsx
@@ -1,9 +1,9 @@
 import cx from "classnames"
 import React from "react"
+import { ReactComponent as ArrowRight } from "src/assets/icons/arrow-right.svg"
+import { ReactComponent as ConnectedDeviceIcon } from "src/assets/icons/connected-device.svg"
 import ExitNodeSelector from "src/components/exit-node-selector"
 import { NodeData, NodeUpdate, PrefsUpdate } from "src/hooks/node-data"
-import { ReactComponent as ArrowRight } from "src/icons/arrow-right.svg"
-import { ReactComponent as ConnectedDeviceIcon } from "src/icons/connected-device.svg"
 import { Link } from "wouter"
 
 export default function HomeView({
diff --git a/client/web/src/components/views/login-view.tsx b/client/web/src/components/views/login-view.tsx
index 62a188691..2adeaeab9 100644
--- a/client/web/src/components/views/login-view.tsx
+++ b/client/web/src/components/views/login-view.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback } from "react"
 import { apiFetch } from "src/api"
+import { ReactComponent as TailscaleIcon } from "src/assets/icons/tailscale-icon.svg"
 import { NodeData } from "src/hooks/node-data"
-import { ReactComponent as TailscaleIcon } from "src/icons/tailscale-icon.svg"
 
 /**
  * LoginView is rendered when the client is not authenticated
diff --git a/client/web/src/components/views/updating-view.tsx b/client/web/src/components/views/updating-view.tsx
index 8abd43bda..660eb725c 100644
--- a/client/web/src/components/views/updating-view.tsx
+++ b/client/web/src/components/views/updating-view.tsx
@@ -1,12 +1,12 @@
 import React from "react"
+import { ReactComponent as CheckCircleIcon } from "src/assets/icons/check-circle.svg"
+import { ReactComponent as XCircleIcon } from "src/assets/icons/x-circle.svg"
 import { ChangelogText } from "src/components/update-available"
 import {
   UpdateState,
   useInstallUpdate,
   VersionInfo,
 } from "src/hooks/self-update"
-import { ReactComponent as CheckCircleIcon } from "src/icons/check-circle.svg"
-import { ReactComponent as XCircleIcon } from "src/icons/x-circle.svg"
 import Spinner from "src/ui/spinner"
 import { Link } from "wouter"
 
diff --git a/client/web/src/index.css b/client/web/src/index.css
index 7293d6350..5a2fca28b 100644
--- a/client/web/src/index.css
+++ b/client/web/src/index.css
@@ -3,6 +3,18 @@
 @tailwind utilities;
 
 @layer base {
+  @font-face {
+    font-family: "Inter";
+    font-weight: 100 900;
+    font-style: normal;
+    font-display: swap;
+    src: url("./assets/fonts/Inter.var.latin.woff2") format("woff2-variations");
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC,
+      U+02BB-02BC, U+2000-206F, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF,
+      U+FFFD, U+E06B-E080, U+02E2, U+02E2, U+02B0, U+1D34, U+1D57, U+1D40,
+      U+207F, U+1D3A, U+1D48, U+1D30, U+02B3, U+1D3F;
+  }
+
   h1 {
     @apply text-neutral-800 text-[22px] font-medium leading-[30.80px];
   }
diff --git a/client/web/src/ui/search-input.tsx b/client/web/src/ui/search-input.tsx
index 8577a503f..cd51d9269 100644
--- a/client/web/src/ui/search-input.tsx
+++ b/client/web/src/ui/search-input.tsx
@@ -1,6 +1,6 @@
 import cx from "classnames"
 import React, { forwardRef, InputHTMLAttributes } from "react"
-import { ReactComponent as Search } from "src/icons/search.svg"
+import { ReactComponent as Search } from "src/assets/icons/search.svg"
 
 type Props = {
   className?: string
diff --git a/client/web/tailwind.config.js b/client/web/tailwind.config.js
index 1ec9c51c2..c59f4cf0b 100644
--- a/client/web/tailwind.config.js
+++ b/client/web/tailwind.config.js
@@ -5,6 +5,31 @@ module.exports = {
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
+    fontFamily: {
+      sans: [
+        "Inter",
+        "-apple-system",
+        "BlinkMacSystemFont",
+        "Helvetica",
+        "Arial",
+        "sans-serif",
+      ],
+      mono: [
+        "SFMono-Regular",
+        "SFMono Regular",
+        "Consolas",
+        "Liberation Mono",
+        "Menlo",
+        "Courier",
+        "monospace",
+      ],
+    },
+    fontWeight: {
+      normal: "400",
+      medium: "500",
+      semibold: "600",
+      bold: "700",
+    },
     extend: {},
   },
   plugins: [],
