diff --git a/.github/codespellrc b/.github/codespellrc
index 61cf98da7..73a213e1f 100644
--- a/.github/codespellrc
+++ b/.github/codespellrc
@@ -1,3 +1,3 @@
 [codespell]
-skip = ./**/*.svg,./elixir/deps,./**/*.min.js,./kotlin/android/app/build,./e2e/pnpm-lock.yaml,./website/.next,./website/pnpm-lock.yaml,./rust/target,Cargo.lock,./website/docs/reference/api/*.mdx,./**/erl_crash.dump,./cover,./vendor,*.json,seeds.exs,./**/node_modules,./deps,./priv/static,./priv/plts,./**/priv/static,./.git,./_build
+skip = ./**/*.svg,./elixir/deps,./**/*.min.js,./kotlin/android/app/build,./kotlin/android/build,./e2e/pnpm-lock.yaml,./website/.next,./website/pnpm-lock.yaml,./rust/target,Cargo.lock,./website/docs/reference/api/*.mdx,./**/erl_crash.dump,./cover,./vendor,*.json,seeds.exs,./**/node_modules,./deps,./priv/static,./priv/plts,./**/priv/static,./.git,./_build
 ignore-words-list = optin,crate,keypair,keypairs,iif,statics,wee,anull,commitish,inout,fo,superceded
diff --git a/.github/pre-commit-config.yaml b/.github/pre-commit-config.yaml
index b57224485..5d43d380b 100644
--- a/.github/pre-commit-config.yaml
+++ b/.github/pre-commit-config.yaml
@@ -10,7 +10,7 @@ repos:
 
   # Standard pre-commit hooks
   - repo: https://github.com/pre-commit/pre-commit-hooks
-    rev: v2.3.0
+    rev: v4.6.0
     hooks:
       - id: mixed-line-ending
         args: ["--fix=lf"]
@@ -32,15 +32,32 @@ repos:
 
   # Third party pre-commit hooks
   - repo: https://github.com/koalaman/shellcheck-precommit
-    rev: v0.9.0
+    rev: v0.10.0
     hooks:
       - id: shellcheck
         args: ["--severity=warning"]
         exclude: ^.*/gradlew$
   - repo: https://github.com/pecigonzalo/pre-commit-shfmt
-    rev: v2.1.0
+    rev: v2.2.0
     hooks:
       - id: shell-fmt
         args:
           - -i
           - "4"
+  - repo: https://github.com/pre-commit/mirrors-prettier
+    rev: "v4.0.0-alpha.8"
+    hooks:
+      - id: prettier
+        # Exclude non-website files for now
+        # TODO: Lint these files in all directories
+        exclude: "^(?!website/)"
+        types_or:
+          - javascript
+          - jsx
+          - css
+          - scss
+          - json
+          - mdx
+          - markdown
+          - html
+          - xml
diff --git a/website/README.md b/website/README.md
index 7b08188b4..a5176b603 100644
--- a/website/README.md
+++ b/website/README.md
@@ -19,9 +19,11 @@ result.
 You can start editing the page by modifying `app/page.tsx`. The page
 auto-updates as you edit the file.
 
