diff --git a/apps/web/src/assets/icons/reddit.svg b/apps/web/src/assets/icons/reddit.svg
index ef4ad88d5..3f9f9b675 100644
--- a/apps/web/src/assets/icons/reddit.svg
+++ b/apps/web/src/assets/icons/reddit.svg
@@ -1,4 +1,5 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+
+<svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path
     d="M12 0C5.37281 0 0 5.37281 0 12C0 15.3141 1.34344 18.3141 3.51469 20.4853L1.22906 22.7709C0.775312 23.2247 1.09688 24 1.73813 24H12C18.6272 24 24 18.6272 24 12C24 5.37281 18.6272 0 12 0Z"
     fill="#FF4500"
diff --git a/apps/web/src/assets/icons/twitter.svg b/apps/web/src/assets/icons/twitter.svg
index 6ca01e6fb..9fea9e21f 100644
--- a/apps/web/src/assets/icons/twitter.svg
+++ b/apps/web/src/assets/icons/twitter.svg
@@ -1,6 +1,5 @@
 <svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path
     d="M0.0467972 0L7.472 9.92803L0 18H1.68178L8.22366 10.9327L13.5091 18H19.2319L11.3887 7.51364L18.3437 0H16.6619L10.6374 6.50863L5.76957 0H0.0467972ZM2.51993 1.23866H5.14894L16.7584 16.7613H14.1294L2.51993 1.23866Z"
-    fill="black"
-  />
+    fill="black" />
 </svg>
diff --git a/apps/web/src/components/AccountCard/AccountBalance.test.tsx b/apps/web/src/components/AccountCard/AccountBalance.test.tsx
index 1f089ab23..49635fb96 100644
--- a/apps/web/src/components/AccountCard/AccountBalance.test.tsx
+++ b/apps/web/src/components/AccountCard/AccountBalance.test.tsx
@@ -91,8 +91,8 @@ describe("<AccountBalance />", () => {
     it("doesn't render balance if it's not available", () => {
       render(<AccountBalance />, { store });
 
-      expect(screen.queryByTestId("tez-balance")).not.toBeInTheDocument();
-      expect(screen.queryByTestId("usd-balance")).not.toBeInTheDocument();
+      expect(screen.getByTestId("tez-balance")).toHaveTextContent("0 ꜩ");
+      expect(screen.getByTestId("usd-balance")).toHaveTextContent("$0.00");
     });
   });
 
diff --git a/apps/web/src/components/AccountCard/AccountBalance.tsx b/apps/web/src/components/AccountCard/AccountBalance.tsx
index 1a6caa071..25e4f5bef 100644
--- a/apps/web/src/components/AccountCard/AccountBalance.tsx
+++ b/apps/web/src/components/AccountCard/AccountBalance.tsx
@@ -1,7 +1,7 @@
 import { Box, Flex, Link, Text } from "@chakra-ui/react";
 import { useDynamicModalContext } from "@umami/components";
 import { useCurrentAccount, useGetAccountBalance, useGetDollarBalance } from "@umami/state";
-import { prettyTezAmount } from "@umami/tezos";
+import { TEZ, prettyTezAmount } from "@umami/tezos";
 
 import { SendTezButton } from "./SendTezButton";
 import { ArrowDownLeftIcon, WalletIcon } from "../../assets/icons";
