diff --git a/packages/api/data.json b/packages/api/data.json
index c2af3c9f05..8bc5a94e6f 100644
--- a/packages/api/data.json
+++ b/packages/api/data.json
@@ -427,9 +427,7 @@
       "CypherVersion": ""
     }
   },
-  "OrchestratorPool": [
-    "https://127.0.0.1:3086"
-  ],
+  "OrchestratorPool": ["https://127.0.0.1:3086"],
   "Version": "0.5.0-7d249b00",
   "GolangRuntimeVersion": "go1.13.4",
   "GOArch": "amd64",
diff --git a/packages/api/esbuild.mjs b/packages/api/esbuild.mjs
index 6cd6f2bb62..e008b5b4d4 100644
--- a/packages/api/esbuild.mjs
+++ b/packages/api/esbuild.mjs
@@ -11,7 +11,7 @@ async function getFiles(dir) {
     dirents.map((dirent) => {
       const res = resolve(dir, dirent.name);
       return dirent.isDirectory() ? getFiles(res) : res;
-    })
+    }),
   );
   return Array.prototype.concat(...files).filter((f) => !f.includes("cache"));
 }
@@ -46,7 +46,7 @@ let frontendBundlePlugin = {
           loader: "js",
           resolveDir: resolve(args.resolveDir, args.path),
         };
-      }
+      },
     );
 
     // Any files from the static-build directory should be bundled as binary