-This project uses
-[`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to
-automatically optimize and load Inter, a custom Google Font.
+### Linting
+
+This project uses [Prettier](https://prettier.io/) to format code and ensure a
+consistent style. Use the [.prettierrc.json](../.prettierrc.json) in the root of
+this repo to configure your editor.
 
 ## Learn More
 
diff --git a/website/src/app/docs/authenticate/oidc/auth0/readme.mdx b/website/src/app/docs/authenticate/oidc/auth0/readme.mdx
index 8be91d9be..88d88e35d 100644
--- a/website/src/app/docs/authenticate/oidc/auth0/readme.mdx
+++ b/website/src/app/docs/authenticate/oidc/auth0/readme.mdx
@@ -27,7 +27,8 @@ settings required for the integration:
 In the Auth0 dashboard, create an application. Select **Regular Web
 Application** as the application type.
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="auth0 configuration"
   src="/images/auth0-configuration.png"
   width={960}
@@ -46,19 +47,22 @@ modify the following parameters:
    `EXTERNAL_URL + /auth/oidc/<Config ID>/callback/` (e.g.
    `https://firezone.example.com/auth/oidc/auth0/callback/`).
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="auth0 settings 1"
   src="/images/auth0-settings-1.png"
   width={960}
   height={540}
 />
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="auth0 settings 2"
   src="/images/auth0-settings-2.png"
   width={960}
   height={540}
 />
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="auth0 settings 3"
   src="/images/auth0-settings-3.png"
   width={960}
diff --git a/website/src/app/docs/authenticate/oidc/azuread/readme.mdx b/website/src/app/docs/authenticate/oidc/azuread/readme.mdx
index 087964207..75c7d0376 100644
--- a/website/src/app/docs/authenticate/oidc/azuread/readme.mdx
+++ b/website/src/app/docs/authenticate/oidc/azuread/readme.mdx
@@ -22,7 +22,8 @@ the following config settings required for the integration:
    which returns a JSON document used to construct subsequent requests to this
    OIDC provider.
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="azure sso login"
   src="/images/azure-sso-login.gif"
   width={960}
@@ -46,7 +47,8 @@ after entering the following:
    include the trailing slash both when saving the provider in Firezone and in
    Azure AD (`redirect_uri` field on the screenshot below).**
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="azure app registration"
   src="/images/azure-app-registration.png"
   width={960}
@@ -58,7 +60,8 @@ After registering, open the details view of the application and copy the
 the endpoints menu to retrieve the `OpenID Connect metadata document`. **This
 will be the `discovery_document_uri` value**.
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="azure client id"
   src="/images/azure-client-id.png"
   width={960}
@@ -69,7 +72,8 @@ Next, select the Certificates & secrets link under the Manage menu and create a
 new client secret. Copy the client secret - **this will be the `client_secret`
 value**.
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="azure client secret"
   src="/images/azure-client-secret.png"
   width={960}
@@ -80,7 +84,8 @@ Lastly, select the API permissions link under the Manage menu, click
 `Add a permission`, and select `Microsoft Graph`. Add `email`, `openid`,
 `offline_access` and `profile` to the required permissions.
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="azure permissions"
   src="/images/azure-permissions.png"
   width={960}
diff --git a/website/src/app/docs/authenticate/oidc/keycloak/readme.mdx b/website/src/app/docs/authenticate/oidc/keycloak/readme.mdx
index 81059e8c4..faeea6819 100644
--- a/website/src/app/docs/authenticate/oidc/keycloak/readme.mdx
+++ b/website/src/app/docs/authenticate/oidc/keycloak/readme.mdx
@@ -27,7 +27,8 @@ settings required for the integration:
 In the Keycloak Admin Console, make sure the realm you want to use with Firezone
 is selected.
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="keycloak realm"
   src="/images/keycloak-realm.png"
   width={960}
@@ -44,7 +45,8 @@ and configure the following:
 1. **Name**: `Firezone`
 1. Click **Next**.
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="create firezone client"
   src="/images/create-firezone-client.png"
   width={960}
@@ -54,7 +56,8 @@ and configure the following:
 1. Toggle **Client authentication** to `On` to generate the client secret.
 1. Click **Save**.
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="save firezone client"
   src="/images/save-firezone-client.png"
   width={960}
@@ -69,7 +72,8 @@ redirect URI:
    `https://firezone.example.com/auth/oidc/keycloak/callback/`).
 1. Click **Add valid redirect URIs**
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="firezone access settings"
   src="/images/firezone-access-settings.png"
   width={960}
@@ -78,7 +82,8 @@ redirect URI:
 
 Click the **Credentials** tab and copy the client secret.
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="firezone client secret"
   src="/images/firezone-client-secret.png"
   width={960}
@@ -88,7 +93,8 @@ Click the **Credentials** tab and copy the client secret.
 Navigate to the **Realm Settings** page to get the **Discovery Document URI** by
 copying the **OpenID Endpoint Configuration** link at the bottom of the page.
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="keycloak realm settings"
   src="/images/keycloak-realm-settings.png"
   width={960}
diff --git a/website/src/app/docs/authenticate/oidc/okta/readme.mdx b/website/src/app/docs/authenticate/oidc/okta/readme.mdx
index 086f7b70e..e1bc0caec 100644
--- a/website/src/app/docs/authenticate/oidc/okta/readme.mdx
+++ b/website/src/app/docs/authenticate/oidc/okta/readme.mdx
@@ -22,7 +22,8 @@ settings required for the integration:
    which returns a JSON document used to construct subsequent requests to this
    OIDC provider.
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="firezone okta sso login"
   src="/images/firezone-okta-sso-login-2.gif"
   width={960}
@@ -38,7 +39,8 @@ In the Admin Console, go to **Applications > Applications** and click **Create
 App Integration**. Set **Sign-in method** to **OICD - OpenID Connect** and
 **Application type** to **Web application**.
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="okta create options"
   src="/images/okta-create-options.png"
   width={960}