@@ -21,6 +21,15 @@ export const AccountBalance = () => {
 
   const buyTezUrl = `https://widget.wert.io/default/widget/?commodity=XTZ&address=${address}&network=tezos&commodity_id=xtz.simple.tezos`;
 
+  const getUsdBalance = () => {
+    if (balance === undefined) {
+      return "$0.00";
+    } else if (usdBalance === undefined) {
+      return;
+    }
+    return `$${usdBalance}`;
+  };
+
   return (
     <Box data-testid="account-balance" paddingX="12px">
       <Flex flexDirection="column" gap="4px">
@@ -35,14 +44,12 @@ export const AccountBalance = () => {
         >
           Tez Balance
         </Text>
-        {balance !== undefined && (
-          <Text color={color("900")} fontWeight="600" data-testid="tez-balance" size="2xl">
-            {prettyTezAmount(balance)}
-          </Text>
-        )}
-        {usdBalance !== undefined && (
+        <Text color={color("900")} fontWeight="600" data-testid="tez-balance" size="2xl">
+          {balance ? prettyTezAmount(balance) : `0 ${TEZ}`}
+        </Text>
+        {getUsdBalance() && (
           <Text color={color("700")} data-testid="usd-balance" size="sm">
-            {`$${usdBalance}`}
+            {getUsdBalance()}
           </Text>
         )}
       </Flex>
diff --git a/apps/web/src/components/AccountSelectorModal/RenameAccountModal.tsx b/apps/web/src/components/AccountSelectorModal/RenameAccountModal.tsx
index 3830b0ad5..8cbb5ce8b 100644
--- a/apps/web/src/components/AccountSelectorModal/RenameAccountModal.tsx
+++ b/apps/web/src/components/AccountSelectorModal/RenameAccountModal.tsx
@@ -56,7 +56,7 @@ export const RenameAccountPage = ({ account }: RenameAccountPageProps) => {
       <form onSubmit={handleSubmit(onSubmit)}>
         <ModalHeader>
           <VStack gap="18px">
-            <EditIcon width="22px" color={color("blue")} />
+            <EditIcon width="22px" color={color("400")} />
             <Heading size="xl">Edit name</Heading>
           </VStack>
         </ModalHeader>
diff --git a/apps/web/src/components/AccountTile/AccountTileWrapper.tsx b/apps/web/src/components/AccountTile/AccountTileWrapper.tsx
index 980172cd9..e9ed3f4bc 100644
--- a/apps/web/src/components/AccountTile/AccountTileWrapper.tsx
+++ b/apps/web/src/components/AccountTile/AccountTileWrapper.tsx
@@ -8,12 +8,13 @@ export const AccountTileWrapper = ({
   children,
   ...props
 }: PropsWithChildren<Omit<SquareProps, "size">> & {
-  size?: "xs" | "sm";
+  size?: "xs" | "sm" | "md";
 }) => {
   const color = useColor();
   const sizes = {
     xs: "30px",
     sm: "48px",
+    md: "60px",
   };
 
   return (
diff --git a/apps/web/src/components/ColorSchemeModeToggle/ColorSchemeModeToggle.tsx b/apps/web/src/components/ColorSchemeModeToggle/ColorSchemeModeToggle.tsx
index 60aca752e..13668fb45 100644
--- a/apps/web/src/components/ColorSchemeModeToggle/ColorSchemeModeToggle.tsx
+++ b/apps/web/src/components/ColorSchemeModeToggle/ColorSchemeModeToggle.tsx
@@ -1,7 +1,10 @@
 import { Flex, Switch, useColorMode } from "@chakra-ui/react";
 
+import { useColor } from "../../styles/useColor";
+
 export const ColorSchemeModeToggle = () => {
   const { colorMode, toggleColorMode } = useColorMode();
+  const color = useColor();
 
   const switchText = colorMode === "light" ? "Light mode" : "Dark mode";
 
@@ -13,6 +16,7 @@ export const ColorSchemeModeToggle = () => {
         base: "none",
         md: "flex",
       }}
+      color={color("500")}
     >
       {switchText}
       <Switch isChecked={colorMode === "dark"} onChange={toggleColorMode} />
diff --git a/apps/web/src/components/CustomToast/CustomToast.tsx b/apps/web/src/components/CustomToast/CustomToast.tsx
index 260ea994b..d26aed6eb 100644
--- a/apps/web/src/components/CustomToast/CustomToast.tsx
+++ b/apps/web/src/components/CustomToast/CustomToast.tsx
@@ -51,9 +51,9 @@ export const CustomToast = (props: CustomToastProps): ReactNode => {
   };
 
   return (
-    <Alert addRole={false} id={ids?.root} status={status}>
+    <Alert alignItems="flex-start" addRole={false} id={ids?.root} status={status}>
       <Icon as={AlertIcon} />
-      <Flex width="full" marginLeft="6px">
+      <Flex flexDirection="column" width="full" marginLeft="6px">
         {title && <AlertTitle id={ids?.title}>{title}</AlertTitle>}
         {description && (
           <AlertDescription marginRight="12px" id={ids?.description}>
diff --git a/apps/web/src/components/MasterPasswordModal/MasterPasswordModal.tsx b/apps/web/src/components/MasterPasswordModal/MasterPasswordModal.tsx
index ea8f64642..02e8db2e8 100644
--- a/apps/web/src/components/MasterPasswordModal/MasterPasswordModal.tsx
+++ b/apps/web/src/components/MasterPasswordModal/MasterPasswordModal.tsx
@@ -37,7 +37,7 @@ export const MasterPasswordModal = ({ onSubmit }: MasterPasswordModalProps) => {
         <ModalBackButton />
         <ModalCloseButton />
         <Center flexDirection="column" gap="12px">
-          <Icon as={LockIcon} boxSize="24px" marginBottom="4px" color={color("blue")} />
+          <Icon as={LockIcon} boxSize="24px" marginBottom="4px" color={color("400")} />
           <Heading size="xl">Confirm password</Heading>
           <Text width="full" color={color("700")} fontWeight="400" textAlign="center" size="md">
             Enter your master password
diff --git a/apps/web/src/components/NameAccountModal/NameAccountModal.tsx b/apps/web/src/components/NameAccountModal/NameAccountModal.tsx
index 86b736554..db631f98e 100644
--- a/apps/web/src/components/NameAccountModal/NameAccountModal.tsx
+++ b/apps/web/src/components/NameAccountModal/NameAccountModal.tsx
@@ -58,7 +58,7 @@ export const NameAccountModal = ({
         <ModalBackButton />
         <ModalCloseButton />
         <Center flexDirection="column" gap="12px">
-          <Icon as={UserIcon} boxSize="24px" marginBottom="4px" color={color("blue")} />
+          <Icon as={UserIcon} boxSize="24px" marginBottom="4px" color={color("400")} />
           <Heading size="xl">{title}</Heading>
           {subtitle && (
             <Text
diff --git a/apps/web/src/components/Onboarding/ImportWallet/ImportWallet.tsx b/apps/web/src/components/Onboarding/ImportWallet/ImportWallet.tsx
index 04fe1a0ac..5b8c4bc3c 100644
--- a/apps/web/src/components/Onboarding/ImportWallet/ImportWallet.tsx
+++ b/apps/web/src/components/Onboarding/ImportWallet/ImportWallet.tsx
@@ -32,7 +32,7 @@ export const ImportWallet = () => {
       <ModalHeader>
         <ModalCloseButton />
         <Center flexDirection="column" gap="16px">
-          <Icon as={LoginIcon} width="24px" height="24px" color={color("blue")} />
+          <Icon as={LoginIcon} width="24px" height="24px" color={color("400")} />
           <Heading size="xl">Import Wallet</Heading>
         </Center>
       </ModalHeader>
diff --git a/apps/web/src/components/Onboarding/OnboardOptions/OnboardOptions.tsx b/apps/web/src/components/Onboarding/OnboardOptions/OnboardOptions.tsx
index 118b0c35f..c9c40164f 100644
--- a/apps/web/src/components/Onboarding/OnboardOptions/OnboardOptions.tsx
+++ b/apps/web/src/components/Onboarding/OnboardOptions/OnboardOptions.tsx
@@ -43,19 +43,19 @@ export const OnboardOptions = ({ children }: PropsWithChildren) => {
 
       <Center flexDirection="column" gap="36px" width="full" height="full">
         <Flex gap={{ base: "24px", md: "30px" }} marginTop="30px" color={color("white", "black")}>
-          <AccountTileWrapper>
+          <AccountTileWrapper size="md">
             <OnboardWithGoogleButton />
           </AccountTileWrapper>
 
-          <AccountTileWrapper>
+          <AccountTileWrapper size="md">
             <OnboardWithFacebookButton />
           </AccountTileWrapper>
 
-          <AccountTileWrapper>
+          <AccountTileWrapper size="md">
             <OnboardWithTwitterButton />
           </AccountTileWrapper>
 
-          <AccountTileWrapper>
+          <AccountTileWrapper size="md">
             <OnboardWithRedditButton />
           </AccountTileWrapper>
         </Flex>
diff --git a/apps/web/src/components/Onboarding/OnboardOptions/OnboardWithFacebookButton.tsx b/apps/web/src/components/Onboarding/OnboardOptions/OnboardWithFacebookButton.tsx
index 7a137bfcc..3c30565fe 100644
--- a/apps/web/src/components/Onboarding/OnboardOptions/OnboardWithFacebookButton.tsx
+++ b/apps/web/src/components/Onboarding/OnboardOptions/OnboardWithFacebookButton.tsx
@@ -11,9 +11,10 @@ export const OnboardWithFacebookButton = ({
 
   return (
     <IconButton
+      boxSize="full"
       aria-label="Facebook SSO"
       data-testid="login-button-facebook"
-      icon={<FacebookIcon />}
+      icon={<FacebookIcon width="60px" height="60px" />}
       isLoading={isLoading}
       onClick={onboard}
       variant="socialLogin"
diff --git a/apps/web/src/components/Onboarding/OnboardOptions/OnboardWithGoogleButton.tsx b/apps/web/src/components/Onboarding/OnboardOptions/OnboardWithGoogleButton.tsx
index 83ac5249d..1ea73800d 100644
--- a/apps/web/src/components/Onboarding/OnboardOptions/OnboardWithGoogleButton.tsx
+++ b/apps/web/src/components/Onboarding/OnboardOptions/OnboardWithGoogleButton.tsx
@@ -11,9 +11,10 @@ export const OnboardWithGoogleButton = ({
 
   return (
     <IconButton
+      boxSize="full"
       aria-label="Google SSO"
       data-testid="login-button-google"
-      icon={<GoogleIcon />}
+      icon={<GoogleIcon width="60px" height="60px" />}
       isLoading={isLoading}
       onClick={onboard}
       variant="socialLogin"
diff --git a/apps/web/src/components/Onboarding/OnboardOptions/OnboardWithRedditButton.tsx b/apps/web/src/components/Onboarding/OnboardOptions/OnboardWithRedditButton.tsx
index ef982d17b..587eedf62 100644
--- a/apps/web/src/components/Onboarding/OnboardOptions/OnboardWithRedditButton.tsx
+++ b/apps/web/src/components/Onboarding/OnboardOptions/OnboardWithRedditButton.tsx
@@ -11,9 +11,10 @@ export const OnboardWithRedditButton = ({
 
   return (
     <IconButton
+      boxSize="full"
       aria-label="Reddit SSO"
       data-testid="login-button-reddit"
-      icon={<RedditIcon />}
+      icon={<RedditIcon width="30px" height="30px" />}
       isLoading={isLoading}
       onClick={onboard}
       variant="socialLogin"
diff --git a/apps/web/src/components/Onboarding/OnboardOptions/OnboardWithTwitterButton.tsx b/apps/web/src/components/Onboarding/OnboardOptions/OnboardWithTwitterButton.tsx
index d2c16f97b..aa9f5a14b 100644
--- a/apps/web/src/components/Onboarding/OnboardOptions/OnboardWithTwitterButton.tsx
+++ b/apps/web/src/components/Onboarding/OnboardOptions/OnboardWithTwitterButton.tsx
@@ -11,10 +11,11 @@ export const OnboardWithTwitterButton = ({
 
   return (
     <IconButton
+      boxSize="full"
       color="black"
       aria-label="Twitter SSO"
       data-testid="login-button-twitter"
-      icon={<TwitterIcon fill="currentColor" />}
+      icon={<TwitterIcon width="24px" height="22px" fill="currentColor" />}
       isLoading={isLoading}
       onClick={onboard}
       variant="socialLogin"
diff --git a/apps/web/src/components/Onboarding/SetupPassword/SetupPassword.tsx b/apps/web/src/components/Onboarding/SetupPassword/SetupPassword.tsx
index d448d6473..67e809c50 100644
--- a/apps/web/src/components/Onboarding/SetupPassword/SetupPassword.tsx
+++ b/apps/web/src/components/Onboarding/SetupPassword/SetupPassword.tsx
@@ -42,7 +42,8 @@ const getModeConfig = (mode: Mode) => {
         icon: UserIcon,
         title: "Create Password",
         buttonLabel: "Create Account",
-        subtitle: "Set a password to unlock your wallet. Make sure to store your password safely.",
+        subtitle:
+          "Set a password to unlock your wallet.\n Make sure to store your password safely.",
       };
     case "save_backup":
       return {
@@ -92,9 +93,11 @@ export const SetupPassword = ({ mode }: SetupPasswordProps) => {
       <ModalHeader>
         <ModalBackButton />
         <ModalCloseButton />
-        <Center flexDirection="column" gap="16px">
-          <Icon as={icon} width="24px" height="24px" color={color("blue")} />
-          <Heading size="xl">{title}</Heading>
+        <Center flexDirection="column" gap="12px" whiteSpace="break-spaces">
+          <Icon as={icon} width="24px" height="24px" color={color("400")} />
+          <Heading marginTop="4px" size="xl">
+            {title}
+          </Heading>
           {subtitle && (
             <Text width="full" color={color("700")} fontWeight="400" textAlign="center" size="md">
               {subtitle}
diff --git a/apps/web/src/components/Onboarding/VerificationFlow/ImportantNoticeModal.tsx b/apps/web/src/components/Onboarding/VerificationFlow/ImportantNoticeModal.tsx
index c9dafcd95..06d7a56b4 100644
--- a/apps/web/src/components/Onboarding/VerificationFlow/ImportantNoticeModal.tsx
+++ b/apps/web/src/components/Onboarding/VerificationFlow/ImportantNoticeModal.tsx
@@ -57,7 +57,7 @@ export const ImportantNoticeModal = ({ mnemonic }: ImportantNoticeModalProps) =>
       <ModalHeader>
         <ModalBackButton />
         <Center flexDirection="column" gap="12px">
-          <Icon as={AlertIcon} boxSize="24px" marginBottom="4px" color={color("blue")} />
+          <Icon as={AlertIcon} boxSize="24px" marginBottom="4px" color={color("400")} />
           <Heading size="xl">Important Notice</Heading>
           <Text width="full" color={color("700")} fontWeight="400" textAlign="center" size="md">
             Please read the following before you continue to see your secret Seed Phrase.
diff --git a/apps/web/src/components/Onboarding/VerificationFlow/RecordSeedphraseModal.tsx b/apps/web/src/components/Onboarding/VerificationFlow/RecordSeedphraseModal.tsx
index d0504bdf5..c1053b301 100644
--- a/apps/web/src/components/Onboarding/VerificationFlow/RecordSeedphraseModal.tsx
+++ b/apps/web/src/components/Onboarding/VerificationFlow/RecordSeedphraseModal.tsx
@@ -36,7 +36,7 @@ export const RecordSeedphraseModal = ({ seedPhrase }: CopySeedphraseModalProps)
         <ModalBackButton />
         <ModalCloseButton />
         <Center flexDirection="column" gap="12px">
-          <Icon as={KeyIcon} boxSize="24px" marginBottom="4px" color={color("blue")} />
+          <Icon as={KeyIcon} boxSize="24px" marginBottom="4px" color={color("400")} />
           <Heading size="xl">Record Seed Phrase</Heading>
           <Text width="full" color={color("700")} fontWeight="400" textAlign="center" size="md">
             Record these 24 words in order to restore your wallet in the future
diff --git a/apps/web/src/components/Onboarding/VerificationFlow/VerificationInfoModal.tsx b/apps/web/src/components/Onboarding/VerificationFlow/VerificationInfoModal.tsx
index 3f23f4242..e5c6e0404 100644
--- a/apps/web/src/components/Onboarding/VerificationFlow/VerificationInfoModal.tsx
+++ b/apps/web/src/components/Onboarding/VerificationFlow/VerificationInfoModal.tsx
@@ -45,7 +45,7 @@ export const VerificationInfoModal = () => {
     <ModalContent>
       <ModalHeader>
         <Flex alignItems="center" justifyContent="center" flexDirection="column" gap="16px">
-          <AlertIcon width="22px" color="blue" />
+          <AlertIcon width="22px" color={color("400")} />
           <Heading size="xl">How does Verification Work?</Heading>
         </Flex>
         <ModalCloseButton />
diff --git a/apps/web/src/components/Onboarding/VerificationFlow/VerifyMessage.tsx b/apps/web/src/components/Onboarding/VerificationFlow/VerifyMessage.tsx
index ed5cdc6fb..7ee12c1c1 100644
--- a/apps/web/src/components/Onboarding/VerificationFlow/VerifyMessage.tsx
+++ b/apps/web/src/components/Onboarding/VerificationFlow/VerifyMessage.tsx
@@ -24,7 +24,7 @@ export const VerifyMessage = ({ ...props }: Omit<EmptyMessageProps, "title">) =>
       />
       <Link
         marginTop="16px"
-        color={color("600")}
+        color={color("500")}
         fontSize="12px"
         onClick={() => openWith(<VerificationInfoModal />)}
         textDecor="underline"
diff --git a/apps/web/src/components/Onboarding/VerificationFlow/VerifySeedphraseModal.tsx b/apps/web/src/components/Onboarding/VerificationFlow/VerifySeedphraseModal.tsx
index 4af70142d..ee8ba9107 100644
--- a/apps/web/src/components/Onboarding/VerificationFlow/VerifySeedphraseModal.tsx
+++ b/apps/web/src/components/Onboarding/VerificationFlow/VerifySeedphraseModal.tsx
@@ -69,7 +69,7 @@ export const VerifySeedphraseModal = ({ seedPhrase }: VerifySeedphraseModalProps
         <ModalBackButton />
         <ModalCloseButton />
         <Center flexDirection="column" gap="12px">
-          <Icon as={KeyIcon} boxSize="24px" marginBottom="4px" color={color("blue")} />
+          <Icon as={KeyIcon} boxSize="24px" marginBottom="4px" color={color("400")} />
           <Heading size="xl">Verify Seed Phrase</Heading>
           <Text width="full" color={color("700")} fontWeight="400" textAlign="center" size="md">
             To verify, please type in the word that corresponds to each sequence number.
diff --git a/apps/web/src/components/PasswordInput/PasswordInput.tsx b/apps/web/src/components/PasswordInput/PasswordInput.tsx
index 4f4283e0c..5bd4f972d 100644
--- a/apps/web/src/components/PasswordInput/PasswordInput.tsx
+++ b/apps/web/src/components/PasswordInput/PasswordInput.tsx
@@ -79,6 +79,11 @@ export const PasswordInput = <T extends FieldValues, U extends Path<T>>({
       <FormLabel>{label}</FormLabel>
       <InputGroup marginTop="12px">
         <Input
+          color={color("400")}
+          fontSize="18px"
+          _focusWithin={{
+            color: color("900"),
+          }}
           aria-label={label}
           autoComplete="off"
           placeholder={placeholder}
diff --git a/apps/web/src/components/ViewOverlay/ViewOverlay.tsx b/apps/web/src/components/ViewOverlay/ViewOverlay.tsx
index 944379161..19cfba475 100644
--- a/apps/web/src/components/ViewOverlay/ViewOverlay.tsx
+++ b/apps/web/src/components/ViewOverlay/ViewOverlay.tsx
@@ -27,7 +27,7 @@ export const ViewOverlay = ({ iconType }: ViewOverlayProps) => {
     }
   };
 
-  const currentColor = color("50");
+  const currentColor = color("400");
 
   return (
     <Box
@@ -37,35 +37,13 @@ export const ViewOverlay = ({ iconType }: ViewOverlayProps) => {
       overflow="hidden"
       width="100%"
       height="100%"
+      color={currentColor}
+      opacity="0.1"
       z-index="0"
     >
-      <Icon
-        as={getIcon()}
-        position="absolute"
-        top="30%"
-        left="-20%"
-        width="50%"
-        height="auto"
-        color={currentColor}
-      />
-      <Icon
-        as={getIcon()}
-        position="absolute"
-        top="5%"
-        left="50%"
-        width="20%"
-        height="auto"
-        color={currentColor}
-      />
-      <Icon
-        as={getIcon()}
-        position="absolute"
-        top="78%"
-        right="5%"
-        width="30%"
-        height="auto"
-        color={currentColor}
-      />
+      <Icon as={getIcon()} position="absolute" top="30%" left="-20%" width="50%" height="auto" />
+      <Icon as={getIcon()} position="absolute" top="5%" left="50%" width="20%" height="auto" />
+      <Icon as={getIcon()} position="absolute" top="78%" right="5%" width="30%" height="auto" />
     </Box>
   );
 };
diff --git a/apps/web/src/styles/theme.ts b/apps/web/src/styles/theme.ts
index 19fce1f1a..8f39889ac 100644
--- a/apps/web/src/styles/theme.ts
+++ b/apps/web/src/styles/theme.ts
@@ -224,6 +224,9 @@ const theme = extendTheme({
     },
     Tabs: {
       baseStyle: (props: StyleFunctionProps) => ({
+        tablist: {
+          color: "gray.500",
+        },
         tab: {
           color: "gray.500",
           _selected: {
@@ -323,7 +326,6 @@ const theme = extendTheme({
     },
     Link: {
       baseStyle: {
-        color: "gray.600",
         textUnderlineOffset: "2px",
       },
       variants: {
@@ -418,10 +420,10 @@ const theme = extendTheme({
           },
         },
         primary: {
-          bg: light.blue,
+          bg: light.blueDark,
           color: dark.grey.black,
           _hover: {
-            bg: light.blueDark,
+            bg: light.blue,
           },
         },
         alert: {
@@ -544,6 +546,10 @@ const theme = extendTheme({
         },
       },
       baseStyle: {
+        overlay: {
+          background: "rgba(22, 22, 43, 0.80)",
+          backdropFilter: "blur(5px)",
+        },
         closeButton: {
           bg: "transparent",
           color: "gray.400",
@@ -629,6 +635,9 @@ const theme = extendTheme({
       "#root": {
         bg: mode(light.bgGradient, dark.bgGradient)(props),
       },
+      "#root:has(.welcome-view)": {
+        bg: "radial-gradient(123.02% 70.68% at 50% 49.96%, rgba(22, 22, 43, 0.00) 0%, #10121B 100%)",
+      },
       body: {
         color: mode(light.grey[600], dark.grey[600])(props),
         bg: mode(light.bg, dark.bg)(props),
diff --git a/apps/web/src/views/Welcome/Welcome.tsx b/apps/web/src/views/Welcome/Welcome.tsx
index efb4b4819..d5aca1ec6 100644
--- a/apps/web/src/views/Welcome/Welcome.tsx
+++ b/apps/web/src/views/Welcome/Welcome.tsx
@@ -26,6 +26,7 @@ export const Welcome = () => {
 
   return (
     <Grid
+      className="welcome-view"
       justifyItems="center"
       gridGap={{ base: "36px", md: "60px" }}
       gridTemplateRows={{ base: "130px auto", md: "auto 444px auto" }}
@@ -68,7 +69,9 @@ export const Welcome = () => {
           flexDirection="column"
           width="full"
           height="full"
-          padding={{ base: "36px 12px", md: "36px 42px" }}
+          padding={{ base: "36px", md: "36px 42px" }}
+          color={color("700")}
+          fontSize="14px"
           border="1px solid"
           borderColor={color("100")}
           borderTopRadius="30px"
@@ -78,7 +81,15 @@ export const Welcome = () => {
           <OnboardOptions>
             <Text color={color("700")} size="sm">
               By proceeding, you agree to Umami's{" "}
-              <Link fontWeight="600" href="https://umamiwallet.com/tos.html" isExternal>
+              <Link
+                fontWeight="600"
+                textDecoration="underline"
+                _hover={{
+                  color: color("500"),
+                }}
+                href="https://umamiwallet.com/tos.html"
+                isExternal
+              >
                 Terms of Use
               </Link>
             </Text>
@@ -86,13 +97,12 @@ export const Welcome = () => {
               <>
                 <Flex gap="10px">
                   <TermsLink />
-                  <Divider height="24px" orientation="vertical" />
+                  <Divider height="24px" color={color("300")} orientation="vertical" />
                   <PrivacyLink />
-                  <Divider height="24px" orientation="vertical" />
+                  <Divider height="24px" color={color("300")} orientation="vertical" />
                   <SupportLink />
-                  <Divider height="24px" orientation="vertical" />
+                  <Divider height="24px" color={color("300")} orientation="vertical" />
                   <CommunityLink />
-                  <Divider height="24px" orientation="vertical" />
                 </Flex>
 
                 <Copyright />
@@ -113,18 +123,18 @@ export const Welcome = () => {
             display="flex"
             marginBottom="5px"
             color={color("700")}
+            fontSize="14px"
           >
             <Copyright />
-            <Divider height="24px" orientation="vertical" />
+            <Divider height="24px" color={color("300")} orientation="vertical" />
             <TermsLink />
-            <Divider height="24px" orientation="vertical" />
+            <Divider height="24px" color={color("300")} orientation="vertical" />
             <PrivacyLink />
           </GridItem>
 
           <Logo alignSelf="end" gridArea="tezos-logo" />
 
           <GridItem
-            zIndex={1401}
             justifySelf="end"
             alignSelf="end"
             gap="10px"
@@ -132,11 +142,12 @@ export const Welcome = () => {
             display="flex"
             marginBottom="5px"
             color={color("700")}
+            fontSize="14px"
           >
             <SupportLink />
-            <Divider height="24px" orientation="vertical" />
+            <Divider height="24px" color={color("300")} orientation="vertical" />
             <CommunityLink />
-            <Divider height="24px" orientation="vertical" />
+            <Divider height="24px" color={color("300")} orientation="vertical" />
             <ArticlesLink />
           </GridItem>
         </>