diff --git a/packages/api/src/controllers/asset.test.ts b/packages/api/src/controllers/asset.test.ts
index 36a0d171d9..8b20658d58 100644
--- a/packages/api/src/controllers/asset.test.ts
+++ b/packages/api/src/controllers/asset.test.ts
@@ -908,6 +908,8 @@ describe("controllers/asset", () => {
       const { size } = await fs.stat(filePath);
       let uploadPercentage = await new Promise<number>(
         async (resolve, reject) => {
+          // @ts-ignore
+          // TUS types doesn't work well with node and typescript out of the box: https://github.com/tus/tus-js-client/issues/289#issuecomment-1997073291
           const upload = new tus.Upload(file, {
             endpoint: tusEndpoint,
             urlStorage: new (tus as any).FileUrlStorage(
diff --git a/packages/api/src/store/db.ts b/packages/api/src/store/db.ts
index 9703f06d81..d7e7d701dd 100644
--- a/packages/api/src/store/db.ts
+++ b/packages/api/src/store/db.ts
@@ -248,9 +248,9 @@ export class DB {
       throw e;
     }
     logger.debug(
-      `runQuery phase=success elapsed=${Date.now() - start}ms rows=${
-        result?.rowCount
-      } query=${queryLog}`,
+      `runQuery phase=success elapsed=${
+        Date.now() - start
+      }ms rows=${result?.rowCount} query=${queryLog}`,
     );
     return result;
   }
diff --git a/packages/www/components/Admin/CommonAdminTable/index.tsx b/packages/www/components/Admin/CommonAdminTable/index.tsx
index 979015cd4b..a561bfae2d 100644
--- a/packages/www/components/Admin/CommonAdminTable/index.tsx
+++ b/packages/www/components/Admin/CommonAdminTable/index.tsx
@@ -13,7 +13,7 @@ import {
   useRowSelect,
 } from "react-table";
 import Help from "../../../public/img/help.svg";
-import ReactTooltip from "react-tooltip";
+import { Tooltip } from "react-tooltip";
 import { User, Stream } from "@livepeer.studio/api";
 import "regenerator-runtime/runtime";
 
@@ -44,20 +44,12 @@ export const StreamName = ({
   admin?: boolean;
 }) => {
   const pid = `stream-name-${stream.id}-${name}`;
+  const tooltipContent = `Created by token ${stream?.createdByTokenName}`;
   const query = admin ? { admin: true } : {};
   return (
     <Box>
-      {stream.createdByTokenName ? (
-        <ReactTooltip
-          id={pid}
-          className="tooltip"
-          place="top"
-          type="dark"
-          effect="solid">
-          Created by token <b>{stream.createdByTokenName}</b>
-        </ReactTooltip>
-      ) : null}
-      <Box data-tip data-for={pid}>
+      {stream.createdByTokenName ? <Tooltip id={pid} /> : null}
+      <Box data-tooltip-id={pid} data-tooltip-content={tooltipContent}>
         <Link
           href={{ pathname: "/app/stream/[id]", query }}
           as={`/app/stream/${stream.id}`}>
@@ -93,15 +85,10 @@ export const RelativeTime = ({
     <Box id={idpref} key={idpref}>
       {tm ? (
         <>
-          <ReactTooltip
-            id={`tooltip-${idpref}`}
-            className="tooltip"
-            place="top"
-            type="dark"
-            effect="solid">
-            {toolTip}
-          </ReactTooltip>
-          <span data-tip data-for={`tooltip-${idpref}`}>
+          <Tooltip id={`tooltip-${idpref}`} />
+          <span
+            data-tooltip-id={`tooltip-${idpref}`}
+            data-tooltip-content={toolTip}>
             {main}
           </span>
         </>
@@ -114,27 +101,23 @@ export const RelativeTime = ({
 
 export const UserName = ({ user }: { user: User }) => {
   const tid = `tooltip-name-${user.id}`;
+  const tcontent = `
+    ${user.id}
+    ${user.firstName}
+    ${user.lastName}
+  `;
   return (
     <Box
       sx={{
         overflow: "hidden",
         textOverflow: "ellipsis",
       }}>
-      <ReactTooltip
-        id={tid}
-        className="tooltip"
-        place="top"
-        type="dark"
-        effect="solid">
-        <span>{user.id}</span>
-        <span>{user.firstName}</span>
-        <span>{user.lastName}</span>
-      </ReactTooltip>
-      <span data-tip data-for={tid}>
+      <span data-tooltip-id={tid} data-tooltip-content={tcontent}>
         {user.email.includes("@")
           ? user.email.split("@").join("@\u{200B}")
           : user.email}
       </span>
+      <Tooltip id={tid} />
     </Box>
   );
 };
@@ -311,7 +294,7 @@ const CommonAdminTable = ({
                 </Button>
                 <Button
                   variant="secondarySmall"
-                  disabled={rows.length < rowsPerPage || nextCursor === ""}
+                  disabled={rows.length < +rowsPerPage || nextCursor === ""}
                   sx={{ margin: 0, ml: 2, padding: "2px", px: "4px" }}
                   onClick={() => {
                     prevCursor.push(cursor);
@@ -458,18 +441,10 @@ const CommonAdminTable = ({
                         <Flex
                           sx={{ alignItems: "center", ml: "auto", mr: "1em" }}>
                           <Flex>
-                            <ReactTooltip
-                              id={`tooltip-multiorder`}
-                              className="tooltip"
-                              place="top"
-                              type="dark"
-                              effect="solid">
-                              To multi-sort (sort by two column simultaneously)
-                              hold shift while clicking on second column name.
-                            </ReactTooltip>
+                            <Tooltip id={`tooltip-multiorder`} />
                             <Help
-                              data-tip
-                              data-for={`tooltip-multiorder`}
+                              data-tooltip-id={`tooltip-multiorder`}
+                              data-tooltip-content="To multi-sort (sort by two column simultaneously) hold shift while clicking on second column name."
                               sx={{
                                 cursor: "pointer",
                                 ml: 1,
diff --git a/packages/www/components/Admin/StreamsTable/index.tsx b/packages/www/components/Admin/StreamsTable/index.tsx
index 280292adef..4c4276ba1e 100644
--- a/packages/www/components/Admin/StreamsTable/index.tsx
+++ b/packages/www/components/Admin/StreamsTable/index.tsx
@@ -1,7 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import { jsx } from "theme-ui";
 import Link from "next/link";
-import ReactTooltip from "react-tooltip";
+import { Tooltip } from "react-tooltip";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useApi, usePageVisibility } from "hooks";
 import { Box, Button, Flex, Container, Link as A } from "@theme-ui/components";
@@ -95,17 +95,10 @@ export const RenditionsDetails = ({ stream }: { stream: Stream }) => {
       {detailsTooltip ? (
         <Flex sx={{ alignItems: "center" }}>
           <Flex>
-            <ReactTooltip
-              id={`tooltip-details-${stream.id}`}
-              className="tooltip"
-              place="top"
-              type="dark"
-              effect="solid">
-              {detailsTooltip}
-            </ReactTooltip>
+            <Tooltip id={`tooltip-details-${stream.id}`} />
             <Help
-              data-tip
-              data-for={`tooltip-details-${stream.id}`}
+              data-tooltip-id={`tooltip-details-${stream.id}`}
+              data-tooltip-content={`${detailsTooltip}`}
               sx={{
                 color: "muted",
                 cursor: "pointer",
diff --git a/packages/www/components/Admin/Table-v2/cells/streams-table.tsx b/packages/www/components/Admin/Table-v2/cells/streams-table.tsx
index 158c954fe2..d631f4f6a2 100644
--- a/packages/www/components/Admin/Table-v2/cells/streams-table.tsx
+++ b/packages/www/components/Admin/Table-v2/cells/streams-table.tsx
@@ -3,7 +3,7 @@ import { jsx } from "theme-ui";
 import { Stream } from "@livepeer.studio/api";
 import { Box } from "@theme-ui/components";
 import { Flex } from "@theme-ui/components";
-import ReactTooltip from "react-tooltip";
+import { Tooltip } from "react-tooltip";
 import { CellComponentProps, TableData } from "../types";
 import Help from "../../../../public/img/help.svg";
 
@@ -91,23 +91,16 @@ const RenditionsDetailsCell = <D extends TableData>({
       {detailsTooltip ? (
         <Flex sx={{ alignItems: "center" }}>
           <Flex>
-            <ReactTooltip
-              id={`tooltip-details-${stream.id}`}
-              className="tooltip"
-              place="top"
-              type="dark"
-              effect="solid">
-              {detailsTooltip}
-            </ReactTooltip>
             <Help
-              data-tip
-              data-for={`tooltip-details-${stream.id}`}
+              data-tooltip-id={`tooltip-details-${stream.id}`}
+              content={`${detailsTooltip}`}
               sx={{
                 color: "muted",
                 cursor: "pointer",
                 ml: 1,
               }}
             />
+            <Tooltip id={`tooltip-details-${stream.id}`} />
           </Flex>
         </Flex>
       ) : null}
diff --git a/packages/www/components/Admin/Table-v2/cells/text.tsx b/packages/www/components/Admin/Table-v2/cells/text.tsx
index 91f4f703d8..62199cbd12 100644
--- a/packages/www/components/Admin/Table-v2/cells/text.tsx
+++ b/packages/www/components/Admin/Table-v2/cells/text.tsx
@@ -1,7 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import { jsx } from "theme-ui";
 import Link from "next/link";
-import ReactTooltip from "react-tooltip";
+import { Tooltip } from "react-tooltip";
 import { CellComponentProps, TableData } from "../types";
 
 export type TextCellProps = {
@@ -17,17 +17,10 @@ const TextCell = <D extends TableData>({
   const pid = "tooltip-" + cell.value.id;
   return (
     <div>
-      {cell.value.tooltipChildren ? (
-        <ReactTooltip
-          id={pid}
-          className="tooltip"
-          place="top"
-          type="dark"
-          effect="solid">
-          {cell.value.tooltipChildren}
-        </ReactTooltip>
-      ) : null}
-      <div data-tip data-for={pid}>
+      {cell.value.tooltipChildren ? <Tooltip id={pid} /> : null}
+      <div
+        data-tooltip-id={pid}
+        data-tooltip-content={`${cell?.value?.tooltipChildren}`}>
         {cell.value.href ? (
           <Link href={cell.value.href}>{cell.value.children}</Link>
         ) : (
diff --git a/packages/www/components/Admin/Table-v2/index.tsx b/packages/www/components/Admin/Table-v2/index.tsx
index 3f13c2a198..486391a109 100644
--- a/packages/www/components/Admin/Table-v2/index.tsx
+++ b/packages/www/components/Admin/Table-v2/index.tsx
@@ -11,7 +11,7 @@ import {
 } from "react-table";
 import { useEffect, useMemo, useCallback } from "react";
 import Paginator from "./paginator";
-import ReactTooltip from "react-tooltip";
+import { Tooltip } from "react-tooltip";
 import Help from "../../../public/img/help.svg";
 import Checkbox from "components/Admin/Checkbox";
 import {
@@ -294,18 +294,10 @@ const Table = <T extends Record<string, unknown>>({
                               top: "50%",
                               transform: "translateY(-50%)",
                             }}>
-                            <ReactTooltip
-                              id={`tooltip-multiorder`}
-                              className="tooltip"
-                              place="top"
-                              type="dark"
-                              effect="solid">
-                              To multi-sort (sort by two column simultaneously)
-                              hold shift while clicking on second column name.
-                            </ReactTooltip>
+                            <Tooltip id={`tooltip-multiorder`} />
                             <Help
-                              data-tip
-                              data-for={`tooltip-multiorder`}
+                              data-tooltip-id={`tooltip-multiorder`}
+                              data-tooltip-content={`To multi-sort (sort by two column simultaneously) hold shift while clicking on second column name.`}
                               sx={{
                                 cursor: "pointer",
                                 ml: 1,
diff --git a/packages/www/components/ApiKeys/index.tsx b/packages/www/components/ApiKeys/index.tsx
index ec6acfce85..2a0e377b78 100644
--- a/packages/www/components/ApiKeys/index.tsx
+++ b/packages/www/components/ApiKeys/index.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useApi } from "../../hooks";
 import Table, {
   DefaultSortBy,
@@ -17,6 +17,7 @@ import {
 import { makeCreateAction, makeSelectAction } from "../Table/helpers";
 import TableStateDeleteDialog from "../Table/components/TableStateDeleteDialog";
 import { useJune, events } from "hooks/use-june";
+import { useProjectContext } from "context/ProjectContext";
 
 const ApiKeysTable = ({
   title = "API Keys",
@@ -32,6 +33,7 @@ const ApiKeysTable = ({
   });
   const deleteDialogState = useToggleState();
   const createDialogState = useToggleState();
+  const { projectId } = useProjectContext();
   const columns = useMemo(makeColumns, []);
   const June = useJune();
 
@@ -44,6 +46,10 @@ const ApiKeysTable = ({
     if (June) June.track(events.developer.apiKeyCreate);
   }, [June]);
 
+  useEffect(() => {
+    stateSetter.setProjectId(projectId);
+  }, [projectId]);
+
   return (
     <>
       <Table
diff --git a/packages/www/components/AssetsTable/helpers.tsx b/packages/www/components/AssetsTable/helpers.tsx
index ba992812c1..8f1ce90a22 100644
--- a/packages/www/components/AssetsTable/helpers.tsx
+++ b/packages/www/components/AssetsTable/helpers.tsx
@@ -101,6 +101,7 @@ export const rowsPageFromState = async (
   getAssets: ApiClient["getAssets"],
   getTasks: ApiClient["getTasks"],
   onDeleteAsset: Function,
+  appendProjectId: Function,
 ): Promise<RowsPageFromStateResult<AssetsTableData>> => {
   const assetsPromise = getAssets(userId, {
     filters: formatFiltersForApiRequest(state.filters),
@@ -137,7 +138,7 @@ export const rowsPageFromState = async (
         id: asset.id,
         name: {
           id: asset.id,
-          href: `/assets/${asset.id}`,
+          href: appendProjectId(`/assets/${asset.id}`),
           name: asset.name,
           isStatusFailed,
           errorMessage,
@@ -149,18 +150,18 @@ export const rowsPageFromState = async (
             </Box>
           ),
           fallback: <Box css={{ color: "$primary8" }}>—</Box>,
-          href: `/assets/${asset.id}`,
+          href: appendProjectId(`/assets/${asset.id}`),
         },
         sessionId: {
           children: <Box>{sessionId}</Box>,
           fallback: <Box css={{ color: "$primary8" }}>—</Box>,
-          href: `/sessions?sessionId=${sessionId}`,
+          href: appendProjectId(`/sessions?sessionId=${sessionId}`),
         },
         createdAt: {
           id: asset.id,
           date: new Date(asset.createdAt),
           fallback: <Box css={{ color: "$primary8" }}>—</Box>,
-          href: `/assets/${asset.id}`,
+          href: appendProjectId(`/assets/${asset.id}`),
           asset: asset as Asset, // CreatedAt cell expect SDK asset instead of API
         },
         updatedAt: {
@@ -169,7 +170,7 @@ export const rowsPageFromState = async (
               ? new Date(asset.status.updatedAt)
               : null,
           fallback: <Box css={{ color: "$primary8" }}>—</Box>,
-          href: `/assets/${asset.id}`,
+          href: appendProjectId(`/assets/${asset.id}`),
         },
         action: {
           id: asset.id,
diff --git a/packages/www/components/AssetsTable/index.tsx b/packages/www/components/AssetsTable/index.tsx
index 9df1175a67..ed8b3657bc 100644
--- a/packages/www/components/AssetsTable/index.tsx
+++ b/packages/www/components/AssetsTable/index.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from "react";
+import { useCallback, useEffect, useMemo } from "react";
 import { useApi } from "hooks";
 import Table, {
   useTableState,
@@ -17,6 +17,7 @@ import {
   rowsPageFromState,
 } from "./helpers";
 import { makeCreateAction } from "../Table/helpers";
+import { useProjectContext } from "context/ProjectContext";
 
 const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
@@ -36,6 +37,7 @@ const AssetsTable = ({
   const { getAssets, uploadAssets, deleteAsset, getTasks, getFileUploads } =
     useApi();
   const [openSnackbar] = useSnackbar();
+  const { appendProjectId, projectId } = useProjectContext();
   const createDialogState = useToggleState();
   const { state, stateSetter } = useTableState<AssetsTableData>({
     pageSize,
@@ -71,10 +73,21 @@ const AssetsTable = ({
 
   const fetcher: Fetcher<AssetsTableData> = useCallback(
     async (state) =>
-      rowsPageFromState(state, userId, getAssets, getTasks, onDeleteAsset),
-    [userId],
+      rowsPageFromState(
+        state,
+        userId,
+        getAssets,
+        getTasks,
+        onDeleteAsset,
+        appendProjectId,
+      ),
+    [userId, appendProjectId],
   );
 
+  useEffect(() => {
+    stateSetter.setProjectId(projectId);
+  }, [projectId]);
+
   return (
     <>
       <Table
diff --git a/packages/www/components/Breadcrumbs/index.tsx b/packages/www/components/Breadcrumbs/index.tsx
index 96706c5d34..2681007fa7 100644
--- a/packages/www/components/Breadcrumbs/index.tsx
+++ b/packages/www/components/Breadcrumbs/index.tsx
@@ -1,5 +1,9 @@
 import { styled, Box } from "@livepeer/design-system";
+import { useApi } from "hooks";
+import { useProjectContext } from "context/ProjectContext";
+import { usePathname } from "next/navigation";
 import { Children, isValidElement } from "react";
+import { useQuery } from "react-query";
 
 const BreadcrumbsOl = styled("ol", {
   display: "flex",
@@ -38,6 +42,13 @@ function insertSeparators(items) {
 }
 
 const Breadcrumbs = ({ children }) => {
+  const { projectId } = useProjectContext();
+  const { getProjects } = useApi();
+  const { data } = useQuery("projects", getProjects);
+  const pathname = usePathname();
+
+  const isSettingsPage = pathname?.includes("settings/");
+
   const allItems = Children.toArray(children)
     .filter((child) => {
       return isValidElement(child);
@@ -54,6 +65,25 @@ const Breadcrumbs = ({ children }) => {
         <Box css={{ display: "inline-flex" }}>{child}</Box>
       </Box>
     ));
+
+  if (!isSettingsPage) {
+    if (projectId) {
+      const project = data?.find((project) => project.id === projectId);
+      allItems.unshift(
+        <Box
+          as="li"
+          css={{
+            m: 0,
+            fontSize: "$3",
+            lineHeight: 1.5,
+          }}
+          key="project">
+          <Box css={{ display: "inline-flex" }}>{project?.name}</Box>
+        </Box>,
+      );
+    }
+  }
+
   return (
     <Box>
       <BreadcrumbsOl>{insertSeparators(allItems)}</BreadcrumbsOl>
diff --git a/packages/www/components/FeaturesModel/index.tsx b/packages/www/components/FeaturesModel/index.tsx
new file mode 100644
index 0000000000..b6705935f0
--- /dev/null
+++ b/packages/www/components/FeaturesModel/index.tsx
@@ -0,0 +1,117 @@
+import {
+  AlertDialog,
+  AlertDialogContent,
+  Flex,
+  Box,
+  Badge,
+  AlertDialogTitle,
+  Button,
+  AlertDialogCancel,
+  Text,
+  Heading,
+  Link,
+} from "@livepeer/design-system";
+import { featuresList } from "content/ftux-model";
+import Image from "next/image";
+import { useRouter } from "next/router";
+import React, { useEffect, useState } from "react";
+import { HiOutlineSparkles } from "react-icons/hi";
+
+export default function FeaturesModel() {
+  const [features, setFeatures] = useState(featuresList);
+  const [shouldShowFeature, setShouldShowFeature] = useState(false);
+
+  const renderDescriptionWithLineBreaks = (text) => {
+    return text.split("\n").map((line, index) => (
+      <span key={index}>
+        {line}
+        <br />
+      </span>
+    ));
+  };
+
+  const feature = features.filter((feature) => feature.isActive)[0];
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const hasShownFeature = localStorage.getItem(
+        `hasShownFeature-${feature.id}`,
+      );
+      if (!hasShownFeature) {
+        setShouldShowFeature(true);
+        localStorage.setItem(`hasShownFeature-${feature.id}`, "true");
+      }
+    }
+  }, []);
+
+  return (
+    <AlertDialog open={shouldShowFeature}>
+      <AlertDialogContent css={{ p: "0", borderRadius: 0 }}>
+        <Flex css={{ fd: "row", gap: "$3" }}>
+          <Box
+            css={{
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              p: "$5",
+            }}>
+            <Badge
+              variant="green"
+              size={"2"}
+              css={{
+                padding: "12px 15px",
+                width: "fit-content",
+                gap: "4px",
+                fontWeight: 600,
+                mb: "$3",
+              }}>
+              <HiOutlineSparkles />
+              New Feature
+            </Badge>
+            <AlertDialogTitle asChild>
+              <Heading size="2">{feature.title}</Heading>
+            </AlertDialogTitle>
+            <Box css={{ mb: "$4", mt: "$4" }}>
+              <Text
+                variant="neutral"
+                size="3"
+                css={{ mb: "$3", lineHeight: "23px" }}>
+                {renderDescriptionWithLineBreaks(feature.description)}
+              </Text>
+            </Box>
+            <Flex css={{ gap: "$3", mt: "$2" }}>
+              <AlertDialogCancel asChild>
+                <Button
+                  onClick={() => {
+                    setShouldShowFeature(false);
+                  }}
+                  size="2"
+                  type="submit"
+                  variant="primary">
+                  Got it
+                </Button>
+              </AlertDialogCancel>
+              <Button
+                onClick={() => {
+                  setShouldShowFeature(false);
+                }}
+                size="2"
+                variant={"gray"}>
+                <Link href={feature.learnMoreUrl} target="_blank">
+                  Learn more
+                </Link>
+              </Button>
+            </Flex>
+          </Box>
+          <Image
+            width={500}
+            height={500}
+            objectFit="contain"
+            src={feature.imageUrl}
+            alt="Projects"
+          />
+        </Flex>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
diff --git a/packages/www/components/GettingStarted/index.tsx b/packages/www/components/GettingStarted/index.tsx
index cab3af7ced..2443101263 100644
--- a/packages/www/components/GettingStarted/index.tsx
+++ b/packages/www/components/GettingStarted/index.tsx
@@ -1,187 +1,347 @@
 import {
   Heading,
-  Accordion,
-  AccordionTrigger,
-  AccordionItem,
-  AccordionContent,
   Text,
   Button,
   Box,
   Flex,
   Link as A,
+  Paragraph,
+  Promo,
+  Code,
+  Grid,
+  useSnackbar,
+  Avatar,
+  HoverCardRoot,
+  HoverCardContent,
+  HoverCardTrigger,
 } from "@livepeer/design-system";
 import Link from "next/link";
-import { ArrowRightIcon, ArrowTopRightIcon } from "@radix-ui/react-icons";
-import { getBrandName } from "lib/utils";
+import { ArrowRightIcon, CopyIcon } from "@radix-ui/react-icons";
+import { useProjectContext } from "context/ProjectContext";
+import { useQuery } from "react-query";
+import { useApi } from "hooks";
+import Image from "next/image";
+import {
+  AssetsIcon,
+  StreamIcon,
+  TerminalIcon,
+  UsageIcon,
+} from "components/Sidebar/NavIcons";
+import { getEmojiIcon } from "lib/get-emoji";
+import { useTheme } from "next-themes";
+import { CopyToClipboard } from "react-copy-to-clipboard";
+
+const GettingStarted = () => {
+  const { appendProjectId, projectId } = useProjectContext();
+  const { getProject } = useApi();
+  const { resolvedTheme } = useTheme();
+
+  const { data } = useQuery([projectId], () => getProject(projectId));
+
+  const [openSnackbar] = useSnackbar();
+
+  const GettingStartedCard = [
+    {
+      name: "Upload your first video",
+      description: "Upload your first video asset for on-demand playback.",
+      link: appendProjectId("/assets"),
+      icon: <AssetsIcon size={"24"} />,
+      action: "Upload Video",
+    },
+    {
+      name: "Create a live stream",
+      description:
+        "Generate a stream key to use in your favorite broadcasting software.",
+      link: appendProjectId("/streams"),
+      icon: <StreamIcon size={"24"} />,
+      action: "Create Stream",
+    },
+    {
+      name: "Understand your usage",
+      description: "Browse through your account usage and billing data.",
+      link: "/settings/usage",
+      icon: <UsageIcon size={"24"} />,
+      action: "View Usage",
+    },
+    {
+      name: "Create a webhook",
+      description:
+        "Set up a webhook to receive notifications about your video events.",
+      link: appendProjectId("/developers/webhooks"),
+      icon: <TerminalIcon size={"24"} />,
+      action: "Create Webhook",
+    },
+  ];
+
+  const SDKs = [
+    {
+      name: "React.js Components",
+      description:
+        "Add video functionality to your React application using our React SDK.",
+      link: "https://docs.livepeer.org/sdks/react/getting-started",
+      image: "/dashboard/react.svg",
+      action: "Visit Documentation",
+    },
+    {
+      name: "JavaScript SDK",
+      description:
+        "Add video functionality to your JavaScript application using our JavaScript SDK.",
+      link: "https://docs.livepeer.org/sdks/javascript",
+      image: "/dashboard/javascript.svg",
+      action: "Visit Documentation",
+    },
+    {
+      name: "Python SDK",
+      description:
+        "Add video functionality to your Python application using our Python SDK.",
+      link: "https://docs.livepeer.org/sdks/python",
+      image: "/dashboard/python.svg",
+      action: "Visit Documentation",
+    },
+    {
+      name: "Golang SDK",
+      description:
+        "Add video functionality to your Golang application using our Golang SDK.",
+      link: "https://docs.livepeer.org/sdks/go",
+      image: "/dashboard/golang.svg",
+      action: "Visit Documentation",
+    },
+  ];
+
+  const codeExample = `
+curl --request POST \
+  --url https://livepeer.studio/api/stream \
+  --header 'Authorization: Bearer <API_KEY>' \
+  --header 'Content-Type: application/json' \
+  --data '{
+  "name": "my first stream"
+}'
+  `;
 
-const GettingStarted = ({ firstName = "" }) => {
   return (
     <>
-      <Heading size="2" css={{ letterSpacing: "0", fontWeight: 600, mb: "$4" }}>
-        Welcome to {getBrandName()}
-        {firstName && `, ${firstName}`}
-      </Heading>
-      <Box css={{ bc: "$panel" }}>
-        <Accordion
-          placeholder="Getting Started"
-          type="single"
-          defaultValue="accordion-one">
-          <AccordionItem value="accordion-one">
-            <AccordionTrigger
-              placeholder="upload video accordion"
-              css={{ color: "$primary12" }}>
-              <Text size="4" css={{ color: "inherit" }}>
-                Upload your first video
-              </Text>
-            </AccordionTrigger>
-            <AccordionContent>
-              <Box>
-                <Text variant="neutral" css={{ mb: "$3", lineHeight: "23px" }}>
-                  Upload a video asset for on-demand playback.
-                </Text>
-              </Box>
-              <Flex align="center" wrap="wrap" gap={2}>
-                <Link href="/assets" passHref legacyBehavior>
-                  <Button
-                    variant="primary"
-                    css={{
-                      display: "inline-flex",
-                      cursor: "default",
-                      ai: "center",
-                    }}
-                    size="2">
-                    <Box css={{ mr: "$1" }}>Upload your first video</Box>
-                  </Button>
-                </Link>
-                <Link
-                  href="https://docs.livepeer.org/guides/developing/upload-a-video-asset"
-                  passHref
-                  legacyBehavior>
-                  <Button
-                    as="a"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    css={{
-                      display: "inline-flex",
-                      cursor: "default",
-                      ai: "center",
-                    }}
-                    size="2">
-                    <Box css={{ mr: "$1" }}>See the developer guide</Box>
-                    <ArrowTopRightIcon />
-                  </Button>
-                </Link>
-              </Flex>
-            </AccordionContent>
-          </AccordionItem>
-          <AccordionItem value="accordion-two">
-            <AccordionTrigger
-              placeholder="Create your first livestream"
-              css={{ color: "$primary12" }}>
-              <Text size="4" css={{ color: "inherit" }}>
-                Create your first livestream
-              </Text>
-            </AccordionTrigger>
-            <AccordionContent>
-              <Box>
-                <Text
-                  variant="neutral"
-                  size="3"
-                  css={{ mb: "$3", lineHeight: "23px" }}>
-                  Generate a stream key to use in your favorite broadcasting
-                  software.
-                </Text>
-              </Box>
-              <Flex align="center" gap={2}>
-                <Link href="/streams" passHref legacyBehavior>
-                  <Button
-                    variant="primary"
-                    css={{
-                      display: "inline-flex",
-                      cursor: "default",
-                      ai: "center",
-                    }}
-                    size="2">
-                    <Box css={{ mr: "$1" }}>Create your first livestream</Box>
-                  </Button>
-                </Link>
-                <Link
-                  href="https://docs.livepeer.org/guides/developing/create-a-livestream"
-                  passHref
-                  legacyBehavior>
-                  <Button
-                    as="a"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    css={{
-                      display: "inline-flex",
-                      cursor: "default",
-                      ai: "center",
-                    }}
-                    size="2">
-                    <Box css={{ mr: "$1" }}>See the developer guide</Box>
-                    <ArrowTopRightIcon />
-                  </Button>
-                </Link>
-              </Flex>
-            </AccordionContent>
-          </AccordionItem>
-          <AccordionItem value="accordion-three">
-            <AccordionTrigger
-              placeholder="Integrate with your app"
-              css={{ color: "$primary12" }}>
-              <Text size="4" css={{ color: "inherit" }}>
+      <Flex
+        justify={"between"}
+        align={"center"}
+        css={{
+          mb: "$5",
+        }}>
+        <Flex align={"center"}>
+          <Avatar
+            fallback={getEmojiIcon(data?.name)}
+            style={{
+              borderRadius: 10,
+              marginRight: 10,
+            }}
+            size={"3"}
+          />
+          <Heading size="2" css={{ fontWeight: 600 }}>
+            {data?.name}
+          </Heading>
+        </Flex>
+        <Link href={appendProjectId("/settings")} passHref legacyBehavior>
+          <Button as="a" size="2">
+            Edit Project
+          </Button>
+        </Link>
+      </Flex>
+      <Grid
+        css={{
+          width: "100%",
+          gap: "$5",
+          gridTemplateColumns: "repeat(auto-fill, minmax(23%, 1fr))",
+        }}>
+        {GettingStartedCard.map((sdk) => (
+          <Card key={sdk.name} {...sdk} />
+        ))}
+      </Grid>
+      <>
+        <Box
+          css={{
+            mt: "$6",
+            mb: "$3",
+          }}>
+          <Heading>Get started with Livepeer Studio</Heading>
+        </Box>
+        <Grid
+          css={{
+            width: "100%",
+            gap: "$5",
+            gridTemplateColumns: "repeat(auto-fill, minmax(46%, 1fr))",
+          }}>
+          <Promo
+            css={{
+              width: "100%",
+              height: "100%",
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "space-between",
+            }}>
+            <Box>
+              <TerminalIcon size={"24"} />
+              <Text size={"4"} css={{ fontWeight: 500, mt: "$2" }}>
                 Integrate with your app
               </Text>
-            </AccordionTrigger>
-            <AccordionContent>
               <Text
                 variant="neutral"
-                size="3"
-                css={{ mb: "$3", lineHeight: "23px" }}>
-                Create an API key and start coding.
+                size="2"
+                css={{
+                  mt: "$1",
+                  mb: "$1",
+                }}>
+                Get your API key and start coding your next video application.
               </Text>
-              <Flex align="center" gap={2}>
-                <Link
-                  href="dashboard/developers/api-keys"
-                  passHref
-                  legacyBehavior>
-                  <Button
-                    variant="primary"
-                    css={{
-                      display: "inline-flex",
-                      cursor: "default",
-                      ai: "center",
-                    }}
-                    size="2">
-                    <Box css={{ mr: "$1" }}>Generate an API Key</Box>
-                  </Button>
-                </Link>
-                <Link
-                  href="https://docs.livepeer.org/guides/developing/quickstart"
-                  passHref
-                  legacyBehavior>
-                  <Button
-                    as="a"
-                    target="_blank"
-                    rel="noopener noreferrer"
+              <HoverCardRoot openDelay={200}>
+                <HoverCardTrigger>
+                  <Flex>
+                    <CopyToClipboard
+                      text={codeExample}
+                      onCopy={() => openSnackbar("Copied to clipboard")}>
+                      <img
+                        src={
+                          resolvedTheme === "light"
+                            ? "/dashboard/code-example-light.png"
+                            : "/dashboard/code-example-dark.png"
+                        }
+                        alt="Code example"
+                        style={{
+                          marginBottom: 10,
+                          marginTop: 7,
+                          width: "100%",
+                        }}
+                      />
+                    </CopyToClipboard>
+                  </Flex>
+                </HoverCardTrigger>
+                <HoverCardContent>
+                  <Text
+                    variant="neutral"
                     css={{
-                      display: "inline-flex",
-                      cursor: "default",
+                      backgroundColor: "$panel",
+                      borderRadius: 6,
+                      px: "$3",
+                      py: "$1",
+                      fontSize: "$1",
+                      display: "flex",
                       ai: "center",
-                    }}
-                    size="2">
-                    <Box css={{ mr: "$1" }}>See the developer guide</Box>
-                    <ArrowTopRightIcon />
-                  </Button>
-                </Link>
-              </Flex>
-            </AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      </Box>
+                    }}>
+                    <CopyIcon /> <Box css={{ ml: "$2" }}>Click to copy</Box>
+                  </Text>
+                </HoverCardContent>
+              </HoverCardRoot>
+            </Box>
+            <Link
+              style={{
+                textDecoration: "none",
+              }}
+              href={
+                "https://docs.livepeer.org/api-reference/overview/introduction"
+              }>
+              <Button
+                css={{
+                  mt: "$2",
+                  display: "flex",
+                  width: "fit-content",
+                  alignItems: "center",
+                }}>
+                Visit documentation <ArrowRightIcon />
+              </Button>
+            </Link>
+          </Promo>
+          <Grid
+            css={{
+              display: "grid",
+              width: "100%",
+              height: "100%",
+              gap: "$5",
+              gridTemplateColumns: "repeat(2, 1fr)",
+            }}>
+            {SDKs.map((sdk) => (
+              <Box key={sdk.name}>
+                <Card key={sdk.name} {...sdk} />
+              </Box>
+            ))}
+          </Grid>
+        </Grid>
+      </>
     </>
   );
 };
 
+const Card = ({
+  name,
+  description,
+  action,
+  image,
+  icon,
+  link,
+}: {
+  name: string;
+  description: string;
+  action: string;
+  image?: string;
+  icon?: any;
+  link: string;
+}) => {
+  return (
+    <Promo
+      css={{
+        width: "100%",
+        height: "100%",
+        boxSizing: "border-box",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "space-between",
+      }}>
+      <Box>
+        {icon ? (
+          <Box>{icon}</Box>
+        ) : (
+          <Image
+            style={{
+              borderRadius: 5,
+            }}
+            src={image}
+            alt={name}
+            width={26}
+            height={26}
+          />
+        )}
+        <Text size={"4"} css={{ fontWeight: 500, mt: "$2" }}>
+          {name}
+        </Text>
+        <Text
+          variant="neutral"
+          size="2"
+          css={{
+            mt: "$1",
+            mb: "$1",
+          }}>
+          {description}
+        </Text>
+      </Box>
+      <Link
+        href={link}
+        style={{
+          textDecoration: "none",
+        }}>
+        <Button
+          css={{
+            mt: "$2",
+            display: "flex",
+            width: "fit-content",
+            alignItems: "center",
+          }}>
+          {action}{" "}
+          <ArrowRightIcon
+            style={{
+              marginLeft: "10px",
+            }}
+          />
+        </Button>
+      </Link>
+    </Promo>
+  );
+};
+
 export default GettingStarted;
diff --git a/packages/www/components/Project/ProjectTile.tsx b/packages/www/components/Project/ProjectTile.tsx
new file mode 100644
index 0000000000..0101ec98ec
--- /dev/null
+++ b/packages/www/components/Project/ProjectTile.tsx
@@ -0,0 +1,107 @@
+import {
+  Box,
+  Flex,
+  Text,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  Button,
+  Avatar,
+} from "@livepeer/design-system";
+import React from "react";
+import { HiDotsHorizontal } from "react-icons/hi";
+import { NavLink, generalSidebarItems } from "components/Sidebar";
+import Link from "next/link";
+import { getEmojiIcon } from "lib/get-emoji";
+
+function ProjectTile({ name, id, invalidateQuery }) {
+  return (
+    <Box
+      css={{
+        bc: "$neutral2",
+        border: "1px solid",
+        borderColor: "$neutral6",
+        p: "$4",
+        width: "100%",
+        borderRadius: "11px",
+        cursor: "pointer",
+        minHeight: 130,
+        transition: ".2s",
+        "&:hover": {
+          cursor: "pointer",
+          transition: ".2s",
+          borderColor: "$neutral9",
+        },
+      }}>
+      <Box>
+        <Flex align={"center"} justify={"between"}>
+          <Flex align={"center"}>
+            <Avatar fallback={getEmojiIcon(name)} size={"3"} />
+            <Text
+              css={{
+                fontWeight: 500,
+                ml: "$2",
+              }}>
+              {name}
+            </Text>
+          </Flex>
+          <DropdownMenu>
+            <Box
+              as={DropdownMenuTrigger}
+              css={{
+                border: 0,
+                backgroundColor: "transparent",
+                "&:focus": {
+                  outline: "none",
+                },
+              }}>
+              <HiDotsHorizontal />
+            </Box>
+            <DropdownMenuContent
+              placeholder="Settings"
+              css={{
+                border: "1px solid $colors$neutral6",
+                p: "$2",
+                width: "13rem",
+                mt: "$1",
+                ml: "-11rem",
+              }}>
+              <Box
+                css={{
+                  pb: 0,
+                  fontSize: 14,
+                  color: "$primary11",
+                  a: {
+                    textDecoration: "none",
+                    color: "$neutral12",
+                  },
+                }}>
+                <Flex
+                  direction={"column"}
+                  css={{
+                    width: "100%",
+                  }}>
+                  {generalSidebarItems.map((item) => (
+                    <Link
+                      passHref
+                      legacyBehavior
+                      href={`/projects/${id}/${item.path}`}>
+                      <NavLink key={item.title}>{item.title}</NavLink>
+                    </Link>
+                  ))}
+                </Flex>
+              </Box>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </Flex>
+      </Box>
+      <Flex justify={"end"}>
+        <Button css={{ mt: 40 }} size={1}>
+          Open Project
+        </Button>
+      </Flex>
+    </Box>
+  );
+}
+
+export default ProjectTile;
diff --git a/packages/www/components/Project/createProjectDialog.tsx b/packages/www/components/Project/createProjectDialog.tsx
new file mode 100644
index 0000000000..a7be55692e
--- /dev/null
+++ b/packages/www/components/Project/createProjectDialog.tsx
@@ -0,0 +1,105 @@
+import {
+  Box,
+  Button,
+  Flex,
+  AlertDialog,
+  AlertDialogTitle,
+  AlertDialogContent,
+  AlertDialogCancel,
+  TextField,
+  Heading,
+  Label,
+} from "@livepeer/design-system";
+import { useCallback, useState } from "react";
+import Spinner from "components/Spinner";
+import { createProject } from "hooks/use-api/endpoints/project";
+
+const CreateProjectDialog = ({
+  isOpen,
+  onOpenChange,
+  onCreate,
+}: {
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  onCreate: (projectName: string) => Promise<void>;
+}) => {
+  const [creating, setCreating] = useState(false);
+  const [projectName, setProjectName] = useState("");
+
+  return (
+    <AlertDialog open={isOpen} onOpenChange={onOpenChange}>
+      <AlertDialogContent css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
+        <AlertDialogTitle asChild>
+          <Heading size="1">Create Project</Heading>
+        </AlertDialogTitle>
+        <Label css={{ mt: "$1", color: "$neutral10" }}>
+          Working with different projects helps create a clear separation
+          between different customers or environments.
+        </Label>
+        <Box
+          css={{ mt: "$3" }}
+          as="form"
+          onSubmit={async (e) => {
+            e.preventDefault();
+            if (creating) {
+              return;
+            }
+            setCreating(true);
+            try {
+              await onCreate(projectName);
+            } catch (error) {
+              console.error(error);
+            } finally {
+              setCreating(false);
+              setProjectName("");
+            }
+          }}>
+          <Flex direction="column" gap="2">
+            <Label htmlFor="projectName">Project name</Label>
+            <TextField
+              required
+              size="2"
+              type="text"
+              css={{
+                mt: "-$1",
+              }}
+              id="projectName"
+              autoFocus={true}
+              value={projectName}
+              onChange={(e) => setProjectName(e.target.value)}
+              placeholder="e.g. My first project"
+            />
+          </Flex>
+
+          <Flex css={{ jc: "flex-end", gap: "$3", mt: "$4" }}>
+            <AlertDialogCancel asChild>
+              <Button disabled={creating} size="2" ghost>
+                Cancel
+              </Button>
+            </AlertDialogCancel>
+            <Button
+              css={{ display: "flex", ai: "center" }}
+              type="submit"
+              size="2"
+              disabled={creating}
+              variant="primary">
+              {creating && (
+                <Spinner
+                  css={{
+                    color: "$hiContrast",
+                    width: 16,
+                    height: 16,
+                    mr: "$2",
+                  }}
+                />
+              )}
+              Create new project
+            </Button>
+          </Flex>
+        </Box>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};
+
+export default CreateProjectDialog;
diff --git a/packages/www/components/Project/deleteProjectDialog.tsx b/packages/www/components/Project/deleteProjectDialog.tsx
new file mode 100644
index 0000000000..c470222d2b
--- /dev/null
+++ b/packages/www/components/Project/deleteProjectDialog.tsx
@@ -0,0 +1,103 @@
+import {
+  Box,
+  Button,
+  Flex,
+  AlertDialog,
+  AlertDialogTitle,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogCancel,
+  AlertDialogAction,
+  Overlay,
+  Heading,
+  Text,
+  DropdownMenuItem,
+  Portal,
+  Alert,
+  Label,
+  TextField,
+} from "@livepeer/design-system";
+import { useState } from "react";
+import { useApi } from "../../hooks";
+import Spinner from "components/Spinner";
+import Router from "next/router";
+import { Project } from "@livepeer.studio/api";
+
+const DeleteProjectDialog = ({
+  project,
+  invalidate,
+  open,
+  onOpenChange,
+  ...props
+}: {
+  project: Project;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  invalidate: () => void;
+}) => {
+  const { deleteProject } = useApi();
+  const [saving, setSaving] = useState(false);
+
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange} {...props}>
+      <AlertDialogContent css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
+        <AlertDialogTitle asChild>
+          <Heading size="1">Delete Project </Heading>
+        </AlertDialogTitle>
+        <AlertDialogDescription asChild>
+          <Text
+            size="3"
+            variant="neutral"
+            css={{ mt: "$2", lineHeight: "22px" }}>
+            This project will be deleted, along with all of its Assets, Streams,
+            Webhooks, API Keys, and Signing Keys.
+          </Text>
+        </AlertDialogDescription>
+
+        <Alert variant="red" css={{ mt: "$2", fontSize: "$1" }}>
+          Warning: This action is not reversible. Please be certain.
+        </Alert>
+
+        <Flex css={{ jc: "flex-end", gap: "$3", mt: "$5" }}>
+          <AlertDialogCancel asChild>
+            <Button size="2" onClick={() => onOpenChange(false)} ghost>
+              Cancel
+            </Button>
+          </AlertDialogCancel>
+          <AlertDialogAction asChild>
+            <Button
+              size="2"
+              disabled={saving}
+              onClick={async (e) => {
+                try {
+                  e.preventDefault();
+                  setSaving(true);
+                  await deleteProject(project.id);
+                  Router.replace("/dashboard");
+                  await invalidate();
+                  setSaving(false);
+                } catch (e) {
+                  setSaving(false);
+                }
+              }}
+              variant="red">
+              {saving && (
+                <Spinner
+                  css={{
+                    color: "$hiContrast",
+                    width: 16,
+                    height: 16,
+                    mr: "$2",
+                  }}
+                />
+              )}
+              Delete
+            </Button>
+          </AlertDialogAction>
+        </Flex>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};
+
+export default DeleteProjectDialog;
diff --git a/packages/www/components/RelativeTime/index.tsx b/packages/www/components/RelativeTime/index.tsx
index 7f6e7ae2d6..6c0c59c372 100644
--- a/packages/www/components/RelativeTime/index.tsx
+++ b/packages/www/components/RelativeTime/index.tsx
@@ -1,6 +1,6 @@
 import moment from "moment";
 import { Box } from "@theme-ui/components";
-import ReactTooltip from "react-tooltip";
+import { Tooltip } from "react-tooltip";
 
 type RelativeTimeProps = {
   id: string;
@@ -22,15 +22,11 @@ const RelativeTime = ({ id, prefix, tm, swap = false }: RelativeTimeProps) => {
     <Box id={idpref} key={idpref}>
       {tm ? (
         <>
-          <ReactTooltip
-            id={`tooltip-${idpref}`}
-            className="tooltip"
-            place="top"
-            type="dark"
-            effect="solid">
-            {toolTip}
-          </ReactTooltip>
-          <Box as="span" data-tip data-for={`tooltip-${idpref}`}>
+          <Tooltip id={`tooltip-${idpref}`} />
+          <Box
+            as="span"
+            data-tooltip-id={`tooltip-${idpref}`}
+            data-tooltip-content={toolTip}>
             {main}
           </Box>
         </>
diff --git a/packages/www/components/Sidebar/NavIcons.tsx b/packages/www/components/Sidebar/NavIcons.tsx
index 280a855a30..a2b81ba50c 100644
--- a/packages/www/components/Sidebar/NavIcons.tsx
+++ b/packages/www/components/Sidebar/NavIcons.tsx
@@ -23,10 +23,10 @@ export const HomeIcon = ({ active = false }) => (
   </Box>
 );
 
-export const StreamIcon = ({ active = false }) => (
+export const StreamIcon = ({ active = false, size = "16" }) => (
   <svg
-    width="16"
-    height="18"
+    width={size}
+    height={size}
     viewBox="0 0 16 18"
     fill="none"
     xmlns="http://www.w3.org/2000/svg">
@@ -50,11 +50,11 @@ export const StreamIcon = ({ active = false }) => (
   </svg>
 );
 
-export const TerminalIcon = ({ active = false }) => (
+export const TerminalIcon = ({ active = false, size = "16" }) => (
   <svg
-    height="16"
+    height={size}
     viewBox="0 0 16 16"
-    width="16"
+    width={size}
     xmlns="http://www.w3.org/2000/svg">
     <Box
       as="path"
@@ -86,25 +86,83 @@ export const BillingIcon = ({ active = false }) => (
   </svg>
 );
 
-export const UsageIcon = ({ active = false }) => (
+export const UsageIcon = ({ active = false, size = "16" }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    height="16"
+    height={size}
     viewBox="0 -960 960 960"
-    width="16"
+    width={size}
     fill="#4F566B">
     <path d="M63-537 0-600q93-95 218-147.5T480-800q24 0 54 1.5t62 5.5l-42 86q-18-2-36-2.5t-38-.5q-119 0-225.5 46T63-537Zm123 118-63-63q69-67 165.5-102T508-611l-39 81q-77-2-154.5 29T186-419Zm258 255q-27-11-39.5-41t1.5-59l237-490q3-7 10.5-10t15.5-1q8 2 13 9t3 15L547-206q-8 32-41 42.5t-62-.5Zm330-255q-16-17-44.5-37T681-485l21-86q35 12 73 38.5t62 50.5l-63 63Zm123-118q-39-38-85-69t-88-50l22-90q65 27 116 63.5t98 82.5l-63 63Z" />
   </svg>
 );
 
-export const AssetsIcon = ({ active = false }) => (
+export const AssetsIcon = ({ active = false, size = "16" }) => (
   <Box
     as="svg"
     xmlns="http://www.w3.org/2000/svg"
-    height="16"
+    height={size}
     viewBox="0 0 24 24"
-    width="16"
+    width={size}
     fill="#4F566B">
     <path d="M2 6H0v5h.01L0 20c0 1.1.9 2 2 2h18v-2H2V6zm20-2h-8l-2-2H6c-1.1 0-1.99.9-1.99 2L4 16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM7 15l4.5-6 3.5 4.51 2.5-3.01L21 15H7z" />
   </Box>
 );
+
+export const TopBottomChevron = ({ active = false }) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 12 12"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <g opacity="0.4">
+      <path
+        d="M9 4L6 1L3 4"
+        stroke="#A3ACB9"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3 8L6 11L9 8"
+        stroke="#A3ACB9"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+  </svg>
+);
+
+export const SettingsIcon = ({ active = false }) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 15 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M6.03453 14L5.75592 11.76C5.60501 11.7017 5.4628 11.6317 5.3293 11.55C5.19581 11.4683 5.06521 11.3808 4.93751 11.2875L2.86537 12.1625L0.949951 8.8375L2.74348 7.4725C2.73187 7.39083 2.72607 7.31208 2.72607 7.23625V6.76375C2.72607 6.68792 2.73187 6.60917 2.74348 6.5275L0.949951 5.1625L2.86537 1.8375L4.93751 2.7125C5.06521 2.61917 5.19871 2.53167 5.33801 2.45C5.47731 2.36833 5.61662 2.29833 5.75592 2.24L6.03453 0H9.86537L10.144 2.24C10.2949 2.29833 10.4371 2.36833 10.5706 2.45C10.7041 2.53167 10.8347 2.61917 10.9624 2.7125L13.0345 1.8375L14.95 5.1625L13.1564 6.5275C13.168 6.60917 13.1738 6.68792 13.1738 6.76375V7.23625C13.1738 7.31208 13.1622 7.39083 13.139 7.4725L14.9325 8.8375L13.0171 12.1625L10.9624 11.2875C10.8347 11.3808 10.7012 11.4683 10.5619 11.55C10.4226 11.6317 10.2833 11.7017 10.144 11.76L9.86537 14H6.03453ZM7.25343 12.6H8.62906L8.87284 10.745C9.2327 10.6517 9.56645 10.5146 9.87408 10.3337C10.1817 10.1529 10.4632 9.93417 10.7186 9.6775L12.4425 10.395L13.1216 9.205L11.6241 8.0675C11.6821 7.90417 11.7228 7.73208 11.746 7.55125C11.7692 7.37042 11.7808 7.18667 11.7808 7C11.7808 6.81333 11.7692 6.62958 11.746 6.44875C11.7228 6.26792 11.6821 6.09583 11.6241 5.9325L13.1216 4.795L12.4425 3.605L10.7186 4.34C10.4632 4.07167 10.1817 3.84708 9.87408 3.66625C9.56645 3.48542 9.2327 3.34833 8.87284 3.255L8.64647 1.4H7.27085L7.02707 3.255C6.6672 3.34833 6.33345 3.48542 6.02582 3.66625C5.71819 3.84708 5.43668 4.06583 5.18129 4.3225L3.45741 3.605L2.77831 4.795L4.27582 5.915C4.21778 6.09 4.17715 6.265 4.15393 6.44C4.13071 6.615 4.11911 6.80167 4.11911 7C4.11911 7.18667 4.13071 7.3675 4.15393 7.5425C4.17715 7.7175 4.21778 7.8925 4.27582 8.0675L2.77831 9.205L3.45741 10.395L5.18129 9.66C5.43668 9.92833 5.71819 10.1529 6.02582 10.3337C6.33345 10.5146 6.6672 10.6517 7.02707 10.745L7.25343 12.6ZM7.98478 9.45C8.65808 9.45 9.2327 9.21083 9.70866 8.7325C10.1846 8.25417 10.4226 7.67667 10.4226 7C10.4226 6.32333 10.1846 5.74583 9.70866 5.2675C9.2327 4.78917 8.65808 4.55 7.98478 4.55C7.29987 4.55 6.72234 4.78917 6.25219 5.2675C5.78204 5.74583 5.54697 6.32333 5.54697 7C5.54697 7.67667 5.78204 8.25417 6.25219 8.7325C6.72234 9.21083 7.29987 9.45 7.98478 9.45Z"
+      fill="#4F566B"
+    />
+  </svg>
+);
+
+export const ProjectsIcon = ({ active = false }) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M3.24996 3C3.11189 3 2.99832 2.88751 3.01537 2.7505C3.13818 1.76368 3.97988 1 4.99996 1H11C12.0201 1 12.8618 1.76368 12.9846 2.7505C13.0016 2.88751 12.8881 3 12.75 3H3.24996Z"
+      fill="#4F566B"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M3.5 4C3.22386 4 3 4.22386 3 4.5V14.5C3 14.7761 3.22386 15 3.5 15H5.5C5.77614 15 6 14.7761 6 14.5V12.5C6 12.2239 6.22386 12 6.5 12H9.5C9.77614 12 10 12.2239 10 12.5V14.5C10 14.7761 10.2239 15 10.5 15H12.5C12.7761 15 13 14.7761 13 14.5V4.5C13 4.22386 12.7761 4 12.5 4H3.5ZM11 8C10.4477 8 10 8.44772 10 9V9.6C10 9.82091 10.1791 10 10.4 10H11.6C11.8209 10 12 9.82091 12 9.6V9C12 8.44772 11.5523 8 11 8ZM10 6C10 5.44772 10.4477 5 11 5C11.5523 5 12 5.44772 12 6V6.6C12 6.82091 11.8209 7 11.6 7H10.4C10.1791 7 10 6.82091 10 6.6V6ZM8 5C7.44772 5 7 5.44772 7 6V6.6C7 6.82091 7.17909 7 7.4 7H8.6C8.82091 7 9 6.82091 9 6.6V6C9 5.44772 8.55228 5 8 5ZM7 9C7 8.44772 7.44772 8 8 8C8.55228 8 9 8.44772 9 9V9.6C9 9.82091 8.82091 10 8.6 10H7.4C7.17909 10 7 9.82091 7 9.6V9ZM5 8C4.44772 8 4 8.44772 4 9V9.6C4 9.82091 4.17909 10 4.4 10H5.6C5.82091 10 6 9.82091 6 9.6V9C6 8.44772 5.55228 8 5 8ZM4 6C4 5.44772 4.44772 5 5 5C5.55228 5 6 5.44772 6 6V6.6C6 6.82091 5.82091 7 5.6 7H4.4C4.17909 7 4 6.82091 4 6.6V6Z"
+      fill="#4F566B"
+    />
+  </svg>
+);
diff --git a/packages/www/components/Sidebar/index.tsx b/packages/www/components/Sidebar/index.tsx
index d18d498396..924eefb668 100644
--- a/packages/www/components/Sidebar/index.tsx
+++ b/packages/www/components/Sidebar/index.tsx
@@ -1,40 +1,44 @@
 import {
+  styled,
+  Box,
+  Flex,
+  Text,
   Link as A,
   Avatar,
-  Box,
+  Grid,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuGroup,
-  DropdownMenuItem,
   DropdownMenuTrigger,
-  Flex,
-  Grid,
-  Text,
-  styled,
+  DropdownMenuItem,
+  Button,
 } from "@livepeer/design-system";
-import {
-  BookmarkFilledIcon,
-  BookmarkIcon,
-  ChatBubbleIcon,
-  ChevronDownIcon,
-  LoopIcon,
-  RocketIcon,
-} from "@radix-ui/react-icons";
-import { useJune } from "hooks/use-june";
-import { isExport } from "lib/utils";
-import Link from "next/link";
-import Router, { useRouter } from "next/router";
-import { useEffect } from "react";
-import { useApi } from "../../hooks";
 import ThemeSwitch from "../ThemeSwitch";
+import Link from "next/link";
 import {
-  AssetsIcon,
-  BillingIcon,
   HomeIcon,
   StreamIcon,
   TerminalIcon,
+  AssetsIcon,
+  TopBottomChevron,
+  SettingsIcon,
+  ProjectsIcon,
   UsageIcon,
+  BillingIcon,
 } from "./NavIcons";
+import { useApi } from "../../hooks";
+import Router, { useRouter } from "next/router";
+import {
+  RocketIcon,
+  ChatBubbleIcon,
+  LoopIcon,
+  BookmarkIcon,
+} from "@radix-ui/react-icons";
+import { useState } from "react";
+import { useQuery, useQueryClient } from "react-query";
+import CreateProjectDialog from "components/Project/createProjectDialog";
+import { FiCheck } from "react-icons/fi";
+import { useProjectContext } from "context/ProjectContext";
 
 export const NavLink = styled(A, {
   fontSize: 14,
@@ -42,7 +46,7 @@ export const NavLink = styled(A, {
   alignItems: "center",
   color: "$primary12",
   px: "$2",
-  py: 6,
+  py: 7,
   borderRadius: "$2",
   cursor: "default",
   lineHeight: 1.2,
@@ -71,215 +75,502 @@ export type SidebarId =
   | "developers"
   | "developers/signing-keys"
   | "developers/webhooks"
-  | "usage"
-  | "billing"
-  | "billing/plans";
+  | "settings"
+  | "settings/general"
+  | "settings/projects"
+  | "settings/usage"
+  | "settings/billing"
+  | "settings/plans";
+
+export const generalSidebarItems = [
+  {
+    title: "Home",
+    path: "/",
+    icon: <HomeIcon />,
+    id: "home",
+  },
+  {
+    title: "Streams",
+    path: "/streams",
+    icon: <StreamIcon />,
+    id: "streams",
+    children: [
+      {
+        title: "Sessions",
+        path: "/sessions",
+        id: "streams/sessions",
+      },
+    ],
+  },
+  {
+    title: "Assets",
+    path: "/assets",
+    icon: <AssetsIcon />,
+    id: "assets",
+  },
+  {
+    title: "Developers",
+    path: "/developers/api-keys",
+    icon: <TerminalIcon />,
+    id: "developers",
+    children: [
+      {
+        title: "API Keys",
+        path: "/developers/api-keys",
+        id: "developers",
+      },
+      {
+        title: "Signing Keys",
+        path: "/developers/signing-keys",
+        id: "developers/signing-keys",
+      },
+      {
+        title: "Webhooks",
+        path: "/developers/webhooks",
+        id: "developers/webhooks",
+      },
+    ],
+  },
+  {
+    title: "Settings",
+    path: "/settings",
+    icon: <SettingsIcon />,
+    id: "settings",
+  },
+];
+
+const settingsSidebarItems = [
+  {
+    title: "Projects",
+    path: "/settings/projects",
+    id: "settings/projects",
+    icon: <ProjectsIcon />,
+  },
+
+  {
+    title: "Usage",
+    path: "/settings/usage",
+    id: "settings/usage",
+    icon: <UsageIcon />,
+  },
+  {
+    title: "Billing",
+    path: "/settings/billing",
+    id: "settings/billing",
+    icon: <BillingIcon />,
+    children: [
+      {
+        title: "Plans",
+        path: "/settings/billing/plans",
+        id: "settings/plans",
+      },
+    ],
+  },
+];
 
 const Sidebar = ({ id }: { id: SidebarId }) => {
-  const { user, logout } = useApi();
-  const router = useRouter();
+  const { setProjectId, projectId, appendProjectId } = useProjectContext();
+  const { createProject, getProjects, logout, user } = useApi();
+  const queryClient = useQueryClient();
+  const { pathname } = useRouter();
+
+  const [showCreateProjectAlert, setShowCreateProjectAlert] = useState(false);
+
+  const { data } = useQuery("projects", getProjects);
+  const activeProject = data?.find((project) => project.id === projectId);
+
+  const isSettingsPage = pathname.includes("/settings/");
 
-  const June = useJune();
+  const onCreateClick = async (projectName: string) => {
+    const project = await createProject({
+      name: projectName,
+    });
 
-  useEffect(() => {
-    const handleRouteChange = (url, { shallow }) => {
-      if (June) June.page(url);
-    };
+    setProjectId(project.id);
+    setShowCreateProjectAlert(false);
 
-    router.events.on("routeChangeStart", handleRouteChange);
+    queryClient.invalidateQueries("projects");
+  };
 
-    return () => {
-      router.events.off("routeChangeStart", handleRouteChange);
-    };
-  }, [June]);
+  const isResourcePage = () => {
+    const path = window.location.pathname;
+
+    const resourceKeywords = ["/streams/", "/assets/", "/developers/webhooks/"];
+
+    for (const keyword of resourceKeywords) {
+      if (path.includes(keyword)) {
+        return keyword;
+      }
+    }
+
+    return false;
+  };
+
+  const isActive = (item: any) => {
+    if (id === item.id) {
+      return true;
+    }
+    return false;
+  };
+
+  const isParentActive = (item: any) => {
+    if (id === item.id) {
+      return true;
+    }
+    if (item.children) {
+      return item.children.some((child: any) => id === child.id);
+    }
+    return false;
+  };
 
   return (
-    <Box
-      css={{
-        backgroundColor: "$panel",
-        borderRight: "1px solid",
-        borderColor: "$neutral6",
-        maxWidth: 270,
-        width: 270,
-        top: 0,
-        position: "fixed",
-        justifyContent: "flex-end",
-        bottom: 0,
-      }}>
-      <Flex align="center" justify="between" css={{ p: "$3", mb: "$3" }}>
-        <DropdownMenu>
-          <Flex
-            as={DropdownMenuTrigger}
-            align="center"
-            css={{
-              border: 0,
-              background: "transparent",
-              p: 0,
-            }}>
-            <Avatar
-              placeholder="user"
-              size="3"
-              alt={user?.firstName}
-              fallback={
-                user?.firstName
-                  ? user?.firstName?.charAt(0)
-                  : user?.email.charAt(0)
-              }
-            />
-            <Text
-              size="3"
-              css={{ ml: "$2", fontSize: "$3", mr: "$1" }}
-              title={user?.email}>
-              {user?.firstName}
-            </Text>
-            <Box
-              as={ChevronDownIcon}
-              css={{ width: 20, height: 20, color: "$hiContrast" }}
-            />
-          </Flex>
-          <DropdownMenuContent
-            placeholder="dropdown-menu-content"
-            css={{ border: "1px solid $colors$neutral6" }}>
-            <DropdownMenuGroup>
-              <DropdownMenuItem
-                key="billing-dropdown-item"
-                onSelect={(e) => {
-                  e.preventDefault();
-                  Router.push("/billing");
+    <>
+      <Box
+        css={{
+          backgroundColor: "$panel",
+          borderRight: "1px solid",
+          borderColor: "$neutral6",
+          maxWidth: 270,
+          width: 270,
+          top: 0,
+          position: "fixed",
+          justifyContent: "flex-end",
+          bottom: 0,
+          zIndex: 0,
+        }}>
+        <Flex align="center" justify="between" css={{ p: "$3", mb: "$3" }}>
+          <DropdownMenu>
+            <Flex
+              as={DropdownMenuTrigger}
+              align="center"
+              css={{
+                border: 0,
+                background: "transparent",
+                p: 6,
+                "&:hover": {
+                  backgroundColor: "$neutral4",
+                  borderRadius: "$3",
+                },
+              }}>
+              <Avatar
+                placeholder={user?.firstName || user?.email.charAt(0)}
+                css={{
+                  width: 55,
+                  height: 55,
+                }}
+                alt={user?.firstName}
+                fallback={
+                  user?.firstName
+                    ? user?.firstName?.charAt(0)
+                    : user?.email.charAt(0)
+                }
+              />
+              <Text
+                size="3"
+                css={{
+                  ml: "$2",
+                  fontSize: "$3",
+                  mr: "$1",
+                  color: "$neutral11",
                 }}>
-                Billing
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                key="logout-dropdown-item"
-                onSelect={(e) => {
-                  e.preventDefault();
-                  logout();
+                My Account
+              </Text>
+            </Flex>
+            <DropdownMenuContent
+              placeholder="Account"
+              css={{
+                border: "1px solid $colors$neutral6",
+                width: "12rem",
+                ml: "$4",
+                mt: "$1",
+              }}>
+              <DropdownMenuGroup
+                css={{
+                  display: "flex",
+                  flexDirection: "column",
+                  mx: "$1",
                 }}>
-                Logout
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
-          </DropdownMenuContent>
-        </DropdownMenu>
-        <ThemeSwitch />
-      </Flex>
-      <Flex
-        css={{ px: "$4", height: "calc(100vh - 100px)" }}
-        direction="column"
-        justify="between">
-        <Grid
-          gap={1}
-          css={{
-            a: {
-              textDecoration: "none",
-            },
-          }}>
-          <Link href="/" passHref legacyBehavior>
-            <NavLink active={id === "home"}>
-              <HomeIcon active={id === "home"} />
-              Home
-            </NavLink>
-          </Link>
-          <Box>
-            <Link href="/streams" passHref legacyBehavior>
-              <NavLink active={id === "streams"}>
-                <StreamIcon active={id === "streams"} />
-                Streams
-              </NavLink>
-            </Link>
+                <DropdownMenuItem
+                  css={{
+                    py: "$3",
+                    px: "$2",
+                    borderRadius: "$1",
+                    "&:hover": {
+                      transition: ".2s",
+                      bc: "$neutral4",
+                    },
+                  }}
+                  key="billing-dropdown-item"
+                  onClick={(e) => {
+                    Router.push("/settings/projects");
+                  }}>
+                  <Text size="2">Projects</Text>
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  css={{
+                    py: "$3",
+                    px: "$2",
+                    borderRadius: "$1",
+                    "&:hover": {
+                      transition: ".2s",
+                      bc: "$neutral4",
+                    },
+                  }}
+                  key="billing-dropdown-item"
+                  onClick={() => {
+                    Router.push("/settings/usage");
+                  }}>
+                  <Text size="2">Usage</Text>
+                </DropdownMenuItem>
 
-            {id?.split("/")[0] === "streams" && (
+                <DropdownMenuItem
+                  css={{
+                    py: "$3",
+                    px: "$2",
+                    borderRadius: "$1",
+                    "&:hover": {
+                      transition: ".2s",
+                      bc: "$neutral4",
+                    },
+                  }}
+                  key="billing-dropdown-item"
+                  onClick={() => {
+                    Router.push("/settings/billing");
+                  }}>
+                  <Text size="2">Billing</Text>
+                </DropdownMenuItem>
+
+                <DropdownMenuItem
+                  css={{
+                    py: "$3",
+                    px: "$2",
+                    borderRadius: "$1",
+                    "&:hover": {
+                      transition: ".2s",
+                      bc: "$neutral4",
+                    },
+                  }}
+                  key="billing-dropdown-item"
+                  onClick={() => {
+                    Router.push("/settings/billing/plans");
+                  }}>
+                  <Text size="2">Plans</Text>
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  css={{
+                    py: "$3",
+                    px: "$2",
+                    borderRadius: "$1",
+                    "&:hover": {
+                      transition: ".2s",
+                      bc: "$neutral4",
+                    },
+                  }}
+                  key="logout-dropdown-item"
+                  onClick={() => {
+                    logout();
+                  }}>
+                  <Text size="2">Log out</Text>
+                </DropdownMenuItem>
+              </DropdownMenuGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <ThemeSwitch />
+        </Flex>
+
+        {!isSettingsPage && (
+          <DropdownMenu>
+            <Flex
+              align={"center"}
+              as={DropdownMenuTrigger}
+              css={{
+                py: "$1",
+                px: "$2",
+                gap: "$2",
+                mb: "$2",
+                mt: "-$1",
+                ml: "$4",
+                border: 0,
+                backgroundColor: "transparent",
+                "&:focus": {
+                  outline: "none",
+                },
+                "&:hover": {
+                  backgroundColor: "$neutral4",
+                  borderRadius: "$3",
+                },
+              }}>
+              <Text
+                css={{
+                  color: "$neutral11",
+                }}>
+                {activeProject?.name}
+              </Text>
+              <TopBottomChevron />
+            </Flex>
+            <DropdownMenuContent
+              placeholder={"Projects"}
+              css={{
+                border: "1px solid $colors$neutral6",
+                width: "14rem",
+                ml: "$5",
+                py: "$2",
+                px: "$3",
+              }}>
+              <Text size={2} variant={"neutral"} css={{ ml: "$1", mb: "$1" }}>
+                Projects
+              </Text>
               <Box
                 css={{
-                  a: { pl: 35 },
-                  "> :first-child": {
-                    mt: "$1",
-                  },
+                  borderBottom: "1px solid",
+                  borderColor: "$neutral6",
+                  pb: "$2",
                 }}>
-                <Link href="/sessions" passHref legacyBehavior>
-                  <NavLink active={id === "streams/sessions"}>Sessions</NavLink>
-                </Link>
+                {data?.map((project) => (
+                  <DropdownMenuItem
+                    key={project.id}
+                    css={{
+                      py: "$3",
+                      px: "$2",
+                      cursor: "default",
+                      "&:hover": {
+                        backgroundColor: "$neutral4",
+                        borderRadius: "$3",
+                      },
+                    }}
+                    onClick={() => {
+                      setProjectId(project.id);
+                      if (isResourcePage()) {
+                        const path = isResourcePage() as string;
+                        const newUrl = `/dashboard/projects/${project.id}${path}`;
+                        window.location.assign(newUrl);
+                      }
+                    }}>
+                    <Flex
+                      css={{ width: "100%" }}
+                      key={project.id}
+                      align={"center"}
+                      justify={"between"}>
+                      <Text size={2}>{project?.name}</Text>
+                      {projectId === project.id && <FiCheck />}
+                    </Flex>
+                  </DropdownMenuItem>
+                ))}
               </Box>
-            )}
-          </Box>
-          <Link href="/assets" passHref legacyBehavior>
-            <NavLink active={id === "assets"}>
-              <AssetsIcon active={id === "assets"} />
-              Assets
-            </NavLink>
-          </Link>
-          <Box>
-            <Link href="/developers/api-keys" passHref legacyBehavior>
-              <NavLink>
-                <TerminalIcon active={id?.split("/")[0] === "developers"} />
-                Developers
-              </NavLink>
-            </Link>
-
-            {id?.split("/")[0] === "developers" && (
               <Box
                 css={{
+                  py: "$2",
+                  pb: 0,
+                  fontSize: 14,
+                  color: "$primary11",
                   a: {
-                    pl: 35,
-                    mt: "$1",
+                    textDecoration: "none",
+                    color: "$neutral12",
                   },
                 }}>
-                <Link href="/developers/api-keys" passHref legacyBehavior>
-                  <NavLink active={id === "developers"}>API Keys</NavLink>
-                </Link>
-                <Link href="/developers/signing-keys" passHref legacyBehavior>
-                  <NavLink active={id === "developers/signing-keys"}>
-                    Signing Keys
-                  </NavLink>
-                </Link>
-                <Link href="/developers/webhooks" passHref legacyBehavior>
-                  <NavLink active={id === "developers/webhooks"}>
-                    Webhooks
-                  </NavLink>
-                </Link>
-              </Box>
-            )}
-          </Box>
-
-          {!isExport() && (
-            <Box>
-              <Link href="/usage" passHref legacyBehavior>
-                <NavLink active={id === "usage"}>
-                  <UsageIcon active={id === "usage"} />
-                  Usage
-                </NavLink>
-              </Link>
-            </Box>
-          )}
-
-          {!isExport() && (
-            <Box>
-              <Link href="/billing" passHref legacyBehavior>
-                <NavLink active={id === "billing"}>
-                  <BillingIcon active={id === "billing"} />
-                  Billing
-                </NavLink>
-              </Link>
-
-              {id?.split("/")[0] === "billing" && (
-                <Box
+                <Flex
+                  direction={"column"}
                   css={{
-                    a: {
-                      pl: 35,
-                    },
-                    "> :first-child": {
-                      mt: "$1",
-                    },
+                    width: "100%",
                   }}>
-                  <Link href="/billing/plans" passHref legacyBehavior>
-                    <NavLink active={id === "billing/plans"}>Plans</NavLink>
+                  <DropdownMenuItem
+                    onClick={() => setShowCreateProjectAlert(true)}
+                    css={{
+                      color: "$neutral12",
+                      cursor: "default",
+                      borderRadius: "$3",
+                      py: "$3",
+                      px: "$2",
+                      "&:hover": {
+                        backgroundColor: "$neutral4",
+                      },
+                    }}>
+                    <Flex align={"center"}>
+                      <Text size={2}>Create new project</Text>
+                    </Flex>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onClick={() => Router.push("/settings/projects")}
+                    css={{
+                      color: "$neutral12",
+                      cursor: "default",
+                      borderRadius: "$3",
+                      py: "$3",
+                      px: "$2",
+                      "&:hover": {
+                        backgroundColor: "$neutral4",
+                      },
+                    }}>
+                    <Flex align={"center"}>
+                      <Text size={2}>View all projects</Text>
+                    </Flex>
+                  </DropdownMenuItem>
+                </Flex>
+              </Box>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+
+        <Flex
+          css={{ px: "$4", height: "calc(100vh - 100px)" }}
+          direction="column"
+          justify="between">
+          <Grid
+            gap={1}
+            css={{
+              a: {
+                textDecoration: "none",
+              },
+            }}>
+            {(isSettingsPage ? settingsSidebarItems : generalSidebarItems).map(
+              (item) => (
+                <Box key={item.id}>
+                  <Link
+                    href={
+                      isSettingsPage ? item.path : appendProjectId(item.path)
+                    }
+                    passHref
+                    legacyBehavior>
+                    <NavLink active={isActive(item)}>
+                      {item.icon}
+                      {item.title}
+                    </NavLink>
                   </Link>
+                  {item.children && isParentActive(item) && (
+                    <Box
+                      css={{
+                        a: {
+                          pl: 35,
+                          mt: "$1",
+                        },
+                      }}>
+                      {item.children.map((child) => (
+                        <Link
+                          href={
+                            isSettingsPage
+                              ? child.path
+                              : appendProjectId(child.path)
+                          }
+                          key={child.id}
+                          passHref
+                          legacyBehavior>
+                          <NavLink active={isActive(child)}>
+                            {child.title}
+                          </NavLink>
+                        </Link>
+                      ))}
+                    </Box>
+                  )}
                 </Box>
-              )}
-            </Box>
-          )}
-        </Grid>
-        {!isExport() && (
-          <Flex direction="column" gap={1}>
+              ),
+            )}
+          </Grid>
+          <Flex
+            direction="column"
+            gap={1}
+            css={{
+              mb: !isSettingsPage ? "$6" : "$0",
+            }}>
             <NavLink
               href="https://docs.livepeer.org"
               target="_blank"
@@ -380,9 +671,15 @@ const Sidebar = ({ id }: { id: SidebarId }) => {
               </Text>
             </NavLink>
           </Flex>
-        )}
-      </Flex>
-    </Box>
+        </Flex>
+      </Box>
+
+      <CreateProjectDialog
+        onCreate={onCreateClick}
+        onOpenChange={(isOpen) => setShowCreateProjectAlert(isOpen)}
+        isOpen={showCreateProjectAlert}
+      />
+    </>
   );
 };
 
diff --git a/packages/www/components/SigningKeysTable/index.tsx b/packages/www/components/SigningKeysTable/index.tsx
index 417c59f9bb..37a672446e 100644
--- a/packages/www/components/SigningKeysTable/index.tsx
+++ b/packages/www/components/SigningKeysTable/index.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from "react";
+import { useCallback, useEffect, useMemo } from "react";
 import { useApi } from "../../hooks";
 import Table, {
   DefaultSortBy,
@@ -16,6 +16,7 @@ import {
 import CreateDialog from "./CreateDialog";
 import { makeSelectAction, makeCreateAction } from "../Table/helpers";
 import TableStateDeleteDialog from "../Table/components/TableStateDeleteDialog";
+import { useProjectContext } from "context/ProjectContext";
 
 const SigningKeysTable = ({
   title = "Signing Keys",
@@ -34,6 +35,7 @@ const SigningKeysTable = ({
   });
   const deleteDialogState = useToggleState();
   const createDialogState = useToggleState();
+  const { projectId } = useProjectContext();
 
   const columns = useMemo(makeColumns, []);
 
@@ -42,6 +44,10 @@ const SigningKeysTable = ({
     [],
   );
 
+  useEffect(() => {
+    stateSetter.setProjectId(projectId);
+  }, [projectId]);
+
   return (
     <>
       <Table
diff --git a/packages/www/components/StreamDetails/SessionsTable/ClipsCell.tsx b/packages/www/components/StreamDetails/SessionsTable/ClipsCell.tsx
index 639322d5c6..4a251cb821 100644
--- a/packages/www/components/StreamDetails/SessionsTable/ClipsCell.tsx
+++ b/packages/www/components/StreamDetails/SessionsTable/ClipsCell.tsx
@@ -1,6 +1,7 @@
 import { CellComponentProps, TableData } from "components/Table/types";
 import { Box, Link, Badge } from "@livepeer/design-system";
 import { ArrowRightIcon, ArrowTopRightIcon } from "@radix-ui/react-icons";
+import { useProjectContext } from "context/ProjectContext";
 
 function makeMP4Url(url: string, profileName: string): string {
   if (url.endsWith(".mp4")) {
@@ -26,12 +27,16 @@ const ClipsCell = <D extends TableData>({
   cell,
 }: CellComponentProps<D, ClipsCellProps>) => {
   const id = cell.value.id;
+  const { appendProjectId } = useProjectContext();
 
   return (
     <Box id={`mp4-link-dropdown-${id}`} css={{ position: "relative" }}>
       {cell.value.clipsCounts > 0 ? (
         <Box css={{ pr: "$1" }}>
-          <Link href={"/assets?sourceSessionId=" + cell.value.sessionId}>
+          <Link
+            href={appendProjectId(
+              "/assets?sourceSessionId=" + cell.value.sessionId,
+            )}>
             <Badge size="1" variant="neutral" css={{}}>
               {cell.value.clipsCounts}
             </Badge>
diff --git a/packages/www/components/StreamSessionsTable/helpers.tsx b/packages/www/components/StreamSessionsTable/helpers.tsx
index fdcc5b0f10..efca846061 100644
--- a/packages/www/components/StreamSessionsTable/helpers.tsx
+++ b/packages/www/components/StreamSessionsTable/helpers.tsx
@@ -75,6 +75,7 @@ export const rowsPageFromState = async (
   userId: string,
   getStreamSessionsByUserId: Function,
   openSnackbar: Function,
+  appendProjectId: Function,
 ): Promise<RowsPageFromStateResult<StreamSessionsTableData>> => {
   const [streams, nextCursor, count] = await getStreamSessionsByUserId(
     userId,
@@ -97,7 +98,12 @@ export const rowsPageFromState = async (
           id: stream.parentId,
           name: stream.parentStream.name,
           children: <Box>{stream.parentStream.name}</Box>,
-          href: `/streams/${stream.parentId}`,
+          tooltipChildren: stream.createdByTokenName ? (
+            <>
+              Created by stream <b>{stream.parentStream.name}</b>
+            </>
+          ) : null,
+          href: appendProjectId(`/streams/${stream.parentId}`),
         },
         recordingUrl: {
           id: stream.id,
diff --git a/packages/www/components/StreamSessionsTable/index.tsx b/packages/www/components/StreamSessionsTable/index.tsx
index 845b671563..1cc398bffa 100644
--- a/packages/www/components/StreamSessionsTable/index.tsx
+++ b/packages/www/components/StreamSessionsTable/index.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from "react";
+import { useCallback, useEffect, useMemo } from "react";
 import { useApi } from "../../hooks";
 import Table, {
   DefaultSortBy,
@@ -14,6 +14,7 @@ import {
   rowsPageFromState,
   StreamSessionsTableData,
 } from "./helpers";
+import { useProjectContext } from "context/ProjectContext";
 
 const StreamSessionsTable = ({ title = "Sessions" }: { title?: string }) => {
   const { user, getStreamSessionsByUserId } = useApi();
@@ -23,6 +24,7 @@ const StreamSessionsTable = ({ title = "Sessions" }: { title?: string }) => {
   });
   const [openSnackbar] = useSnackbar();
   const columns = useMemo(makeColumns, []);
+  const { appendProjectId, projectId } = useProjectContext();
 
   const fetcher: Fetcher<StreamSessionsTableData> = useCallback(
     async (state) =>
@@ -31,10 +33,15 @@ const StreamSessionsTable = ({ title = "Sessions" }: { title?: string }) => {
         user.id,
         getStreamSessionsByUserId,
         openSnackbar,
+        appendProjectId,
       ),
     [getStreamSessionsByUserId, user.id],
   );
 
+  useEffect(() => {
+    stateSetter.setProjectId(projectId);
+  }, [projectId]);
+
   return (
     <Table
       title={title}
diff --git a/packages/www/components/StreamsTable/StreamFilter.tsx b/packages/www/components/StreamsTable/StreamFilter.tsx
index f23726395e..e7ae58ac11 100644
--- a/packages/www/components/StreamsTable/StreamFilter.tsx
+++ b/packages/www/components/StreamsTable/StreamFilter.tsx
@@ -27,8 +27,9 @@ const DateInput = styled("input", {
   borderColor: "$neutral7",
   color: "$neutral9",
   outline: "none",
-  width: "94%",
+  width: "100%",
   borderRadius: "$1",
+  fontSize: "$2",
   p: "4px",
 });
 
diff --git a/packages/www/components/StreamsTable/helpers.tsx b/packages/www/components/StreamsTable/helpers.tsx
index 2720e6cb9f..e58d070d26 100644
--- a/packages/www/components/StreamsTable/helpers.tsx
+++ b/packages/www/components/StreamsTable/helpers.tsx
@@ -7,6 +7,7 @@ import TableEmptyState from "../Table/components/TableEmptyState";
 import { FilterItem, formatFiltersForApiRequest } from "../Table/filters";
 import { stringSort, dateSort } from "../Table/sorts";
 import { RowsPageFromStateResult, SortTypeArgs } from "../Table/types";
+import { useProjectContext } from "context/ProjectContext";
 
 export type StreamsTableData = {
   id: string;
@@ -64,6 +65,7 @@ export const rowsPageFromState = async (
   state: State<StreamsTableData>,
   userId: string,
   getStreams: Function,
+  appendProjectId: Function,
 ): Promise<RowsPageFromStateResult<StreamsTableData>> => {
   let active: boolean;
   let isHealthy: boolean;
@@ -92,22 +94,27 @@ export const rowsPageFromState = async (
       id: stream.id,
       value: stream.name,
       children: <Text size={2}>{stream.name}</Text>,
-      href: `/streams/${stream.id}`,
+      tooltipChildren: stream.createdByTokenName ? (
+        <>
+          Created by token <b>{stream.createdByTokenName}</b>
+        </>
+      ) : null,
+      href: appendProjectId(`/streams/${stream.id}`),
     },
     details: { stream },
     createdAt: {
       date: new Date(stream.createdAt),
       fallback: <Box css={{ color: "$neutral8" }}>—</Box>,
-      href: `/streams/${stream.id}`,
+      href: appendProjectId(`/streams/${stream.id}`),
     },
     lastSeen: {
       date: stream.lastSeen ? new Date(stream.lastSeen) : null,
       fallback: <Box css={{ color: "$neutral8" }}>—</Box>,
-      href: `/streams/${stream.id}`,
+      href: appendProjectId(`/streams/${stream.id}`),
     },
     status: {
       children: stream.isActive ? "Active" : "Idle",
-      href: `/streams/${stream.id}`,
+      href: appendProjectId(`/streams/${stream.id}`),
     },
   }));
   return { rows, nextCursor, count, allStreamCount, activeStreamCount };
diff --git a/packages/www/components/StreamsTable/index.tsx b/packages/www/components/StreamsTable/index.tsx
index 0b45efe10b..e4f2dfcd10 100644
--- a/packages/www/components/StreamsTable/index.tsx
+++ b/packages/www/components/StreamsTable/index.tsx
@@ -21,6 +21,7 @@ import {
 import { makeSelectAction, makeCreateAction } from "../Table/helpers";
 import TableHeader from "../Table/components/TableHeader";
 import TableStateDeleteDialog from "../Table/components/TableStateDeleteDialog";
+import { useProjectContext } from "context/ProjectContext";
 import StreamFilter from "./StreamFilter";
 import { Flex } from "@livepeer/design-system";
 import TypeFilterCard from "components/TypeFilterCard";
@@ -57,8 +58,11 @@ const StreamsTable = ({
     initialOrder: sortByToString(DefaultSortBy),
   });
   const columns = useMemo(makeColumns, []);
+  const { appendProjectId, projectId } = useProjectContext();
+
   const fetcher: Fetcher<StreamsTableData> = useCallback(
-    async (state) => rowsPageFromState(state, userId, getStreams),
+    async (state) =>
+      rowsPageFromState(state, userId, getStreams, appendProjectId),
     [userId],
   );
 
@@ -71,7 +75,7 @@ const StreamsTable = ({
       await state.invalidate();
       const query = router.query.admin === "true" ? { admin: true } : {};
       await router.push({
-        pathname: `/streams/${newStream.id}`,
+        pathname: appendProjectId(`/streams/${newStream.id}`),
         query,
       });
     },
@@ -84,6 +88,10 @@ const StreamsTable = ({
     stateSetter.setFilters(e);
   };
 
+  useEffect(() => {
+    stateSetter.setProjectId(projectId);
+  }, [projectId]);
+
   const handleFilterType = (type: string) => {
     stateSetter.setCursor("");
     stateSetter.setPrevCursors([]);
diff --git a/packages/www/components/Table/cells/action.tsx b/packages/www/components/Table/cells/action.tsx
index cca04f7f32..bc20de9f35 100644
--- a/packages/www/components/Table/cells/action.tsx
+++ b/packages/www/components/Table/cells/action.tsx
@@ -2,7 +2,7 @@ import { CellComponentProps, TableData } from "../types";
 import { Box, Button } from "@livepeer/design-system";
 import Spinner from "components/Spinner";
 import { TrashIcon } from "@radix-ui/react-icons";
-import ReactTooltip from "react-tooltip";
+import { Tooltip } from "react-tooltip";
 import { useState } from "react";
 
 const DeleteActionCell = ({
@@ -17,20 +17,12 @@ const DeleteActionCell = ({
 
   return (
     <>
-      <ReactTooltip
-        id={tooltipId}
-        className="tooltip"
-        place="top"
-        type="dark"
-        effect="solid"
-        delayShow={500}>
-        Delete
-      </ReactTooltip>
+      <Tooltip id={tooltipId} />
 
       <Box css={{ textAlign: "right" }}>
         <Button
-          data-tip
-          data-for={tooltipId}
+          data-tooltip-id={tooltipId}
+          data-tooltip-content="Delete"
           onClick={() => {
             setIsDeleteLoading(true);
             onDelete();
diff --git a/packages/www/components/Table/cells/createdAt.tsx b/packages/www/components/Table/cells/createdAt.tsx
index dc49b2bed7..cb8e8350cc 100644
--- a/packages/www/components/Table/cells/createdAt.tsx
+++ b/packages/www/components/Table/cells/createdAt.tsx
@@ -5,7 +5,7 @@ import { UploadIcon } from "@radix-ui/react-icons";
 import { format } from "date-fns";
 import { useApi } from "hooks";
 import { useEffect, useState } from "react";
-import ReactTooltip from "react-tooltip";
+import { Tooltip as ReactTooltip } from "react-tooltip";
 import { CellComponentProps, TableData } from "../types";
 import { QuestionMarkCircledIcon as Help } from "@radix-ui/react-icons";
 
@@ -21,21 +21,11 @@ const FailedProcessing = ({ id, errorMessage }) => {
   const tooltipId = `tooltip-error-${id}`;
   return (
     <>
-      {errorMessage !== undefined && (
-        <ReactTooltip
-          id={tooltipId}
-          className="tooltip"
-          place="top"
-          type="dark"
-          effect="solid"
-          delayShow={500}>
-          {errorMessage}
-        </ReactTooltip>
-      )}
+      {errorMessage !== undefined && <ReactTooltip id={tooltipId} />}
       <Badge
-        data-tip
-        data-for={tooltipId}
+        data-tooltip-id={tooltipId}
         size="1"
+        data-tooltip-content={errorMessage}
         variant="red"
         css={{ padding: "0 $2" }}>
         Internal error processing file
diff --git a/packages/www/components/Table/cells/name.tsx b/packages/www/components/Table/cells/name.tsx
index 8056ce9653..6738c5737c 100644
--- a/packages/www/components/Table/cells/name.tsx
+++ b/packages/www/components/Table/cells/name.tsx
@@ -1,7 +1,7 @@
 import { CellComponentProps, TableData } from "../types";
 import { Box } from "@livepeer/design-system";
 import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
-import ReactTooltip from "react-tooltip";
+import { Tooltip } from "react-tooltip";
 
 export type NameCellProps = {
   id?: string;
@@ -25,18 +25,10 @@ const NameCell = <D extends TableData>({
     const tooltipId = "tooltip-error-" + id;
     return (
       <>
-        <ReactTooltip
-          id={tooltipId}
-          className="tooltip"
-          place="top"
-          type="dark"
-          effect="solid"
-          delayShow={500}>
-          {errorMessage}
-        </ReactTooltip>
+        <Tooltip id={tooltipId} />
         <Box
-          data-tip
-          data-for={tooltipId}
+          data-tooltip-id={tooltipId}
+          data-tooltip-content={errorMessage}
           css={{
             display: "flex",
             alignItems: "center",
diff --git a/packages/www/components/Table/cells/streams-table.tsx b/packages/www/components/Table/cells/streams-table.tsx
index ebf6191d51..5be9a92879 100644
--- a/packages/www/components/Table/cells/streams-table.tsx
+++ b/packages/www/components/Table/cells/streams-table.tsx
@@ -1,6 +1,6 @@
 import { Stream } from "@livepeer.studio/api";
 import { Box, Flex, styled } from "@livepeer/design-system";
-import ReactTooltip from "react-tooltip";
+import { Tooltip } from "react-tooltip";
 import { CellComponentProps, TableData } from "../types";
 import { QuestionMarkIcon } from "@radix-ui/react-icons";
 
@@ -93,18 +93,10 @@ const RenditionsDetailsCell = <D extends TableData>({
       {detailsTooltip ? (
         <Flex css={{ alignItems: "center" }}>
           <Flex>
-            <ReactTooltip
-              id={`tooltip-details-${stream.id}`}
-              className="tooltip"
-              place="top"
-              type="dark"
-              effect="solid"
-              delayShow={500}>
-              {detailsTooltip}
-            </ReactTooltip>
+            <Tooltip id={`tooltip-details-${stream.id}`} />
             <StyledQuestionMarkIcon
-              data-tip
-              data-for={`tooltip-details-${stream.id}`}
+              data-tooltip-id={`tooltip-details-${stream.id}`}
+              data-tooltip-content={detailsTooltip}
             />
           </Flex>
         </Flex>
diff --git a/packages/www/components/Table/cells/text.tsx b/packages/www/components/Table/cells/text.tsx
index 3a8849bccf..7927018924 100644
--- a/packages/www/components/Table/cells/text.tsx
+++ b/packages/www/components/Table/cells/text.tsx
@@ -1,4 +1,4 @@
-import ReactTooltip from "react-tooltip";
+import { Tooltip } from "react-tooltip";
 import { CellComponentProps, TableData } from "../types";
 import { Box } from "@livepeer/design-system";
 
@@ -16,18 +16,10 @@ const TextCell = <D extends TableData>({
   const pid = "tooltip-" + cell.value.id;
   return (
     <Box css={{ lineHeight: 1.5 }}>
-      {cell.value.tooltipChildren ? (
-        <ReactTooltip
-          id={pid}
-          className="tooltip"
-          place="top"
-          type="dark"
-          effect="solid"
-          delayShow={500}>
-          {cell.value.tooltipChildren}
-        </ReactTooltip>
-      ) : null}
-      <Box data-tip data-for={pid}>
+      {cell.value.tooltipChildren ? <Tooltip id={pid} /> : null}
+      <Box
+        data-tooltip-id={pid}
+        data-tooltip-content={`${cell?.value?.tooltipChildren}`}>
         {cell.value.children}
       </Box>
     </Box>
diff --git a/packages/www/components/Table/index.tsx b/packages/www/components/Table/index.tsx
index 5015447b6f..a1174b5490 100644
--- a/packages/www/components/Table/index.tsx
+++ b/packages/www/components/Table/index.tsx
@@ -60,6 +60,7 @@ type StateSetter<T extends Record<string, unknown>> = {
   setFilters: Dispatch<SetStateAction<TFilter[]>>;
   setSelectedRows: Dispatch<SetStateAction<Row<T>[]>>;
   setDataCount: Dispatch<SetStateAction<number | number[]>>;
+  setProjectId: Dispatch<SetStateAction<string>>;
 };
 
 export type State<T extends Record<string, unknown>> = {
@@ -73,6 +74,7 @@ export type State<T extends Record<string, unknown>> = {
   selectedRows: Row<T>[];
   pageSize: number;
   dataCount: number | number[];
+  projectId: string;
   invalidate: () => Promise<void>;
 };
 
@@ -566,6 +568,7 @@ export const useTableState = <T extends Record<string, unknown>>({
   const [prevCursors, setPrevCursors] = useState<string[]>([]);
   const [nextCursor, setNextCursor] = useState("default");
   const [filters, setFilters] = useState<TFilter[]>([]);
+  const [projectId, setProjectId] = useState<string>("");
   const [selectedRows, setSelectedRows] = useState<Row<T>[]>([]);
   const [dataCount, setDataCount] = useState<number | number[]>(0);
   const queryClient = useQueryClient();
@@ -584,6 +587,7 @@ export const useTableState = <T extends Record<string, unknown>>({
       setFilters,
       setSelectedRows,
       setDataCount,
+      setProjectId,
     }),
     [],
   );
@@ -600,6 +604,7 @@ export const useTableState = <T extends Record<string, unknown>>({
       selectedRows,
       pageSize,
       dataCount,
+      projectId,
       invalidate: () => queryClient.invalidateQueries(tableId),
     }),
     [
@@ -614,6 +619,7 @@ export const useTableState = <T extends Record<string, unknown>>({
       dataCount,
       queryClient,
       tableId,
+      projectId,
     ],
   );
 
@@ -627,6 +633,7 @@ const TableComponent = <T extends Record<string, unknown>>(props: Props<T>) => {
     state.cursor,
     state.order,
     state.stringifiedFilters,
+    state.projectId,
   ];
   const tableData: UseQueryResult<FetchResult<T>> = useQuery(
     queryKey,
diff --git a/packages/www/components/UsageSummary/index.tsx b/packages/www/components/UsageSummary/index.tsx
index baf4af3955..df81d43b05 100644
--- a/packages/www/components/UsageSummary/index.tsx
+++ b/packages/www/components/UsageSummary/index.tsx
@@ -145,7 +145,7 @@ const UsageSummary = () => {
         setOverUsageBill(oBill);
         let [res, uInvoice] = await getUpcomingInvoice(user.stripeCustomerId);
         setUpcomingInvoice(uInvoice?.invoices);
-        setUpcomingInvoiceTotal((uInvoice?.invoices.total / 100) | 0);
+        setUpcomingInvoiceTotal((uInvoice?.invoices?.total / 100) | 0);
       }
     };
 
@@ -304,7 +304,7 @@ const UsageSummary = () => {
         justify="between"
         align="center"
         css={{ fontSize: "$3", color: "$hiContrast" }}>
-        <Link href="/billing" passHref legacyBehavior>
+        <Link href="/settings/billing" passHref legacyBehavior>
           <A
             variant="primary"
             css={{ display: "flex", alignItems: "center" }}
diff --git a/packages/www/components/WebhookDetails/index.tsx b/packages/www/components/WebhookDetails/index.tsx
index 70dc80a815..7d6e535520 100644
--- a/packages/www/components/WebhookDetails/index.tsx
+++ b/packages/www/components/WebhookDetails/index.tsx
@@ -336,17 +336,16 @@ const Filters = ({ filters, activeFilter, handleFilterClick, logs }) => {
             px: "$3",
             py: "$2",
             height: "100%",
-            border: activeFilter === filter ? "2px solid" : "1px solid",
-            borderColor: activeFilter === filter ? "$blue11" : "$neutral8",
-            width: "20%",
+            border: "1px solid",
+            borderColor: activeFilter === filter ? "$primary8" : "$neutral8",
+            width: "20em",
             borderRadius: "$3",
           }}>
           <Text
             css={{
               fontSize: "$3",
-              fontWeight: activeFilter === filter ? 500 : 400,
               mb: "$1",
-              color: activeFilter === filter ? "$blue11" : "$neutral9",
+              color: activeFilter === filter ? "$primary8" : "$neutral8",
               textTransform: "capitalize",
             }}>
             {filter}
@@ -355,7 +354,7 @@ const Filters = ({ filters, activeFilter, handleFilterClick, logs }) => {
             css={{
               fontWeight: 500,
               fontSize: "$3",
-              color: activeFilter === filter && "$blue11",
+              color: activeFilter === filter ? "$primary8" : "$primary12",
             }}>
             {filter === "all"
               ? totalWebhookLogs
diff --git a/packages/www/components/WebhookDialogs/DeleteDialog.tsx b/packages/www/components/WebhookDialogs/DeleteDialog.tsx
index 3cb8fc0603..be23481975 100644
--- a/packages/www/components/WebhookDialogs/DeleteDialog.tsx
+++ b/packages/www/components/WebhookDialogs/DeleteDialog.tsx
@@ -11,6 +11,7 @@ import {
 } from "@livepeer/design-system";
 import router from "next/router";
 import Spinner from "../Spinner";
+import { useProjectContext } from "context/ProjectContext";
 
 const DeleteDialog = ({
   deleteDialogOpen,
@@ -27,13 +28,15 @@ const DeleteDialog = ({
   deleteWebhook(): Promise<void>;
   invalidateQuery(): Promise<void>;
 }) => {
+  const { appendProjectId } = useProjectContext();
+
   const onDeleteClick = async () => {
     setDeleting(true);
     await deleteWebhook();
     await invalidateQuery();
     setDeleting(false);
     setDeleteDialogOpen(false);
-    router.push("/developers/webhooks");
+    router.push(appendProjectId("/developers/webhooks"));
   };
 
   return (
diff --git a/packages/www/components/WebhooksTable/helpers.tsx b/packages/www/components/WebhooksTable/helpers.tsx
index 8d4f00f661..77c2e80623 100644
--- a/packages/www/components/WebhooksTable/helpers.tsx
+++ b/packages/www/components/WebhooksTable/helpers.tsx
@@ -47,6 +47,7 @@ export const makeColumns = () => [
 export const rowsPageFromState = async (
   state,
   getWebhooks: Function,
+  appendProjectId: Function,
 ): Promise<RowsPageFromStateResult<WebhooksTableData>> => {
   const [webhooks, nextCursor, _res, count] = await getWebhooks(
     false,
@@ -66,7 +67,7 @@ export const rowsPageFromState = async (
         id: webhook.id,
         name: {
           children: webhook.name,
-          href: `/developers/webhooks/${webhook.id}`,
+          href: appendProjectId(`/developers/webhooks/${webhook.id}`),
           css: {
             overflow: "hidden",
             "text-overflow": "ellipsis",
@@ -88,7 +89,7 @@ export const rowsPageFromState = async (
               {webhook.url}
             </Link>
           ),
-          href: `/developers/webhooks/${webhook.id}`,
+          href: appendProjectId(`/developers/webhooks/${webhook.id}`),
           css: {},
         },
         events: {
@@ -107,20 +108,20 @@ export const rowsPageFromState = async (
               </Button>
             </Tooltip>
           ),
-          href: `/developers/webhooks/${webhook.id}`,
+          href: appendProjectId(`/developers/webhooks/${webhook.id}`),
           css: {},
         },
 
         lastFailure: {
           date: new Date(webhook?.status?.lastFailure?.timestamp),
           fallback: <p>-</p>,
-          href: `/developers/webhooks/${webhook.id}`,
+          href: appendProjectId(`/developers/webhooks/${webhook.id}`),
           css: {},
         },
         lastTriggeredAt: {
           date: new Date(webhook?.status?.lastTriggeredAt),
           fallback: <p>-</p>,
-          href: `/developers/webhooks/${webhook.id}`,
+          href: appendProjectId(`/developers/webhooks/${webhook.id}`),
           css: {},
         },
       };
diff --git a/packages/www/components/WebhooksTable/index.tsx b/packages/www/components/WebhooksTable/index.tsx
index 0d4672aabb..c9452d5046 100644
--- a/packages/www/components/WebhooksTable/index.tsx
+++ b/packages/www/components/WebhooksTable/index.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from "react";
+import { useCallback, useEffect, useMemo } from "react";
 import { useApi } from "../../hooks";
 import Table, {
   DefaultSortBy,
@@ -20,6 +20,7 @@ import {
 } from "./helpers";
 import { makeCreateAction, makeSelectAction } from "../Table/helpers";
 import TableStateDeleteDialog from "../Table/components/TableStateDeleteDialog";
+import { useProjectContext } from "context/ProjectContext";
 
 const WebhooksTable = ({ title = "Endpoints" }: { title?: string }) => {
   const router = useRouter();
@@ -27,15 +28,17 @@ const WebhooksTable = ({ title = "Endpoints" }: { title?: string }) => {
     useApi();
   const deleteDialogState = useToggleState();
   const createDialogState = useToggleState();
+  const { projectId } = useProjectContext();
   const { state, stateSetter } = useTableState<WebhooksTableData>({
     tableId: "webhooksTable",
     initialOrder: sortByToString(DefaultSortBy),
   });
 
   const columns = useMemo(makeColumns, []);
+  const { appendProjectId } = useProjectContext();
 
   const fetcher: Fetcher<WebhooksTableData> = useCallback(
-    async (state) => rowsPageFromState(state, getWebhooks),
+    async (state) => rowsPageFromState(state, getWebhooks, appendProjectId),
     [getWebhooks, user.id],
   );
 
@@ -49,11 +52,15 @@ const WebhooksTable = ({ title = "Endpoints" }: { title?: string }) => {
     await state.invalidate();
     const query = router.query.admin === "true" ? { admin: true } : {};
     await router.push({
-      pathname: `/developers/webhooks/${newWebhook.id}`,
+      pathname: appendProjectId(`/developers/webhooks/${newWebhook.id}`),
       query,
     });
   };
 
+  useEffect(() => {
+    stateSetter.setProjectId(projectId);
+  }, [projectId]);
+
   return (
     <Box css={{ p: "$6", mb: "$8" }}>
       <Table
diff --git a/packages/www/content/ftux-model.tsx b/packages/www/content/ftux-model.tsx
new file mode 100644
index 0000000000..92a63a3010
--- /dev/null
+++ b/packages/www/content/ftux-model.tsx
@@ -0,0 +1,17 @@
+// Frist-Time UX Model content
+// This content can be used to display new features or important information to users when they first log in to the dashboard.
+// Only the first feature with isActive: true will be displayed.
+
+export const featuresList = [
+  {
+    id: "projects",
+    isNewFeature: true,
+    title: "Introducing Projects",
+    description:
+      "Projects in Livepeer Studio are a way for your organization to create dedicated and siloed environments for streams, assets, data, and developer tools like API keys and webhooks. \n\n This can be helpful for separating staging and production environments or managing multiple applications within a single account. To help you get started, we've created a default project that contains all of your existing data.",
+    learnMoreUrl:
+      "https://docs.livepeer.org/developers/guides/managing-projects",
+    imageUrl: "/dashboard/img/features/projects.png",
+    isActive: true,
+  },
+];
diff --git a/packages/www/content/index.tsx b/packages/www/content/index.tsx
index 22b2db556a..4520c41366 100644
--- a/packages/www/content/index.tsx
+++ b/packages/www/content/index.tsx
@@ -208,3 +208,21 @@ export const DashboardPlans = {
     url: makeCompleteUrl(),
   },
 };
+
+export const DashboardSettingsGeneral = {
+  metaData: {
+    title: makeCompleteTitle("Settings"),
+    description:
+      "Start for free, then pay as you grow. Enjoy flexible pricing for projects of all sizes.",
+    url: makeCompleteUrl(),
+  },
+};
+
+export const DashboardProjects = {
+  metaData: {
+    title: makeCompleteTitle("Projects"),
+    description:
+      "Start for free, then pay as you grow. Enjoy flexible pricing for projects of all sizes.",
+    url: makeCompleteUrl(),
+  },
+};
diff --git a/packages/www/context/ProjectContext.tsx b/packages/www/context/ProjectContext.tsx
new file mode 100644
index 0000000000..8e34432225
--- /dev/null
+++ b/packages/www/context/ProjectContext.tsx
@@ -0,0 +1,74 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  ReactNode,
+} from "react";
+import { useRouter } from "next/router";
+
+interface ProjectContextType {
+  projectId: string;
+  setProjectId: (id: string) => void;
+  clearProjectId: () => void;
+  appendProjectId: (path: string) => string;
+}
+
+const ProjectContext = createContext<ProjectContextType | undefined>(undefined);
+
+export const ProjectProvider = ({ children }: { children: ReactNode }) => {
+  const router = useRouter();
+  const [projectId, setProjectId] = useState<string>(() => {
+    // Get initial value from localStorage if it exists
+    if (typeof window !== "undefined") {
+      return localStorage.getItem("projectId") || "";
+    }
+    return "";
+  });
+
+  useEffect(() => {
+    if (router.query.projectId) {
+      setProjectId(router.query.projectId as string);
+    }
+  }, [router.query.projectId]);
+
+  useEffect(() => {
+    if (projectId) {
+      // Save projectId to localStorage
+      localStorage.setItem("projectId", projectId);
+      router.replace({
+        query: {
+          ...router.query,
+          projectId,
+        },
+      });
+    }
+  }, [projectId]);
+
+  const appendProjectId = (path: string) => {
+    if (!projectId) {
+      return "";
+    }
+    return `/projects/${projectId}${path}`;
+  };
+
+  const clearProjectId = () => {
+    setProjectId("");
+    localStorage.removeItem("projectId");
+  };
+
+  return (
+    <ProjectContext.Provider
+      value={{ projectId, setProjectId, appendProjectId, clearProjectId }}>
+      {children}
+    </ProjectContext.Provider>
+  );
+};
+
+export const useProjectContext = (): ProjectContextType => {
+  const context = useContext(ProjectContext);
+  if (!context) {
+    throw new Error("useProjectContext must be used within a ProjectProvider");
+  }
+  return context;
+};
diff --git a/packages/www/hooks/use-api/endpoints/accessControl.ts b/packages/www/hooks/use-api/endpoints/accessControl.ts
index 994c6477be..8a92e552cf 100644
--- a/packages/www/hooks/use-api/endpoints/accessControl.ts
+++ b/packages/www/hooks/use-api/endpoints/accessControl.ts
@@ -8,6 +8,7 @@ import {
 } from "@livepeer.studio/api";
 import { getCursor } from "../helpers";
 import { trackPageView } from "../tracking";
+import { projectId } from "hooks/use-project";
 
 let context: any;
 let setState: (value: SetStateAction<ApiState>) => void;
@@ -35,6 +36,7 @@ export const getSigningKeys = async (opts?: {
       limit: opts?.limit,
       cursor: opts?.cursor,
       count: opts?.count,
+      projectId,
     })}`,
   );
   const nextCursor = getCursor(res.headers.get("link"));
@@ -46,7 +48,8 @@ export const createSigningKey = async (
   params,
 ): Promise<SigningKeyResponsePayload> => {
   trackPageView(params.email, "/create-signing-key");
-  const [res, token] = await context.fetch(`/access-control/signing-key`, {
+  const url = `/access-control/signing-key?projectId=${projectId}`;
+  const [res, token] = await context.fetch(url, {
     method: "POST",
     body: JSON.stringify(params),
     headers: {
@@ -60,7 +63,8 @@ export const createSigningKey = async (
 };
 
 export const deleteSigningKey = async (id: string): Promise<void> => {
-  const [res, body] = await context.fetch(`/access-control/signing-key/${id}`, {
+  const url = `/access-control/signing-key/${id}?projectId=${projectId}`;
+  const [res, body] = await context.fetch(url, {
     method: "DELETE",
   });
   if (res.status !== 204) {
diff --git a/packages/www/hooks/use-api/endpoints/apiToken.ts b/packages/www/hooks/use-api/endpoints/apiToken.ts
index edd3d81602..8ee96c2430 100644
--- a/packages/www/hooks/use-api/endpoints/apiToken.ts
+++ b/packages/www/hooks/use-api/endpoints/apiToken.ts
@@ -4,6 +4,7 @@ import { SetStateAction } from "react";
 import { ApiToken, Error as ApiError } from "@livepeer.studio/api";
 import { getCursor } from "../helpers";
 import { trackPageView } from "../tracking";
+import { projectId } from "hooks/use-project";
 
 let context: any;
 let setState: (value: SetStateAction<ApiState>) => void;
@@ -35,6 +36,7 @@ export const getApiTokens = async (
       limit: opts?.limit,
       cursor: opts?.cursor,
       count: opts?.count,
+      projectId,
     })}`,
   );
   const nextCursor = getCursor(res.headers.get("link"));
@@ -44,13 +46,16 @@ export const getApiTokens = async (
 
 export const createApiToken = async (params): Promise<ApiToken> => {
   trackPageView(params.email, "/create-api-token");
-  const [res, token] = await context.fetch(`/api-token`, {
-    method: "POST",
-    body: JSON.stringify(params),
-    headers: {
-      "content-type": "application/json",
+  const [res, token] = await context.fetch(
+    `/api-token?projectId=${projectId}`,
+    {
+      method: "POST",
+      body: JSON.stringify(params),
+      headers: {
+        "content-type": "application/json",
+      },
     },
-  });
+  );
   if (res.status !== 201) {
     throw new Error(JSON.stringify(res.errors));
   }
@@ -58,7 +63,9 @@ export const createApiToken = async (params): Promise<ApiToken> => {
 };
 
 export const deleteApiToken = async (id: string): Promise<void> => {
-  const [res, body] = await context.fetch(`/api-token/${id}`, {
+  const url = `/api-token/${id}?projectId=${projectId}`;
+
+  const [res, body] = await context.fetch(url, {
     method: "DELETE",
   });
   if (res.status !== 204) {
diff --git a/packages/www/hooks/use-api/endpoints/asset.ts b/packages/www/hooks/use-api/endpoints/asset.ts
index 0006638794..fa5b25af9c 100644
--- a/packages/www/hooks/use-api/endpoints/asset.ts
+++ b/packages/www/hooks/use-api/endpoints/asset.ts
@@ -5,6 +5,7 @@ import { HttpError } from "../../../lib/utils";
 import { Upload } from "tus-js-client";
 import qs from "qs";
 import { getCursor } from "../helpers";
+import { projectId } from "hooks/use-project";
 
 let context: any;
 let setState: (value: SetStateAction<ApiState>) => void;
@@ -18,7 +19,8 @@ export const setSharedScope = (
 };
 
 export const createAsset = async (params): Promise<Asset> => {
-  const [res, asset] = await context.fetch(`/asset/import`, {
+  const url = `/asset/import?projectId=${projectId}`;
+  const [res, asset] = await context.fetch(url, {
     method: "POST",
     body: JSON.stringify(params),
     headers: {
@@ -38,10 +40,12 @@ export const uploadAssets = async (
   onError?: (file: File, error: Error) => void,
   onProgress?: (file: File, progress: number) => void,
 ): Promise<void> => {
+  const url = `/asset/request-upload?projectId=${projectId}`;
+
   const requestAssetUpload = async (
     params,
   ): Promise<{ tusEndpoint: string }> => {
-    const [res, assetUpload] = await context.fetch(`/asset/request-upload`, {
+    const [res, assetUpload] = await context.fetch(url, {
       method: "POST",
       body: JSON.stringify(params),
       headers: {
@@ -157,6 +161,7 @@ export const getAssets = async (
       cursor: opts?.cursor,
       count: opts?.count,
       details: 1,
+      projectId,
     })}`,
   );
   if (res.status !== 200) {
@@ -169,7 +174,9 @@ export const getAssets = async (
 };
 
 export const getAsset = async (assetId): Promise<Asset> => {
-  const [res, asset] = await context.fetch(`/asset/${assetId}?details=1`);
+  const url = `/asset/${assetId}?details=1&projectId=${projectId}`;
+
+  const [res, asset] = await context.fetch(url);
   if (res.status !== 200) {
     throw asset && typeof asset === "object"
       ? { ...asset, status: res.status }
@@ -182,7 +189,9 @@ export const patchAsset = async (
   assetId: string,
   patch: AssetPatchPayload,
 ): Promise<void> => {
-  const [res, body] = await context.fetch(`/asset/${assetId}`, {
+  const url = `/asset/${assetId}?projectId=${projectId}`;
+
+  const [res, body] = await context.fetch(url, {
     method: "PATCH",
     body: JSON.stringify(patch),
     headers: {
@@ -196,7 +205,9 @@ export const patchAsset = async (
 };
 
 export const deleteAsset = async (assetId): Promise<void> => {
-  const [res] = await context.fetch(`/asset/${assetId}`, {
+  const url = `/asset/${assetId}?projectId=${projectId}`;
+
+  const [res] = await context.fetch(url, {
     method: "DELETE",
   });
   if (res.status !== 204) {
diff --git a/packages/www/hooks/use-api/endpoints/project.ts b/packages/www/hooks/use-api/endpoints/project.ts
new file mode 100644
index 0000000000..5cd6187a75
--- /dev/null
+++ b/packages/www/hooks/use-api/endpoints/project.ts
@@ -0,0 +1,77 @@
+import qs from "qs";
+import { ApiState } from "../types";
+import { SetStateAction } from "react";
+import { Project } from "@livepeer.studio/api";
+import { HttpError } from "lib/utils";
+
+let context: any;
+let setState: (value: SetStateAction<ApiState>) => void;
+
+export const setSharedScope = (
+  _context: any,
+  _setState: (value: SetStateAction<ApiState>) => void,
+) => {
+  context = _context;
+  setState = _setState;
+};
+
+export const createProject = async (params): Promise<Project> => {
+  const [res, project] = await context.fetch(`/project`, {
+    method: "POST",
+    body: JSON.stringify(params),
+    headers: {
+      "content-type": "application/json",
+    },
+  });
+
+  if (res.status !== 201) {
+    throw new Error(project.errors.join(", "));
+  }
+  return project;
+};
+
+export const getProject = async (projectId): Promise<Project> => {
+  const [res, project] = await context.fetch(`/project/${projectId}`);
+  if (res.status !== 200) {
+    throw project && typeof project === "object"
+      ? { ...project, status: res.status }
+      : new Error(project);
+  }
+  return project;
+};
+
+export const getProjects = async (): Promise<Project[]> => {
+  const [res, projects] = await context.fetch(`/project`);
+  if (res.status !== 200) {
+    throw projects && typeof projects === "object"
+      ? { ...projects, status: res.status }
+      : new Error(projects);
+  }
+  return projects;
+};
+
+export const deleteProject = async (projectId) => {
+  const [res, project] = await context.fetch(`/project/${projectId}`, {
+    method: "DELETE",
+  });
+  if (res.status !== 204) {
+    throw project && typeof project === "object"
+      ? { ...project, status: res.status }
+      : new Error(project);
+  }
+};
+
+export const updateProject = async (projectId, params): Promise<Project> => {
+  const [res, body] = await context.fetch(`/project/${projectId}`, {
+    method: "PATCH",
+    body: JSON.stringify(params),
+    headers: {
+      "content-type": "application/json",
+    },
+  });
+
+  if (res.status !== 204) {
+    throw new HttpError(res.status, body);
+  }
+  return res;
+};
diff --git a/packages/www/hooks/use-api/endpoints/session.ts b/packages/www/hooks/use-api/endpoints/session.ts
index a08945febe..e854670267 100644
--- a/packages/www/hooks/use-api/endpoints/session.ts
+++ b/packages/www/hooks/use-api/endpoints/session.ts
@@ -3,6 +3,7 @@ import { Session, Stream } from "@livepeer.studio/api";
 import { ApiState } from "../types";
 import { getCursor } from "../helpers";
 import { SetStateAction } from "react";
+import { projectId } from "hooks/use-project";
 
 let context: any;
 let setState: (value: SetStateAction<ApiState>) => void;
@@ -29,6 +30,7 @@ export const getStreamSessions = async (
     parentId: id,
     filters: stringifiedFilters,
     count,
+    projectId,
   })}`;
   const [res, streams] = await context.fetch(uri);
   if (res.status !== 200) {
@@ -52,6 +54,7 @@ export const getSession = async (
     cursor,
     filters: stringifiedFilters,
     count,
+    projectId,
   })}`;
   const [res, session] = await context.fetch(uri);
   if (res.status !== 200) {
@@ -78,6 +81,7 @@ export const getStreamSessionsByUserId = async (
     userId,
     filters: stringifiedFilters,
     count,
+    projectId,
   })}`;
   const [res, streams] = await context.fetch(uri);
   if (res.status !== 200) {
diff --git a/packages/www/hooks/use-api/endpoints/stream.ts b/packages/www/hooks/use-api/endpoints/stream.ts
index 9a967a80d3..4bff17e660 100644
--- a/packages/www/hooks/use-api/endpoints/stream.ts
+++ b/packages/www/hooks/use-api/endpoints/stream.ts
@@ -8,6 +8,7 @@ import { HttpError } from "../../../lib/utils";
 import { ApiState, StreamInfo } from "../types";
 import { getCursor } from "../helpers";
 import { SetStateAction } from "react";
+import { projectId } from "hooks/use-project";
 
 let context: any;
 let setState: (value: SetStateAction<ApiState>) => void;
@@ -28,7 +29,9 @@ export const getStreamInfo = async (
 };
 
 export const getStream = async (streamId): Promise<Stream> => {
-  const [res, stream] = await context.fetch(`/stream/${streamId}`);
+  const url = `/stream/${streamId}?projectId=${projectId}`;
+
+  const [res, stream] = await context.fetch(url);
   if (res.status !== 200) {
     throw stream && typeof stream === "object"
       ? { ...stream, status: res.status }
@@ -60,6 +63,7 @@ export const getStreams = async (
       cursor: opts?.cursor,
       count: opts?.count,
       streamsonly: 1,
+      projectId,
     })}`,
   );
 
@@ -71,6 +75,7 @@ export const getStreams = async (
       limit: opts?.limit,
       count: true,
       streamsonly: 1,
+      projectId,
     })}`,
   );
   const [activeStreamRes] = await context.fetch(
@@ -81,6 +86,7 @@ export const getStreams = async (
       limit: opts?.limit,
       count: true,
       streamsonly: 1,
+      projectId,
     })}`,
   );
 
@@ -93,6 +99,7 @@ export const getStreams = async (
       limit: opts?.limit,
       count: true,
       streamsonly: 1,
+      projectId,
     })}`,
   );
 
@@ -168,7 +175,7 @@ export const generateJwt = async (playbackId: string): Promise<string> => {
 };
 
 export const createStream = async (params): Promise<Stream> => {
-  const [res, stream] = await context.fetch(`/stream`, {
+  const [res, stream] = await context.fetch(`/stream?projectId=${projectId}`, {
     method: "POST",
     body: JSON.stringify(params),
     headers: {
@@ -183,7 +190,8 @@ export const createStream = async (params): Promise<Stream> => {
 };
 
 export const terminateStream = async (id: string): Promise<boolean> => {
-  const [res, body] = await context.fetch(`/stream/${id}/terminate`, {
+  const url = `/stream/${id}/terminate?projectId=${projectId}`;
+  const [res, body] = await context.fetch(url, {
     method: "DELETE",
   });
   if (!res.ok) {
@@ -196,7 +204,8 @@ export const terminateStream = async (id: string): Promise<boolean> => {
 };
 
 export const deleteStream = async (id: string): Promise<void> => {
-  const [res, body] = await context.fetch(`/stream/${id}`, {
+  const url = `/stream/${id}?projectId=${projectId}`;
+  const [res, body] = await context.fetch(url, {
     method: "DELETE",
   });
   if (res.status !== 204) {
@@ -205,7 +214,8 @@ export const deleteStream = async (id: string): Promise<void> => {
 };
 
 export const deleteStreams = async (ids: Array<string>): Promise<void> => {
-  const [res, body] = await context.fetch(`/stream`, {
+  const url = `/stream?projectId=${projectId}`;
+  const [res, body] = await context.fetch(url, {
     method: "DELETE",
     body: JSON.stringify({ ids }),
     headers: {
@@ -221,7 +231,8 @@ export const patchStream = async (
   streamId: string,
   patch: StreamPatchPayload,
 ): Promise<void> => {
-  const [res, body] = await context.fetch(`/stream/${streamId}`, {
+  const url = `/stream/${streamId}?projectId=${projectId}`;
+  const [res, body] = await context.fetch(url, {
     method: "PATCH",
     body: JSON.stringify(patch),
     headers: {
diff --git a/packages/www/hooks/use-api/endpoints/webhook.ts b/packages/www/hooks/use-api/endpoints/webhook.ts
index 9da035ca29..7cce7ef916 100644
--- a/packages/www/hooks/use-api/endpoints/webhook.ts
+++ b/packages/www/hooks/use-api/endpoints/webhook.ts
@@ -3,6 +3,7 @@ import { ApiState, WebhookLogs } from "../types";
 import { SetStateAction } from "react";
 import { Webhook } from "@livepeer.studio/api";
 import { getCursor } from "../helpers";
+import { projectId } from "hooks/use-project";
 
 let context: any;
 let setState: (value: SetStateAction<ApiState>) => void;
@@ -34,6 +35,7 @@ export const getWebhooks = async (
       cursor,
       filters: f,
       count,
+      projectId,
     })}`,
   );
   const nextCursor = getCursor(res.headers.get("link"));
@@ -42,7 +44,8 @@ export const getWebhooks = async (
 };
 
 export const getWebhook = async (webhookId): Promise<Webhook> => {
-  const [res, webhook] = await context.fetch(`/webhook/${webhookId}`);
+  const url = `/webhook/${webhookId}?projectId=${projectId}`;
+  const [res, webhook] = await context.fetch(url);
   if (res.status !== 200) {
     throw webhook && typeof webhook === "object"
       ? { ...webhook, status: res.status }
@@ -52,7 +55,8 @@ export const getWebhook = async (webhookId): Promise<Webhook> => {
 };
 
 export const createWebhook = async (params): Promise<Webhook> => {
-  const [res, webhook] = await context.fetch(`/webhook`, {
+  const url = `/webhook?projectId=${projectId}`;
+  const [res, webhook] = await context.fetch(url, {
     method: "POST",
     body: JSON.stringify(params),
     headers: {
@@ -67,7 +71,8 @@ export const createWebhook = async (params): Promise<Webhook> => {
 };
 
 export const updateWebhook = async (id, params): Promise<Webhook> => {
-  const [res, webhook] = await context.fetch(`/webhook/${id}`, {
+  const url = `/webhook/${id}?projectId=${projectId}`;
+  const [res, webhook] = await context.fetch(url, {
     method: "PUT",
     body: JSON.stringify(params),
     headers: {
@@ -82,7 +87,8 @@ export const updateWebhook = async (id, params): Promise<Webhook> => {
 };
 
 export const deleteWebhook = async (id: string): Promise<void> => {
-  const [res, body] = await context.fetch(`/webhook/${id}`, {
+  const url = `/webhook/${id}?projectId=${projectId}`;
+  const [res, body] = await context.fetch(url, {
     method: "DELETE",
   });
   if (res.status !== 204) {
@@ -91,7 +97,8 @@ export const deleteWebhook = async (id: string): Promise<void> => {
 };
 
 export const deleteWebhooks = async (ids: Array<string>): Promise<void> => {
-  const [res, body] = await context.fetch(`/webhook`, {
+  const url = `/webhook?projectId=${projectId}`;
+  const [res, body] = await context.fetch(url, {
     method: "DELETE",
     body: JSON.stringify({ ids }),
     headers: {
@@ -110,7 +117,7 @@ export const getWebhookLogs = async (
   const f = filters ? JSON.stringify(filters) : undefined;
 
   const [res, logs] = await context.fetch(
-    `/webhook/${webhookId}/log?${qs.stringify({ filters: f })}`,
+    `/webhook/${webhookId}/log?${qs.stringify({ filters: f, projectId })}`,
   );
   if (res.status !== 200) {
     throw logs && typeof logs === "object"
@@ -124,15 +131,13 @@ export const resendWebhook = async (params: {
   webhookId: string;
   logId: string;
 }): Promise<WebhookLogs> => {
-  const [res, webhook] = await context.fetch(
-    `/webhook/${params.webhookId}/log/${params.logId}/resend`,
-    {
-      method: "POST",
-      headers: {
-        "content-type": "application/json",
-      },
+  const url = `/webhook/${params.webhookId}/log/${params.logId}/resend?projectId=${projectId}`;
+  const [res, webhook] = await context.fetch(url, {
+    method: "POST",
+    headers: {
+      "content-type": "application/json",
     },
-  );
+  });
 
   if (res.status !== 200) {
     throw new Error(webhook.errors.join(", "));
diff --git a/packages/www/hooks/use-api/index.tsx b/packages/www/hooks/use-api/index.tsx
index 5f829753f9..70389837de 100644
--- a/packages/www/hooks/use-api/index.tsx
+++ b/packages/www/hooks/use-api/index.tsx
@@ -19,6 +19,7 @@ import * as taskEndpointsFunctions from "./endpoints/task";
 import * as userEndpointsFunctions from "./endpoints/user";
 import * as versionEndpointsFunctions from "./endpoints/version";
 import * as webhookEndpointsFunctions from "./endpoints/webhook";
+import * as projectEndpointsFunctions from "./endpoints/project";
 
 // Allow for manual overriding of the API server endopint
 export const getEndpoint = () => {
@@ -100,6 +101,7 @@ const makeContext = (
     ...userEndpointsFunctions,
     ...versionEndpointsFunctions,
     ...webhookEndpointsFunctions,
+    ...projectEndpointsFunctions,
   };
 
   accessControlEndpointsFunctions.setSharedScope(context, setState);
@@ -117,6 +119,7 @@ const makeContext = (
   userEndpointsFunctions.setSharedScope(context, setState);
   versionEndpointsFunctions.setSharedScope(context, setState);
   webhookEndpointsFunctions.setSharedScope(context, setState);
+  projectEndpointsFunctions.setSharedScope(context, setState);
 
   delete context.setSharedScope;
 
diff --git a/packages/www/hooks/use-api/tokenStorage.ts b/packages/www/hooks/use-api/tokenStorage.ts
index 4c5169128e..2135589679 100644
--- a/packages/www/hooks/use-api/tokenStorage.ts
+++ b/packages/www/hooks/use-api/tokenStorage.ts
@@ -1,3 +1,5 @@
+import { useProjectContext } from "context/ProjectContext";
+
 export const TOKEN_KEY = "PERSISTENT_TOKEN";
 export const REFRESH_TOKEN_KEY = "REFRESH_TOKEN";
 
diff --git a/packages/www/hooks/use-project.tsx b/packages/www/hooks/use-project.tsx
new file mode 100644
index 0000000000..948cc4005b
--- /dev/null
+++ b/packages/www/hooks/use-project.tsx
@@ -0,0 +1,22 @@
+import { useProjectContext } from "context/ProjectContext";
+import { useEffect } from "react";
+
+export let projectId = "";
+
+export const updateProjectId = (id: string) => {
+  projectId = id;
+};
+
+const useSyncProjectId = () => {
+  const { projectId: contextProjectId } = useProjectContext();
+
+  useEffect(() => {
+    if (contextProjectId) {
+      updateProjectId(contextProjectId);
+    }
+  }, [contextProjectId]);
+
+  return projectId;
+};
+
+export default useSyncProjectId;
diff --git a/packages/www/lib/get-emoji.tsx b/packages/www/lib/get-emoji.tsx
new file mode 100644
index 0000000000..92e0a6863c
--- /dev/null
+++ b/packages/www/lib/get-emoji.tsx
@@ -0,0 +1,90 @@
+/*
+ * This function returns an emoji icon based on the name of the project.
+ */
+
+const getEmojiIcon = (name) => {
+  if (!name) {
+    return "";
+  }
+
+  const stagingKeywords = [
+    "staging",
+    "dev",
+    "qa",
+    "demo",
+    "preview",
+    "sandbox",
+    "playground",
+    "beta",
+  ];
+
+  const productionKeywords = [
+    "prod",
+    "production",
+    "live",
+    "master",
+    "main",
+    "release",
+    "deploy",
+    "ship",
+    "go",
+  ];
+
+  const otherDevKeywords = [
+    "build",
+    "compile",
+    "run",
+    "execute",
+    "debug",
+    "test",
+  ];
+
+  const randomEmojis = [
+    "✨",
+    "🌟",
+    "🎯",
+    "🏅",
+    "💡",
+    "📚",
+    "🛠️",
+    "🔒",
+    "🔍",
+    "💼",
+    "🧩",
+    "📝",
+    "🌐",
+    "🏆",
+    "🎉",
+  ];
+
+  const containsKeyword = (keywords) => {
+    return keywords.some((keyword) => name.toLowerCase().includes(keyword));
+  };
+
+  const hashString = (str) => {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+      hash = str.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    return hash;
+  };
+
+  const getRandomEmoji = (str) => {
+    const hash = hashString(str);
+    return randomEmojis[Math.abs(hash) % randomEmojis.length];
+  };
+
+  if (name.toLowerCase().includes("default")) {
+    return "⭐";
+  } else if (containsKeyword(stagingKeywords)) {
+    return "🔧";
+  } else if (containsKeyword(productionKeywords)) {
+    return "🚀";
+  } else if (containsKeyword(otherDevKeywords)) {
+    return "🧪";
+  } else {
+    return getRandomEmoji(name);
+  }
+};
+
+export { getEmojiIcon };
diff --git a/packages/www/lib/url-sanitizer.tsx b/packages/www/lib/url-sanitizer.tsx
new file mode 100644
index 0000000000..9d68676049
--- /dev/null
+++ b/packages/www/lib/url-sanitizer.tsx
@@ -0,0 +1,4 @@
+export function sanitizeUrl(url: string) {
+  const urlObject = new URL(url);
+  return urlObject.hostname + urlObject.pathname;
+}
diff --git a/packages/www/package.json b/packages/www/package.json
index 9789e83d99..4bd29964a5 100644
--- a/packages/www/package.json
+++ b/packages/www/package.json
@@ -22,7 +22,7 @@
     "@emotion/styled": "^10.0.23",
     "@june-so/analytics-next": "^2.0.0",
     "@livepeer.studio/api": "^0.19.0",
-    "@livepeer/design-system": "^1.1.0",
+    "@livepeer/design-system": "1.1.0",
     "@livepeer/react": "^3.1.9",
     "@mdx-js/loader": "^1.6.16",
     "@mdx-js/mdx": "^1.6.16",
@@ -72,12 +72,13 @@
     "react-query": "^3.18.1",
     "react-reveal": "^1.2.2",
     "react-table": "^7.7.0",
-    "react-tooltip": "4.2.7",
+    "react-tooltip": "^5.26.4",
     "react-use-mailchimp-signup": "^2.0.2",
     "reactour": "^1.18.0",
     "recharts": "^2.0.7",
     "rehype-parse": "^7.0.1",
     "remark-emoji": "^2.1.0",
+    "sass": "^1.77.6",
     "styled-components": "^6.1.11",
     "tailwind-merge": "^2.3.0",
     "theme-ui": "0.3.1",
diff --git a/packages/www/pages/_app.tsx b/packages/www/pages/_app.tsx
index c38bbaede9..8a22f8efad 100644
--- a/packages/www/pages/_app.tsx
+++ b/packages/www/pages/_app.tsx
@@ -23,6 +23,8 @@ import "../css/recaptcha.css";
 import "../css/tailwind.css";
 import { DEFAULT_THEME } from "../lib/theme";
 import SEO from "../next-seo.config";
+import { ProjectProvider } from "context/ProjectContext";
+import useSyncProjectId from "hooks/use-project";
 
 const queryClient = new QueryClient();
 
@@ -94,6 +96,11 @@ const livepeerTheme: ThemeConfig = {
   },
 };
 
+const SyncProjectId = () => {
+  useSyncProjectId();
+  return null;
+};
+
 const App = ({ Component, pageProps }) => {
   globalStyles();
   return (
@@ -113,18 +120,24 @@ const App = ({ Component, pageProps }) => {
             dark: "dark-theme-green",
             light: "light-theme-green",
           }}>
-          <SnackbarProvider>
-            <QueryClientProvider client={queryClient}>
-              <ApiProvider>
-                <AnalyzerProvider>
-                  <LivepeerConfig theme={livepeerTheme} client={livepeerClient}>
-                    <DefaultSeo {...SEO} />
-                    <Component {...pageProps} />
-                  </LivepeerConfig>
-                </AnalyzerProvider>
-              </ApiProvider>
-            </QueryClientProvider>
-          </SnackbarProvider>
+          <ProjectProvider>
+            <SyncProjectId />
+
+            <SnackbarProvider>
+              <QueryClientProvider client={queryClient}>
+                <ApiProvider>
+                  <AnalyzerProvider>
+                    <LivepeerConfig
+                      theme={livepeerTheme}
+                      client={livepeerClient}>
+                      <DefaultSeo {...SEO} />
+                      <Component {...pageProps} />
+                    </LivepeerConfig>
+                  </AnalyzerProvider>
+                </ApiProvider>
+              </QueryClientProvider>
+            </SnackbarProvider>
+          </ProjectProvider>
         </ThemeProvider>
       </DesignSystemProvider>
     </>
diff --git a/packages/www/pages/app/stream/[id].tsx b/packages/www/pages/app/stream/[id].tsx
index df9cb591c5..169149b1e6 100644
--- a/packages/www/pages/app/stream/[id].tsx
+++ b/packages/www/pages/app/stream/[id].tsx
@@ -1,6 +1,6 @@
 /** @jsxImportSource @emotion/react */
 import Link from "next/link";
-import ReactTooltip from "react-tooltip";
+import { Tooltip } from "react-tooltip";
 import {
   Spinner,
   Box,
@@ -710,8 +710,8 @@ const ID = () => {
                           alignItems: "center",
                         }}>
                         <Help
-                          data-tip
-                          data-for={`tooltip-record-${stream.id}`}
+                          data-tooltip-id={`tooltip-record-${stream.id}`}
+                          data-tooltip-content={`When checked, transcoded streaming sessions will be recorded and stored by Livepeer Studio. Each recorded session will have a recording .m3u8 URL for playback and an MP4 download link.`}
                           sx={{
                             color: "muted",
                             cursor: "pointer",
@@ -722,20 +722,7 @@ const ID = () => {
                         />
                       </Flex>
                     </Flex>
-                    <ReactTooltip
-                      id={`tooltip-record-${stream.id}`}
-                      className="tooltip"
-                      place="top"
-                      type="dark"
-                      effect="solid">
-                      <p>
-                        When checked, transcoded streaming sessions will be
-                        recorded and stored by Livepeer Studio.
-                        <br /> Each recorded session will have a recording .m3u8
-                        URL for playback and an MP4 download link.
-                        <br />
-                      </p>
-                    </ReactTooltip>
+                    <Tooltip id={`tooltip-record-${stream.id}`} />
                   </Box>
                   <Box sx={{ m: "0.4em", gridColumn: "1/-1" }}>
                     <hr />
@@ -788,8 +775,8 @@ const ID = () => {
                           alignItems: "center",
                         }}>
                         <Help
-                          data-tip
-                          data-for={`tooltip-suspend-${stream.id}`}
+                          data-tooltip-id={`tooltip-suspend-${stream.id}`}
+                          data-tooltip-content={`When turned on, any active stream sessions will immediately end. New sessions will be prevented from starting until turned off.`}
                           sx={{
                             color: "muted",
                             cursor: "pointer",
@@ -800,20 +787,7 @@ const ID = () => {
                         />
                       </Flex>
                     </Flex>
-                    <ReactTooltip
-                      id={`tooltip-suspend-${stream.id}`}
-                      className="tooltip"
-                      place="top"
-                      type="dark"
-                      effect="solid">
-                      <p>
-                        When turned on, any active stream sessions will
-                        immediately end.
-                        <br />
-                        New sessions will be prevented from starting until
-                        turned off.
-                      </p>
-                    </ReactTooltip>
+                    <Tooltip id={`tooltip-suspend-${stream.id}`} />
                   </Box>
                   <Box sx={{ m: "0.4em", gridColumn: "1/-1" }}>
                     <hr />
diff --git a/packages/www/pages/index.tsx b/packages/www/pages/index.tsx
index 9b6165cdcb..b2b856e333 100644
--- a/packages/www/pages/index.tsx
+++ b/packages/www/pages/index.tsx
@@ -1,119 +1,20 @@
-import { useEffect, useState } from "react";
-import Link from "next/link";
-import Layout from "../layouts/dashboard";
-import { Box, Button, useSnackbar } from "@livepeer/design-system";
-import GettingStarted from "components/GettingStarted";
-import UsageSummary from "components/UsageSummary";
-import StreamsTable from "components/StreamsTable";
-import Spinner from "components/Spinner";
-import Banner from "components/Banner";
+/**
+ * This page is solely for the purpose of redirecting user to their default project
+ *
+ * If user has a default project, redirect to that project, else redirect to the first project (default project)
+ */
 
-import { useLoggedIn, useApi } from "hooks";
-import { Dashboard as Content } from "content";
+import { useLoggedIn } from "hooks";
+import { useRouter } from "next/router";
+import React, { useEffect } from "react";
 
-const Dashboard = () => {
-  const { user, verifyEmail, getUserProduct } = useApi();
-  const { emailValid } = user;
+export default function Dashboard() {
+  const { push } = useRouter();
 
-  const [loading, setLoading] = useState(false);
-  const product = getUserProduct(user);
-  const showPromo = user.disabled;
-  const [openSnackbar] = useSnackbar();
-
-  const resendVerificationEmail = async () => {
-    setLoading(true);
-    const res = await verifyEmail(user.email);
-    setLoading(false);
-
-    if (res.errors) {
-      openSnackbar(`Errors: ${res.errors.join(", ")}`);
-    } else {
-      openSnackbar(
-        `We've sent you a link to verify your email. Please check your inbox at ${user.email}`,
-      );
-    }
-  };
-
-  return (
-    <Box css={{ p: "$6" }}>
-      {!emailValid && (
-        <Banner
-          title="Verify your email"
-          description="Verify your account with a link via email."
-          button={
-            <Button
-              variant="primary"
-              as="a"
-              size="2"
-              css={{ cursor: "default" }}
-              onClick={() => resendVerificationEmail()}>
-              {loading && (
-                <Spinner
-                  css={{
-                    color: "$hiContrast",
-                    width: 16,
-                    height: 16,
-                    mr: "$2",
-                  }}
-                />
-              )}
-              Resend the verification email
-            </Button>
-          }
-          css={{ mb: "$3" }}
-        />
-      )}
-      {showPromo && (
-        <Banner
-          title="Upgrade"
-          description="Your free tier usage limit has been reached or we were unable to process your payment. Upgrade to our Growth or Scale plans or update your payment method to continue using Livepeer Studio."
-          button={
-            <Link href="/dashboard/billing/plans" passHref legacyBehavior>
-              <Button
-                variant="primary"
-                as="a"
-                size="2"
-                css={{ cursor: "default" }}>
-                Upgrade
-              </Button>
-            </Link>
-          }
-          css={{ mb: "$7" }}
-        />
-      )}
-      <Box css={{ mb: "$9" }}>
-        <GettingStarted firstName={user?.firstName} />
-      </Box>
-      <Box css={{ mb: "100px" }}>
-        <UsageSummary />
-      </Box>
-      <Box css={{ mb: "$8" }}>
-        <StreamsTable
-          title="Streams"
-          hideFilters={true}
-          userId={user.id}
-          pageSize={5}
-          tableId="dashboardStreamsTable"
-          viewAll="/dashboard/streams"
-        />
-      </Box>
-    </Box>
-  );
-};
-
-const DashboardPage = () => {
   useLoggedIn();
-  const { user } = useApi();
-
-  if (!user) {
-    return <Layout />;
-  }
-
-  return (
-    <Layout id="home" breadcrumbs={[{ title: "Home" }]} {...Content.metaData}>
-      <Dashboard />
-    </Layout>
-  );
-};
 
-export default DashboardPage;
+  useEffect(() => {
+    push(`/settings/projects`);
+  }, []);
+  return <div />;
+}
diff --git a/packages/www/pages/assets/[id]/index.tsx b/packages/www/pages/projects/[projectId]/assets/[id]/index.tsx
similarity index 91%
rename from packages/www/pages/assets/[id]/index.tsx
rename to packages/www/pages/projects/[projectId]/assets/[id]/index.tsx
index 3ee6270ba3..b4069b7009 100644
--- a/packages/www/pages/assets/[id]/index.tsx
+++ b/packages/www/pages/projects/[projectId]/assets/[id]/index.tsx
@@ -6,6 +6,7 @@ import AssetDetail from "layouts/assetDetail";
 import AssetOverviewTab from "components/AssetDetails/AssetOverviewTab";
 import AssetEventLogTab from "components/AssetDetails/AssetEventLogTab";
 import { Asset } from "@livepeer.studio/api";
+import { useProjectContext } from "context/ProjectContext";
 
 const refetchInterval = 5 * 1000;
 
@@ -17,6 +18,7 @@ const AssetDetails = () => {
   );
   const [editAssetDialogOpen, setEditAssetDialogOpen] = useState(false);
   const [embedVideoDialogOpen, setEmbedVideoDialogOpen] = useState(false);
+  const { appendProjectId } = useProjectContext();
 
   const { query } = router;
   const id = query.id as string;
@@ -51,7 +53,7 @@ const AssetDetails = () => {
       setEmbedVideoDialogOpen={setEmbedVideoDialogOpen}
       refetchAsset={() => refetchAsset()}
       breadcrumbs={[
-        { title: "Assets", href: "/assets" },
+        { title: "Assets", href: appendProjectId("/assets") },
         { title: asset?.name },
       ]}>
       {currentTab === "Overview" ? (
diff --git a/packages/www/pages/assets/index.tsx b/packages/www/pages/projects/[projectId]/assets/index.tsx
similarity index 85%
rename from packages/www/pages/assets/index.tsx
rename to packages/www/pages/projects/[projectId]/assets/index.tsx
index d4cf7ae546..8a28a4b0c9 100644
--- a/packages/www/pages/assets/index.tsx
+++ b/packages/www/pages/projects/[projectId]/assets/index.tsx
@@ -1,4 +1,4 @@
-import Layout from "../../layouts/dashboard";
+import Layout from "../../../../layouts/dashboard";
 import { Box } from "@livepeer/design-system";
 import { useApi, useLoggedIn } from "hooks";
 import AssetsTable from "components/AssetsTable";
@@ -11,6 +11,10 @@ const Assets = () => {
   if (!user) {
     return <Layout />;
   }
+
+  const data = {
+    disableSizeLimit: true,
+  };
   return (
     <Layout
       id="assets"
diff --git a/packages/www/pages/developers/api-keys.tsx b/packages/www/pages/projects/[projectId]/developers/api-keys.tsx
similarity index 69%
rename from packages/www/pages/developers/api-keys.tsx
rename to packages/www/pages/projects/[projectId]/developers/api-keys.tsx
index aa1aaf9db0..ec16b92bfa 100644
--- a/packages/www/pages/developers/api-keys.tsx
+++ b/packages/www/pages/projects/[projectId]/developers/api-keys.tsx
@@ -1,12 +1,14 @@
-import Layout from "../../layouts/dashboard";
+import Layout from "../../../../layouts/dashboard";
 import { Box } from "@livepeer/design-system";
 import { useApi, useLoggedIn } from "hooks";
 import ApiKeysTable from "components/ApiKeys";
 import { DashboardAPIKeys as Content } from "content";
+import { useProjectContext } from "context/ProjectContext";
 
 const ApiKeys = () => {
   useLoggedIn();
   const { user } = useApi();
+  const { appendProjectId } = useProjectContext();
 
   if (!user) {
     return <Layout />;
@@ -15,7 +17,10 @@ const ApiKeys = () => {
     <Layout
       id="developers"
       breadcrumbs={[
-        { title: "Developers", href: "/developers/api-keys" },
+        {
+          title: "Developers",
+          href: appendProjectId("/developers/api-keys"),
+        },
         { title: "API Keys" },
       ]}
       {...Content.metaData}>
diff --git a/packages/www/pages/developers/signing-keys.tsx b/packages/www/pages/projects/[projectId]/developers/signing-keys.tsx
similarity index 71%
rename from packages/www/pages/developers/signing-keys.tsx
rename to packages/www/pages/projects/[projectId]/developers/signing-keys.tsx
index 4ebd264eb7..df1a1b53f7 100644
--- a/packages/www/pages/developers/signing-keys.tsx
+++ b/packages/www/pages/projects/[projectId]/developers/signing-keys.tsx
@@ -1,12 +1,14 @@
-import Layout from "../../layouts/dashboard";
+import Layout from "../../../../layouts/dashboard";
 import { Box } from "@livepeer/design-system";
 import { useApi, useLoggedIn } from "hooks";
 import { DashboardSigningKeys as Content } from "content";
 import SigningKeysTable from "components/SigningKeysTable";
+import { useProjectContext } from "context/ProjectContext";
 
 const SigningKeys = () => {
   useLoggedIn();
   const { user } = useApi();
+  const { appendProjectId } = useProjectContext();
 
   if (!user) {
     return <Layout />;
@@ -15,7 +17,10 @@ const SigningKeys = () => {
     <Layout
       id="developers/signing-keys"
       breadcrumbs={[
-        { title: "Developers", href: "/developers/signing-keys" },
+        {
+          title: "Developers",
+          href: appendProjectId("/developers/signing-keys"),
+        },
         { title: "Signing Keys" },
       ]}
       {...Content.metaData}>
diff --git a/packages/www/pages/developers/webhooks/[id].tsx b/packages/www/pages/projects/[projectId]/developers/webhooks/[id].tsx
similarity index 86%
rename from packages/www/pages/developers/webhooks/[id].tsx
rename to packages/www/pages/projects/[projectId]/developers/webhooks/[id].tsx
index c49a34abbd..2a4434b8ef 100644
--- a/packages/www/pages/developers/webhooks/[id].tsx
+++ b/packages/www/pages/projects/[projectId]/developers/webhooks/[id].tsx
@@ -5,6 +5,7 @@ import { useRouter } from "next/router";
 import { useQuery, useQueryClient } from "react-query";
 import WebhookDetails from "components/WebhookDetails";
 import { DashboardWebhooks as Content } from "content";
+import { useProjectContext } from "context/ProjectContext";
 
 const WebhookDetail = () => {
   useLoggedIn();
@@ -12,6 +13,8 @@ const WebhookDetail = () => {
   const [logFilters, setLogFilters] = useState();
 
   const { getWebhook, getWebhookLogs } = useApi();
+  const { appendProjectId } = useProjectContext();
+
   const router = useRouter();
   const { id } = router.query;
 
@@ -46,7 +49,10 @@ const WebhookDetail = () => {
       id="developers/webhooks"
       breadcrumbs={[
         { title: "Developers" },
-        { title: "Webhooks", href: "/developers/webhooks" },
+        {
+          title: "Webhooks",
+          href: appendProjectId("/developers/webhooks"),
+        },
         { title: webhookData?.name },
       ]}
       {...Content.metaData}>
diff --git a/packages/www/pages/developers/webhooks/index.tsx b/packages/www/pages/projects/[projectId]/developers/webhooks/index.tsx
similarity index 70%
rename from packages/www/pages/developers/webhooks/index.tsx
rename to packages/www/pages/projects/[projectId]/developers/webhooks/index.tsx
index 0b689526c8..58e035f793 100644
--- a/packages/www/pages/developers/webhooks/index.tsx
+++ b/packages/www/pages/projects/[projectId]/developers/webhooks/index.tsx
@@ -2,10 +2,12 @@ import Layout from "layouts/dashboard";
 import { useApi, useLoggedIn } from "hooks";
 import WebhooksTable from "components/WebhooksTable";
 import { DashboardWebhooks as Content } from "content";
+import { useProjectContext } from "context/ProjectContext";
 
 const Webhooks = () => {
   useLoggedIn();
   const { user } = useApi();
+  const { appendProjectId } = useProjectContext();
 
   if (!user) {
     return <Layout />;
@@ -15,7 +17,10 @@ const Webhooks = () => {
     <Layout
       id="developers/webhooks"
       breadcrumbs={[
-        { title: "Developers", href: "/developers/webhooks" },
+        {
+          title: "Developers",
+          href: appendProjectId("/developers/webhooks"),
+        },
         { title: "Webhooks" },
       ]}
       {...Content.metaData}>
diff --git a/packages/www/pages/projects/[projectId]/index.tsx b/packages/www/pages/projects/[projectId]/index.tsx
new file mode 100644
index 0000000000..ffc662162a
--- /dev/null
+++ b/packages/www/pages/projects/[projectId]/index.tsx
@@ -0,0 +1,108 @@
+import { useState } from "react";
+import Link from "next/link";
+import Layout from "../../../layouts/dashboard";
+import { Box, Button, useSnackbar } from "@livepeer/design-system";
+import GettingStarted from "components/GettingStarted";
+import UsageSummary from "components/UsageSummary";
+import StreamsTable from "components/StreamsTable";
+import Spinner from "components/Spinner";
+import Banner from "components/Banner";
+
+import { useLoggedIn, useApi } from "hooks";
+import { Dashboard as Content } from "content";
+import FeaturesModel from "components/FeaturesModel";
+
+const Dashboard = () => {
+  const { user, verifyEmail, getUserProduct } = useApi();
+  const { emailValid } = user;
+
+  const [loading, setLoading] = useState(false);
+  const [shouldShowFeature, setShouldShowFeature] = useState(false);
+  const product = getUserProduct(user);
+  const showPromo = user.disabled;
+  const [openSnackbar] = useSnackbar();
+
+  const resendVerificationEmail = async () => {
+    setLoading(true);
+    const res = await verifyEmail(user.email);
+    setLoading(false);
+
+    if (res.errors) {
+      openSnackbar(`Errors: ${res.errors.join(", ")}`);
+    } else {
+      openSnackbar(
+        `We've sent you a link to verify your email. Please check your inbox at ${user.email}`,
+      );
+    }
+  };
+
+  return (
+    <Box css={{ p: "$6" }}>
+      {!emailValid && (
+        <Banner
+          title="Verify your email"
+          description="Verify your account with a link via email."
+          button={
+            <Button
+              variant="primary"
+              as="a"
+              size="2"
+              css={{ cursor: "default" }}
+              onClick={() => resendVerificationEmail()}>
+              {loading && (
+                <Spinner
+                  css={{
+                    color: "$hiContrast",
+                    width: 16,
+                    height: 16,
+                    mr: "$2",
+                  }}
+                />
+              )}
+              Resend the verification email
+            </Button>
+          }
+          css={{ mb: "$3" }}
+        />
+      )}
+      {showPromo && (
+        <Banner
+          title="Upgrade"
+          description="Your free tier usage limit has been reached or we were unable to process your payment. Upgrade to our Growth or Scale plans or update your payment method to continue using Livepeer Studio."
+          button={
+            <Link href="/dashboard/billing/plans" passHref legacyBehavior>
+              <Button
+                variant="primary"
+                as="a"
+                size="2"
+                css={{ cursor: "default" }}>
+                Upgrade
+              </Button>
+            </Link>
+          }
+          css={{ mb: "$7" }}
+        />
+      )}
+      <Box css={{ mb: "$6" }}>
+        <GettingStarted />
+      </Box>
+    </Box>
+  );
+};
+
+const DashboardPage = () => {
+  useLoggedIn();
+  const { user } = useApi();
+
+  if (!user) {
+    return <Layout />;
+  }
+
+  return (
+    <Layout id="home" breadcrumbs={[{ title: "Home" }]} {...Content.metaData}>
+      <Dashboard />
+    </Layout>
+  );
+};
+
+export default DashboardPage;
diff --git a/packages/www/pages/sessions/index.tsx b/packages/www/pages/projects/[projectId]/sessions/index.tsx
similarity index 100%
rename from packages/www/pages/sessions/index.tsx
rename to packages/www/pages/projects/[projectId]/sessions/index.tsx
diff --git a/packages/www/pages/projects/[projectId]/settings.tsx b/packages/www/pages/projects/[projectId]/settings.tsx
new file mode 100644
index 0000000000..e3ec9dd843
--- /dev/null
+++ b/packages/www/pages/projects/[projectId]/settings.tsx
@@ -0,0 +1,147 @@
+import Layout from "layouts/dashboard";
+import { useApi, useLoggedIn } from "hooks";
+import {
+  Box,
+  Heading,
+  Flex,
+  Text,
+  TextField,
+  Button,
+} from "@livepeer/design-system";
+import { DashboardSettingsGeneral as Content } from "content";
+import React, { useCallback, useState } from "react";
+import { useQuery, useQueryClient } from "react-query";
+import { useProjectContext } from "context/ProjectContext";
+import Spinner from "components/Spinner";
+
+const Settings = () => {
+  useLoggedIn();
+  const { user, getProject, updateProject } = useApi();
+  const { projectId } = useProjectContext();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const { data } = useQuery([projectId], () => getProject(projectId), {
+    onSuccess(data) {
+      setProjectName(data.name);
+    },
+  });
+
+  const [projectName, setProjectName] = useState<string | null>();
+  const queryClient = useQueryClient();
+
+  const handleSubmit = async () => {
+    setIsLoading(true);
+
+    await updateProject(projectId, {
+      name: projectName,
+    });
+
+    invalidateQuery();
+    setIsLoading(false);
+  };
+
+  const invalidateQuery = useCallback(() => {
+    return queryClient.invalidateQueries("projects");
+  }, [queryClient]);
+
+  if (!user) {
+    return <Layout />;
+  }
+  return (
+    <Layout
+      id="settings"
+      breadcrumbs={[{ title: "Settings" }]}
+      {...Content.metaData}>
+      <Box
+        css={{
+          pb: "$9",
+          px: "$6",
+          pt: "$6",
+          "@bp4": {
+            p: "$6",
+          },
+        }}>
+        <Box css={{ mb: "$7" }}>
+          <Box
+            css={{
+              borderBottom: "1px solid",
+              borderColor: "$neutral6",
+              pb: "$5",
+              mb: "$5",
+              width: "100%",
+            }}>
+            <Heading
+              size="2"
+              css={{
+                mr: "$3",
+                fontWeight: 600,
+                letterSpacing: "0",
+              }}>
+              Settings
+            </Heading>
+            <Text variant="neutral" size="3" css={{ mt: "$2" }}>
+              Manage your project settings
+            </Text>
+          </Box>
+        </Box>
+        <Box
+          css={{
+            mb: "$7",
+            pb: "$7",
+          }}>
+          <Flex
+            direction={"column"}
+            css={{
+              mb: "$4",
+              mt: "$6",
+            }}>
+            <Box
+              css={{
+                fontWeight: 500,
+                mb: "$3",
+              }}>
+              Project Name
+            </Box>
+            <TextField
+              required
+              size="2"
+              type="text"
+              onChange={(e) => setProjectName(e.target.value)}
+              value={projectName}
+              defaultValue={data?.name}
+              id="projectName"
+              css={{
+                width: "15rem",
+              }}
+              placeholder="Project Name"
+            />
+          </Flex>
+          <Button
+            onClick={handleSubmit}
+            disabled={isLoading || !projectName}
+            css={{
+              p: "$4",
+              fontSize: "$2",
+              mt: "$3",
+              backgroundColor: "$hiContrast",
+              color: "$loContrast",
+            }}>
+            {isLoading && (
+              <Spinner
+                css={{
+                  color: "$hiContrast",
+                  width: 16,
+                  height: 16,
+                  mr: "$2",
+                }}
+              />
+            )}
+            Update
+          </Button>
+        </Box>
+      </Box>
+    </Layout>
+  );
+};
+
+export default Settings;
diff --git a/packages/www/pages/stream-health.tsx b/packages/www/pages/projects/[projectId]/stream-health.tsx
similarity index 99%
rename from packages/www/pages/stream-health.tsx
rename to packages/www/pages/projects/[projectId]/stream-health.tsx
index 49784b003b..9845e7bea5 100644
--- a/packages/www/pages/stream-health.tsx
+++ b/packages/www/pages/projects/[projectId]/stream-health.tsx
@@ -7,7 +7,7 @@ import {
   TextField,
   Label,
 } from "@livepeer/design-system";
-import Layout from "../layouts/dashboard";
+import Layout from "../../../layouts/dashboard";
 import { useApi } from "hooks";
 import { useEffect, useState } from "react";
 import { StreamInfo } from "hooks/use-api/types";
diff --git a/packages/www/pages/streams/[id]/index.tsx b/packages/www/pages/projects/[projectId]/streams/[id]/index.tsx
similarity index 92%
rename from packages/www/pages/streams/[id]/index.tsx
rename to packages/www/pages/projects/[projectId]/streams/[id]/index.tsx
index 0aecac2fe2..b1a55989ff 100644
--- a/packages/www/pages/streams/[id]/index.tsx
+++ b/packages/www/pages/projects/[projectId]/streams/[id]/index.tsx
@@ -6,6 +6,7 @@ import { useApi, useAnalyzer } from "hooks";
 import StreamDetail from "layouts/streamDetail";
 import StreamHealthTab from "components/StreamDetails/StreamHealthTab";
 import StreamOverviewTab from "components/StreamDetails/StreamOverviewTab";
+import { useProjectContext } from "context/ProjectContext";
 
 const refetchInterval = 5 * 1000;
 
@@ -14,6 +15,7 @@ const StreamDetails = () => {
   const queryClient = useQueryClient();
   const { getStream } = useApi();
   const { getHealth } = useAnalyzer();
+  const { appendProjectId } = useProjectContext();
   const [currentTab, setCurrentTab] = useState<"Overview" | "Health">(
     "Overview",
   );
@@ -51,7 +53,7 @@ const StreamDetails = () => {
       invalidateStream={invalidateStream}
       setSwitchTab={setCurrentTab}
       breadcrumbs={[
-        { title: "Streams", href: "/streams" },
+        { title: "Streams", href: appendProjectId("/streams") },
         { title: stream?.name },
       ]}
       embedVideoDialogOpen={embedVideoDialogOpen}
diff --git a/packages/www/pages/streams/index.tsx b/packages/www/pages/projects/[projectId]/streams/index.tsx
similarity index 100%
rename from packages/www/pages/streams/index.tsx
rename to packages/www/pages/projects/[projectId]/streams/index.tsx
diff --git a/packages/www/pages/register.tsx b/packages/www/pages/register.tsx
index 65e2375b61..0bf54e5731 100644
--- a/packages/www/pages/register.tsx
+++ b/packages/www/pages/register.tsx
@@ -38,7 +38,7 @@ const RegisterPage = () => {
     if (email && emailValidToken) {
       verify(email, emailValidToken).then(() => {
         if (selectedPlan === "1") {
-          router.replace("/billing/plans?promptUpgrade=true");
+          router.replace("/settings/billing/plans?promptUpgrade=true");
         } else {
           router.replace("/");
         }
diff --git a/packages/www/pages/billing/index.tsx b/packages/www/pages/settings/billing/index.tsx
similarity index 98%
rename from packages/www/pages/billing/index.tsx
rename to packages/www/pages/settings/billing/index.tsx
index ea2ef744a5..f911c023bc 100644
--- a/packages/www/pages/billing/index.tsx
+++ b/packages/www/pages/settings/billing/index.tsx
@@ -109,7 +109,7 @@ const Billing = () => {
         setOverUsageBill(oBill);
         let [res, uInvoice] = await getUpcomingInvoice(user.stripeCustomerId);
         setUpcomingInvoice(uInvoice?.invoices);
-        setUpcomingInvoiceTotal((uInvoice?.invoices.total / 100) | 0);
+        setUpcomingInvoiceTotal((uInvoice?.invoices?.total / 100) | 0);
       }
     };
 
@@ -190,7 +190,7 @@ const Billing = () => {
   }
   return (
     <Layout
-      id="billing"
+      id="settings/billing"
       breadcrumbs={[{ title: "Billing" }]}
       {...Content.metaData}>
       <Box css={{ p: "$6" }}>
@@ -280,7 +280,7 @@ const Billing = () => {
               </Badge>
               plan.
             </Text>
-            <Link href="/billing/plans" passHref legacyBehavior>
+            <Link href="/settings/billing/plans" passHref legacyBehavior>
               <A
                 variant="primary"
                 css={{ display: "flex", alignItems: "center" }}>
@@ -354,7 +354,7 @@ const Billing = () => {
               </Flex>
             </Heading>
           </Flex>
-          <Link href="/usage" passHref legacyBehavior>
+          <Link href="/settings/usage" passHref legacyBehavior>
             <A
               variant="primary"
               css={{ display: "flex", alignItems: "center" }}
diff --git a/packages/www/pages/billing/plans.tsx b/packages/www/pages/settings/billing/plans.tsx
similarity index 89%
rename from packages/www/pages/billing/plans.tsx
rename to packages/www/pages/settings/billing/plans.tsx
index a7630641c6..2a685c6f24 100644
--- a/packages/www/pages/billing/plans.tsx
+++ b/packages/www/pages/settings/billing/plans.tsx
@@ -1,4 +1,4 @@
-import Layout from "../../layouts/dashboard";
+import Layout from "../../../layouts/dashboard";
 import { Box, Flex, Heading } from "@livepeer/design-system";
 import { useApi, useLoggedIn } from "hooks";
 import Plans from "components/Plans";
@@ -13,8 +13,8 @@ const PlansPage = () => {
   }
   return (
     <Layout
-      id="billing/plans"
-      breadcrumbs={[{ title: "Billing", href: "/billing" }, { title: "Plans" }]}
+      id="settings/plans"
+      breadcrumbs={[{ title: "Plans" }]}
       {...Content.metaData}>
       <Box css={{ p: "$6" }}>
         <Box css={{ mb: "$6" }}>
diff --git a/packages/www/pages/settings/projects.tsx b/packages/www/pages/settings/projects.tsx
new file mode 100644
index 0000000000..d91ba4b39d
--- /dev/null
+++ b/packages/www/pages/settings/projects.tsx
@@ -0,0 +1,135 @@
+import Layout from "layouts/dashboard";
+import { useApi, useLoggedIn } from "hooks";
+import { DashboardProjects as Content } from "content";
+import {
+  Box,
+  Heading,
+  Text,
+  Grid,
+  Button,
+  Flex,
+} from "@livepeer/design-system";
+import ProjectTile from "components/Project/ProjectTile";
+import { useQuery, useQueryClient } from "react-query";
+import { PlusIcon } from "@radix-ui/react-icons";
+import { useCallback, useState } from "react";
+import CreateProjectDialog from "components/Project/createProjectDialog";
+import { useProjectContext } from "context/ProjectContext";
+import Link from "next/link";
+import FeaturesModel from "components/FeaturesModel";
+
+const WorkspaceProjects = () => {
+  useLoggedIn();
+  const { user, getProjects, createProject } = useApi();
+  const [showCreateProjectAlert, setShowCreateProjectAlert] = useState(false);
+  const { setProjectId } = useProjectContext();
+
+  const queryClient = useQueryClient();
+
+  const onCreateClick = async (projectName: string) => {
+    const project = await createProject({
+      name: projectName,
+    });
+
+    setProjectId(project.id);
+    setShowCreateProjectAlert(false);
+
+    invalidateQuery();
+  };
+
+  const invalidateQuery = useCallback(() => {
+    queryClient.invalidateQueries("projects");
+    return true;
+  }, [queryClient]);
+
+  const { data } = useQuery("projects", getProjects);
+
+  if (!user) {
+    return <Layout />;
+  }
+
+  return (
+    <Layout
+      id="settings/projects"
+      breadcrumbs={[{ title: "Projects" }]}
+      {...Content.metaData}>
+      <Box
+        css={{
+          pb: "$9",
+          px: "$6",
+          pt: "$6",
+          "@bp4": {
+            p: "$6",
+          },
+        }}>
+        <Box css={{ mb: "$6" }}>
+          <Flex
+            justify={"between"}
+            css={{
+              borderBottom: "1px solid",
+              borderColor: "$neutral6",
+              pb: "$5",
+              width: "100%",
+            }}>
+            <Flex direction={"column"}>
+              <Heading
+                size="2"
+                css={{
+                  mr: "$3",
+                  fontWeight: 600,
+                  letterSpacing: "0",
+                }}>
+                Projects
+              </Heading>
+              <Text variant="neutral" size="3" css={{ mt: "$2" }}>
+                Manage your projects
+              </Text>
+            </Flex>
+            <Button
+              onClick={() => setShowCreateProjectAlert(true)}
+              css={{
+                p: "$3",
+                marginTop: "2rem",
+              }}>
+              <PlusIcon />{" "}
+              <Box as="span" css={{ ml: "$2" }}>
+                Create Project
+              </Box>
+            </Button>
+          </Flex>
+        </Box>
+        <Grid
+          css={{
+            gridTemplateColumns: "repeat(auto-fill, minmax(400px, 1fr))",
+            gap: "$5",
+          }}>
+          {data?.map((project, i) => (
+            <Link
+              style={{
+                textDecoration: "none",
+              }}
+              passHref
+              href={`/projects/${project.id}/`}>
+              <ProjectTile
+                key={`project-tile-${i}`}
+                invalidateQuery={invalidateQuery}
+                id={project.id}
+                name={project?.name}
+              />
+            </Link>
+          ))}
+        </Grid>
+      </Box>
+
+      <CreateProjectDialog
+        onCreate={onCreateClick}
+        onOpenChange={(isOpen) => setShowCreateProjectAlert(isOpen)}
+        isOpen={showCreateProjectAlert}
+      />
+
+      <FeaturesModel />
+    </Layout>
+  );
+};
+
+export default WorkspaceProjects;
diff --git a/packages/www/pages/usage/index.tsx b/packages/www/pages/settings/usage/index.tsx
similarity index 98%
rename from packages/www/pages/usage/index.tsx
rename to packages/www/pages/settings/usage/index.tsx
index b19df8dea7..df592e019a 100644
--- a/packages/www/pages/usage/index.tsx
+++ b/packages/www/pages/settings/usage/index.tsx
@@ -160,7 +160,10 @@ const Usage = () => {
     return <Layout />;
   }
   return (
-    <Layout id="usage" breadcrumbs={[{ title: "Usage" }]} {...Content.metaData}>
+    <Layout
+      id="settings/usage"
+      breadcrumbs={[{ title: "Usage" }]}
+      {...Content.metaData}>
       <Box css={{ p: "$6" }}>
         <Box css={{ mb: "$7" }}>
           <Flex
diff --git a/packages/www/pages/verify-new-email.tsx b/packages/www/pages/verify-new-email.tsx
index 6adcb7e77a..80092ae7d9 100644
--- a/packages/www/pages/verify-new-email.tsx
+++ b/packages/www/pages/verify-new-email.tsx
@@ -27,7 +27,7 @@ const VerifyPage = () => {
       verifyNewEmail(email, emailValidToken)
         .then(() => {
           if (selectedPlan === "1") {
-            router.replace("/billing/plans?promptUpgrade=true");
+            router.replace("/settings/billing/plans?promptUpgrade=true");
           } else {
             router.replace("/");
           }
diff --git a/packages/www/pages/verify.tsx b/packages/www/pages/verify.tsx
index a7e3970c30..8b8e771ac5 100644
--- a/packages/www/pages/verify.tsx
+++ b/packages/www/pages/verify.tsx
@@ -27,7 +27,7 @@ const VerifyPage = () => {
       verify(email, emailValidToken)
         .then(() => {
           if (selectedPlan === "1") {
-            router.replace("/billing/plans?promptUpgrade=true");
+            router.replace("/settings/billing/plans?promptUpgrade=true");
           } else {
             router.replace("/");
           }
diff --git a/packages/www/public/code-example-dark.png b/packages/www/public/code-example-dark.png
new file mode 100644
index 0000000000..24f8779b5c
Binary files /dev/null and b/packages/www/public/code-example-dark.png differ
diff --git a/packages/www/public/code-example-light.png b/packages/www/public/code-example-light.png
new file mode 100644
index 0000000000..d1937a87b6
Binary files /dev/null and b/packages/www/public/code-example-light.png differ
diff --git a/packages/www/public/fonts/Matter/demo.html b/packages/www/public/fonts/Matter/demo.html
index e7afbb5928..9747b25bb6 100644
--- a/packages/www/public/fonts/Matter/demo.html
+++ b/packages/www/public/fonts/Matter/demo.html
@@ -1,493 +1,942 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
-<head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="robots" content="noindex, noarchive">
-    <meta name="format-detection" content="telephone=no">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="robots" content="noindex, noarchive" />
+    <meta name="format-detection" content="telephone=no" />
     <title>Transfonter demo</title>
-    <link href="stylesheet.css" rel="stylesheet">
+    <link href="stylesheet.css" rel="stylesheet" />
     <style>
-        /*
+      /*
         http://meyerweb.com/eric/tools/css/reset/
         v2.0 | 20110126
         License: none (public domain)
         */
-        html, body, div, span, applet, object, iframe,
-        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-        a, abbr, acronym, address, big, cite, code,
-        del, dfn, em, img, ins, kbd, q, s, samp,
-        small, strike, strong, sub, sup, tt, var,
-        b, u, i, center,
-        dl, dt, dd, ol, ul, li,
-        fieldset, form, label, legend,
-        table, caption, tbody, tfoot, thead, tr, th, td,
-        article, aside, canvas, details, embed,
-        figure, figcaption, footer, header, hgroup,
-        menu, nav, output, ruby, section, summary,
-        time, mark, audio, video {
-            margin: 0;
-            padding: 0;
-            border: 0;
-            font-size: 100%;
-            font: inherit;
-            vertical-align: baseline;
-        }
-        /* HTML5 display-role reset for older browsers */
-        article, aside, details, figcaption, figure,
-        footer, header, hgroup, menu, nav, section {
-            display: block;
-        }
-        body {
-            line-height: 1;
-        }
-        ol, ul {
-            list-style: none;
-        }
-        blockquote, q {
-            quotes: none;
-        }
-        blockquote:before, blockquote:after,
-        q:before, q:after {
-            content: '';
-            content: none;
-        }
-        table {
-            border-collapse: collapse;
-            border-spacing: 0;
-        }
-        /* common styles */
-        body {
-            background: #f1f1f1;
-            color: #000;
-        }
+      html,
+      body,
+      div,
+      span,
+      applet,
+      object,
+      iframe,
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6,
+      p,
+      blockquote,
+      pre,
+      a,
+      abbr,
+      acronym,
+      address,
+      big,
+      cite,
+      code,
+      del,
+      dfn,
+      em,
+      img,
+      ins,
+      kbd,
+      q,
+      s,
+      samp,
+      small,
+      strike,
+      strong,
+      sub,
+      sup,
+      tt,
+      var,
+      b,
+      u,
+      i,
+      center,
+      dl,
+      dt,
+      dd,
+      ol,
+      ul,
+      li,
+      fieldset,
+      form,
+      label,
+      legend,
+      table,
+      caption,
+      tbody,
+      tfoot,
+      thead,
+      tr,
+      th,
+      td,
+      article,
+      aside,
+      canvas,
+      details,
+      embed,
+      figure,
+      figcaption,
+      footer,
+      header,
+      hgroup,
+      menu,
+      nav,
+      output,
+      ruby,
+      section,
+      summary,
+      time,
+      mark,
+      audio,
+      video {
+        margin: 0;
+        padding: 0;
+        border: 0;
+        font-size: 100%;
+        font: inherit;
+        vertical-align: baseline;
+      }
+      /* HTML5 display-role reset for older browsers */
+      article,
+      aside,
+      details,
+      figcaption,
+      figure,
+      footer,
+      header,
+      hgroup,
+      menu,
+      nav,
+      section {
+        display: block;
+      }
+      body {
+        line-height: 1;
+      }
+      ol,
+      ul {
+        list-style: none;
+      }
+      blockquote,
+      q {
+        quotes: none;
+      }
+      blockquote:before,
+      blockquote:after,
+      q:before,
+      q:after {
+        content: "";
+        content: none;
+      }
+      table {
+        border-collapse: collapse;
+        border-spacing: 0;
+      }
+      /* common styles */
+      body {
+        background: #f1f1f1;
+        color: #000;
+      }
+      .page {
+        background: #fff;
+        width: 920px;
+        margin: 0 auto;
+        padding: 20px 20px 0 20px;
+        overflow: hidden;
+      }
+      .font-container {
+        overflow-x: auto;
+        overflow-y: hidden;
+        margin-bottom: 40px;
+        line-height: 1.3;
+        white-space: nowrap;
+        padding-bottom: 5px;
+      }
+      h1 {
+        position: relative;
+        background: #444;
+        font-size: 32px;
+        color: #fff;
+        padding: 10px 20px;
+        margin: 0 -20px 12px -20px;
+      }
+      .letters {
+        font-size: 25px;
+        margin-bottom: 20px;
+      }
+      .s10:before {
+        content: "10px";
+      }
+      .s11:before {
+        content: "11px";
+      }
+      .s12:before {
+        content: "12px";
+      }
+      .s14:before {
+        content: "14px";
+      }
+      .s18:before {
+        content: "18px";
+      }
+      .s24:before {
+        content: "24px";
+      }
+      .s30:before {
+        content: "30px";
+      }
+      .s36:before {
+        content: "36px";
+      }
+      .s48:before {
+        content: "48px";
+      }
+      .s60:before {
+        content: "60px";
+      }
+      .s72:before {
+        content: "72px";
+      }
+      .s10:before,
+      .s11:before,
+      .s12:before,
+      .s14:before,
+      .s18:before,
+      .s24:before,
+      .s30:before,
+      .s36:before,
+      .s48:before,
+      .s60:before,
+      .s72:before {
+        font-family: Arial, sans-serif;
+        font-size: 10px;
+        font-weight: normal;
+        font-style: normal;
+        color: #999;
+        padding-right: 6px;
+      }
+      pre {
+        display: block;
+        position: relative;
+        padding: 9px;
+        margin: 0 0 10px;
+        font-family: Monaco, Menlo, Consolas, "Courier New", monospace !important;
+        font-size: 13px;
+        line-height: 1.428571429;
+        color: #333;
+        font-weight: normal !important;
+        font-style: normal !important;
+        background-color: #f5f5f5;
+        border: 1px solid #ccc;
+        overflow-x: auto;
+        border-radius: 4px;
+      }
+      pre:after {
+        display: block;
+        position: absolute;
+        right: 0;
+        top: 0;
+        content: "Usage";
+        line-height: 1;
+        padding: 5px 8px;
+        font-size: 12px;
+        color: #767676;
+        background-color: #fff;
+        border: 1px solid #ccc;
+        border-right: none;
+        border-top: none;
+        border-radius: 0 4px 0 4px;
+        z-index: 10;
+      }
+      /* responsive */
+      @media (max-width: 959px) {
         .page {
-            background: #fff;
-            width: 920px;
-            margin: 0 auto;
-            padding: 20px 20px 0 20px;
-            overflow: hidden;
-        }
-        .font-container {
-            overflow-x: auto;
-            overflow-y: hidden;
-            margin-bottom: 40px;
-            line-height: 1.3;
-            white-space: nowrap;
-            padding-bottom: 5px;
-        }
-        h1 {
-            position: relative;
-            background: #444;
-            font-size: 32px;
-            color: #fff;
-            padding: 10px 20px;
-            margin: 0 -20px 12px -20px;
-        }
-        .letters {
-            font-size: 25px;
-            margin-bottom: 20px;
-        }
-        .s10:before {
-            content: '10px';
-        }
-        .s11:before {
-            content: '11px';
-        }
-        .s12:before {
-            content: '12px';
-        }
-        .s14:before {
-            content: '14px';
-        }
-        .s18:before {
-            content: '18px';
-        }
-        .s24:before {
-            content: '24px';
-        }
-        .s30:before {
-            content: '30px';
-        }
-        .s36:before {
-            content: '36px';
-        }
-        .s48:before {
-            content: '48px';
-        }
-        .s60:before {
-            content: '60px';
-        }
-        .s72:before {
-            content: '72px';
-        }
-        .s10:before, .s11:before, .s12:before, .s14:before,
-        .s18:before, .s24:before, .s30:before, .s36:before,
-        .s48:before, .s60:before, .s72:before {
-            font-family: Arial, sans-serif;
-            font-size: 10px;
-            font-weight: normal;
-            font-style: normal;
-            color: #999;
-            padding-right: 6px;
-        }
-        pre {
-            display: block;
-            position: relative;
-            padding: 9px;
-            margin: 0 0 10px;
-            font-family: Monaco, Menlo, Consolas, "Courier New", monospace !important;
-            font-size: 13px;
-            line-height: 1.428571429;
-            color: #333;
-            font-weight: normal !important;
-            font-style: normal !important;
-            background-color: #f5f5f5;
-            border: 1px solid #ccc;
-            overflow-x: auto;
-            border-radius: 4px;
-        }
-        pre:after {
-            display: block;
-            position: absolute;
-            right: 0;
-            top: 0;
-            content: 'Usage';
-            line-height: 1;
-            padding: 5px 8px;
-            font-size: 12px;
-            color: #767676;
-            background-color: #fff;
-            border: 1px solid #ccc;
-            border-right: none;
-            border-top: none;
-            border-radius: 0 4px 0 4px;
-            z-index: 10;
-        }
-        /* responsive */
-        @media (max-width: 959px) {
-            .page {
-                width: auto;
-                margin: 0;
-            }
+          width: auto;
+          margin: 0;
         }
+      }
     </style>
-</head>
-<body>
-<div class="page">
-    <div class="demo" style="font-family: 'Matter'; font-weight: bold; font-style: normal;">
+  </head>
+  <body>
+    <div class="page">
+      <div
+        class="demo"
+        style="
+          font-family: &quot;Matter&quot;;
+          font-weight: bold;
+          font-style: normal;
+        ">
         <h1>Matter Bold</h1>
-        <pre>.your-style {
+        <pre>
+.your-style {
     font-family: 'Matter';
     font-weight: bold;
     font-style: normal;
-}</pre>
+}</pre
+        >
         <div class="font-container">
-            <p class="letters">
-                abcdefghijklmnopqrstuvwxyz<br>
-ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
-                0123456789.:,;()*!?'@#<>$%&^+-=~
-            </p>
-            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+          <p class="letters">
+            abcdefghijklmnopqrstuvwxyz<br />
+            ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
+            0123456789.:,;()*!?'@#<>$%&^+-=~
+          </p>
+          <p class="s10" style="font-size: 10px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s11" style="font-size: 11px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s12" style="font-size: 12px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s14" style="font-size: 14px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s18" style="font-size: 18px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s24" style="font-size: 24px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s30" style="font-size: 30px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s36" style="font-size: 36px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s48" style="font-size: 48px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s60" style="font-size: 60px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s72" style="font-size: 72px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
         </div>
-    </div>
-    <div class="demo" style="font-family: 'Matter'; font-weight: bold; font-style: italic;">
+      </div>
+      <div
+        class="demo"
+        style="
+          font-family: &quot;Matter&quot;;
+          font-weight: bold;
+          font-style: italic;
+        ">
         <h1>Matter Bold Italic</h1>
-        <pre>.your-style {
+        <pre>
+.your-style {
     font-family: 'Matter';
     font-weight: bold;
     font-style: italic;
-}</pre>
+}</pre
+        >
         <div class="font-container">
-            <p class="letters">
-                abcdefghijklmnopqrstuvwxyz<br>
-ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
-                0123456789.:,;()*!?'@#<>$%&^+-=~
-            </p>
-            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+          <p class="letters">
+            abcdefghijklmnopqrstuvwxyz<br />
+            ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
+            0123456789.:,;()*!?'@#<>$%&^+-=~
+          </p>
+          <p class="s10" style="font-size: 10px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s11" style="font-size: 11px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s12" style="font-size: 12px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s14" style="font-size: 14px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s18" style="font-size: 18px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s24" style="font-size: 24px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s30" style="font-size: 30px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s36" style="font-size: 36px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s48" style="font-size: 48px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s60" style="font-size: 60px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s72" style="font-size: 72px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
         </div>
-    </div>
-    <div class="demo" style="font-family: 'Matter'; font-weight: 600; font-style: normal;">
+      </div>
+      <div
+        class="demo"
+        style="
+          font-family: &quot;Matter&quot;;
+          font-weight: 600;
+          font-style: normal;
+        ">
         <h1>Matter SemiBold</h1>
-        <pre>.your-style {
+        <pre>
+.your-style {
     font-family: 'Matter';
     font-weight: 600;
     font-style: normal;
-}</pre>
+}</pre
+        >
         <div class="font-container">
-            <p class="letters">
-                abcdefghijklmnopqrstuvwxyz<br>
-ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
-                0123456789.:,;()*!?'@#<>$%&^+-=~
-            </p>
-            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+          <p class="letters">
+            abcdefghijklmnopqrstuvwxyz<br />
+            ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
+            0123456789.:,;()*!?'@#<>$%&^+-=~
+          </p>
+          <p class="s10" style="font-size: 10px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s11" style="font-size: 11px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s12" style="font-size: 12px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s14" style="font-size: 14px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s18" style="font-size: 18px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s24" style="font-size: 24px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s30" style="font-size: 30px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s36" style="font-size: 36px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s48" style="font-size: 48px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s60" style="font-size: 60px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s72" style="font-size: 72px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
         </div>
-    </div>
-    <div class="demo" style="font-family: 'Matter'; font-weight: 500; font-style: italic;">
+      </div>
+      <div
+        class="demo"
+        style="
+          font-family: &quot;Matter&quot;;
+          font-weight: 500;
+          font-style: italic;
+        ">
         <h1>Matter Medium Italic</h1>
-        <pre>.your-style {
+        <pre>
+.your-style {
     font-family: 'Matter';
     font-weight: 500;
     font-style: italic;
-}</pre>
+}</pre
+        >
         <div class="font-container">
-            <p class="letters">
-                abcdefghijklmnopqrstuvwxyz<br>
-ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
-                0123456789.:,;()*!?'@#<>$%&^+-=~
-            </p>
-            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+          <p class="letters">
+            abcdefghijklmnopqrstuvwxyz<br />
+            ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
+            0123456789.:,;()*!?'@#<>$%&^+-=~
+          </p>
+          <p class="s10" style="font-size: 10px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s11" style="font-size: 11px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s12" style="font-size: 12px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s14" style="font-size: 14px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s18" style="font-size: 18px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s24" style="font-size: 24px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s30" style="font-size: 30px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s36" style="font-size: 36px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s48" style="font-size: 48px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s60" style="font-size: 60px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s72" style="font-size: 72px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
         </div>
-    </div>
-    <div class="demo" style="font-family: 'Matter'; font-weight: 900; font-style: normal;">
+      </div>
+      <div
+        class="demo"
+        style="
+          font-family: &quot;Matter&quot;;
+          font-weight: 900;
+          font-style: normal;
+        ">
         <h1>Matter Heavy</h1>
-        <pre>.your-style {
+        <pre>
+.your-style {
     font-family: 'Matter';
     font-weight: 900;
     font-style: normal;
-}</pre>
+}</pre
+        >
         <div class="font-container">
-            <p class="letters">
-                abcdefghijklmnopqrstuvwxyz<br>
-ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
-                0123456789.:,;()*!?'@#<>$%&^+-=~
-            </p>
-            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+          <p class="letters">
+            abcdefghijklmnopqrstuvwxyz<br />
+            ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
+            0123456789.:,;()*!?'@#<>$%&^+-=~
+          </p>
+          <p class="s10" style="font-size: 10px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s11" style="font-size: 11px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s12" style="font-size: 12px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s14" style="font-size: 14px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s18" style="font-size: 18px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s24" style="font-size: 24px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s30" style="font-size: 30px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s36" style="font-size: 36px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s48" style="font-size: 48px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s60" style="font-size: 60px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s72" style="font-size: 72px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
         </div>
-    </div>
-    <div class="demo" style="font-family: 'Matter'; font-weight: 300; font-style: italic;">
+      </div>
+      <div
+        class="demo"
+        style="
+          font-family: &quot;Matter&quot;;
+          font-weight: 300;
+          font-style: italic;
+        ">
         <h1>Matter Light Italic</h1>
-        <pre>.your-style {
+        <pre>
+.your-style {
     font-family: 'Matter';
     font-weight: 300;
     font-style: italic;
-}</pre>
+}</pre
+        >
         <div class="font-container">
-            <p class="letters">
-                abcdefghijklmnopqrstuvwxyz<br>
-ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
-                0123456789.:,;()*!?'@#<>$%&^+-=~
-            </p>
-            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+          <p class="letters">
+            abcdefghijklmnopqrstuvwxyz<br />
+            ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
+            0123456789.:,;()*!?'@#<>$%&^+-=~
+          </p>
+          <p class="s10" style="font-size: 10px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s11" style="font-size: 11px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s12" style="font-size: 12px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s14" style="font-size: 14px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s18" style="font-size: 18px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s24" style="font-size: 24px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s30" style="font-size: 30px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s36" style="font-size: 36px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s48" style="font-size: 48px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s60" style="font-size: 60px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s72" style="font-size: 72px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
         </div>
-    </div>
-    <div class="demo" style="font-family: 'Matter'; font-weight: 500; font-style: normal;">
+      </div>
+      <div
+        class="demo"
+        style="
+          font-family: &quot;Matter&quot;;
+          font-weight: 500;
+          font-style: normal;
+        ">
         <h1>Matter Medium</h1>
-        <pre>.your-style {
+        <pre>
+.your-style {
     font-family: 'Matter';
     font-weight: 500;
     font-style: normal;
-}</pre>
+}</pre
+        >
         <div class="font-container">
-            <p class="letters">
-                abcdefghijklmnopqrstuvwxyz<br>
-ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
-                0123456789.:,;()*!?'@#<>$%&^+-=~
-            </p>
-            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+          <p class="letters">
+            abcdefghijklmnopqrstuvwxyz<br />
+            ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
+            0123456789.:,;()*!?'@#<>$%&^+-=~
+          </p>
+          <p class="s10" style="font-size: 10px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s11" style="font-size: 11px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s12" style="font-size: 12px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s14" style="font-size: 14px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s18" style="font-size: 18px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s24" style="font-size: 24px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s30" style="font-size: 30px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s36" style="font-size: 36px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s48" style="font-size: 48px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s60" style="font-size: 60px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s72" style="font-size: 72px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
         </div>
-    </div>
-    <div class="demo" style="font-family: 'Matter'; font-weight: 600; font-style: italic;">
+      </div>
+      <div
+        class="demo"
+        style="
+          font-family: &quot;Matter&quot;;
+          font-weight: 600;
+          font-style: italic;
+        ">
         <h1>Matter SemiBold Italic</h1>
-        <pre>.your-style {
+        <pre>
+.your-style {
     font-family: 'Matter';
     font-weight: 600;
     font-style: italic;
-}</pre>
+}</pre
+        >
         <div class="font-container">
-            <p class="letters">
-                abcdefghijklmnopqrstuvwxyz<br>
-ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
-                0123456789.:,;()*!?'@#<>$%&^+-=~
-            </p>
-            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+          <p class="letters">
+            abcdefghijklmnopqrstuvwxyz<br />
+            ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
+            0123456789.:,;()*!?'@#<>$%&^+-=~
+          </p>
+          <p class="s10" style="font-size: 10px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s11" style="font-size: 11px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s12" style="font-size: 12px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s14" style="font-size: 14px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s18" style="font-size: 18px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s24" style="font-size: 24px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s30" style="font-size: 30px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s36" style="font-size: 36px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s48" style="font-size: 48px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s60" style="font-size: 60px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s72" style="font-size: 72px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
         </div>
-    </div>
-    <div class="demo" style="font-family: 'Matter'; font-weight: 900; font-style: italic;">
+      </div>
+      <div
+        class="demo"
+        style="
+          font-family: &quot;Matter&quot;;
+          font-weight: 900;
+          font-style: italic;
+        ">
         <h1>Matter Heavy Italic</h1>
-        <pre>.your-style {
+        <pre>
+.your-style {
     font-family: 'Matter';
     font-weight: 900;
     font-style: italic;
-}</pre>
+}</pre
+        >
         <div class="font-container">
-            <p class="letters">
-                abcdefghijklmnopqrstuvwxyz<br>
-ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
-                0123456789.:,;()*!?'@#<>$%&^+-=~
-            </p>
-            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+          <p class="letters">
+            abcdefghijklmnopqrstuvwxyz<br />
+            ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
+            0123456789.:,;()*!?'@#<>$%&^+-=~
+          </p>
+          <p class="s10" style="font-size: 10px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s11" style="font-size: 11px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s12" style="font-size: 12px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s14" style="font-size: 14px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s18" style="font-size: 18px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s24" style="font-size: 24px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s30" style="font-size: 30px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s36" style="font-size: 36px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s48" style="font-size: 48px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s60" style="font-size: 60px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s72" style="font-size: 72px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
         </div>
-    </div>
-    <div class="demo" style="font-family: 'Matter'; font-weight: 300; font-style: normal;">
+      </div>
+      <div
+        class="demo"
+        style="
+          font-family: &quot;Matter&quot;;
+          font-weight: 300;
+          font-style: normal;
+        ">
         <h1>Matter Light</h1>
-        <pre>.your-style {
+        <pre>
+.your-style {
     font-family: 'Matter';
     font-weight: 300;
     font-style: normal;
-}</pre>
+}</pre
+        >
         <div class="font-container">
-            <p class="letters">
-                abcdefghijklmnopqrstuvwxyz<br>
-ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
-                0123456789.:,;()*!?'@#<>$%&^+-=~
-            </p>
-            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+          <p class="letters">
+            abcdefghijklmnopqrstuvwxyz<br />
+            ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
+            0123456789.:,;()*!?'@#<>$%&^+-=~
+          </p>
+          <p class="s10" style="font-size: 10px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s11" style="font-size: 11px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s12" style="font-size: 12px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s14" style="font-size: 14px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s18" style="font-size: 18px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s24" style="font-size: 24px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s30" style="font-size: 30px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s36" style="font-size: 36px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s48" style="font-size: 48px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s60" style="font-size: 60px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s72" style="font-size: 72px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
         </div>
-    </div>
-    <div class="demo" style="font-family: 'Matter'; font-weight: normal; font-style: normal;">
+      </div>
+      <div
+        class="demo"
+        style="
+          font-family: &quot;Matter&quot;;
+          font-weight: normal;
+          font-style: normal;
+        ">
         <h1>Matter Regular</h1>
-        <pre>.your-style {
+        <pre>
+.your-style {
     font-family: 'Matter';
     font-weight: normal;
     font-style: normal;
-}</pre>
+}</pre
+        >
         <div class="font-container">
-            <p class="letters">
-                abcdefghijklmnopqrstuvwxyz<br>
-ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
-                0123456789.:,;()*!?'@#<>$%&^+-=~
-            </p>
-            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+          <p class="letters">
+            abcdefghijklmnopqrstuvwxyz<br />
+            ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
+            0123456789.:,;()*!?'@#<>$%&^+-=~
+          </p>
+          <p class="s10" style="font-size: 10px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s11" style="font-size: 11px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s12" style="font-size: 12px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s14" style="font-size: 14px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s18" style="font-size: 18px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s24" style="font-size: 24px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s30" style="font-size: 30px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s36" style="font-size: 36px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s48" style="font-size: 48px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s60" style="font-size: 60px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s72" style="font-size: 72px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
         </div>
-    </div>
-    <div class="demo" style="font-family: 'Matter'; font-weight: normal; font-style: italic;">
+      </div>
+      <div
+        class="demo"
+        style="
+          font-family: &quot;Matter&quot;;
+          font-weight: normal;
+          font-style: italic;
+        ">
         <h1>Matter Regular Italic</h1>
-        <pre>.your-style {
+        <pre>
+.your-style {
     font-family: 'Matter';
     font-weight: normal;
     font-style: italic;
-}</pre>
+}</pre
+        >
         <div class="font-container">
-            <p class="letters">
-                abcdefghijklmnopqrstuvwxyz<br>
-ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
-                0123456789.:,;()*!?'@#<>$%&^+-=~
-            </p>
-            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
-            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+          <p class="letters">
+            abcdefghijklmnopqrstuvwxyz<br />
+            ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
+            0123456789.:,;()*!?'@#<>$%&^+-=~
+          </p>
+          <p class="s10" style="font-size: 10px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s11" style="font-size: 11px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s12" style="font-size: 12px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s14" style="font-size: 14px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s18" style="font-size: 18px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s24" style="font-size: 24px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s30" style="font-size: 30px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s36" style="font-size: 36px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s48" style="font-size: 48px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s60" style="font-size: 60px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
+          <p class="s72" style="font-size: 72px">
+            The quick brown fox jumps over the lazy dog.
+          </p>
         </div>
+      </div>
     </div>
-</div>
-</body>
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/packages/www/public/fonts/Matter/stylesheet.css b/packages/www/public/fonts/Matter/stylesheet.css
index 37911f7164..a12a67f132 100644
--- a/packages/www/public/fonts/Matter/stylesheet.css
+++ b/packages/www/public/fonts/Matter/stylesheet.css
@@ -1,144 +1,167 @@
 @font-face {
-    font-family: 'Matter';
-    src: url('Matter-Bold.eot');
-    src: local('Matter Bold'), local('Matter-Bold'),
-        url('Matter-Bold.eot?#iefix') format('embedded-opentype'),
-        url('Matter-Bold.woff2') format('woff2'),
-        url('Matter-Bold.woff') format('woff'),
-        url('Matter-Bold.ttf') format('truetype');
-    font-weight: bold;
-    font-style: normal;
+  font-family: "Matter";
+  src: url("Matter-Bold.eot");
+  src:
+    local("Matter Bold"),
+    local("Matter-Bold"),
+    url("Matter-Bold.eot?#iefix") format("embedded-opentype"),
+    url("Matter-Bold.woff2") format("woff2"),
+    url("Matter-Bold.woff") format("woff"),
+    url("Matter-Bold.ttf") format("truetype");
+  font-weight: bold;
+  font-style: normal;
 }
 
 @font-face {
-    font-family: 'Matter';
-    src: url('Matter-BoldItalic.eot');
-    src: local('Matter Bold Italic'), local('Matter-BoldItalic'),
-        url('Matter-BoldItalic.eot?#iefix') format('embedded-opentype'),
-        url('Matter-BoldItalic.woff2') format('woff2'),
-        url('Matter-BoldItalic.woff') format('woff'),
-        url('Matter-BoldItalic.ttf') format('truetype');
-    font-weight: bold;
-    font-style: italic;
+  font-family: "Matter";
+  src: url("Matter-BoldItalic.eot");
+  src:
+    local("Matter Bold Italic"),
+    local("Matter-BoldItalic"),
+    url("Matter-BoldItalic.eot?#iefix") format("embedded-opentype"),
+    url("Matter-BoldItalic.woff2") format("woff2"),
+    url("Matter-BoldItalic.woff") format("woff"),
+    url("Matter-BoldItalic.ttf") format("truetype");
+  font-weight: bold;
+  font-style: italic;
 }
 
 @font-face {
-    font-family: 'Matter';
-    src: url('Matter-SemiBold.eot');
-    src: local('Matter SemiBold'), local('Matter-SemiBold'),
-        url('Matter-SemiBold.eot?#iefix') format('embedded-opentype'),
-        url('Matter-SemiBold.woff2') format('woff2'),
-        url('Matter-SemiBold.woff') format('woff'),
-        url('Matter-SemiBold.ttf') format('truetype');
-    font-weight: 600;
-    font-style: normal;
+  font-family: "Matter";
+  src: url("Matter-SemiBold.eot");
+  src:
+    local("Matter SemiBold"),
+    local("Matter-SemiBold"),
+    url("Matter-SemiBold.eot?#iefix") format("embedded-opentype"),
+    url("Matter-SemiBold.woff2") format("woff2"),
+    url("Matter-SemiBold.woff") format("woff"),
+    url("Matter-SemiBold.ttf") format("truetype");
+  font-weight: 600;
+  font-style: normal;
 }
 
 @font-face {
-    font-family: 'Matter';
-    src: url('Matter-MediumItalic.eot');
-    src: local('Matter Medium Italic'), local('Matter-MediumItalic'),
-        url('Matter-MediumItalic.eot?#iefix') format('embedded-opentype'),
-        url('Matter-MediumItalic.woff2') format('woff2'),
-        url('Matter-MediumItalic.woff') format('woff'),
-        url('Matter-MediumItalic.ttf') format('truetype');
-    font-weight: 500;
-    font-style: italic;
+  font-family: "Matter";
+  src: url("Matter-MediumItalic.eot");
+  src:
+    local("Matter Medium Italic"),
+    local("Matter-MediumItalic"),
+    url("Matter-MediumItalic.eot?#iefix") format("embedded-opentype"),
+    url("Matter-MediumItalic.woff2") format("woff2"),
+    url("Matter-MediumItalic.woff") format("woff"),
+    url("Matter-MediumItalic.ttf") format("truetype");
+  font-weight: 500;
+  font-style: italic;
 }
 
 @font-face {
-    font-family: 'Matter';
-    src: url('Matter-Heavy.eot');
-    src: local('Matter Heavy'), local('Matter-Heavy'),
-        url('Matter-Heavy.eot?#iefix') format('embedded-opentype'),
-        url('Matter-Heavy.woff2') format('woff2'),
-        url('Matter-Heavy.woff') format('woff'),
-        url('Matter-Heavy.ttf') format('truetype');
-    font-weight: 900;
-    font-style: normal;
+  font-family: "Matter";
+  src: url("Matter-Heavy.eot");
+  src:
+    local("Matter Heavy"),
+    local("Matter-Heavy"),
+    url("Matter-Heavy.eot?#iefix") format("embedded-opentype"),
+    url("Matter-Heavy.woff2") format("woff2"),
+    url("Matter-Heavy.woff") format("woff"),
+    url("Matter-Heavy.ttf") format("truetype");
+  font-weight: 900;
+  font-style: normal;
 }
 
 @font-face {
-    font-family: 'Matter';
-    src: url('Matter-LightItalic.eot');
-    src: local('Matter Light Italic'), local('Matter-LightItalic'),
-        url('Matter-LightItalic.eot?#iefix') format('embedded-opentype'),
-        url('Matter-LightItalic.woff2') format('woff2'),
-        url('Matter-LightItalic.woff') format('woff'),
-        url('Matter-LightItalic.ttf') format('truetype');
-    font-weight: 300;
-    font-style: italic;
+  font-family: "Matter";
+  src: url("Matter-LightItalic.eot");
+  src:
+    local("Matter Light Italic"),
+    local("Matter-LightItalic"),
+    url("Matter-LightItalic.eot?#iefix") format("embedded-opentype"),
+    url("Matter-LightItalic.woff2") format("woff2"),
+    url("Matter-LightItalic.woff") format("woff"),
+    url("Matter-LightItalic.ttf") format("truetype");
+  font-weight: 300;
+  font-style: italic;
 }
 
 @font-face {
-    font-family: 'Matter';
-    src: url('Matter-Medium.eot');
-    src: local('Matter Medium'), local('Matter-Medium'),
-        url('Matter-Medium.eot?#iefix') format('embedded-opentype'),
-        url('Matter-Medium.woff2') format('woff2'),
-        url('Matter-Medium.woff') format('woff'),
-        url('Matter-Medium.ttf') format('truetype');
-    font-weight: 500;
-    font-style: normal;
+  font-family: "Matter";
+  src: url("Matter-Medium.eot");
+  src:
+    local("Matter Medium"),
+    local("Matter-Medium"),
+    url("Matter-Medium.eot?#iefix") format("embedded-opentype"),
+    url("Matter-Medium.woff2") format("woff2"),
+    url("Matter-Medium.woff") format("woff"),
+    url("Matter-Medium.ttf") format("truetype");
+  font-weight: 500;
+  font-style: normal;
 }
 
 @font-face {
-    font-family: 'Matter';
-    src: url('Matter-SemiBoldItalic.eot');
-    src: local('Matter SemiBold Italic'), local('Matter-SemiBoldItalic'),
-        url('Matter-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
-        url('Matter-SemiBoldItalic.woff2') format('woff2'),
-        url('Matter-SemiBoldItalic.woff') format('woff'),
-        url('Matter-SemiBoldItalic.ttf') format('truetype');
-    font-weight: 600;
-    font-style: italic;
+  font-family: "Matter";
+  src: url("Matter-SemiBoldItalic.eot");
+  src:
+    local("Matter SemiBold Italic"),
+    local("Matter-SemiBoldItalic"),
+    url("Matter-SemiBoldItalic.eot?#iefix") format("embedded-opentype"),
+    url("Matter-SemiBoldItalic.woff2") format("woff2"),
+    url("Matter-SemiBoldItalic.woff") format("woff"),
+    url("Matter-SemiBoldItalic.ttf") format("truetype");
+  font-weight: 600;
+  font-style: italic;
 }
 
 @font-face {
-    font-family: 'Matter';
-    src: url('Matter-HeavyItalic.eot');
-    src: local('Matter Heavy Italic'), local('Matter-HeavyItalic'),
-        url('Matter-HeavyItalic.eot?#iefix') format('embedded-opentype'),
-        url('Matter-HeavyItalic.woff2') format('woff2'),
-        url('Matter-HeavyItalic.woff') format('woff'),
-        url('Matter-HeavyItalic.ttf') format('truetype');
-    font-weight: 900;
-    font-style: italic;
+  font-family: "Matter";
+  src: url("Matter-HeavyItalic.eot");
+  src:
+    local("Matter Heavy Italic"),
+    local("Matter-HeavyItalic"),
+    url("Matter-HeavyItalic.eot?#iefix") format("embedded-opentype"),
+    url("Matter-HeavyItalic.woff2") format("woff2"),
+    url("Matter-HeavyItalic.woff") format("woff"),
+    url("Matter-HeavyItalic.ttf") format("truetype");
+  font-weight: 900;
+  font-style: italic;
 }
 
 @font-face {
-    font-family: 'Matter';
-    src: url('Matter-Light.eot');
-    src: local('Matter Light'), local('Matter-Light'),
-        url('Matter-Light.eot?#iefix') format('embedded-opentype'),
-        url('Matter-Light.woff2') format('woff2'),
-        url('Matter-Light.woff') format('woff'),
-        url('Matter-Light.ttf') format('truetype');
-    font-weight: 300;
-    font-style: normal;
+  font-family: "Matter";
+  src: url("Matter-Light.eot");
+  src:
+    local("Matter Light"),
+    local("Matter-Light"),
+    url("Matter-Light.eot?#iefix") format("embedded-opentype"),
+    url("Matter-Light.woff2") format("woff2"),
+    url("Matter-Light.woff") format("woff"),
+    url("Matter-Light.ttf") format("truetype");
+  font-weight: 300;
+  font-style: normal;
 }
 
 @font-face {
-    font-family: 'Matter';
-    src: url('Matter-Regular.eot');
-    src: local('Matter Regular'), local('Matter-Regular'),
-        url('Matter-Regular.eot?#iefix') format('embedded-opentype'),
-        url('Matter-Regular.woff2') format('woff2'),
-        url('Matter-Regular.woff') format('woff'),
-        url('Matter-Regular.ttf') format('truetype');
-    font-weight: normal;
-    font-style: normal;
+  font-family: "Matter";
+  src: url("Matter-Regular.eot");
+  src:
+    local("Matter Regular"),
+    local("Matter-Regular"),
+    url("Matter-Regular.eot?#iefix") format("embedded-opentype"),
+    url("Matter-Regular.woff2") format("woff2"),
+    url("Matter-Regular.woff") format("woff"),
+    url("Matter-Regular.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
 }
 
 @font-face {
-    font-family: 'Matter';
-    src: url('Matter-RegularItalic.eot');
-    src: local('Matter Regular Italic'), local('Matter-RegularItalic'),
-        url('Matter-RegularItalic.eot?#iefix') format('embedded-opentype'),
-        url('Matter-RegularItalic.woff2') format('woff2'),
-        url('Matter-RegularItalic.woff') format('woff'),
-        url('Matter-RegularItalic.ttf') format('truetype');
-    font-weight: normal;
-    font-style: italic;
+  font-family: "Matter";
+  src: url("Matter-RegularItalic.eot");
+  src:
+    local("Matter Regular Italic"),
+    local("Matter-RegularItalic"),
+    url("Matter-RegularItalic.eot?#iefix") format("embedded-opentype"),
+    url("Matter-RegularItalic.woff2") format("woff2"),
+    url("Matter-RegularItalic.woff") format("woff"),
+    url("Matter-RegularItalic.ttf") format("truetype");
+  font-weight: normal;
+  font-style: italic;
 }
-
diff --git a/packages/www/public/golang.svg b/packages/www/public/golang.svg
new file mode 100644
index 0000000000..433778040d
--- /dev/null
+++ b/packages/www/public/golang.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128"><defs><path id="go-original-a" d="M18.8 1h90.5v126H18.8z"/></defs><clipPath id="go-original-b"><use xlink:href="#go-original-a" overflow="visible"/></clipPath><path fill-rule="evenodd" clip-rule="evenodd" fill="#F6D2A2" d="M21.1 68.7c.2 3.5 3.7 1.9 5.3.8 1.5-1.1 2-.2 2.1-2.3.1-1.4.2-2.7.2-4.1-2.3-.2-4.8.3-6.7 1.7-.9.7-2.8 3-.9 3.9" clip-path="url(#go-original-b)"/><path d="M23 71.2c-.7 0-2-.3-2.2-2.3-.6-.4-.8-.9-.8-1.2-.1-1.2 1.2-2.6 1.9-3.1 1.6-1.2 3.7-1.8 5.9-1.8h1.3v.3c.1 1.1 0 2.2-.1 3.2 0 .3 0 .6-.1.9-.1 1.5-.4 1.7-1.1 2-.3.1-.6.2-1.1.6-.5.3-2.2 1.4-3.7 1.4zm4.8-7.8c-2.1 0-4 .6-5.5 1.7-.7.5-1.7 1.7-1.6 2.5 0 .3.2.6.6.8l.2.1v.2c.1 1.6.9 1.8 1.5 1.8 1 0 2.4-.7 3.3-1.3.6-.4 1-.5 1.3-.6.5-.2.6-.2.7-1.4 0-.3 0-.6.1-.9.1-.9.1-1.9.1-2.8-.3-.1-.5-.1-.7-.1z" clip-path="url(#go-original-b)"/><path fill-rule="evenodd" clip-rule="evenodd" fill="#C6B198" d="M21.1 68.7c.5-.2 1.1-.3 1.4-.8" clip-path="url(#go-original-b)"/><path d="M21.1 69c-.1 0-.3-.1-.3-.2-.1-.2 0-.4.2-.4.1 0 .2-.1.2-.1.4-.2.8-.3 1-.6.1-.1.3-.2.5-.1.1.1.2.3.1.5-.4.5-.9.7-1.3.8l-.2.1h-.2z" clip-path="url(#go-original-b)"/><path fill-rule="evenodd" clip-rule="evenodd" fill="#6AD7E5" d="M29.3 26.4c-13.6-3.8-3.5-21.1 7.4-14l-7.4 14z" clip-path="url(#go-original-b)"/><path d="M29.5 26.8l-.3-.1c-7-2-6.9-7-6.7-8.5.5-3.8 4.1-7.8 8.9-7.8 1.9 0 3.7.6 5.5 1.8l.3.2-7.7 14.4zm1.9-15.7c-4.5 0-7.8 3.7-8.3 7.2-.5 3.6 1.7 6.4 6 7.7l7.1-13.5c-1.5-.9-3.1-1.4-4.8-1.4z" clip-path="url(#go-original-b)"/><path fill-rule="evenodd" clip-rule="evenodd" fill="#6AD7E5" d="M89.6 11.1c10.7-7.5 20.5 9.5 8 13.8l-8-13.8z" clip-path="url(#go-original-b)"/><path d="M97.5 25.3L89.2 11l.3-.2c1.9-1.3 3.8-2 5.7-2 4.6 0 7.9 3.8 8.6 7.5.3 1.5.6 6.6-6 8.8l-.3.2zm-7.4-14l7.7 13.3c3.9-1.4 5.9-4.4 5.3-8-.6-3.4-3.7-6.9-7.9-6.9-1.7-.1-3.4.4-5.1 1.6z" clip-path="url(#go-original-b)"/><path fill-rule="evenodd" clip-rule="evenodd" fill="#F6D2A2" d="M92 112.3c2.7 1.7 7.7 6.8 3.6 9.3-3.9 3.6-6.1-4-9.6-5 1.5-2 3.4-3.9 6-4.3" clip-path="url(#go-original-b)"/><path d="M93.5 122.9c-1.6 0-3-1.6-4.2-3.1-1.1-1.2-2.2-2.5-3.4-2.9l-.5-.1.3-.4c1.2-1.7 3.2-3.9 6.2-4.4h.1l.1.1c1.7 1.1 5.4 4.2 5.3 7.1 0 1.1-.6 2-1.7 2.7-.7.7-1.4 1-2.2 1zm-7-6.5c1.2.5 2.2 1.8 3.2 2.9 1.2 1.5 2.4 2.8 3.7 2.8.6 0 1.2-.3 1.8-.9h.1c.9-.6 1.4-1.3 1.4-2.2 0-2.3-2.9-5.2-4.9-6.5-1.8.5-3.6 1.7-5.3 3.9zm9.1 5.5c-.1 0-.2-.1-.3-.2-.2-.4-.4-.9-.5-1.3-.3-.8-.6-1.6-1.2-2.2-.1-.1-.1-.3 0-.5.1-.1.3-.1.5 0 .7.7 1.1 1.6 1.4 2.5l.5 1.2c.1.2 0 .4-.1.5h-.3z" clip-path="url(#go-original-b)"/><path fill-rule="evenodd" clip-rule="evenodd" fill="#F6D2A2" d="M43.2 118.1c-3.2.5-5 3.4-7.7 4.9-2.5 1.5-3.5-.5-3.7-.9-.4-.2-.4.2-1-.4-2.3-3.7 2.4-6.4 4.9-8.2 3.5-.8 5.7 2.2 7.5 4.6" clip-path="url(#go-original-b)"/><path d="M33.8 123.8c-1.3 0-2-1.1-2.2-1.5h-.1c-.3 0-.5-.1-.9-.5v-.1c-2.2-3.5 1.6-6.2 4.1-8l.9-.6h.2c.4-.1.7-.1 1.1-.1 3 0 4.9 2.6 6.5 4.7l.5.7-.6.1c-1.9.3-3.3 1.5-4.7 2.7-.9.8-1.8 1.5-2.8 2.1-.8.3-1.4.5-2 .5zm-2.2-2.1c.1 0 .2 0 .4.1h.1l.1.1c.2.3.7 1.2 1.7 1.2.5 0 1-.2 1.5-.5 1-.5 1.9-1.3 2.7-2 1.3-1.1 2.7-2.3 4.5-2.8-1.5-2-3.3-4.2-5.8-4.2-.3 0-.6 0-.9.1l-.8.6c-2.6 1.8-5.8 4.1-3.9 7.1.1.2.2.3.4.3zm.2.7c-.2 0-.4-.2-.3-.4.1-1 .6-1.7 1.1-2.5.3-.4.5-.8.7-1.2.1-.2.3-.2.4-.2.2.1.2.3.2.4-.2.5-.5.9-.8 1.3-.5.7-.9 1.3-1 2.1 0 .4-.1.5-.3.5z" clip-path="url(#go-original-b)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M29.9 21.7c-1.8-.9-3.1-2.2-2-4.3 1-1.9 2.9-1.7 4.7-.8l-2.7 5.1zm64.9-1.8c1.8-.9 3.1-2.2 2-4.3-1-1.9-2.9-1.7-4.7-.8l2.7 5.1z" clip-path="url(#go-original-b)"/><path fill-rule="evenodd" clip-rule="evenodd" fill="#F6D2A2" d="M107.1 68.2c-.2 3.5-3.7 1.9-5.3.8-1.5-1.1-2-.2-2.1-2.3-.1-1.4-.2-2.7-.2-4.1 2.3-.2 4.8.3 6.7 1.7 1 .8 2.8 3 .9 3.9" clip-path="url(#go-original-b)"/><path d="M105.3 70.7c-1.5 0-3.2-1.1-3.7-1.4-.5-.3-.8-.5-1.1-.6-.8-.3-1-.5-1.1-2 0-.3 0-.6-.1-.9-.1-1-.2-2.1-.1-3.2v-.3h1.3c2.2 0 4.3.6 5.9 1.8.7.5 2 1.9 1.9 3.1 0 .4-.2.9-.8 1.2-.2 2-1.5 2.3-2.2 2.3zM99.8 63c0 .9 0 1.9.1 2.8 0 .3 0 .6.1.9.1 1.2.2 1.2.7 1.4.3.1.7.3 1.3.6.9.6 2.3 1.3 3.3 1.3.6 0 1.4-.2 1.5-1.8V68l.2-.1c.4-.2.6-.4.6-.8.1-.8-.9-2-1.6-2.5-1.5-1.1-3.5-1.7-5.5-1.7-.2.1-.4.1-.7.1z" clip-path="url(#go-original-b)"/><path fill-rule="evenodd" clip-rule="evenodd" fill="#C6B198" d="M107.1 68.2c-.5-.2-1.1-.3-1.4-.8" clip-path="url(#go-original-b)"/><path d="M107.1 68.6h-.1l-.2-.1c-.5-.2-1-.3-1.3-.8-.1-.1-.1-.4.1-.5.1-.1.4-.1.5.1.2.3.6.4 1 .6.1 0 .2.1.2.1.2.1.3.3.2.4-.1.1-.3.2-.4.2z" clip-path="url(#go-original-b)"/><path fill-rule="evenodd" clip-rule="evenodd" fill="#6AD7E5" d="M62.8 4c13.6 0 26.3 1.9 33 15 6 14.6 3.8 30.4 4.8 45.9.8 13.3 2.5 28.6-3.6 40.9-6.5 12.9-22.7 16.2-36 15.7-10.5-.4-23.1-3.8-29.1-13.4-6.9-11.2-3.7-27.9-3.2-40.4.6-14.8-4-29.7.9-44.1C34.5 8.5 48.1 5.1 62.8 4" clip-path="url(#go-original-b)"/><path d="M63.3 121.9h-2.5c-4.1-.1-10.3-.8-16.4-3.3-5.9-2.4-10.2-5.8-13-10.3-5.6-9.1-4.6-21.6-3.7-32.7.2-2.8.4-5.4.5-7.9.2-5.2-.2-10.6-.7-15.7-.8-9.4-1.6-19.1 1.5-28.5 2.4-7 6.7-12 13.2-15.2 5.1-2.5 11.4-3.9 20.4-4.6C76 3.6 89.3 5.5 96 18.8c4.4 10.7 4.4 22.2 4.5 33.3 0 4.2 0 8.5.3 12.7.1 1.3.2 2.6.2 3.9.8 12.2 1.7 26-3.9 37.2-2.8 5.7-7.7 9.9-14.4 12.6-5.4 2.2-12.2 3.4-19.4 3.4zM62.8 4.3c-14.1 1.1-27.9 4.2-33 19.4-3.1 9.3-2.3 18.9-1.5 28.2.4 5.2.9 10.5.7 15.8-.1 2.5-.3 5.1-.5 7.9-.9 11-1.9 23.4 3.6 32.3 2.3 3.7 9.7 12.5 28.8 13.2h2.5c22.1 0 30.3-9.8 33.3-15.6 5.5-11 4.6-24.8 3.9-36.9-.1-1.3-.2-2.6-.2-3.9-.2-4.2-.3-8.5-.3-12.7-.1-11-.1-22.5-4.4-33.1C92.7 13 88.2 9 82 6.7c-6.4-2.1-13.6-2.4-19.2-2.4z" clip-path="url(#go-original-b)"/><path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M65.2 22.2c2.4 14.2 25.6 10.4 22.3-3.9-3-12.8-23.1-9.2-22.3 3.9" clip-path="url(#go-original-b)"/><path d="M76.2 31.5c-4.5 0-10.2-2.4-11.4-9.2-.2-3.2.8-6.1 2.9-8.3 2.3-2.5 5.8-3.9 9.4-3.9 4.2 0 9.2 2.2 10.6 8.3.8 3.4.2 6.4-1.7 8.8-2.1 2.6-5.8 4.3-9.8 4.3zm-10.7-9.3c.5 2.8 1.8 5 3.9 6.6 1.8 1.4 4.3 2.1 6.8 2.1 3.7 0 7.3-1.6 9.3-4.1 1.8-2.2 2.3-5.1 1.6-8.3-1.3-5.7-6-7.7-10-7.7-3.4 0-6.7 1.4-8.9 3.7-1.9 2-2.9 4.7-2.7 7.7z" clip-path="url(#go-original-b)"/><path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M37.5 24.5c3.2 12.3 22.9 9.2 22.2-3.2-.9-14.8-25.3-12-22.2 3.2" clip-path="url(#go-original-b)"/><path d="M48 32.7c-4.3 0-9.3-2.1-10.9-8.1-.7-3.5 0-6.7 2-9.1 2.2-2.7 5.8-4.3 9.7-4.3 5.2 0 10.7 3.1 11.1 10.1.2 2.9-.7 5.5-2.7 7.6-2.1 2.3-5.6 3.8-9.2 3.8zm.8-20.8c-3.7 0-7.1 1.5-9.2 4-1.9 2.3-2.5 5.2-1.8 8.5C39.2 30 44 32 48 32c3.4 0 6.7-1.3 8.8-3.6 1.8-1.9 2.7-4.4 2.5-7.1-.2-4.3-3.1-9.4-10.5-9.4z" clip-path="url(#go-original-b)"/><path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M68 39.2c0 1.8.4 3.9.1 5.9-.5.9-1.4 1-2.2 1.3-1.1-.2-2-.9-2.5-1.9-.3-2.2.1-4.4.2-6.6l4.4 1.3z" clip-path="url(#go-original-b)"/><path d="M65.9 46.8c-1.3-.2-2.3-1-2.8-2.1-.2-1.6-.1-3.1 0-4.6.1-.7.1-1.4.1-2.1v-.4l5.1 1.6v.2c0 .6.1 1.2.1 1.9.1 1.3.2 2.7 0 4v.1c-.4.8-1.1 1-1.8 1.3-.2-.1-.4 0-.7.1zm-2.2-2.4c.4.9 1.2 1.5 2.1 1.7.2-.1.4-.1.5-.2.6-.2 1.1-.4 1.4-.9.2-1.2.1-2.5 0-3.8 0-.6-.1-1.2-.1-1.7l-3.8-1.2c0 .6-.1 1.2-.1 1.7-.1 1.6-.2 3 0 4.4z" clip-path="url(#go-original-b)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M46.3 22.5c0 2-1.5 3.6-3.3 3.6-1.8 0-3.3-1.6-3.3-3.6s1.5-3.6 3.3-3.6c1.8 0 3.3 1.6 3.3 3.6" clip-path="url(#go-original-b)"/><path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M45.2 23.3c0 .5-.4.9-.8.9s-.8-.4-.8-.9.4-.9.8-.9c.5 0 .8.4.8.9" clip-path="url(#go-original-b)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M74.2 21.6c0 2-1.5 3.6-3.3 3.6-1.8 0-3.3-1.6-3.3-3.6s1.5-3.6 3.3-3.6c1.8 0 3.3 1.6 3.3 3.6" clip-path="url(#go-original-b)"/><path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M73.2 22.4c0 .5-.3.9-.8.9-.4 0-.8-.4-.8-.9s.3-.9.8-.9c.4 0 .8.4.8.9M58.4 39c-1.5 3.5.8 10.6 4.8 5.4-.3-2.2.1-4.4.2-6.6l-5 1.2z" clip-path="url(#go-original-b)"/><path d="M60.5 46.6c-.7 0-1.4-.4-1.9-1.2-1.1-1.6-1.3-4.6-.5-6.5l.1-.2 5.5-1.4v.4l-.1 2.2c-.1 1.5-.2 2.9 0 4.4v.1l-.1.1c-1 1.4-2 2.1-3 2.1zm-1.8-7.3c-.6 1.7-.4 4.4.5 5.7.4.6.8.9 1.3.9.7 0 1.5-.6 2.3-1.6-.2-1.5-.1-3 .1-4.4l.1-1.7-4.3 1.1z" clip-path="url(#go-original-b)"/><path fill-rule="evenodd" clip-rule="evenodd" fill="#F6D2A2" d="M58.9 32.2c-2.7.2-4.9 3.5-3.5 6 1.9 3.4 6-.3 8.6 0 3 .1 5.4 3.2 7.8.6 2.7-2.9-1.2-5.7-4.1-7l-8.8.4z" clip-path="url(#go-original-b)"/><path fill="#231F20" d="M69.7 40.2c-.9 0-1.8-.4-2.7-.8-.9-.4-1.9-.8-3-.8h-.3c-.8 0-1.7.3-2.7.7-1.1.4-2.2.7-3.2.7-1.2 0-2.1-.5-2.7-1.6-.7-1.2-.6-2.6.1-3.9.8-1.5 2.2-2.4 3.7-2.6l8.9-.4h.1c2.2.9 4.7 2.6 5.2 4.6.2 1-.1 2-.9 2.9-.8.9-1.6 1.2-2.5 1.2zM64.1 38c1.1 0 2.2.5 3.2.9.9.4 1.7.7 2.5.7.7 0 1.3-.3 1.9-.9.7-.7.9-1.5.8-2.3-.4-1.7-2.8-3.3-4.7-4.1l-8.7.4c-1.3.1-2.5 1-3.2 2.2-.6 1.1-.6 2.3-.1 3.3.5.9 1.1 1.3 2.1 1.3.9 0 1.9-.4 2.9-.7 1.1-.4 2-.7 3-.7 0-.2.1-.2.3-.1z" clip-path="url(#go-original-b)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M58.6 32.1c-.2-4.7 8.8-5.3 9.8-1.4 1.1 4-9.4 4.9-9.8 1.4" clip-path="url(#go-original-b)"/></svg>
diff --git a/packages/www/public/img/features/projects.png b/packages/www/public/img/features/projects.png
new file mode 100644
index 0000000000..a4ed79e73d
Binary files /dev/null and b/packages/www/public/img/features/projects.png differ
diff --git a/packages/www/public/javascript.svg b/packages/www/public/javascript.svg
new file mode 100644
index 0000000000..7975261bd4
--- /dev/null
+++ b/packages/www/public/javascript.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path fill="#F0DB4F" d="M1.408 1.408h125.184v125.185H1.408z"/><path fill="#323330" d="M116.347 96.736c-.917-5.711-4.641-10.508-15.672-14.981-3.832-1.761-8.104-3.022-9.377-5.926-.452-1.69-.512-2.642-.226-3.665.821-3.32 4.784-4.355 7.925-3.403 2.023.678 3.938 2.237 5.093 4.724 5.402-3.498 5.391-3.475 9.163-5.879-1.381-2.141-2.118-3.129-3.022-4.045-3.249-3.629-7.676-5.498-14.756-5.355l-3.688.477c-3.534.893-6.902 2.748-8.877 5.235-5.926 6.724-4.236 18.492 2.975 23.335 7.104 5.332 17.54 6.545 18.873 11.531 1.297 6.104-4.486 8.08-10.234 7.378-4.236-.881-6.592-3.034-9.139-6.949-4.688 2.713-4.688 2.713-9.508 5.485 1.143 2.499 2.344 3.63 4.26 5.795 9.068 9.198 31.76 8.746 35.83-5.176.165-.478 1.261-3.666.38-8.581zM69.462 58.943H57.753l-.048 30.272c0 6.438.333 12.34-.714 14.149-1.713 3.558-6.152 3.117-8.175 2.427-2.059-1.012-3.106-2.451-4.319-4.485-.333-.584-.583-1.036-.667-1.071l-9.52 5.83c1.583 3.249 3.915 6.069 6.902 7.901 4.462 2.678 10.459 3.499 16.731 2.059 4.082-1.189 7.604-3.652 9.448-7.401 2.666-4.915 2.094-10.864 2.07-17.444.06-10.735.001-21.468.001-32.237z"/></svg>
\ No newline at end of file
diff --git a/packages/www/public/markdown.css b/packages/www/public/markdown.css
index 6a3fc98069..4e812305c0 100644
--- a/packages/www/public/markdown.css
+++ b/packages/www/public/markdown.css
@@ -61,8 +61,17 @@
   -webkit-text-size-adjust: 100%;
   line-height: 2;
   color: #24292e;
-  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI,
-    Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
+  font-family:
+    Inter,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Helvetica,
+    Arial,
+    sans-serif,
+    Apple Color Emoji,
+    Segoe UI Emoji;
   font-size: 16px;
   word-wrap: break-word;
   overflow: hidden;
@@ -184,7 +193,12 @@
 .markdown-body kbd {
   display: inline-block;
   padding: 3px 5px;
-  font: 11px SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+  font:
+    11px SFMono-Regular,
+    Consolas,
+    Liberation Mono,
+    Menlo,
+    monospace;
   line-height: 10px;
   color: #444d56;
   vertical-align: middle;
@@ -286,7 +300,12 @@
 
 .markdown-body code,
 .markdown-body pre {
-  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+  font-family:
+    SFMono-Regular,
+    Consolas,
+    Liberation Mono,
+    Menlo,
+    monospace;
   font-size: 12px;
 }
 
@@ -605,7 +624,12 @@
 .markdown-body kbd {
   display: inline-block;
   padding: 3px 5px;
-  font: 11px SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+  font:
+    11px SFMono-Regular,
+    Consolas,
+    Liberation Mono,
+    Menlo,
+    monospace;
   line-height: 10px;
   color: #444d56;
   vertical-align: middle;
@@ -789,7 +813,7 @@
   padding: 0.2em 0.4em;
   margin: 0;
   font-size: 85%;
-  background-color: '$panel';
+  background-color: "$panel";
   border-radius: 3px;
 }
 
@@ -841,7 +865,12 @@
 
 .markdown-body .commit-tease-sha {
   display: inline-block;
-  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+  font-family:
+    SFMono-Regular,
+    Consolas,
+    Liberation Mono,
+    Menlo,
+    monospace;
   font-size: 90%;
   color: #444d56;
 }
@@ -866,7 +895,12 @@
   min-width: 50px;
   padding-right: 10px;
   padding-left: 10px;
-  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+  font-family:
+    SFMono-Regular,
+    Consolas,
+    Liberation Mono,
+    Menlo,
+    monospace;
   font-size: 12px;
   line-height: 20px;
   color: rgba(27, 31, 35, 0.3);
@@ -898,7 +932,12 @@
 
 .markdown-body .blob-code-inner {
   overflow: visible;
-  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+  font-family:
+    SFMono-Regular,
+    Consolas,
+    Liberation Mono,
+    Menlo,
+    monospace;
   font-size: 12px;
   color: #24292e;
   word-wrap: normal;
diff --git a/packages/www/public/python.svg b/packages/www/public/python.svg
new file mode 100644
index 0000000000..e0e096a24e
--- /dev/null
+++ b/packages/www/public/python.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><linearGradient id="python-original-a" gradientUnits="userSpaceOnUse" x1="70.252" y1="1237.476" x2="170.659" y2="1151.089" gradientTransform="matrix(.563 0 0 -.568 -29.215 707.817)"><stop offset="0" stop-color="#5A9FD4"/><stop offset="1" stop-color="#306998"/></linearGradient><linearGradient id="python-original-b" gradientUnits="userSpaceOnUse" x1="209.474" y1="1098.811" x2="173.62" y2="1149.537" gradientTransform="matrix(.563 0 0 -.568 -29.215 707.817)"><stop offset="0" stop-color="#FFD43B"/><stop offset="1" stop-color="#FFE873"/></linearGradient><path fill="url(#python-original-a)" d="M63.391 1.988c-4.222.02-8.252.379-11.8 1.007-10.45 1.846-12.346 5.71-12.346 12.837v9.411h24.693v3.137H29.977c-7.176 0-13.46 4.313-15.426 12.521-2.268 9.405-2.368 15.275 0 25.096 1.755 7.311 5.947 12.519 13.124 12.519h8.491V67.234c0-8.151 7.051-15.34 15.426-15.34h24.665c6.866 0 12.346-5.654 12.346-12.548V15.833c0-6.693-5.646-11.72-12.346-12.837-4.244-.706-8.645-1.027-12.866-1.008zM50.037 9.557c2.55 0 4.634 2.117 4.634 4.721 0 2.593-2.083 4.69-4.634 4.69-2.56 0-4.633-2.097-4.633-4.69-.001-2.604 2.073-4.721 4.633-4.721z" transform="translate(0 10.26)"/><path fill="url(#python-original-b)" d="M91.682 28.38v10.966c0 8.5-7.208 15.655-15.426 15.655H51.591c-6.756 0-12.346 5.783-12.346 12.549v23.515c0 6.691 5.818 10.628 12.346 12.547 7.816 2.297 15.312 2.713 24.665 0 6.216-1.801 12.346-5.423 12.346-12.547v-9.412H63.938v-3.138h37.012c7.176 0 9.852-5.005 12.348-12.519 2.578-7.735 2.467-15.174 0-25.096-1.774-7.145-5.161-12.521-12.348-12.521h-9.268zM77.809 87.927c2.561 0 4.634 2.097 4.634 4.692 0 2.602-2.074 4.719-4.634 4.719-2.55 0-4.633-2.117-4.633-4.719 0-2.595 2.083-4.692 4.633-4.692z" transform="translate(0 10.26)"/><radialGradient id="python-original-c" cx="1825.678" cy="444.45" r="26.743" gradientTransform="matrix(0 -.24 -1.055 0 532.979 557.576)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#B8B8B8" stop-opacity=".498"/><stop offset="1" stop-color="#7F7F7F" stop-opacity="0"/></radialGradient><path opacity=".444" fill="url(#python-original-c)" d="M97.309 119.597c0 3.543-14.816 6.416-33.091 6.416-18.276 0-33.092-2.873-33.092-6.416 0-3.544 14.815-6.417 33.092-6.417 18.275 0 33.091 2.872 33.091 6.417z"/></svg>
diff --git a/packages/www/public/react.svg b/packages/www/public/react.svg
new file mode 100644
index 0000000000..9af92b9dd7
--- /dev/null
+++ b/packages/www/public/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><g fill="#61DAFB"><circle cx="64" cy="64" r="11.4"/><path d="M107.3 45.2c-2.2-.8-4.5-1.6-6.9-2.3.6-2.4 1.1-4.8 1.5-7.1 2.1-13.2-.2-22.5-6.6-26.1-1.9-1.1-4-1.6-6.4-1.6-7 0-15.9 5.2-24.9 13.9-9-8.7-17.9-13.9-24.9-13.9-2.4 0-4.5.5-6.4 1.6-6.4 3.7-8.7 13-6.6 26.1.4 2.3.9 4.7 1.5 7.1-2.4.7-4.7 1.4-6.9 2.3C8.2 50 1.4 56.6 1.4 64s6.9 14 19.3 18.8c2.2.8 4.5 1.6 6.9 2.3-.6 2.4-1.1 4.8-1.5 7.1-2.1 13.2.2 22.5 6.6 26.1 1.9 1.1 4 1.6 6.4 1.6 7.1 0 16-5.2 24.9-13.9 9 8.7 17.9 13.9 24.9 13.9 2.4 0 4.5-.5 6.4-1.6 6.4-3.7 8.7-13 6.6-26.1-.4-2.3-.9-4.7-1.5-7.1 2.4-.7 4.7-1.4 6.9-2.3 12.5-4.8 19.3-11.4 19.3-18.8s-6.8-14-19.3-18.8zM92.5 14.7c4.1 2.4 5.5 9.8 3.8 20.3-.3 2.1-.8 4.3-1.4 6.6-5.2-1.2-10.7-2-16.5-2.5-3.4-4.8-6.9-9.1-10.4-13 7.4-7.3 14.9-12.3 21-12.3 1.3 0 2.5.3 3.5.9zM81.3 74c-1.8 3.2-3.9 6.4-6.1 9.6-3.7.3-7.4.4-11.2.4-3.9 0-7.6-.1-11.2-.4-2.2-3.2-4.2-6.4-6-9.6-1.9-3.3-3.7-6.7-5.3-10 1.6-3.3 3.4-6.7 5.3-10 1.8-3.2 3.9-6.4 6.1-9.6 3.7-.3 7.4-.4 11.2-.4 3.9 0 7.6.1 11.2.4 2.2 3.2 4.2 6.4 6 9.6 1.9 3.3 3.7 6.7 5.3 10-1.7 3.3-3.4 6.6-5.3 10zm8.3-3.3c1.5 3.5 2.7 6.9 3.8 10.3-3.4.8-7 1.4-10.8 1.9 1.2-1.9 2.5-3.9 3.6-6 1.2-2.1 2.3-4.2 3.4-6.2zM64 97.8c-2.4-2.6-4.7-5.4-6.9-8.3 2.3.1 4.6.2 6.9.2 2.3 0 4.6-.1 6.9-.2-2.2 2.9-4.5 5.7-6.9 8.3zm-18.6-15c-3.8-.5-7.4-1.1-10.8-1.9 1.1-3.3 2.3-6.8 3.8-10.3 1.1 2 2.2 4.1 3.4 6.1 1.2 2.2 2.4 4.1 3.6 6.1zm-7-25.5c-1.5-3.5-2.7-6.9-3.8-10.3 3.4-.8 7-1.4 10.8-1.9-1.2 1.9-2.5 3.9-3.6 6-1.2 2.1-2.3 4.2-3.4 6.2zM64 30.2c2.4 2.6 4.7 5.4 6.9 8.3-2.3-.1-4.6-.2-6.9-.2-2.3 0-4.6.1-6.9.2 2.2-2.9 4.5-5.7 6.9-8.3zm22.2 21l-3.6-6c3.8.5 7.4 1.1 10.8 1.9-1.1 3.3-2.3 6.8-3.8 10.3-1.1-2.1-2.2-4.2-3.4-6.2zM31.7 35c-1.7-10.5-.3-17.9 3.8-20.3 1-.6 2.2-.9 3.5-.9 6 0 13.5 4.9 21 12.3-3.5 3.8-7 8.2-10.4 13-5.8.5-11.3 1.4-16.5 2.5-.6-2.3-1-4.5-1.4-6.6zM7 64c0-4.7 5.7-9.7 15.7-13.4 2-.8 4.2-1.5 6.4-2.1 1.6 5 3.6 10.3 6 15.6-2.4 5.3-4.5 10.5-6 15.5C15.3 75.6 7 69.6 7 64zm28.5 49.3c-4.1-2.4-5.5-9.8-3.8-20.3.3-2.1.8-4.3 1.4-6.6 5.2 1.2 10.7 2 16.5 2.5 3.4 4.8 6.9 9.1 10.4 13-7.4 7.3-14.9 12.3-21 12.3-1.3 0-2.5-.3-3.5-.9zM96.3 93c1.7 10.5.3 17.9-3.8 20.3-1 .6-2.2.9-3.5.9-6 0-13.5-4.9-21-12.3 3.5-3.8 7-8.2 10.4-13 5.8-.5 11.3-1.4 16.5-2.5.6 2.3 1 4.5 1.4 6.6zm9-15.6c-2 .8-4.2 1.5-6.4 2.1-1.6-5-3.6-10.3-6-15.6 2.4-5.3 4.5-10.5 6-15.5 13.8 4 22.1 10 22.1 15.6 0 4.7-5.8 9.7-15.7 13.4z"/></g></svg>
\ No newline at end of file
diff --git a/packages/www/public/reset.css b/packages/www/public/reset.css
index b4a14a9976..ececb8eb41 100644
--- a/packages/www/public/reset.css
+++ b/packages/www/public/reset.css
@@ -425,9 +425,20 @@ ul {
    */
 
 html {
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
-    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    Arial,
+    "Noto Sans",
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol",
+    "Noto Color Emoji"; /* 1 */
   line-height: 1.5; /* 2 */
 }
 
diff --git a/packages/www/public/site.webmanifest b/packages/www/public/site.webmanifest
index 45dc8a2065..fa99de77db 100644
--- a/packages/www/public/site.webmanifest
+++ b/packages/www/public/site.webmanifest
@@ -1 +1,19 @@
-{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
\ No newline at end of file
+{
+  "name": "",
+  "short_name": "",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}
diff --git a/packages/www/vercel.json b/packages/www/vercel.json
index 07ebceb9b6..738c34dbd4 100644
--- a/packages/www/vercel.json
+++ b/packages/www/vercel.json
@@ -13,4 +13,4 @@
       "permanent": false
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/yarn.lock b/yarn.lock
index 9deecaeef5..f6950b68dd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3011,6 +3011,13 @@
   resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.3.1.tgz#4d795b649cc3b1cbb760d191c80dcb4353c9a366"
   integrity sha512-Bu+AMaXNjrpjh41znzHqaz3r2Nr8hHuHZT6V2LBKMhyMl0FgKA62PNYbqnfgmzOhoWZj70Zecisbo4H1rotP5g==
 
+"@floating-ui/core@^1.6.0":
+  version "1.6.4"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.4.tgz#0140cf5091c8dee602bff9da5ab330840ff91df6"
+  integrity sha512-a4IowK4QkXl4SCWTGUR0INAfEOX3wtsYw3rKK5InQEHMGObkR8Xk44qYQD9P4r6HHw0iIfK6GUKECmY8sTkqRA==
+  dependencies:
+    "@floating-ui/utils" "^0.2.4"
+
 "@floating-ui/dom@^1.3.0":
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.4.4.tgz#cf859dde33995a4e7b6ded16c98cb73b2ebfffd0"
@@ -3018,6 +3025,14 @@
   dependencies:
     "@floating-ui/core" "^1.3.1"
 
+"@floating-ui/dom@^1.6.1":
+  version "1.6.7"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.7.tgz#85d22f731fcc5b209db504478fb1df5116a83015"
+  integrity sha512-wmVfPG5o2xnKDU4jx/m4w5qva9FWHcnZ8BvzEe90D/RpwsJaTAVYPEPdQ8sbr/N8zZTAHlZUTQdqg8ZUbzHmng==
+  dependencies:
+    "@floating-ui/core" "^1.6.0"
+    "@floating-ui/utils" "^0.2.4"
+
 "@floating-ui/react-dom@^2.0.0":
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.1.tgz#7972a4fc488a8c746cded3cfe603b6057c308a91"
@@ -3025,6 +3040,11 @@
   dependencies:
     "@floating-ui/dom" "^1.3.0"
 
+"@floating-ui/utils@^0.2.4":
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.4.tgz#1d459cee5031893a08a0e064c406ad2130cced7c"
+  integrity sha512-dWO2pw8hhi+WrXq1YJy2yCuWoL20PddgGaqTgVe4cOS9Q6qklXCiA1tJEqX6BEwRNSCP84/afac9hd4MS+zEUA==
+
 "@hutson/parse-repository-url@^3.0.0":
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/@hutson/parse-repository-url/-/parse-repository-url-3.0.2.tgz#98c23c950a3d9b6c8f0daed06da6c3af06981340"
@@ -3511,7 +3531,7 @@
     tus-js-client "^3.1.0"
     zustand "^4.3.9"
 
-"@livepeer/design-system@^1.1.0":
+"@livepeer/design-system@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@livepeer/design-system/-/design-system-1.1.0.tgz#32e131e23b27f1e06b453d25da1931f4b1c41089"
   integrity sha512-0hhFeU8blOb/T1xtei4gkk2TpaZ2RdEQipG08Fpxt0QW7rXunCmba+Y2jQx7xdPH4xtHU1TG1+C+6z39Q3k3ig==
@@ -10168,6 +10188,11 @@ classnames@^2.2.3, classnames@^2.2.5, classnames@^2.2.6, classnames@^2.3.2:
   resolved "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz"
   integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
 
+classnames@^2.3.0:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
+  integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
+
 clean-stack@^2.0.0:
   version "2.2.0"
   resolved "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz"
@@ -20827,13 +20852,13 @@ react-test-renderer@^16.12.0:
     react-is "^16.8.6"
     scheduler "^0.19.1"
 
-react-tooltip@4.2.7:
-  version "4.2.7"
-  resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-4.2.7.tgz#245b26aa23bc8ca877f9086ad169207d77281894"
-  integrity sha512-z5T3gNplT76rkT7ZImfx/uXfBtS+x7+WK2H8MVZ5skSwETDDx0hs0+P0jwL5gYDaBvsZ7LYiCBzAOd3tN85CMA==
+react-tooltip@^5.26.4:
+  version "5.27.1"
+  resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-5.27.1.tgz#a94481ba146d828d31642f14d6ab29b56998fcda"
+  integrity sha512-a+micPXcMOMt11CYlwJD4XShcqGziasHco4NPe1OFw298WBTILMyzUgNC1LAFViAe791JdHNVSJIpzhZm2MvDA==
   dependencies:
-    prop-types "^15.7.2"
-    uuid "^7.0.3"
+    "@floating-ui/dom" "^1.6.1"
+    classnames "^2.3.0"
 
 react-transition-group@2.9.0:
   version "2.9.0"
@@ -21666,6 +21691,15 @@ sass@^1.29.0:
     immutable "^4.0.0"
     source-map-js ">=0.6.2 <2.0.0"
 
+sass@^1.77.6:
+  version "1.77.6"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.77.6.tgz#898845c1348078c2e6d1b64f9ee06b3f8bd489e4"
+  integrity sha512-ByXE1oLD79GVq9Ht1PeHWCPMPB8XHpBuz1r85oByKHjZY6qV6rWnQovQzXJXuQ/XyE1Oj3iPk3lo28uzaRA2/Q==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
 sax@>=0.6.0, sax@~1.2.4:
   version "1.2.4"
   resolved "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz"
@@ -24063,7 +24097,7 @@ uuid@^3.0.0, uuid@^3.2.1, uuid@^3.3.2, uuid@^3.3.3:
   resolved "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
 
-uuid@^7.0.0, uuid@^7.0.3:
+uuid@^7.0.0:
   version "7.0.3"
   resolved "https://registry.npmjs.org/uuid/-/uuid-7.0.3.tgz"
   integrity sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==