@@ -63,7 +65,8 @@ On the following screen, configure the following settings:
 1. **Assignments**: Limit to the groups you wish to provide access to your
    Firezone instance.
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="okta settings"
   src="/images/okta-settings.png"
   width={960}
@@ -74,7 +77,8 @@ Once settings are saved, you will be given a **Client ID**, **Client Secret**,
 and **Okta Domain**. These 3 values will be used in Step 2 to configure
 Firezone.
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="okta credentials"
   src="/images/okta-credentials.png"
   width={960}
@@ -97,7 +101,8 @@ see a `Sign in with Okta` button on the sign in page.
 Okta can limit the users with access to the Firezone app. To do this, go to the
 Assignments tab of the Firezone App Integration in your Okta Admin Console.
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="okta assignments"
   src="/images/okta-assignments.png"
   width={960}
diff --git a/website/src/app/docs/authenticate/oidc/onelogin/readme.mdx b/website/src/app/docs/authenticate/oidc/onelogin/readme.mdx
index d89b15414..4ad0e8b06 100644
--- a/website/src/app/docs/authenticate/oidc/onelogin/readme.mdx
+++ b/website/src/app/docs/authenticate/oidc/onelogin/readme.mdx
@@ -34,7 +34,8 @@ Create a new OIDC connector by visiting **Appliances > Custom Connectors**.
    `<EXTERNAL_URL> + /auth/oidc/<Config ID>/callback/` (e.g.
    `https://firezone.example.com/auth/oidc/onelogin/callback/`).
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="onelogin configuration"
   src="/images/onelogin-configuration.png"
   width={960}
@@ -49,7 +50,8 @@ Next, click **Add App to Connector** to create an OIDC application. Visit the
 You will find the values for the config settings required by Firezone on this
 page as well.
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="onelogin config parameters"
   src="/images/onelogin-config-parameters.png"
   width={960}
diff --git a/website/src/app/docs/authenticate/saml/google/readme.mdx b/website/src/app/docs/authenticate/saml/google/readme.mdx
index 1e6e89498..5c0b7d3b2 100644
--- a/website/src/app/docs/authenticate/saml/google/readme.mdx
+++ b/website/src/app/docs/authenticate/saml/google/readme.mdx
@@ -21,7 +21,8 @@ setup:
 | Name ID format  | Unspecified                                                                                                                              |
 | Name ID         | Basic Information > Primary email                                                                                                        |
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="google saml"
   width={960}
   height={540}
@@ -48,7 +49,8 @@ filling out the following information:
 | Require signed envelopes  | **Unchecked.**  |                                                                                                                                             |
 | Auto create users         | Default `false` | Enable this setting to automatically create users when signing in with this connector for the first time. Disable to manually create users. |
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="firezone saml"
   width={960}
   height={540}
diff --git a/website/src/app/docs/user-guides/add-devices/readme.mdx b/website/src/app/docs/user-guides/add-devices/readme.mdx
index cf6453c17..93aaf1733 100644
--- a/website/src/app/docs/user-guides/add-devices/readme.mdx
+++ b/website/src/app/docs/user-guides/add-devices/readme.mdx
@@ -16,7 +16,8 @@ their own WireGuard configs.
 Firezone admins can generate device configs for all users. This can be done by
 clicking the "Add Device" button on the user profile page found in `/users`.
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="add device under user"
   src="/images/add-device-under-user.png"
   width={960}
diff --git a/website/src/app/docs/user-guides/egress-rules/readme.mdx b/website/src/app/docs/user-guides/egress-rules/readme.mdx
index 625b7392c..0572810f6 100644
--- a/website/src/app/docs/user-guides/egress-rules/readme.mdx
+++ b/website/src/app/docs/user-guides/egress-rules/readme.mdx
@@ -9,7 +9,8 @@ The Allowlist and Denylist support both IPv4 and IPv6 CIDRs and IP addresses.
 When adding a rule, you may optionally scope it to a user which applies the rule
 to all their devices.
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="firewall rules"
   src="/images/firewall-rules.png"
   width={960}
diff --git a/website/src/app/docs/user-guides/use-cases/nat-gateway/readme.mdx b/website/src/app/docs/user-guides/use-cases/nat-gateway/readme.mdx
index e09746f4e..99efe016d 100644
--- a/website/src/app/docs/user-guides/use-cases/nat-gateway/readme.mdx
+++ b/website/src/app/docs/user-guides/use-cases/nat-gateway/readme.mdx
@@ -19,7 +19,8 @@ This is commonly done in place of maintaining an IP whitelist for multiple team
 members, which becomes impossible to manage as the access list grows and team
 members' IP addresses change.
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="nat gateway"
   src="/images/nat-gateway.png"
   width={960}
