diff --git a/packages/widget/src/components/atoms/button/styles.css.ts b/packages/widget/src/components/atoms/button/styles.css.ts
index e5a4e3b3..d718b467 100644
--- a/packages/widget/src/components/atoms/button/styles.css.ts
+++ b/packages/widget/src/components/atoms/button/styles.css.ts
@@ -147,6 +147,12 @@ export const buttonStyle = recipe({
     },
     size: {
       regular: atoms({ minHeight: "buttonMinHeight" }),
+      compact: [
+        atoms({ minHeight: "10" }),
+        {
+          borderRadius: vars.borderRadius.baseContract.lg,
+        },
+      ],
       small: [
         style({
           padding: "9.8px 13.1px",
diff --git a/packages/widget/src/components/atoms/divider/styles.css.ts b/packages/widget/src/components/atoms/divider/styles.css.ts
index 8750164f..1da03a88 100644
--- a/packages/widget/src/components/atoms/divider/styles.css.ts
+++ b/packages/widget/src/components/atoms/divider/styles.css.ts
@@ -1,6 +1,5 @@
 import { recipe } from "@vanilla-extract/recipes";
 import { atoms } from "../../../styles/theme/atoms.css";
-import { utilaPalette } from "../../../styles/theme/variant-overrides/palettes";
 
 export const divider = recipe({
   base: atoms({
@@ -9,8 +8,8 @@ export const divider = recipe({
   }),
   variants: {
     variant: {
-      default: atoms({ background: "backgroundMuted" }),
-      utila: { background: utilaPalette.tabPageDivider },
+      default: atoms({ background: "tabBorder" }),
+      utila: atoms({ background: "tabBorder" }),
     },
   },
   defaultVariants: {
diff --git a/packages/widget/src/components/atoms/max-button/styles.css.ts b/packages/widget/src/components/atoms/max-button/styles.css.ts
index 1c044c3f..30eb950c 100644
--- a/packages/widget/src/components/atoms/max-button/styles.css.ts
+++ b/packages/widget/src/components/atoms/max-button/styles.css.ts
@@ -1,6 +1,5 @@
 import { recipe } from "@vanilla-extract/recipes";
 import { atoms } from "../../../styles/theme/atoms.css";
-import { utilaPalette } from "../../../styles/theme/variant-overrides/palettes";
 
 export const container = recipe({
   base: [
@@ -12,10 +11,13 @@ export const container = recipe({
   ],
   variants: {
     variant: {
-      default: atoms({ background: "background", borderRadius: "xl" }),
+      default: atoms({
+        background: "smallLightButtonBackground",
+        borderRadius: "base",
+      }),
       utila: [
         { borderRadius: "4px" },
-        { background: utilaPalette.maxButtonBackground },
+        atoms({ background: "smallLightButtonBackground" }),
       ],
     },
   },
@@ -27,11 +29,12 @@ export const container = recipe({
 export const text = recipe({
   variants: {
     variant: {
-      default: atoms({ color: "text", fontWeight: "semibold" }),
+      default: atoms({
+        color: "smallLightButtonColor",
+        fontWeight: "normal",
+      }),
       utila: [
-        {
-          color: utilaPalette.maxButtonText,
-        },
+        atoms({ color: "smallLightButtonColor" }),
         atoms({
           fontWeight: "normal",
         }),
diff --git a/packages/widget/src/components/atoms/select-modal/styles.css.ts b/packages/widget/src/components/atoms/select-modal/styles.css.ts
index 4b648868..9d26c0fb 100644
--- a/packages/widget/src/components/atoms/select-modal/styles.css.ts
+++ b/packages/widget/src/components/atoms/select-modal/styles.css.ts
@@ -2,7 +2,6 @@ import { keyframes, style } from "@vanilla-extract/css";
 import { recipe } from "@vanilla-extract/recipes";
 import { atoms } from "../../../styles/theme/atoms.css";
 import { vars } from "../../../styles/theme/contract.css";
-import { utilaPalette } from "../../../styles/theme/variant-overrides/palettes";
 import { breakpoints, minMediaQuery } from "../../../styles/tokens/breakpoints";
 
 const slideUp = keyframes({
@@ -88,14 +87,12 @@ export const selectModalGroupLabel = style({
 
 export const selectedListItem = recipe({
   base: [
-    atoms({
-      background: "tokenSelectHoverBackground",
-    }),
     {
+      background: `color-mix(in srgb, ${vars.color.accent} 8%, transparent)`,
       border: `1px solid ${vars.color.accent}`,
       selectors: {
         "&:hover": {
-          background: vars.color.tokenSelectHoverBackground,
+          background: `color-mix(in srgb, ${vars.color.accent} 8%, transparent)`,
         },
       },
     },
@@ -103,15 +100,7 @@ export const selectedListItem = recipe({
   variants: {
     variant: {
       default: {},
-      utila: {
-        background: `${utilaPalette.primaryBlue}14`,
-        border: `1px solid ${utilaPalette.primaryBlue}`,
-        selectors: {
-          "&:hover": {
-            background: `${utilaPalette.primaryBlue}14`,
-          },
-        },
-      },
+      utila: {},
     },
   },
   defaultVariants: {
diff --git a/packages/widget/src/components/molecules/chain-modal/index.tsx b/packages/widget/src/components/molecules/chain-modal/index.tsx
index 8e8d703d..fa277f83 100644
--- a/packages/widget/src/components/molecules/chain-modal/index.tsx
+++ b/packages/widget/src/components/molecules/chain-modal/index.tsx
@@ -34,7 +34,10 @@ export const ChainModal = () => {
               display="flex"
               justifyContent="space-between"
               alignItems="center"
-              className={combineRecipeWithVariant({ variant, rec: container })}
+              className={combineRecipeWithVariant({
+                variant,
+                rec: container,
+              })}
               onClick={() => {
                 trackEvent("chainModalOpened");
                 openChainModal();
diff --git a/packages/widget/src/components/molecules/estimated-reward-amounts/index.tsx b/packages/widget/src/components/molecules/estimated-reward-amounts/index.tsx
index 7d494eb5..1ea31e72 100644
--- a/packages/widget/src/components/molecules/estimated-reward-amounts/index.tsx
+++ b/packages/widget/src/components/molecules/estimated-reward-amounts/index.tsx
@@ -16,11 +16,11 @@ export const EstimatedRewardAmounts = ({
   earnYearly,
   earnMonthly,
 }: EstimatedRewardAmountsProps) => {
-  const { variant } = useSettings();
+  const { dashboardVariant, variant } = useSettings();
 
-  if (variant === "utila" || variant === "porto") {
+  if (dashboardVariant || variant === "utila" || variant === "porto") {
     return (
-      <UtilaEarnYearlyOrMonthly
+      <CompactEarnYearlyOrMonthly
         earnMonthly={earnMonthly}
         earnYearly={earnYearly}
       />
@@ -111,7 +111,7 @@ const DefaultEarnYearlyOrMonthly = ({
   );
 };
 
-const UtilaEarnYearlyOrMonthly = ({
+const CompactEarnYearlyOrMonthly = ({
   earnMonthly,
   earnYearly,
 }: EstimatedRewardAmountsProps) => {
diff --git a/packages/widget/src/components/molecules/summary-item/index.css.ts b/packages/widget/src/components/molecules/summary-item/index.css.ts
index c5bb3764..ccd4a82c 100644
--- a/packages/widget/src/components/molecules/summary-item/index.css.ts
+++ b/packages/widget/src/components/molecules/summary-item/index.css.ts
@@ -1,11 +1,7 @@
 import { type RecipeVariants, recipe } from "@vanilla-extract/recipes";
 import { atoms } from "../../../styles/theme/atoms.css";
 import { vars } from "../../../styles/theme/contract.css";
-import {
-  fineryLightPalette,
-  portoPalette,
-  utilaPalette,
-} from "../../../styles/theme/variant-overrides/palettes";
+import { fineryLightPalette } from "../../../styles/theme/variant-overrides/palettes";
 
 export const summaryContainer = recipe({
   base: atoms({
@@ -15,11 +11,9 @@ export const summaryContainer = recipe({
   }),
   variants: {
     variant: {
-      default: [
-        atoms({
-          gap: "8",
-        }),
-      ],
+      default: {
+        gap: "24px",
+      },
       utila: {
         gap: "24px",
       },
@@ -53,18 +47,20 @@ export const summaryItem = recipe({
       default: [
         atoms({
           background: "summaryItemBackground",
+          borderColor: "tabBorder",
         }),
         {
-          boxShadow: "0px 15px 30px 0px #0000000D",
+          borderRadius: "8px",
+          borderWidth: "1px",
+          borderStyle: "solid",
         },
       ],
       utila: [
         atoms({
           background: "summaryItemBackground",
-          borderColor: "transparent",
+          borderColor: "tabBorder",
         }),
         {
-          borderColor: utilaPalette.border,
           borderRadius: "8px",
           borderWidth: "1px",
           borderStyle: "solid",
@@ -99,9 +95,14 @@ export const summaryItem = recipe({
 export const summaryNumber = recipe({
   variants: {
     variant: {
-      default: {
-        fontSize: "28px",
-      },
+      default: [
+        atoms({
+          fontWeight: "medium",
+        }),
+        {
+          fontSize: "18px",
+        },
+      ],
       utila: [
         atoms({
           fontWeight: "medium",
@@ -132,8 +133,8 @@ export const summaryLabelContainer = recipe({
   variants: {
     variant: {
       default: {
-        borderRadius: "9px",
-        padding: "12px 10px",
+        borderRadius: "4px",
+        padding: "2px 6px",
       },
       utila: {
         borderRadius: "4px",
@@ -150,16 +151,16 @@ export const summaryLabelContainer = recipe({
     },
     type: {
       staked: {
-        background: "#F0EDFA",
-        color: "#5A36C0",
+        background: vars.color.summaryLabelStakedBackground,
+        color: vars.color.summaryLabelStakedColor,
       },
       apy: {
-        background: "#EDF1F5",
-        color: "#0059AB",
+        background: vars.color.summaryLabelApyBackground,
+        color: vars.color.summaryLabelApyColor,
       },
       available: {
-        background: "#EDF6F3",
-        color: "#00794E",
+        background: vars.color.summaryLabelAvailableBackground,
+        color: vars.color.summaryLabelAvailableColor,
       },
     },
   },
@@ -170,8 +171,8 @@ export const summaryLabelContainer = recipe({
         type: "staked",
       },
       style: {
-        background: "#F6F0FF",
-        color: "#5A36C0",
+        background: vars.color.summaryLabelStakedBackground,
+        color: vars.color.summaryLabelStakedColor,
       },
     },
     {
@@ -180,8 +181,8 @@ export const summaryLabelContainer = recipe({
         type: "apy",
       },
       style: {
-        background: "#F7ECFA",
-        color: "#CA6CBD",
+        background: vars.color.summaryLabelApyBackground,
+        color: vars.color.summaryLabelApyColor,
       },
     },
     {
@@ -190,8 +191,8 @@ export const summaryLabelContainer = recipe({
         type: "available",
       },
       style: {
-        background: "#EEF7F3",
-        color: "#327C5F",
+        background: vars.color.summaryLabelAvailableBackground,
+        color: vars.color.summaryLabelAvailableColor,
       },
     },
     {
@@ -231,8 +232,8 @@ export const summaryLabelContainer = recipe({
       },
       style: [
         {
-          color: "white",
-          background: portoPalette.greyThree,
+          color: vars.color.summaryLabelStakedColor,
+          background: vars.color.summaryLabelStakedBackground,
         },
       ],
     },
@@ -243,8 +244,8 @@ export const summaryLabelContainer = recipe({
       },
       style: [
         {
-          color: "white",
-          background: portoPalette.greyThree,
+          color: vars.color.summaryLabelApyColor,
+          background: vars.color.summaryLabelApyBackground,
         },
       ],
     },
@@ -255,8 +256,8 @@ export const summaryLabelContainer = recipe({
       },
       style: [
         {
-          color: "white",
-          background: portoPalette.greyThree,
+          color: vars.color.summaryLabelAvailableColor,
+          background: vars.color.summaryLabelAvailableBackground,
         },
       ],
     },
@@ -266,7 +267,10 @@ export const summaryLabelContainer = recipe({
 export const summaryLabel = recipe({
   variants: {
     variant: {
-      default: {},
+      default: {
+        color: "inherit",
+        fontSize: "12px",
+      },
       utila: {
         color: "inherit",
         fontSize: "12px",
diff --git a/packages/widget/src/domain/types/yields.ts b/packages/widget/src/domain/types/yields.ts
index 52855af7..d34df06d 100644
--- a/packages/widget/src/domain/types/yields.ts
+++ b/packages/widget/src/domain/types/yields.ts
@@ -412,14 +412,14 @@ export const getYieldTypeLabels = (
 };
 
 const yieldTypesSortRank: { [Key in ExtendedYieldType]: number } = {
-  staking: 1,
-  native_staking: 2,
-  pooled_staking: 3,
-  restaking: 4,
-  lending: 5,
-  vault: 6,
-  fixed_yield: 7,
-  real_world_asset: 8,
+  real_world_asset: 1,
+  staking: 2,
+  native_staking: 3,
+  pooled_staking: 4,
+  restaking: 5,
+  lending: 6,
+  vault: 7,
+  fixed_yield: 8,
   liquidity_pool: 9,
   concentrated_liquidity_pool: 10,
 };
diff --git a/packages/widget/src/main.tsx b/packages/widget/src/main.tsx
index 34b7287f..264da889 100644
--- a/packages/widget/src/main.tsx
+++ b/packages/widget/src/main.tsx
@@ -1,5 +1,6 @@
 import ReactDOM from "react-dom/client";
 import { SKApp, type SKAppProps } from "./App";
+import type { VariantProps } from "./providers/settings/types";
 import {
   rootClassName,
   toggleThemeButtonClassName,
@@ -9,17 +10,22 @@ import "./standalone.css";
 import { useLayoutEffect, useState } from "react";
 import { darkTheme, lightTheme } from "./styles/theme/themes";
 
-const variant: SKAppProps["variant"] =
+type StandaloneVariant = Exclude<VariantProps["variant"], "zerion">;
+
+const variant: StandaloneVariant =
   import.meta.env.VITE_APP_VARIANT ?? "default";
 
 const dashboardVariant: SKAppProps["dashboardVariant"] =
   import.meta.env.VITE_FORCE_DASHBOARD === "true";
 
 const StandaloneApp = () => {
-  const [themeVariant, setThemeVariant] = useState<"dark" | "light">("light");
+  const [themeVariant, setThemeVariant] = useState<"dark" | "light">("dark");
 
   useLayoutEffect(() => {
-    document.body.className = rootClassName({ theme: themeVariant, variant });
+    document.body.className = rootClassName({
+      theme: themeVariant,
+      variant,
+    });
   }, [themeVariant]);
 
   const toggleTheme = () =>
diff --git a/packages/widget/src/pages-dashboard/common/components/styles.css.ts b/packages/widget/src/pages-dashboard/common/components/styles.css.ts
index 81898f29..bf83fa85 100644
--- a/packages/widget/src/pages-dashboard/common/components/styles.css.ts
+++ b/packages/widget/src/pages-dashboard/common/components/styles.css.ts
@@ -1,6 +1,5 @@
 import { recipe } from "@vanilla-extract/recipes";
 import { atoms } from "../../../styles/theme/atoms.css";
-import { utilaPalette } from "../../../styles/theme/variant-overrides/palettes";
 
 export const wrapper = recipe({
   base: [
@@ -18,7 +17,7 @@ export const wrapper = recipe({
   variants: {
     variant: {
       default: {
-        borderRadius: "30px",
+        borderRadius: "14px",
       },
       utila: {
         borderRadius: "14px",
@@ -80,13 +79,13 @@ export const tabPageDivider = recipe({
     variant: {
       default: [
         atoms({
-          background: "backgroundMuted",
+          background: "tabBorder",
         }),
       ],
       utila: [
-        {
-          background: utilaPalette.tabPageDivider,
-        },
+        atoms({
+          background: "tabBorder",
+        }),
       ],
     },
   },
diff --git a/packages/widget/src/pages-dashboard/common/components/tabs/styles.css.ts b/packages/widget/src/pages-dashboard/common/components/tabs/styles.css.ts
index e6a0e68a..7be421e5 100644
--- a/packages/widget/src/pages-dashboard/common/components/tabs/styles.css.ts
+++ b/packages/widget/src/pages-dashboard/common/components/tabs/styles.css.ts
@@ -1,10 +1,7 @@
 import { style } from "@vanilla-extract/css";
 import { recipe } from "@vanilla-extract/recipes";
 import { atoms } from "../../../../styles/theme/atoms.css";
-import {
-  portoPalette,
-  utilaPalette,
-} from "../../../../styles/theme/variant-overrides/palettes";
+import { vars } from "../../../../styles/theme/contract.css";
 
 export const divider = style({
   position: "absolute",
@@ -36,7 +33,7 @@ export const tab = recipe({
     variant: {
       default: [
         {
-          borderRadius: "9999px",
+          borderRadius: "8px",
           padding: "8px 16px",
         },
       ],
@@ -70,7 +67,7 @@ export const tab = recipe({
         state: "active",
         variant: "utila",
       },
-      style: [{ background: utilaPalette.greyOne }],
+      style: [atoms({ background: "stakeSectionBackground" })],
     },
     {
       variants: {
@@ -104,9 +101,7 @@ export const tabContainer = recipe({
   },
   variants: {
     variant: {
-      default: {
-        minWidth: "74px",
-      },
+      default: {},
       utila: {},
       porto: {},
       finery: {
@@ -131,7 +126,12 @@ export const tabText = recipe({
       selected: {},
     },
     variant: {
-      default: {},
+      default: [
+        atoms({ fontWeight: "semibold" }),
+        {
+          fontSize: "14px",
+        },
+      ],
       utila: [
         atoms({ fontWeight: "semibold" }),
         {
@@ -139,9 +139,8 @@ export const tabText = recipe({
         },
       ],
       porto: [
-        atoms({ fontWeight: "semibold" }),
+        atoms({ color: "textMuted", fontWeight: "semibold" }),
         {
-          color: portoPalette.greyFour,
           fontSize: "14px",
         },
       ],
@@ -154,7 +153,7 @@ export const tabText = recipe({
         state: "selected",
       },
       style: {
-        color: portoPalette.greyOne,
+        color: vars.color.background,
       },
     },
   ],
@@ -177,7 +176,9 @@ export const tabsContainer = recipe({
     variant: {
       default: {
         gap: "4px",
-        padding: "16px 24px",
+        padding: "8px",
+        paddingLeft: "24px",
+        paddingRight: "24px",
       },
       utila: {
         gap: "4px",
diff --git a/packages/widget/src/pages-dashboard/overview/earn-page/index.tsx b/packages/widget/src/pages-dashboard/overview/earn-page/index.tsx
index aa803d9d..baf87f55 100644
--- a/packages/widget/src/pages-dashboard/overview/earn-page/index.tsx
+++ b/packages/widget/src/pages-dashboard/overview/earn-page/index.tsx
@@ -31,7 +31,7 @@ const EarnKycGateSection = () => {
 };
 
 export const EarnPageContent = () => {
-  const { variant } = useSettings();
+  const { dashboardVariant, variant } = useSettings();
   const { cta } = useEarnPageContext();
 
   return (
@@ -55,7 +55,9 @@ export const EarnPageContent = () => {
         <ExtraArgsSelection />
       </Box>
 
-      {(variant === "utila" || variant === "porto") && <Divider />}
+      {(dashboardVariant || variant === "utila" || variant === "porto") && (
+        <Divider />
+      )}
 
       <Box>
         <Footer />
diff --git a/packages/widget/src/pages-dashboard/overview/earn-page/styles.css.ts b/packages/widget/src/pages-dashboard/overview/earn-page/styles.css.ts
index 445e2425..2baeb8c1 100644
--- a/packages/widget/src/pages-dashboard/overview/earn-page/styles.css.ts
+++ b/packages/widget/src/pages-dashboard/overview/earn-page/styles.css.ts
@@ -1,10 +1,6 @@
 import { style } from "@vanilla-extract/css";
 import { recipe } from "@vanilla-extract/recipes";
 import { atoms } from "../../../styles/theme/atoms.css";
-import {
-  portoPalette,
-  utilaPalette,
-} from "../../../styles/theme/variant-overrides/palettes";
 
 export const container = style([
   atoms({
@@ -21,9 +17,9 @@ export const changeButton = recipe({
   base: [{ cursor: "pointer" }],
   variants: {
     variant: {
-      default: {},
-      utila: { color: utilaPalette.primaryBlue },
-      porto: { color: portoPalette.primaryPurple },
+      default: atoms({ color: "accent" }),
+      utila: atoms({ color: "accent" }),
+      porto: atoms({ color: "accent" }),
       finery: {},
     },
   },
@@ -35,7 +31,7 @@ export const changeButton = recipe({
 export const selectTokenTitleContainer = recipe({
   variants: {
     variant: {
-      default: {},
+      default: atoms({ marginBottom: "4" }),
       utila: atoms({ marginBottom: "4" }),
       porto: atoms({ marginBottom: "4" }),
     },
diff --git a/packages/widget/src/pages-dashboard/overview/positions/styles.css.ts b/packages/widget/src/pages-dashboard/overview/positions/styles.css.ts
index 00569b15..6071aa63 100644
--- a/packages/widget/src/pages-dashboard/overview/positions/styles.css.ts
+++ b/packages/widget/src/pages-dashboard/overview/positions/styles.css.ts
@@ -41,9 +41,9 @@ export const sectionTitle = style({
 export const positionsTitle = recipe({
   variants: {
     variant: {
-      default: atoms({
-        fontSize: "md",
-      }),
+      default: {
+        fontSize: "16px",
+      },
       utila: {
         fontSize: "16px",
       },
diff --git a/packages/widget/src/pages/components/page-cta.tsx b/packages/widget/src/pages/components/page-cta.tsx
index 09f96315..35781513 100644
--- a/packages/widget/src/pages/components/page-cta.tsx
+++ b/packages/widget/src/pages/components/page-cta.tsx
@@ -1,5 +1,6 @@
 import { Box } from "../../components/atoms/box";
 import { Button } from "../../components/atoms/button";
+import { useSettings } from "../../providers/settings";
 
 export type PageCta = {
   disabled: boolean;
@@ -11,10 +12,12 @@ export type PageCta = {
 } | null;
 
 export const PageCtaButton = ({ cta }: { cta: PageCta }) => {
+  const { dashboardVariant } = useSettings();
+
   if (!cta || cta.hide) return null;
 
   return (
-    <Box marginTop="auto">
+    <Box marginTop="auto" paddingTop={dashboardVariant ? undefined : "8"}>
       <Button
         data-rk={`footer-button-${cta.variant ?? "primary"}`}
         disabled={cta.disabled}
@@ -25,6 +28,7 @@ export const PageCtaButton = ({ cta }: { cta: PageCta }) => {
             cta.variant ??
             (cta.disabled || cta.isLoading ? "disabled" : "primary"),
           animation: "press",
+          size: dashboardVariant ? "compact" : "regular",
         }}
       >
         {cta.label}
diff --git a/packages/widget/src/pages/components/powered-by/index.tsx b/packages/widget/src/pages/components/powered-by/index.tsx
index 90ce93da..af673ca7 100644
--- a/packages/widget/src/pages/components/powered-by/index.tsx
+++ b/packages/widget/src/pages/components/powered-by/index.tsx
@@ -5,6 +5,7 @@ import { SKLogo } from "../../../components/atoms/icons/sk-logo";
 import { Text } from "../../../components/atoms/typography/text";
 import { useSyncElementHeight } from "../../../hooks/use-sync-element-height";
 import { useMountAnimation } from "../../../providers/mount-animation";
+import { useSettings } from "../../../providers/settings";
 import createStateContext from "../../../utils/create-state-context";
 
 export const [usePoweredByHeight, PoweredByHeightProvider] =
@@ -19,6 +20,7 @@ export const PoweredBy = ({ opacity }: { opacity?: number }) => {
   const { t } = useTranslation();
 
   const { state } = useMountAnimation();
+  const { dashboardVariant } = useSettings();
 
   return (
     <motion.div
@@ -34,6 +36,7 @@ export const PoweredBy = ({ opacity }: { opacity?: number }) => {
         display="flex"
         justifyContent="center"
         alignItems="center"
+        paddingTop={dashboardVariant ? undefined : "3"}
         marginBottom="3"
         gap="1"
       >
diff --git a/packages/widget/src/pages/details/activity-page/components/activity-filters/index.tsx b/packages/widget/src/pages/details/activity-page/components/activity-filters/index.tsx
index 14f4e695..36266c56 100644
--- a/packages/widget/src/pages/details/activity-page/components/activity-filters/index.tsx
+++ b/packages/widget/src/pages/details/activity-page/components/activity-filters/index.tsx
@@ -41,7 +41,7 @@ export const ActivityFilters = ({
           >
             <Text
               variant={{
-                type: isSelected ? "white" : "regular",
+                type: isSelected ? "base" : "regular",
                 size: "small",
                 weight: "medium",
               }}
@@ -56,7 +56,7 @@ export const ActivityFilters = ({
             >
               <Text
                 variant={{
-                  type: isSelected ? "white" : "muted",
+                  type: isSelected ? "base" : "muted",
                   size: "small",
                   weight: "medium",
                 }}
diff --git a/packages/widget/src/pages/details/activity-page/components/activity-filters/styles.css.ts b/packages/widget/src/pages/details/activity-page/components/activity-filters/styles.css.ts
index 39726358..eae9afa0 100644
--- a/packages/widget/src/pages/details/activity-page/components/activity-filters/styles.css.ts
+++ b/packages/widget/src/pages/details/activity-page/components/activity-filters/styles.css.ts
@@ -1,6 +1,7 @@
 import { style } from "@vanilla-extract/css";
 import { recipe } from "@vanilla-extract/recipes";
 import { atoms } from "../../../../../styles/theme/atoms.css";
+import { vars } from "../../../../../styles/theme/contract.css";
 
 export const filtersContainer = style([
   atoms({ display: "flex", alignItems: "center", paddingBottom: "3" }),
@@ -29,8 +30,12 @@ export const filterPill = recipe({
   ],
   variants: {
     state: {
-      default: atoms({ background: "transparent", borderColor: "tabBorder" }),
-      active: atoms({ background: "text", borderColor: "text" }),
+      default: atoms({ background: "transparent", borderColor: "text" }),
+      active: atoms({
+        background: "text",
+        borderColor: "text",
+        color: "primary",
+      }),
     },
   },
   defaultVariants: {
@@ -51,7 +56,9 @@ export const filterCount = recipe({
   variants: {
     state: {
       default: atoms({ background: "backgroundMuted" }),
-      active: { background: "rgba(255, 255, 255, 0.2)" },
+      active: {
+        background: `color-mix(in srgb, ${vars.color.primary} 18%, transparent)`,
+      },
     },
   },
   defaultVariants: {
diff --git a/packages/widget/src/pages/details/details-page/styles.css.ts b/packages/widget/src/pages/details/details-page/styles.css.ts
index 76ddf8ca..e5b14022 100644
--- a/packages/widget/src/pages/details/details-page/styles.css.ts
+++ b/packages/widget/src/pages/details/details-page/styles.css.ts
@@ -38,7 +38,7 @@ export const divider = style({
 
 export const tabBorder = style([
   atoms({
-    background: "tabBorder",
+    background: "text",
     borderRadius: "full",
     position: "absolute",
   }),
diff --git a/packages/widget/src/pages/details/earn-page/components/select-token-section/styles.css.ts b/packages/widget/src/pages/details/earn-page/components/select-token-section/styles.css.ts
index a596eac9..cc17137b 100644
--- a/packages/widget/src/pages/details/earn-page/components/select-token-section/styles.css.ts
+++ b/packages/widget/src/pages/details/earn-page/components/select-token-section/styles.css.ts
@@ -2,10 +2,6 @@ import { style } from "@vanilla-extract/css";
 import { recipe } from "@vanilla-extract/recipes";
 import { atoms } from "../../../../../styles/theme/atoms.css";
 import { vars } from "../../../../../styles/theme/contract.css";
-import {
-  portoPalette,
-  utilaPalette,
-} from "../../../../../styles/theme/variant-overrides/palettes";
 
 export const priceTxt = style({
   flexGrow: 999,
@@ -17,9 +13,9 @@ export const selectTokenSection = recipe({
   }),
   variants: {
     variant: {
-      default: atoms({
-        background: "stakeSectionBackground",
-      }),
+      default: {
+        background: "transparent",
+      },
       utila: {
         background: "transparent",
       },
@@ -36,10 +32,20 @@ export const selectTokenSection = recipe({
   compoundVariants: [
     {
       variants: {
+        state: "danger",
+        variant: "default",
+      },
+      style: atoms({
+        borderColor: "textDanger",
+      }),
+    },
+    {
+      variants: {
+        state: "default",
         variant: "default",
       },
       style: {
-        borderColor: "transparent",
+        borderColor: vars.color.tokenSelectBorder,
       },
     },
     {
@@ -57,7 +63,7 @@ export const selectTokenSection = recipe({
         variant: "utila",
       },
       style: {
-        borderColor: utilaPalette.selectTokenBorder,
+        borderColor: vars.color.tokenSelectBorder,
       },
     },
     {
@@ -93,7 +99,7 @@ export const selectTokenSection = recipe({
         variant: "porto",
       },
       style: {
-        borderColor: portoPalette.primaryPurple,
+        borderColor: vars.color.tokenSelectBorder,
       },
     },
   ],
@@ -102,7 +108,9 @@ export const selectTokenSection = recipe({
 export const selectTokenTitle = recipe({
   variants: {
     variant: {
-      default: {},
+      default: {
+        fontSize: "14px",
+      },
       utila: {
         fontSize: "14px",
       },
@@ -137,7 +145,6 @@ export const minMaxContainer = recipe({
   variants: {
     variant: {
       default: atoms({
-        marginRight: "2",
         marginTop: "2",
       }),
       utila: atoms({
diff --git a/packages/widget/src/pages/details/earn-page/components/select-yield-section/index.tsx b/packages/widget/src/pages/details/earn-page/components/select-yield-section/index.tsx
index 9a2cbb3e..d9d80b99 100644
--- a/packages/widget/src/pages/details/earn-page/components/select-yield-section/index.tsx
+++ b/packages/widget/src/pages/details/earn-page/components/select-yield-section/index.tsx
@@ -33,6 +33,11 @@ export const SelectYieldSection = () => {
   const riskSummary = selectedStake
     .map((yieldDto) => <YieldRiskRatingSummary yieldDto={yieldDto} />)
     .extractNullable();
+  const showSectionTitle =
+    !dashboardVariant &&
+    variant !== "zerion" &&
+    variant !== "utila" &&
+    variant !== "porto";
 
   return isLoading ? (
     <Box marginTop="2">
@@ -56,13 +61,11 @@ export const SelectYieldSection = () => {
           </Box>
         ) : (
           <Box>
-            {variant !== "zerion" &&
-              variant !== "utila" &&
-              variant !== "porto" && (
-                <Box my="2">
-                  <Text>{t("details.earn")}</Text>
-                </Box>
-              )}
+            {showSectionTitle && (
+              <Box my="2">
+                <Text>{t("details.earn")}</Text>
+              </Box>
+            )}
 
             <Box
               data-rk="stake-yield-section"
diff --git a/packages/widget/src/pages/details/earn-page/components/select-yield-section/select-yield-reward-details.tsx b/packages/widget/src/pages/details/earn-page/components/select-yield-section/select-yield-reward-details.tsx
index 1fab308a..e69dc523 100644
--- a/packages/widget/src/pages/details/earn-page/components/select-yield-section/select-yield-reward-details.tsx
+++ b/packages/widget/src/pages/details/earn-page/components/select-yield-section/select-yield-reward-details.tsx
@@ -23,7 +23,7 @@ import { useEarnPageContext } from "../../state/earn-page-context";
 import { viaProviderImage } from "./styles.css";
 
 export const SelectYieldRewardDetails = () => {
-  const { variant } = useSettings();
+  const { dashboardVariant, variant } = useSettings();
   const { t } = useTranslation();
 
   const {
@@ -85,7 +85,7 @@ export const SelectYieldRewardDetails = () => {
               .map((details) => <YieldStrategyDetails {...details} />)
               .extractNullable()}
 
-            <Divider />
+            {dashboardVariant && <Divider />}
           </>
         )}
 
diff --git a/packages/widget/src/pages/details/earn-page/components/select-yield-section/styles.css.ts b/packages/widget/src/pages/details/earn-page/components/select-yield-section/styles.css.ts
index 506b8066..413a757d 100644
--- a/packages/widget/src/pages/details/earn-page/components/select-yield-section/styles.css.ts
+++ b/packages/widget/src/pages/details/earn-page/components/select-yield-section/styles.css.ts
@@ -17,7 +17,7 @@ export const selectOpportunityButton = recipe({
   ],
   variants: {
     variant: {
-      default: atoms({ background: "background" }),
+      default: atoms({ background: "tokenSelectBackground" }),
       utila: atoms({ background: "tokenSelectBackground" }),
       finery: [
         atoms({ background: "tokenSelectBackground" }),
diff --git a/packages/widget/src/pages/details/earn-page/state/earn-page-context.tsx b/packages/widget/src/pages/details/earn-page/state/earn-page-context.tsx
index 20d1f594..3793dff1 100644
--- a/packages/widget/src/pages/details/earn-page/state/earn-page-context.tsx
+++ b/packages/widget/src/pages/details/earn-page/state/earn-page-context.tsx
@@ -437,7 +437,11 @@ export const EarnPageContextProvider = ({
         .filter(() => shouldFetchValidators)
         .chain(() =>
           Maybe.fromNullable(yieldValidators.data).map((validators) => {
-            if (variant === "utila" || variant === "porto") {
+            if (
+              dashboardVariant ||
+              variant === "utila" ||
+              variant === "porto"
+            ) {
               return [...validators].sort(
                 (a, b) =>
                   (b.rewardRate?.total ?? 0) - (a.rewardRate?.total ?? 0)
@@ -447,7 +451,13 @@ export const EarnPageContextProvider = ({
             return validators;
           })
         ),
-    [selectedStake, shouldFetchValidators, variant, yieldValidators.data]
+    [
+      dashboardVariant,
+      selectedStake,
+      shouldFetchValidators,
+      variant,
+      yieldValidators.data,
+    ]
   );
 
   const onYieldSearch: SelectModalProps["onSearch"] = (val) =>
diff --git a/packages/widget/src/pages/position-details/components/amount-block.tsx b/packages/widget/src/pages/position-details/components/amount-block.tsx
index bc248dab..3315c769 100644
--- a/packages/widget/src/pages/position-details/components/amount-block.tsx
+++ b/packages/widget/src/pages/position-details/components/amount-block.tsx
@@ -73,7 +73,7 @@ export const AmountBlock = ({
   ...rest
 }: AmountBlockProps) => {
   const { t } = useTranslation();
-  const { variant, dashboardVariant } = useSettings();
+  const { dashboardVariant, variant } = useSettings();
 
   const minMaxUnstakeAmount = Maybe.fromPredicate(
     (v) => v.variant === "unstake",
diff --git a/packages/widget/src/providers/theme-wrapper.tsx b/packages/widget/src/providers/theme-wrapper.tsx
index 534898fb..4071ee0b 100644
--- a/packages/widget/src/providers/theme-wrapper.tsx
+++ b/packages/widget/src/providers/theme-wrapper.tsx
@@ -1,6 +1,5 @@
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import merge from "lodash.merge";
-import { Just } from "purify-ts";
 import type { PropsWithChildren } from "react";
 import { useMemo } from "react";
 import { vars } from "../styles/theme/contract.css";
@@ -9,31 +8,41 @@ import { lightTheme } from "../styles/theme/themes";
 import { getFineryThemeOverrides } from "../styles/theme/variant-overrides/finery";
 import { portoThemeOverrides } from "../styles/theme/variant-overrides/porto";
 import { utilaThemeOverrides } from "../styles/theme/variant-overrides/utila";
+import type { RecursivePartial } from "../types/utils";
 import { useSettings } from "./settings";
+import type { SettingsContextType } from "./settings/types";
+
+export const getThemeOverrides = ({
+  baseTheme,
+  variant,
+}: {
+  baseTheme: typeof lightTheme;
+  variant: SettingsContextType["variant"];
+}): RecursivePartial<typeof lightTheme> => {
+  if (variant === "utila") {
+    return utilaThemeOverrides;
+  }
+
+  if (variant === "finery") {
+    return getFineryThemeOverrides(baseTheme);
+  }
+
+  if (variant === "porto") {
+    return portoThemeOverrides;
+  }
+
+  return {};
+};
 
 export const ThemeWrapper = ({ children }: PropsWithChildren) => {
   const { theme, variant } = useSettings();
 
   const finalTheme = useMemo(() => {
     const baseTheme = merge(structuredClone(lightTheme), theme);
-
-    const overrides = Just(variant)
-      .map((v) => {
-        if (v === "utila") {
-          return utilaThemeOverrides;
-        }
-
-        if (v === "finery") {
-          return getFineryThemeOverrides(baseTheme);
-        }
-
-        if (v === "porto") {
-          return portoThemeOverrides;
-        }
-
-        return {};
-      })
-      .unsafeCoerce();
+    const overrides = getThemeOverrides({
+      baseTheme,
+      variant,
+    });
 
     return merge(structuredClone(lightTheme), theme, overrides);
   }, [theme, variant]);
diff --git a/packages/widget/src/standalone.css.ts b/packages/widget/src/standalone.css.ts
index 007dd7a3..ca42ebcf 100644
--- a/packages/widget/src/standalone.css.ts
+++ b/packages/widget/src/standalone.css.ts
@@ -39,7 +39,7 @@ export const rootClassName = recipe({
         theme: "dark",
       },
       style: {
-        background: "#211f25",
+        background: "#000000",
       },
     },
     {
diff --git a/packages/widget/src/styles/theme/variant-overrides/finery.ts b/packages/widget/src/styles/theme/variant-overrides/finery.ts
index 2025f5f8..3cfccad2 100644
--- a/packages/widget/src/styles/theme/variant-overrides/finery.ts
+++ b/packages/widget/src/styles/theme/variant-overrides/finery.ts
@@ -8,7 +8,7 @@ import {
 } from "./palettes";
 
 const getFineryPalette = (theme: typeof lightTheme) =>
-  theme.color.background === darkTheme.color.background
+  theme.color.primary === darkTheme.color.primary
     ? fineryDarkPalette
     : fineryLightPalette;
 
diff --git a/packages/widget/src/styles/theme/variant-overrides/porto.ts b/packages/widget/src/styles/theme/variant-overrides/porto.ts
index fb5d209e..f99d0742 100644
--- a/packages/widget/src/styles/theme/variant-overrides/porto.ts
+++ b/packages/widget/src/styles/theme/variant-overrides/porto.ts
@@ -27,6 +27,8 @@ export const portoThemeOverrides: RecursivePartial<typeof lightTheme> = {
     secondaryButton: "600",
   },
   color: {
+    accent: portoPalette.primaryPurple,
+    textMuted: portoPalette.greyFour,
     tooltipBackground: portoPalette.greyThree,
     summaryItemBackground: portoPalette.greyTwo,
     background: portoPalette.greyOne,
@@ -34,7 +36,9 @@ export const portoThemeOverrides: RecursivePartial<typeof lightTheme> = {
     stakeSectionBackground: portoPalette.greyTwo,
     tokenSelectBackground: portoPalette.greyTwo,
     tokenSelectHoverBackground: portoPalette.greyThree,
+    tokenSelectBorder: portoPalette.primaryPurple,
     dashboardDetailsSectionBackground: portoPalette.greyTwo,
+    tabBorder: portoPalette.greyThree,
 
     modalBodyBackground: portoPalette.greyOne,
 
@@ -45,6 +49,14 @@ export const portoThemeOverrides: RecursivePartial<typeof lightTheme> = {
     primaryButtonColor: vars.color.white,
 
     smallButtonBackground: portoPalette.greyThree,
+    smallLightButtonBackground: portoPalette.greyThree,
+
+    summaryLabelStakedBackground: portoPalette.greyThree,
+    summaryLabelStakedColor: vars.color.white,
+    summaryLabelApyBackground: portoPalette.greyThree,
+    summaryLabelApyColor: vars.color.white,
+    summaryLabelAvailableBackground: portoPalette.greyThree,
+    summaryLabelAvailableColor: vars.color.white,
 
     connectKit: {
       modalBackground: portoPalette.greyOne,
diff --git a/packages/widget/src/styles/theme/variant-overrides/utila.ts b/packages/widget/src/styles/theme/variant-overrides/utila.ts
index e10dd6f9..9d46d9ea 100644
--- a/packages/widget/src/styles/theme/variant-overrides/utila.ts
+++ b/packages/widget/src/styles/theme/variant-overrides/utila.ts
@@ -13,10 +13,12 @@ export const utilaThemeOverrides: RecursivePartial<typeof lightTheme> = {
     },
   },
   color: {
+    accent: utilaPalette.primaryBlue,
     summaryItemBackground: utilaPalette.greyOne,
     backgroundMuted: utilaPalette.greyOne,
     stakeSectionBackground: utilaPalette.greyOne,
     tokenSelectBackground: utilaPalette.greyOne,
+    tokenSelectBorder: utilaPalette.selectTokenBorder,
     dashboardDetailsSectionBackground: utilaPalette.greyOne,
     warningBoxBackground: utilaPalette.warningBackground,
 
@@ -24,5 +26,14 @@ export const utilaThemeOverrides: RecursivePartial<typeof lightTheme> = {
 
     primaryButtonBackground: utilaPalette.primaryBlue,
     primaryButtonColor: vars.color.white,
+    smallLightButtonColor: utilaPalette.maxButtonText,
+    smallLightButtonBackground: utilaPalette.maxButtonBackground,
+
+    summaryLabelStakedBackground: "#F6F0FF",
+    summaryLabelStakedColor: "#5A36C0",
+    summaryLabelApyBackground: "#F7ECFA",
+    summaryLabelApyColor: "#CA6CBD",
+    summaryLabelAvailableBackground: "#EEF7F3",
+    summaryLabelAvailableColor: "#327C5F",
   },
 };
diff --git a/packages/widget/src/styles/tokens/colors/contract.ts b/packages/widget/src/styles/tokens/colors/contract.ts
index df01b091..e91fc09f 100644
--- a/packages/widget/src/styles/tokens/colors/contract.ts
+++ b/packages/widget/src/styles/tokens/colors/contract.ts
@@ -16,6 +16,7 @@ const baseColorsContract = {
 
   tokenSelectBackground: "",
   tokenSelectHoverBackground: "",
+  tokenSelectBorder: "",
   tokenSelect: "",
 
   skeletonLoaderBase: "",
@@ -60,6 +61,12 @@ const baseColorsContract = {
   dashboardDetailsSectionBackground: "",
 
   summaryItemBackground: "",
+  summaryLabelStakedBackground: "",
+  summaryLabelStakedColor: "",
+  summaryLabelApyBackground: "",
+  summaryLabelApyColor: "",
+  summaryLabelAvailableBackground: "",
+  summaryLabelAvailableColor: "",
 };
 
 export const colorsContract: typeof baseColorsContract & {
diff --git a/packages/widget/src/styles/tokens/colors/values.ts b/packages/widget/src/styles/tokens/colors/values.ts
index a72afb48..94b1d574 100644
--- a/packages/widget/src/styles/tokens/colors/values.ts
+++ b/packages/widget/src/styles/tokens/colors/values.ts
@@ -123,7 +123,7 @@ export const lightThemeColors: typeof colorsContract = {
   white: sharedSemanticColors.base.white,
   transparent: sharedSemanticColors.base.transparent,
   primary: lightSemanticColors.brand.primary,
-  accent: lightSemanticColors.brand.accent,
+  accent: "#4A60FF",
   disabled: sharedSemanticColors.base.disabled,
 
   text: lightSemanticColors.foreground.default,
@@ -131,27 +131,28 @@ export const lightThemeColors: typeof colorsContract = {
   textDanger: lightSemanticColors.foreground.danger,
 
   background: vars.color.primary,
-  backgroundMuted: lightSemanticColors.background.muted,
+  backgroundMuted: "#f5f5f6",
 
-  tokenSelectBackground: vars.color.backgroundMuted,
+  tokenSelectBackground: "#f5f5f6",
   tokenSelectHoverBackground: lightSemanticColors.interaction.mutedHover,
+  tokenSelectBorder: "#C9CFFF",
   tokenSelect: vars.color.text,
 
-  tabBorder: lightSemanticColors.border.default,
+  tabBorder: "#e4e4e7",
 
   skeletonLoaderBase: vars.color.backgroundMuted,
   skeletonLoaderHighlight: vars.color.background,
 
-  warningBoxBackground: vars.color.backgroundMuted,
+  warningBoxBackground: "#FFE9BD",
 
-  stakeSectionBackground: vars.color.backgroundMuted,
+  stakeSectionBackground: "#f5f5f6",
 
   dropdownBackground: lightSemanticColors.background.dropdown,
 
   selectValidatorMultiSelectedBackground: sharedSemanticColors.status.selected,
   selectValidatorMultiDefaultBackground: vars.color.background,
 
-  positionsClaimRewardsBackground: sharedSemanticColors.status.success,
+  positionsClaimRewardsBackground: "#4BAA82",
   positionsActionRequiredBackground: sharedSemanticColors.status.danger,
   positionsPendingBackground: sharedSemanticColors.status.warning,
   positionsRewardRate: sharedSemanticColors.status.rewardRate,
@@ -162,7 +163,7 @@ export const lightThemeColors: typeof colorsContract = {
   tooltipBackground: lightSemanticColors.background.tooltip,
 
   primaryButtonColor: vars.color.white,
-  primaryButtonBackground: vars.color.accent,
+  primaryButtonBackground: "#4A60FF",
 
   secondaryButtonColor: vars.color.text,
   secondaryButtonBackground: vars.color.background,
@@ -170,8 +171,8 @@ export const lightThemeColors: typeof colorsContract = {
   smallButtonColor: vars.color.text,
   smallButtonBackground: vars.color.background,
 
-  smallLightButtonColor: vars.color.text,
-  smallLightButtonBackground: vars.color.backgroundMuted,
+  smallLightButtonColor: "#5C70FF",
+  smallLightButtonBackground: "#F4F5FF",
 
   disabledButtonColor: vars.color.white,
   disabledButtonBackground: vars.color.disabled,
@@ -185,38 +186,45 @@ export const lightThemeColors: typeof colorsContract = {
     modalBackdrop: sharedSemanticColors.overlay.modal,
   },
 
-  dashboardDetailsSectionBackground: primitiveColors.overlay.black2,
-  summaryItemBackground: vars.color.modalBodyBackground,
+  dashboardDetailsSectionBackground: "#f5f5f6",
+  summaryItemBackground: "#f5f5f6",
+  summaryLabelStakedBackground: "#F6F0FF",
+  summaryLabelStakedColor: "#5A36C0",
+  summaryLabelApyBackground: "#F7ECFA",
+  summaryLabelApyColor: "#CA6CBD",
+  summaryLabelAvailableBackground: "#EEF7F3",
+  summaryLabelAvailableColor: "#327C5F",
 };
 
 export const darkThemeColors: typeof colorsContract = {
   white: sharedSemanticColors.base.white,
   transparent: sharedSemanticColors.base.transparent,
-  primary: darkSemanticColors.brand.primary,
-  accent: darkSemanticColors.brand.accent,
+  primary: "#171717",
+  accent: "#AB95FF",
   disabled: sharedSemanticColors.base.disabled,
 
   text: darkSemanticColors.foreground.default,
-  textMuted: darkSemanticColors.foreground.muted,
+  textMuted: "#87899C",
   textDanger: darkSemanticColors.foreground.danger,
 
   background: vars.color.primary,
-  backgroundMuted: darkSemanticColors.background.muted,
+  backgroundMuted: "#333333",
 
-  tokenSelectBackground: vars.color.backgroundMuted,
-  tokenSelectHoverBackground: darkSemanticColors.interaction.mutedHover,
+  tokenSelectBackground: "#282828",
+  tokenSelectHoverBackground: "#333333",
+  tokenSelectBorder: "#AB95FF",
   tokenSelect: vars.color.text,
 
-  tabBorder: darkSemanticColors.border.default,
+  tabBorder: "#333333",
 
-  skeletonLoaderBase: vars.color.backgroundMuted,
-  skeletonLoaderHighlight: vars.color.background,
+  skeletonLoaderBase: "#282828",
+  skeletonLoaderHighlight: "#333333",
 
   warningBoxBackground: vars.color.backgroundMuted,
 
-  stakeSectionBackground: vars.color.backgroundMuted,
+  stakeSectionBackground: "#282828",
 
-  dropdownBackground: darkSemanticColors.background.dropdown,
+  dropdownBackground: "#333333",
 
   selectValidatorMultiSelectedBackground: sharedSemanticColors.status.selected,
   selectValidatorMultiDefaultBackground: vars.color.background,
@@ -229,19 +237,19 @@ export const darkThemeColors: typeof colorsContract = {
   modalOverlayBackground: sharedSemanticColors.overlay.modal,
   modalBodyBackground: vars.color.background,
 
-  tooltipBackground: darkSemanticColors.background.tooltip,
+  tooltipBackground: "#333333",
 
-  primaryButtonColor: primitiveColors.blackFull,
-  primaryButtonBackground: vars.color.white,
+  primaryButtonColor: vars.color.white,
+  primaryButtonBackground: "#AB95FF",
 
   secondaryButtonColor: vars.color.text,
   secondaryButtonBackground: vars.color.background,
 
   smallButtonColor: vars.color.text,
-  smallButtonBackground: vars.color.background,
+  smallButtonBackground: "#333333",
 
   smallLightButtonColor: vars.color.text,
-  smallLightButtonBackground: vars.color.backgroundMuted,
+  smallLightButtonBackground: "#333333",
 
   disabledButtonColor: primitiveColors.blackFull,
   disabledButtonBackground: vars.color.disabled,
@@ -250,11 +258,17 @@ export const darkThemeColors: typeof colorsContract = {
     ...connectKitTheme.darkMode.colors,
     modalBackground: vars.color.modalBodyBackground,
     profileForeground: vars.color.modalBodyBackground,
-    profileAction: vars.color.backgroundMuted,
-    profileActionHover: darkSemanticColors.interaction.mutedHover,
+    profileAction: "#282828",
+    profileActionHover: "#333333",
     modalBackdrop: sharedSemanticColors.overlay.modal,
   },
 
-  dashboardDetailsSectionBackground: primitiveColors.overlay.black2,
-  summaryItemBackground: vars.color.modalBodyBackground,
+  dashboardDetailsSectionBackground: "#282828",
+  summaryItemBackground: "#282828",
+  summaryLabelStakedBackground: "#333333",
+  summaryLabelStakedColor: vars.color.white,
+  summaryLabelApyBackground: "#333333",
+  summaryLabelApyColor: vars.color.white,
+  summaryLabelAvailableBackground: "#333333",
+  summaryLabelAvailableColor: vars.color.white,
 };
diff --git a/packages/widget/src/vite-env.d.ts b/packages/widget/src/vite-env.d.ts
index 3f6fc6d8..eed2d623 100644
--- a/packages/widget/src/vite-env.d.ts
+++ b/packages/widget/src/vite-env.d.ts
@@ -8,7 +8,12 @@ interface ImportMetaEnv {
   readonly VITE_ENABLE_MSW_MOCK: string;
   readonly VITE_FORCE_ADDRESS: string | undefined;
   readonly VITE_FORCE_DASHBOARD: string;
-  readonly VITE_APP_VARIANT: "utila" | undefined;
+  readonly VITE_APP_VARIANT:
+    | "default"
+    | "utila"
+    | "finery"
+    | "porto"
+    | undefined;
   readonly VITE_YIELDS_API_URL: string;
 }
 
diff --git a/packages/widget/tests/domain/dashboard-yield-category-types.test.ts b/packages/widget/tests/domain/dashboard-yield-category-types.test.ts
index 91f70e3b..b6547e45 100644
--- a/packages/widget/tests/domain/dashboard-yield-category-types.test.ts
+++ b/packages/widget/tests/domain/dashboard-yield-category-types.test.ts
@@ -2,6 +2,8 @@ import { describe, expect, it } from "vitest";
 import {
   dashboardYieldCategories,
   getApiYieldTypesForDashboardCategory,
+  getYieldTypesSortRank,
+  type YieldBase,
 } from "../../src/domain/types/yields";
 
 const allApiYieldTypes = [
@@ -50,3 +52,25 @@ describe("getApiYieldTypesForDashboardCategory", () => {
     expect(mapped.length).toBe(allApiYieldTypes.length);
   });
 });
+
+describe("getYieldTypesSortRank", () => {
+  const makeYield = (type: YieldBase["mechanics"]["type"]): YieldBase =>
+    ({
+      mechanics: {
+        type,
+      },
+      token: {
+        network: "ethereum",
+        symbol: "USDC",
+      },
+    }) as YieldBase;
+
+  it("ranks RWA yields before other API yield types", () => {
+    const rwaRank = getYieldTypesSortRank(makeYield("real_world_asset"));
+    const otherRanks = allApiYieldTypes
+      .filter((type) => type !== "real_world_asset")
+      .map((type) => getYieldTypesSortRank(makeYield(type)));
+
+    expect(rwaRank).toBeLessThan(Math.min(...otherRanks));
+  });
+});
diff --git a/packages/widget/tests/providers/theme-wrapper.test.ts b/packages/widget/tests/providers/theme-wrapper.test.ts
new file mode 100644
index 00000000..7275141c
--- /dev/null
+++ b/packages/widget/tests/providers/theme-wrapper.test.ts
@@ -0,0 +1,48 @@
+import { describe, expect, it } from "vitest";
+import { getThemeOverrides } from "../../src/providers/theme-wrapper";
+import { darkTheme, lightTheme } from "../../src/styles/theme/themes";
+import { portoThemeOverrides } from "../../src/styles/theme/variant-overrides/porto";
+import { utilaThemeOverrides } from "../../src/styles/theme/variant-overrides/utila";
+
+describe("getThemeOverrides", () => {
+  it("keeps the default variant unthemed", () => {
+    expect(
+      getThemeOverrides({
+        baseTheme: lightTheme,
+        variant: "default",
+      })
+    ).toEqual({});
+  });
+
+  it("keeps explicit Porto variant overrides", () => {
+    expect(
+      getThemeOverrides({
+        baseTheme: lightTheme,
+        variant: "porto",
+      })
+    ).toBe(portoThemeOverrides);
+  });
+
+  it("keeps the explicit Utila variant override", () => {
+    expect(
+      getThemeOverrides({
+        baseTheme: lightTheme,
+        variant: "utila",
+      })
+    ).toBe(utilaThemeOverrides);
+  });
+});
+
+describe("base themes", () => {
+  it("uses the Utila palette for light defaults", () => {
+    expect(lightTheme.color.primaryButtonBackground).toBe("#4A60FF");
+    expect(lightTheme.color.summaryItemBackground).toBe("#f5f5f6");
+    expect(lightTheme.color.tabBorder).toBe("#e4e4e7");
+  });
+
+  it("uses the Porto palette for dark defaults", () => {
+    expect(darkTheme.color.primary).toBe("#171717");
+    expect(darkTheme.color.primaryButtonBackground).toBe("#AB95FF");
+    expect(darkTheme.color.summaryItemBackground).toBe("#282828");
+  });
+});