diff --git a/packages/www/components.json b/packages/www/components.json
index 29baf27e29..b5f29f83ff 100644
--- a/packages/www/components.json
+++ b/packages/www/components.json
@@ -12,6 +12,6 @@
   },
   "aliases": {
     "components": "components",
-    "utils": "lib"
+    "utils": "lib/cn"
   }
 }
diff --git a/packages/www/components/ApiKeys/CreateDialog.tsx b/packages/www/components/ApiKeys/CreateDialog.tsx
index 949da2f91c..5da402300f 100644
--- a/packages/www/components/ApiKeys/CreateDialog.tsx
+++ b/packages/www/components/ApiKeys/CreateDialog.tsx
@@ -116,7 +116,9 @@ const CreateDialog = ({
 
   return (
     <AlertDialog open={isOpen} onOpenChange={onOpenChange}>
-      <AlertDialogContent css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
+      <AlertDialogContent
+        className="bg-surface"
+        css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
         {!newToken && (
           <>
             <AlertDialogTitle asChild>
@@ -332,6 +334,7 @@ const CreateDialog = ({
                   size="2"
                   disabled={creating}
                   type="submit"
+                  className="bg-accent text-foreground"
                   variant="primary">
                   {creating && (
                     <Spinner
diff --git a/packages/www/components/AssetDetails/AssetChildrenHeadingBox.tsx b/packages/www/components/AssetDetails/AssetChildrenHeadingBox.tsx
index 8218be4d20..3a3d5f82c1 100644
--- a/packages/www/components/AssetDetails/AssetChildrenHeadingBox.tsx
+++ b/packages/www/components/AssetDetails/AssetChildrenHeadingBox.tsx
@@ -64,7 +64,10 @@ const AssetChildrenHeadingBox = ({
           </Box>
         </Box>
         <Box css={{ position: "relative", top: "-8px" }}>
-          <Button size="2" onClick={() => setEditAssetDialogOpen(true)}>
+          <Button
+            className="bg-accent text-foreground"
+            size="2"
+            onClick={() => setEditAssetDialogOpen(true)}>
             <Box
               as={Pencil1Icon}
               css={{
diff --git a/packages/www/components/AssetDetails/AssetOverviewTab.tsx b/packages/www/components/AssetDetails/AssetOverviewTab.tsx
index 2531e64457..7e4c810f08 100644
--- a/packages/www/components/AssetDetails/AssetOverviewTab.tsx
+++ b/packages/www/components/AssetDetails/AssetOverviewTab.tsx
@@ -134,7 +134,9 @@ const AssetOverviewTab = ({
             may also archive them using the following storage providers.
           </Text>
         </Box>
-        <Promo size="2" css={{ borderRadius: "$2" }}>
+        <div
+          className="bg-background text-foreground p-4 rounded-lg border"
+          css={{ borderRadius: "$2" }}>
           <Flex css={{ justifyContent: "space-between" }}>
             <Flex align="center">
               <StyledIpfsIcon />
@@ -158,6 +160,7 @@ const AssetOverviewTab = ({
                     display: "inline-flex",
                     ai: "center",
                   }}
+                  className="bg-accent text-foreground"
                   size="2"
                   disabled={
                     Boolean(asset?.status?.phase !== "ready") || isUploading
@@ -206,7 +209,7 @@ const AssetOverviewTab = ({
               </Flex>
             </Box>
           )}
-        </Promo>
+        </div>
       </Box>
     </>
   );
diff --git a/packages/www/components/AssetsTable/CreateAssetDialog/index.tsx b/packages/www/components/AssetsTable/CreateAssetDialog/index.tsx
index c47cc1f547..efb663f719 100644
--- a/packages/www/components/AssetsTable/CreateAssetDialog/index.tsx
+++ b/packages/www/components/AssetsTable/CreateAssetDialog/index.tsx
@@ -109,6 +109,7 @@ const CreateAssetDialog = ({
   return (
     <AlertDialog open={isOpen} onOpenChange={onOpenChange}>
       <AlertDialogContent
+        className="bg-surface"
         css={{ maxWidth: 450, minWidth: 350, px: "$5", pt: "$4", pb: "$4" }}>
         <AlertDialogTitle asChild>
           <Heading size="1">Upload Asset</Heading>
@@ -221,6 +222,7 @@ const CreateAssetDialog = ({
             <Button
               css={{ display: "flex", ai: "center" }}
               type="submit"
+              className="bg-accent text-foreground"
               size="2"
               disabled={creating || Object.keys(videoFiles ?? {}).length === 0}
               variant="primary">
diff --git a/packages/www/components/FeaturesModel/index.tsx b/packages/www/components/FeaturesModel/index.tsx
index 16d9d01a60..cb99d5fc84 100644
--- a/packages/www/components/FeaturesModel/index.tsx
+++ b/packages/www/components/FeaturesModel/index.tsx
@@ -45,7 +45,9 @@ export default function FeaturesModel() {
 
   return (
     <AlertDialog open={shouldShowFeature}>
-      <AlertDialogContent css={{ p: "0", borderRadius: 0 }}>
+      <AlertDialogContent
+        className="bg-surface"
+        css={{ p: "0", borderRadius: 0 }}>
         <Flex className="flex flex-row gap-3">
           <Box className="flex flex-col flex-1 justify-center p-5">
             <Badge
diff --git a/packages/www/components/FileUpload/index.tsx b/packages/www/components/FileUpload/index.tsx
index 609fc6aac7..0a2337ed84 100644
--- a/packages/www/components/FileUpload/index.tsx
+++ b/packages/www/components/FileUpload/index.tsx
@@ -43,6 +43,7 @@ const FileUpload = () => {
 
   return (
     <Box
+      className="bg-background border"
       css={{
         position: "fixed",
         bottom: "$4",
@@ -52,10 +53,8 @@ const FileUpload = () => {
         minWidth: 420,
         maxHeight: "90%",
         overflowY: "scroll",
-        border: "1px solid $neutral6",
         borderRadius: "$3",
         zIndex: 2,
-        backgroundColor: "$panel",
       }}>
       <Flex direction="column" justify="center">
         {!hasPendingFileUploads && (
diff --git a/packages/www/components/GettingStarted/index.tsx b/packages/www/components/GettingStarted/index.tsx
index 2443101263..cea39db021 100644
--- a/packages/www/components/GettingStarted/index.tsx
+++ b/packages/www/components/GettingStarted/index.tsx
@@ -129,6 +129,7 @@ curl --request POST \
         <Flex align={"center"}>
           <Avatar
             fallback={getEmojiIcon(data?.name)}
+            className="bg-accent pt-1"
             style={{
               borderRadius: 10,
               marginRight: 10,
@@ -140,7 +141,7 @@ curl --request POST \
           </Heading>
         </Flex>
         <Link href={appendProjectId("/settings")} passHref legacyBehavior>
-          <Button as="a" size="2">
+          <Button className="bg-accent" as="a" size="2">
             Edit Project
           </Button>
         </Link>
@@ -169,7 +170,8 @@ curl --request POST \
             gap: "$5",
             gridTemplateColumns: "repeat(auto-fill, minmax(46%, 1fr))",
           }}>
-          <Promo
+          <div
+            className="bg-background border p-4 rounded-xl"
             css={{
               width: "100%",
               height: "100%",
@@ -238,6 +240,7 @@ curl --request POST \
                 "https://docs.livepeer.org/api-reference/overview/introduction"
               }>
               <Button
+                className="bg-accent"
                 css={{
                   mt: "$2",
                   display: "flex",
@@ -247,7 +250,7 @@ curl --request POST \
                 Visit documentation <ArrowRightIcon />
               </Button>
             </Link>
-          </Promo>
+          </div>
           <Grid
             css={{
               display: "grid",
@@ -284,11 +287,11 @@ const Card = ({
   link: string;
 }) => {
   return (
-    <Promo
+    <div
+      className="bg-background border p-4 rounded-xl"
       css={{
         width: "100%",
         height: "100%",
-        boxSizing: "border-box",
         display: "flex",
         flexDirection: "column",
         justifyContent: "space-between",
@@ -326,6 +329,7 @@ const Card = ({
           textDecoration: "none",
         }}>
         <Button
+          className="bg-accent"
           css={{
             mt: "$2",
             display: "flex",
@@ -340,7 +344,7 @@ const Card = ({
           />
         </Button>
       </Link>
-    </Promo>
+    </div>
   );
 };
 
diff --git a/packages/www/components/Header/index.tsx b/packages/www/components/Header/index.tsx
index 41dcfcb913..beee25b5c9 100644
--- a/packages/www/components/Header/index.tsx
+++ b/packages/www/components/Header/index.tsx
@@ -93,7 +93,6 @@ const Header = ({ breadcrumbs = [] }) => {
           height: 60,
           width: "100%",
           margin: "0 auto",
-          maxWidth: "1520px",
         }}>
         <Breadcrumbs aria-label="breadcrumb">
           {breadcrumbs.map((breadcrumb, i) => {
diff --git a/packages/www/components/Logger/index.tsx b/packages/www/components/Logger/index.tsx
index 000fc4f930..b5d81027dc 100644
--- a/packages/www/components/Logger/index.tsx
+++ b/packages/www/components/Logger/index.tsx
@@ -182,10 +182,10 @@ const Logger = ({ stream, ...props }: { stream: Stream }) => {
         </Heading>
       </Box>
       <Box
+        className="bg-accent"
         css={{
           overflow: "scroll",
           p: "$4",
-          bc: "$neutral3",
           height: 300,
           borderRadius: 6,
         }}>
diff --git a/packages/www/components/Login/index.tsx b/packages/www/components/Login/index.tsx
index d95787a4cf..69650888ad 100644
--- a/packages/www/components/Login/index.tsx
+++ b/packages/www/components/Login/index.tsx
@@ -125,7 +125,9 @@ const Login = ({ id, buttonText, onSubmit, loading, errors }) => {
           </Box>
 
           {errors.length > 0 && (
-            <Box css={{ mt: "$2" }}>{errors.join(", ")}&nbsp;</Box>
+            <Box className="text-red-500" css={{ mt: "$2" }}>
+              {errors.join(", ")}&nbsp;
+            </Box>
           )}
 
           <Button
diff --git a/packages/www/components/PaymentMethodDialog/index.tsx b/packages/www/components/PaymentMethodDialog/index.tsx
index 8a8b4c1429..9a5be556cf 100644
--- a/packages/www/components/PaymentMethodDialog/index.tsx
+++ b/packages/www/components/PaymentMethodDialog/index.tsx
@@ -127,7 +127,9 @@ const PaymentMethodDialog = ({ invalidateQuery }) => {
         </Button>
       </Flex>
 
-      <AlertDialogContent css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
+      <AlertDialogContent
+        className="bg-surface"
+        css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
         <Box
           as="form"
           onSubmit={handleSubmit(onSubmit)}
diff --git a/packages/www/components/Project/ProjectTile.tsx b/packages/www/components/Project/ProjectTile.tsx
index 0101ec98ec..8f42389f54 100644
--- a/packages/www/components/Project/ProjectTile.tsx
+++ b/packages/www/components/Project/ProjectTile.tsx
@@ -17,10 +17,8 @@ import { getEmojiIcon } from "lib/get-emoji";
 function ProjectTile({ name, id, invalidateQuery }) {
   return (
     <Box
+      className="bg-background border"
       css={{
-        bc: "$neutral2",
-        border: "1px solid",
-        borderColor: "$neutral6",
         p: "$4",
         width: "100%",
         borderRadius: "11px",
@@ -36,7 +34,11 @@ function ProjectTile({ name, id, invalidateQuery }) {
       <Box>
         <Flex align={"center"} justify={"between"}>
           <Flex align={"center"}>
-            <Avatar fallback={getEmojiIcon(name)} size={"3"} />
+            <Avatar
+              className="bg-accent pt-1"
+              fallback={getEmojiIcon(name)}
+              size={"3"}
+            />
             <Text
               css={{
                 fontWeight: 500,
@@ -59,8 +61,8 @@ function ProjectTile({ name, id, invalidateQuery }) {
             </Box>
             <DropdownMenuContent
               placeholder="Settings"
+              className="border bg-background"
               css={{
-                border: "1px solid $colors$neutral6",
                 p: "$2",
                 width: "13rem",
                 mt: "$1",
@@ -86,7 +88,9 @@ function ProjectTile({ name, id, invalidateQuery }) {
                       passHref
                       legacyBehavior
                       href={`/projects/${id}/${item.path}`}>
-                      <NavLink key={item.title}>{item.title}</NavLink>
+                      <NavLink className="hover:bg-accent" key={item.title}>
+                        {item.title}
+                      </NavLink>
                     </Link>
                   ))}
                 </Flex>
@@ -96,7 +100,7 @@ function ProjectTile({ name, id, invalidateQuery }) {
         </Flex>
       </Box>
       <Flex justify={"end"}>
-        <Button css={{ mt: 40 }} size={1}>
+        <Button className="bg-accent" css={{ mt: 40 }} size={1}>
           Open Project
         </Button>
       </Flex>
diff --git a/packages/www/components/Project/createProjectDialog.tsx b/packages/www/components/Project/createProjectDialog.tsx
index a7be55692e..7fb7cfd153 100644
--- a/packages/www/components/Project/createProjectDialog.tsx
+++ b/packages/www/components/Project/createProjectDialog.tsx
@@ -28,7 +28,9 @@ const CreateProjectDialog = ({
 
   return (
     <AlertDialog open={isOpen} onOpenChange={onOpenChange}>
-      <AlertDialogContent css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
+      <AlertDialogContent
+        className="bg-surface"
+        css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
         <AlertDialogTitle asChild>
           <Heading size="1">Create Project</Heading>
         </AlertDialogTitle>
@@ -82,6 +84,7 @@ const CreateProjectDialog = ({
               type="submit"
               size="2"
               disabled={creating}
+              className="bg-accent text-foreground"
               variant="primary">
               {creating && (
                 <Spinner
diff --git a/packages/www/components/Project/deleteProjectDialog.tsx b/packages/www/components/Project/deleteProjectDialog.tsx
index c470222d2b..815e7c5a0a 100644
--- a/packages/www/components/Project/deleteProjectDialog.tsx
+++ b/packages/www/components/Project/deleteProjectDialog.tsx
@@ -40,7 +40,9 @@ const DeleteProjectDialog = ({
 
   return (
     <AlertDialog open={open} onOpenChange={onOpenChange} {...props}>
-      <AlertDialogContent css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
+      <AlertDialogContent
+        className="bg-surface"
+        css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
         <AlertDialogTitle asChild>
           <Heading size="1">Delete Project </Heading>
         </AlertDialogTitle>
diff --git a/packages/www/components/Sidebar/index.tsx b/packages/www/components/Sidebar/index.tsx
index 79f6eddeb1..1d495cbb21 100644
--- a/packages/www/components/Sidebar/index.tsx
+++ b/packages/www/components/Sidebar/index.tsx
@@ -56,14 +56,14 @@ export const NavLink = styled(A, {
   gap: "$2",
   textDecoration: "none",
   "&:hover": {
-    bc: "$neutral4",
+    bc: "hsl(var(--accent))",
     textDecoration: "none",
   },
   "&:focus": {
     outline: "none",
   },
   variants: {
-    active: { true: { bc: "$neutral4" } },
+    active: { true: { bc: "hsl(var(--accent))" } },
   },
 });
 
@@ -245,30 +245,18 @@ const Sidebar = ({ id }: { id: SidebarId }) => {
 
   return (
     <>
-      <Box
-        css={{
-          backgroundColor: "$panel",
-          borderRight: "1px solid",
-          borderColor: "$neutral6",
-          maxWidth: 270,
-          width: 270,
-          top: 0,
-          position: "fixed",
-          justifyContent: "flex-end",
-          bottom: 0,
-          zIndex: 0,
-        }}>
+      <Box className="bg-background w-[17rem] fixed justify-end  bottom-0 top-0 z-0">
         <Flex align="center" justify="between" css={{ p: "$3", mb: "$3" }}>
           <DropdownMenu>
             <Flex
               as={DropdownMenuTrigger}
+              className="hover:bg-accent"
               align="center"
               css={{
                 border: 0,
                 background: "transparent",
                 p: 6,
                 "&:hover": {
-                  backgroundColor: "$neutral4",
                   borderRadius: "$3",
                 },
               }}>
@@ -297,9 +285,9 @@ const Sidebar = ({ id }: { id: SidebarId }) => {
               </Text>
             </Flex>
             <DropdownMenuContent
+              className="bg-surface border"
               placeholder="Account"
               css={{
-                border: "1px solid $colors$neutral6",
                 width: "12rem",
                 ml: "$4",
                 mt: "$1",
@@ -418,6 +406,7 @@ const Sidebar = ({ id }: { id: SidebarId }) => {
           <DropdownMenu>
             <Flex
               align={"center"}
+              className="hover:bg-accent"
               as={DropdownMenuTrigger}
               css={{
                 py: "$1",
@@ -432,7 +421,6 @@ const Sidebar = ({ id }: { id: SidebarId }) => {
                   outline: "none",
                 },
                 "&:hover": {
-                  backgroundColor: "$neutral4",
                   borderRadius: "$3",
                 },
               }}>
@@ -445,13 +433,13 @@ const Sidebar = ({ id }: { id: SidebarId }) => {
               <TopBottomChevron />
             </Flex>
             <DropdownMenuContent
+              className="bg-surface border"
               placeholder={"Projects"}
               css={{
-                border: "1px solid $colors$neutral6",
-                width: "14rem",
-                ml: "$5",
+                width: "13rem",
+                ml: "$4",
                 py: "$2",
-                px: "$3",
+                px: "$2",
               }}>
               <Text size={2} variant={"neutral"} css={{ ml: "$1", mb: "$1" }}>
                 Projects
diff --git a/packages/www/components/SigningKeysTable/CreateDialog.tsx b/packages/www/components/SigningKeysTable/CreateDialog.tsx
index 935940b087..98fc8874a2 100644
--- a/packages/www/components/SigningKeysTable/CreateDialog.tsx
+++ b/packages/www/components/SigningKeysTable/CreateDialog.tsx
@@ -60,7 +60,9 @@ const CreateDialog = ({
 
   return (
     <AlertDialog open={isOpen} onOpenChange={onOpenChange}>
-      <AlertDialogContent css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
+      <AlertDialogContent
+        className="bg-surface"
+        css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
         {!newKey && (
           <>
             <AlertDialogTitle asChild>
@@ -98,6 +100,7 @@ const CreateDialog = ({
                   size="2"
                   disabled={isLoading}
                   type="submit"
+                  className="bg-accent text-foreground"
                   variant="primary">
                   {isLoading && (
                     <Spinner
diff --git a/packages/www/components/SigningKeysTable/CreateKeyDialog.tsx b/packages/www/components/SigningKeysTable/CreateKeyDialog.tsx
index 3390e01f52..68950db26e 100644
--- a/packages/www/components/SigningKeysTable/CreateKeyDialog.tsx
+++ b/packages/www/components/SigningKeysTable/CreateKeyDialog.tsx
@@ -62,7 +62,9 @@ const CreateKeyDialog = ({
 
   return (
     <AlertDialog open={isOpen} onOpenChange={onOpenChange}>
-      <AlertDialogContent css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
+      <AlertDialogContent
+        className="bg-surface"
+        css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
         {!newKey && (
           <>
             <AlertDialogTitle asChild>
@@ -100,6 +102,7 @@ const CreateKeyDialog = ({
                   size="2"
                   disabled={isLoading}
                   type="submit"
+                  className="bg-accent text-foreground"
                   variant="primary">
                   {isLoading && (
                     <Spinner
diff --git a/packages/www/components/SigningKeysTable/DeleteKeysDialog.tsx b/packages/www/components/SigningKeysTable/DeleteKeysDialog.tsx
index 1dd2226601..7609762f85 100644
--- a/packages/www/components/SigningKeysTable/DeleteKeysDialog.tsx
+++ b/packages/www/components/SigningKeysTable/DeleteKeysDialog.tsx
@@ -53,7 +53,9 @@ const DeleteKeysDialog = ({
     <AlertDialog
       open={deleteDialogState.on}
       onOpenChange={deleteDialogState.onOff}>
-      <AlertDialogContent css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
+      <AlertDialogContent
+        className="bg-surface"
+        css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
         <AlertDialogTitle asChild>
           <Heading size="1">
             Delete {state.selectedRows.length} signing key
diff --git a/packages/www/components/StreamDetails/MultistreamTargetsTable/Toolbox.tsx b/packages/www/components/StreamDetails/MultistreamTargetsTable/Toolbox.tsx
index 1159d37256..d9e47dfe6d 100644
--- a/packages/www/components/StreamDetails/MultistreamTargetsTable/Toolbox.tsx
+++ b/packages/www/components/StreamDetails/MultistreamTargetsTable/Toolbox.tsx
@@ -39,7 +39,9 @@ const DisableDialog = ({
   const [saving, setSaving] = useState(false);
   return (
     <AlertDialog open={open} onOpenChange={() => setOpen(!open)}>
-      <AlertDialogContent css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
+      <AlertDialogContent
+        className="bg-surface"
+        css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
         <AlertDialogTitle asChild>
           <Heading size="1">Disable multistream target?</Heading>
         </AlertDialogTitle>
@@ -104,7 +106,9 @@ const DeleteDialog = ({
 
   return (
     <AlertDialog open={open} onOpenChange={setOpen}>
-      <AlertDialogContent css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
+      <AlertDialogContent
+        className="bg-surface"
+        css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
         <AlertDialogTitle asChild>
           <Heading size="1">Delete multistream target?</Heading>
         </AlertDialogTitle>
diff --git a/packages/www/components/StreamDetails/StreamChildrenHeadingBox.tsx b/packages/www/components/StreamDetails/StreamChildrenHeadingBox.tsx
index 621552c7b1..75256f5de6 100644
--- a/packages/www/components/StreamDetails/StreamChildrenHeadingBox.tsx
+++ b/packages/www/components/StreamDetails/StreamChildrenHeadingBox.tsx
@@ -79,12 +79,18 @@ const StreamChildrenHeadingBox = ({
       <Box css={{ position: "relative", top: "-8px" }}>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button size="2" css={{ display: "flex", ai: "center", mr: "$1" }}>
+            <Button
+              className="bg-accent"
+              size="2"
+              css={{ display: "flex", ai: "center", mr: "$1" }}>
               Actions
               <Box as={ChevronDownIcon} css={{ ml: "$1" }} />
             </Button>
           </DropdownMenuTrigger>
-          <DropdownMenuContent placeholder="dropdown-menu-content" align="end">
+          <DropdownMenuContent
+            className="bg-accent mt-2"
+            placeholder="dropdown-menu-content"
+            align="end">
             <DropdownMenuGroup>
               <Record
                 stream={stream}
diff --git a/packages/www/components/StreamDetails/StreamPlayerBox/index.tsx b/packages/www/components/StreamDetails/StreamPlayerBox/index.tsx
index c6cf41a45a..b656bc23ad 100644
--- a/packages/www/components/StreamDetails/StreamPlayerBox/index.tsx
+++ b/packages/www/components/StreamDetails/StreamPlayerBox/index.tsx
@@ -91,12 +91,12 @@ const StreamPlayerBox = ({
           mb: "$5",
         }}>
         <Box
+          className="bg-accent"
           css={{
             width: "100%",
             minHeight: 220,
             borderRadius: "$2",
             position: "relative",
-            bc: "$panel",
             border: "1px solid $neutral6",
             overflow: "hidden",
           }}>
@@ -128,7 +128,7 @@ const StreamPlayerBox = ({
           <AssetSharePopup
             playbackId={stream.playbackId}
             triggerNode={
-              <Button size="2">
+              <Button className="bg-accent" size="2">
                 <Box
                   as={Share2Icon}
                   css={{
@@ -152,6 +152,7 @@ const StreamPlayerBox = ({
             }>
             <Button
               size="2"
+              className="bg-accent"
               css={{
                 flex: 2,
               }}
@@ -174,9 +175,9 @@ const StreamPlayerBox = ({
         </Flex>
       </Box>
       <Box
+        className="bg-accent"
         css={{
           display: "flex",
-          backgroundColor: "$neutral3",
           borderRadius: "$1",
           fontWeight: 600,
           fontSize: "$2",
@@ -198,8 +199,7 @@ const StreamPlayerBox = ({
             alignItems: "center",
             justifyContent: "center",
             color: activeTab === "Browser" ? "$neutral1" : "inherit",
-            backgroundColor:
-              activeTab === "Browser" ? "$neutral12" : "transparent",
+            backgroundColor: activeTab === "Browser" ? "white" : "transparent",
           }}>
           <FaVideo />
           Browser
@@ -220,7 +220,7 @@ const StreamPlayerBox = ({
             justifyContent: "center",
             color: activeTab === "Streaming Software" ? "$neutral1" : "inherit",
             backgroundColor:
-              activeTab === "Streaming Software" ? "$neutral12" : "transparent",
+              activeTab === "Streaming Software" ? "white" : "transparent",
           }}>
           <FaKey />
           Streaming Software
diff --git a/packages/www/components/StreamDetails/Terminate.tsx b/packages/www/components/StreamDetails/Terminate.tsx
index ea067e01e8..1c64b22c51 100644
--- a/packages/www/components/StreamDetails/Terminate.tsx
+++ b/packages/www/components/StreamDetails/Terminate.tsx
@@ -37,7 +37,9 @@ const Terminate = ({ stream, invalidate, ...props }) => {
         Terminate
       </Box>
 
-      <AlertDialogContent css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
+      <AlertDialogContent
+        className="bg-surface"
+        css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
         <AlertDialogTitle asChild>
           <Heading size="1">Terminate stream?</Heading>
         </AlertDialogTitle>
diff --git a/packages/www/components/StreamSessionsTable/DeleteDialog.tsx b/packages/www/components/StreamSessionsTable/DeleteDialog.tsx
index d6fab664eb..e0388210ba 100644
--- a/packages/www/components/StreamSessionsTable/DeleteDialog.tsx
+++ b/packages/www/components/StreamSessionsTable/DeleteDialog.tsx
@@ -45,7 +45,9 @@ const DeleteDialog = ({ total, onUnselect, onDelete }) => {
         </Button>
       </Flex>
 
-      <AlertDialogContent css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
+      <AlertDialogContent
+        className="bg-surface"
+        css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
         <AlertDialogTitle asChild>
           <Heading size="1">
             Delete {total} session{total > 1 && "s"}?
diff --git a/packages/www/components/StreamsTable/CreateStreamDialog.tsx b/packages/www/components/StreamsTable/CreateStreamDialog.tsx
index b51b854cc7..fa14576cd1 100644
--- a/packages/www/components/StreamsTable/CreateStreamDialog.tsx
+++ b/packages/www/components/StreamsTable/CreateStreamDialog.tsx
@@ -29,7 +29,9 @@ const CreateStreamDialog = ({
 
   return (
     <AlertDialog open={isOpen} onOpenChange={onOpenChange}>
-      <AlertDialogContent css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
+      <AlertDialogContent
+        className="bg-surface"
+        css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
         <AlertDialogTitle asChild>
           <Heading size="1">Create a new livestream</Heading>
         </AlertDialogTitle>
@@ -85,6 +87,7 @@ const CreateStreamDialog = ({
             <Button
               css={{ display: "flex", ai: "center" }}
               type="submit"
+              className="bg-accent text-foreground"
               size="2"
               disabled={creating}
               variant="primary">
diff --git a/packages/www/components/StreamsTable/StreamFilter.tsx b/packages/www/components/StreamsTable/StreamFilter.tsx
index e7ae58ac11..96afd825ff 100644
--- a/packages/www/components/StreamsTable/StreamFilter.tsx
+++ b/packages/www/components/StreamsTable/StreamFilter.tsx
@@ -237,11 +237,11 @@ const StreamFilter = ({ onDone, activeFilters }) => {
                 fontSize: "$2",
                 borderRadius: "20px",
                 backgroundColor: "transparent",
-                borderColor: isActive ? "$primary8" : "$neutral9",
-                color: isActive ? "$primary9" : "$neutral9",
+                borderColor: isActive ? "$white" : "$neutral9",
+                color: isActive ? "$white" : "$neutral9",
                 "&:hover": {
-                  borderColor: "$primary8",
-                  color: "$primary9",
+                  borderColor: "$white",
+                  color: "$white",
                   transition: "0.3s",
                 },
                 "&:focus": {
@@ -286,9 +286,9 @@ const StreamFilter = ({ onDone, activeFilters }) => {
                     : value)}
             </Flex>
             <DropdownMenuContent
+              className="bg-background border"
               placeholder={"more options"}
               css={{
-                border: "1px solid $colors$neutral6",
                 p: "$2",
                 width: "15rem",
                 mt: "$2",
@@ -308,6 +308,7 @@ const StreamFilter = ({ onDone, activeFilters }) => {
                     mt: "$2",
                   }}>
                   <Button
+                    className="bg-accent"
                     type="submit"
                     css={{
                       fontWeight: 500,
diff --git a/packages/www/components/Table/components/TableEmptyState.tsx b/packages/www/components/Table/components/TableEmptyState.tsx
index c280397a4e..c4baf3799c 100644
--- a/packages/www/components/Table/components/TableEmptyState.tsx
+++ b/packages/www/components/Table/components/TableEmptyState.tsx
@@ -46,6 +46,7 @@ const TableEmptyState = ({
     {actionToggleState && (
       <Flex align="center">
         <Button
+          className="bg-accent text-foreground"
           onClick={actionToggleState.onOn}
           css={{ alignSelf: "flex-start", mr: "$2" }}
           size="2"
diff --git a/packages/www/components/Table/components/TableStateDeleteDialog.tsx b/packages/www/components/Table/components/TableStateDeleteDialog.tsx
index 26ee0ff235..26ac5c2042 100644
--- a/packages/www/components/Table/components/TableStateDeleteDialog.tsx
+++ b/packages/www/components/Table/components/TableStateDeleteDialog.tsx
@@ -65,7 +65,9 @@ const TableStateDeleteDialog = ({
     <AlertDialog
       open={dialogToggleState.on}
       onOpenChange={dialogToggleState.onOff}>
-      <AlertDialogContent css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
+      <AlertDialogContent
+        className="bg-surface"
+        css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
         <AlertDialogTitle asChild>
           <Heading size="1">
             Delete {state.selectedRows.length} {name}?
diff --git a/packages/www/components/Table/filters/index.tsx b/packages/www/components/Table/filters/index.tsx
index 8e76c45450..6ef9198898 100644
--- a/packages/www/components/Table/filters/index.tsx
+++ b/packages/www/components/Table/filters/index.tsx
@@ -108,7 +108,10 @@ const TableFilter = ({ items, onDone }: TableFilterProps) => {
   return (
     <DropdownMenu.Root open={isOpen} onOpenChange={handleOpenChange}>
       <DropdownMenu.Trigger asChild>
-        <Button css={{ display: "flex", ai: "center" }} size="2">
+        <Button
+          className="bg-accent text-foreground"
+          css={{ display: "flex", ai: "center" }}
+          size="2">
           <Flex css={{ mr: "$2" }}>
             <FilterIcon />
           </Flex>
@@ -129,35 +132,41 @@ const TableFilter = ({ items, onDone }: TableFilterProps) => {
           )}
         </Button>
       </DropdownMenu.Trigger>
-      <DropdownMenu.Content align="end" sideOffset={5}>
+      <DropdownMenu.Content className="bg-accent" align="end" sideOffset={5}>
         <Box
           css={{
-            backgroundColor: "$loContrast",
             width: "284px",
             maxWidth: "284px",
             display: "flex",
             flexDirection: "column",
-            border: "1px solid $colors$neutral5",
             marginRight: "6px",
             borderRadius: "4px",
             overflow: "hidden",
             boxShadow: "0px 5px 15px -5px hsl(206deg 22% 7% / 15%)",
           }}>
           <Flex
+            className="bg-accent border-b border-2 "
             css={{
               width: "100%",
               justifyContent: "space-between",
               alignItems: "center",
               padding: "6px 7px",
-              background: "$panel",
             }}>
-            <Button onClick={handleClear} size="1" variant="neutral">
+            <Button
+              className="bg-accent text-foreground"
+              onClick={handleClear}
+              size="1"
+              variant="neutral">
               Clear
             </Button>
             <Text size="2" css={{ margin: "0px" }}>
               Filters
             </Text>
-            <Button size="1" variant="primary" onClick={handleDone}>
+            <Button
+              className="bg-accent text-foreground"
+              size="1"
+              variant="primary"
+              onClick={handleDone}>
               Done
             </Button>
           </Flex>
diff --git a/packages/www/components/Table/index.tsx b/packages/www/components/Table/index.tsx
index a1174b5490..ecb119e7e9 100644
--- a/packages/www/components/Table/index.tsx
+++ b/packages/www/components/Table/index.tsx
@@ -311,8 +311,6 @@ export const DataTableComponent = <T extends Record<string, unknown>>({
         justify="between"
         css={{
           mb: "$3",
-          borderBottom: "1px solid",
-          borderColor: border ? "$neutral5" : "transparent",
           pb: border ? "$2" : 0,
         }}>
         {/* Header title */}
@@ -374,6 +372,7 @@ export const DataTableComponent = <T extends Record<string, unknown>>({
               )}
               {createAction && (
                 <Button
+                  className="bg-accent"
                   variant="neutral"
                   size="2"
                   // @ts-ignore
diff --git a/packages/www/components/TypeFilterCard/index.tsx b/packages/www/components/TypeFilterCard/index.tsx
index 97699c1f9b..4d1f4f224f 100644
--- a/packages/www/components/TypeFilterCard/index.tsx
+++ b/packages/www/components/TypeFilterCard/index.tsx
@@ -19,21 +19,21 @@ export default function TypeFilterCard({
     paddingBottom: "$2",
     width: "20em",
     border: "1px solid",
-    borderColor: isActive ? "$primary8" : "$neutral8",
+    borderColor: isActive ? "$white" : "$neutral8",
     borderRadius: "$3",
-    color: isActive ? "$primary8" : "$neutral8",
+    color: isActive ? "$white" : "$neutral8",
     cursor: "default",
     "&:hover": {
       border: "1px solid",
-      borderColor: "$primary8",
-      color: "$primary8",
+      borderColor: "$white",
+      color: "$white",
       transition: "0.3s",
     },
     "& h4": {
-      color: isActive ? "$primary8" : "$primary12",
+      color: isActive ? "$white" : "$primary12",
     },
     "&:hover h4": {
-      color: "$primary8",
+      color: "$white",
       transition: "0.3s",
     },
   });
diff --git a/packages/www/components/WebhookDialogs/CreateEditDialog.tsx b/packages/www/components/WebhookDialogs/CreateEditDialog.tsx
index 4017c9f40a..3c6414db42 100644
--- a/packages/www/components/WebhookDialogs/CreateEditDialog.tsx
+++ b/packages/www/components/WebhookDialogs/CreateEditDialog.tsx
@@ -95,6 +95,7 @@ const CreateEditDialog = ({
     <AlertDialog open={isOpen} onOpenChange={onOpenChange}>
       {button}
       <AlertDialogContent
+        className="bg-surface"
         css={{ width: 450, maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
         <AlertDialogTitle asChild>
           <Heading size="1">
@@ -222,6 +223,7 @@ const CreateEditDialog = ({
 
             <Flex
               align="center"
+              className="bg-surface"
               direction="column"
               justify={events.length > 0 ? "start" : "center"}
               css={{
@@ -232,7 +234,6 @@ const CreateEditDialog = ({
                 overflowX: "hidden",
                 overflowY: "auto",
                 border: "1px solid $colors$neutral7",
-                backgroundColor: "$neutral2",
                 zIndex: 1,
               }}>
               {events.length > 0 ? (
@@ -280,6 +281,7 @@ const CreateEditDialog = ({
                 css={{ display: "flex", ai: "center" }}
                 type="submit"
                 size="2"
+                className="bg-accent text-foreground"
                 disabled={saving}
                 variant="primary">
                 {saving && (
diff --git a/packages/www/components/WebhookDialogs/DeleteDialog.tsx b/packages/www/components/WebhookDialogs/DeleteDialog.tsx
index be23481975..3bf55cff63 100644
--- a/packages/www/components/WebhookDialogs/DeleteDialog.tsx
+++ b/packages/www/components/WebhookDialogs/DeleteDialog.tsx
@@ -41,7 +41,9 @@ const DeleteDialog = ({
 
   return (
     <AlertDialog open={deleteDialogOpen}>
-      <AlertDialogContent css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
+      <AlertDialogContent
+        className="bg-surface"
+        css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
         <AlertDialogTitle asChild>
           <Heading size="1">Delete Webhook</Heading>
         </AlertDialogTitle>
diff --git a/packages/www/css/tailwind.css b/packages/www/css/tailwind.css
index fd0529a1ef..7eee375513 100644
--- a/packages/www/css/tailwind.css
+++ b/packages/www/css/tailwind.css
@@ -4,23 +4,38 @@
 
 @layer base {
   :root {
-    --color-border: 240 5% 80%;
-    --color-background: 0 0% 98%;
-    --color-foreground: 0 0% 10%;
-    --color-muted: 249 4% 44%;
-    --color-surface: 240 4% 95%;
-    --color-accent: 240 4% 30%;
+    --border: 240 5% 90%;
+    --background: 0 0% 98%;
+    --foreground: 0 0% 10%;
+    --muted: 249 4% 44%;
+    --surface: 240 4% 97%;
+    --accent: 240 4% 94%;
   }
 
   /* 
   The class name here is temporory. Since old class names are still in use. We can replace this with .dark once we are ready to switch to the new class names.
   */
   .dark-theme-green {
-    --color-border: 240 5% 16%;
-    --color-background: 0 0% 9%;
-    --color-foreground: 0 0% 100%;
-    --color-muted: 249 4 64;
-    --color-surface: 240 4% 9%;
-    --color-accent: 240 4% 14;
+    --border: 240 5% 15%;
+    --background: 0 0% 7%;
+    --foreground: 0 0% 100%;
+    --muted: 249 4 64;
+    --surface: 240 4% 8%;
+    --accent: 240 4% 14;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border !important;
+  }
+  html {
+    @apply scroll-smooth;
+  }
+  body {
+    @apply bg-background text-foreground !important;
+    /* font-feature-settings: "rlig" 1, "calt" 1; */
+    font-synthesis-weight: none;
+    text-rendering: optimizeLegibility;
   }
 }
diff --git a/packages/www/layouts/dashboard.tsx b/packages/www/layouts/dashboard.tsx
index 89a02078fa..ceb5506559 100644
--- a/packages/www/layouts/dashboard.tsx
+++ b/packages/www/layouts/dashboard.tsx
@@ -85,16 +85,15 @@ function DashboardLayout({
           </Head>
           {!isExport() && <NextSeo {...seo} />}
           <Sidebar id={id} />
-          <Box css={{ pl: 270, width: "100%" }}>
+          <div className="ml-[18rem] bg-surface rounded-md h-[96vh] m-6 border border-border">
             <Header breadcrumbs={breadcrumbs} />
             <Box
               css={{
                 margin: "0 auto",
-                maxWidth: "1520px",
               }}>
               {children}
             </Box>
-          </Box>
+          </div>
           <FileUpload />
         </Elements>
       </Box>
diff --git a/packages/www/lib/ui.ts b/packages/www/lib/ui.ts
deleted file mode 100644
index 365058cebd..0000000000
--- a/packages/www/lib/ui.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
diff --git a/packages/www/package.json b/packages/www/package.json
index 4bd29964a5..68e6c6babc 100644
--- a/packages/www/package.json
+++ b/packages/www/package.json
@@ -32,6 +32,7 @@
     "@radix-ui/react-accordion": "^0.1.7-rc.7",
     "@radix-ui/react-collapsible": "^0.1.6",
     "@radix-ui/react-icons": "^1.1.1",
+    "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^0.0.13",
     "@radix-ui/themes": "^1.1.2",
     "@segment/snippet": "^4.9.0",
diff --git a/packages/www/pages/projects/[projectId]/settings.tsx b/packages/www/pages/projects/[projectId]/settings.tsx
index e3ec9dd843..386feee446 100644
--- a/packages/www/pages/projects/[projectId]/settings.tsx
+++ b/packages/www/pages/projects/[projectId]/settings.tsx
@@ -119,12 +119,11 @@ const Settings = () => {
           <Button
             onClick={handleSubmit}
             disabled={isLoading || !projectName}
+            className="bg-accent text-foreground"
             css={{
               p: "$4",
               fontSize: "$2",
               mt: "$3",
-              backgroundColor: "$hiContrast",
-              color: "$loContrast",
             }}>
             {isLoading && (
               <Spinner
diff --git a/packages/www/pages/settings/projects.tsx b/packages/www/pages/settings/projects.tsx
index d91ba4b39d..76c013a374 100644
--- a/packages/www/pages/settings/projects.tsx
+++ b/packages/www/pages/settings/projects.tsx
@@ -86,6 +86,7 @@ const WorkspaceProjects = () => {
               </Text>
             </Flex>
             <Button
+              className="bg-accent"
               onClick={() => setShowCreateProjectAlert(true)}
               css={{
                 p: "$3",
diff --git a/packages/www/tailwind.config.js b/packages/www/tailwind.config.js
index 8c0d3349a0..590da65261 100644
--- a/packages/www/tailwind.config.js
+++ b/packages/www/tailwind.config.js
@@ -4,28 +4,29 @@ module.exports = {
   content: [
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./layouts/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     extend: {
       colors: {
         border: {
-          DEFAULT: "hsl(var(--color-border))",
+          DEFAULT: "hsl(var(--border))",
         },
         background: {
-          DEFAULT: "hsl(var(--color-background))",
+          DEFAULT: "hsl(var(--background))",
         },
         foreground: {
-          DEFAULT: "hsl(var(--color-foreground))",
+          DEFAULT: "hsl(var(--foreground))",
         },
         muted: {
-          DEFAULT: "hsl(var(--color-muted))",
+          DEFAULT: "hsl(var(--muted))",
         },
         surface: {
-          DEFAULT: "hsl(var(--color-surface))",
+          DEFAULT: "hsl(var(--surface))",
         },
         accent: {
-          DEFAULT: "hsl(var(--color-accent))",
+          DEFAULT: "hsl(var(--accent))",
         },
       },
     },
diff --git a/yarn.lock b/yarn.lock
index 3c6e593864..31bd3edc3e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4585,6 +4585,11 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-compose-refs@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz#656432461fc8283d7b591dcf0d79152fae9ecc74"
+  integrity sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==
+
 "@radix-ui/react-context-menu@2.1.4", "@radix-ui/react-context-menu@^2.1.4":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-context-menu/-/react-context-menu-2.1.4.tgz#250420d259d3cebe026b7658414c516a1204de3f"
@@ -5072,6 +5077,13 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-compose-refs" "1.0.1"
 
+"@radix-ui/react-slot@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.1.0.tgz#7c5e48c36ef5496d97b08f1357bb26ed7c714b84"
+  integrity sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.0"
+
 "@radix-ui/react-switch@1.0.3", "@radix-ui/react-switch@^1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-switch/-/react-switch-1.0.3.tgz#6119f16656a9eafb4424c600fdb36efa5ec5837e"
@@ -22183,11 +22195,6 @@ socks@^2.7.1:
     ip-address "^9.0.5"
     smart-buffer "^4.2.0"
 
-sonner@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/sonner/-/sonner-1.5.0.tgz#af359f817063318415326b33aab54c5d17c747b7"
-  integrity sha512-FBjhG/gnnbN6FY0jaNnqZOMmB73R+5IiyYAw8yBj7L54ER7HB3fOSE5OFiQiE2iXWxeXKvg6fIP4LtVppHEdJA==
-
 sort-keys@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/sort-keys/-/sort-keys-2.0.0.tgz"