diff --git a/client/web/src/components/views/subnet-router-view.tsx b/client/web/src/components/views/subnet-router-view.tsx
new file mode 100644
index 000000000..d800a13c0
--- /dev/null
+++ b/client/web/src/components/views/subnet-router-view.tsx
@@ -0,0 +1,146 @@
+// Copyright (c) Tailscale Inc & AUTHORS
+// SPDX-License-Identifier: BSD-3-Clause
+
+import React, { useMemo, useState } from "react"
+import { ReactComponent as CheckCircle } from "src/assets/icons/check-circle.svg"
+import { ReactComponent as Clock } from "src/assets/icons/clock.svg"
+import { ReactComponent as Plus } from "src/assets/icons/plus.svg"
+import { NodeData, NodeUpdaters } from "src/hooks/node-data"
+import Button from "src/ui/button"
+import Input from "src/ui/input"
+
+export default function SubnetRouterView({
+ readonly,
+ node,
+ nodeUpdaters,
+}: {
+ readonly: boolean
+ node: NodeData
+ nodeUpdaters: NodeUpdaters
+}) {
+ const advertisedRoutes = useMemo(
+ () => node.AdvertisedRoutes || [],
+ [node.AdvertisedRoutes]
+ )
+ const [inputOpen, setInputOpen] = useState
(
+ advertisedRoutes.length === 0 && !readonly
+ )
+ const [inputText, setInputText] = useState("")
+
+ return (
+ <>
+ Subnet router
+
+ Add devices to your tailnet without installing Tailscale.{" "}
+
+ Learn more →
+
+
+ {inputOpen ? (
+
+
Advertise new routes
+
setInputText(e.target.value)}
+ />
+
+ Add multiple routes by providing a comma-separated list.
+
+
+
+ {advertisedRoutes.length > 0 ? (
+ <>
+
+ {advertisedRoutes.map((r) => (
+
+
{r.Route}
+
+
+ {r.Approved ? (
+
+ ) : (
+
+ )}
+ {r.Approved ? (
+
+ Approved
+
+ ) : (
+
+ Pending approval
+
+ )}
+
+
+
+
+ ))}
+
+
+
+ ) : (
+
+ Not advertising any routes
+
+ )}
+