@@ -47,7 +48,8 @@ Firezone. Specific to AWS, ensure:
    source IP address of traffic routed through the Firezone instance to external
    destinations. In this case, the IP is `52.202.88.54`.
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="allocate elastic ip"
   src="/images/allocate-elastic-ip.png"
   width={960}
@@ -61,7 +63,8 @@ web app is restricted to only requests from `52.202.88.54`. Depending on the
 resource, inbound traffic on different ports and traffic types may need to be
 allowed. This is outside the scope of this guide.
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="configure security group"
   src="/images/configure-security-group.png"
   width={960}
diff --git a/website/src/app/docs/user-guides/use-cases/reverse-tunnel/readme.mdx b/website/src/app/docs/user-guides/use-cases/reverse-tunnel/readme.mdx
index 5732afd2b..e50ef2ed6 100644
--- a/website/src/app/docs/user-guides/use-cases/reverse-tunnel/readme.mdx
+++ b/website/src/app/docs/user-guides/use-cases/reverse-tunnel/readme.mdx
@@ -11,7 +11,8 @@ a server, container, or machine that is normally behind a NAT or firewall.
 This example demonstrates a simple scenario where a tunnel is established
 between Device A and Device B.
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="node to node"
   src="/images/node-to-node.png"
   width={960}
@@ -48,7 +49,8 @@ bi-directionally with Devices B through D. This configuration could represent an
 administrator or engineer accessing multiple resources (servers, containers, or
 machines) in different networks.
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="node to multiple nodes"
   src="/images/node-to-multiple-nodes.png"
   width={960}
diff --git a/website/src/app/kb/use-cases/host-access/readme.mdx b/website/src/app/kb/use-cases/host-access/readme.mdx
index bc4b2b0ff..613d2552b 100644
--- a/website/src/app/kb/use-cases/host-access/readme.mdx
+++ b/website/src/app/kb/use-cases/host-access/readme.mdx
@@ -10,8 +10,8 @@ import PlanBadge from "@/components/PlanBadge";
 
 </PlanBadge>
 
-In this guide, we'll use Firezone to secure access to a host based on the
-host's private IP address.
+In this guide, we'll use Firezone to secure access to a host based on the host's
+private IP address.
 
 This is useful when you have a host that may be behind a firewall that you want
 to keep secure, but still need to access it from external networks like the
diff --git a/website/src/app/kb/use-cases/nat-gateway/readme.mdx b/website/src/app/kb/use-cases/nat-gateway/readme.mdx
index b28029cab..fadbce854 100644
--- a/website/src/app/kb/use-cases/nat-gateway/readme.mdx
+++ b/website/src/app/kb/use-cases/nat-gateway/readme.mdx
@@ -14,9 +14,9 @@ In this guide, we'll walk through the configuration required to use Firezone to
 route traffic through a public IP address, sometimes known as a NAT Gateway
 configuration.
 
-Use this when you need your team's traffic to appear to come from a
-single, static IP address to use services that require source traffic to come
-from specified IP allowlists.
+Use this when you need your team's traffic to appear to come from a single,
+static IP address to use services that require source traffic to come from
+specified IP allowlists.
 
 After completing this guide, your team's traffic will be routed to a Firezone
 Gateway and then out to the internet using its public IP address.
diff --git a/website/src/app/kb/use-cases/private-network-access/readme.mdx b/website/src/app/kb/use-cases/private-network-access/readme.mdx
index e72652967..2493828d3 100644
--- a/website/src/app/kb/use-cases/private-network-access/readme.mdx
+++ b/website/src/app/kb/use-cases/private-network-access/readme.mdx
@@ -21,8 +21,9 @@ internet.
   In general, we recommend using a more granular approach to secure access using
   either [DNS](/kb/use-cases/web-app-access) or
   [IP-based](/kb/use-cases/host-access) Resources instead of the blanket
-  approach used in this guide. Only use this guide if using DNS
-  or IP-based Resources is not feasible, or if you need a stepping stone towards a more granular approach.
+  approach used in this guide. Only use this guide if using DNS or IP-based
+  Resources is not feasible, or if you need a stepping stone towards a more
+  granular approach.
 </Alert>
 
 ## Prerequisites