diff --git a/src/popup.ts b/src/popup.ts
index b722c0d..41eadd8 100644
--- a/src/popup.ts
+++ b/src/popup.ts
@@ -9,7 +9,7 @@ interface PopupOptions {
 // Ensures retina subpixel rounding
 // does not leave slightly blurry underlap
 const defaultWidth = 442;
-const defaultHeight = 635;
+const defaultHeight = 532;
 const defaultTitle = 'Continue with Data Vault';
 
 // https://developer.mozilla.org/en-US/docs/Web/API/Window/open
diff --git a/src/react/components/checklist/index.tsx b/src/react/components/checklist/index.tsx
index da56b52..da6ba23 100644
--- a/src/react/components/checklist/index.tsx
+++ b/src/react/components/checklist/index.tsx
@@ -22,15 +22,15 @@ const CheckList: React.FC<CheckListProps> = ({ items }) => (
       return (
         <Flex
           px={6}
-          pb={3}
-          pt={key === 0 ? 0 : 3}
+          pb={5}
+          pt={5}
           borderBottom={items.length - 1 !== key ? '1px solid' : 'unset'}
           borderColor="inherit"
           align="center"
           textAlign="left"
           key={key}
         >
-          <Box color="blue" pr={3}>
+          <Box color="blue" alignSelf="stretch" mt={1} mr={4}>
             <Icon />
           </Box>
           <Item>{text}</Item>
diff --git a/src/react/components/checkmark.tsx b/src/react/components/checkmark.tsx
new file mode 100644
index 0000000..6be6c51
--- /dev/null
+++ b/src/react/components/checkmark.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+
+export const CheckmarkIcon = ({ size = 72 }: { size?: number }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} fill="none" viewBox="0 0 72 72">
+    <circle cx="36" cy="36" r="34.5" fill="#fff" stroke="#00A73E" strokeWidth="3"></circle>
+    <path stroke="#00A73E" strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M21 37l10 10 20-22"></path>
+  </svg>
+);
diff --git a/src/react/components/link.tsx b/src/react/components/link.tsx
index bc9c025..e7698c2 100644
--- a/src/react/components/link.tsx
+++ b/src/react/components/link.tsx
@@ -6,12 +6,10 @@ interface LinkProps extends BoxProps {
   _hover?: BoxProps;
 }
 
-const Link: React.FC<LinkProps> = ({ _hover = {}, children, ...rest }) => (
+export const Link: React.FC<LinkProps> = ({ _hover = {}, children, ...rest }) => (
   <Box {...rest}>
-    <Text _hover={{ textDecoration: 'underline', cursor: 'pointer', ..._hover }} fontWeight="medium">
+    <Text _hover={{ textDecoration: 'underline', cursor: 'pointer', ..._hover }} textStyle="caption.medium">
       {children}
     </Text>
   </Box>
 );
-
-export { Link };
diff --git a/src/react/components/modal/index.tsx b/src/react/components/modal/index.tsx
index b55d78d..c4f7aa3 100644
--- a/src/react/components/modal/index.tsx
+++ b/src/react/components/modal/index.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Modal as BlockstackModal, ThemeProvider, theme, CSSReset, Flex, Box, Text } from '@blockstack/ui';
-import CloseIcon from 'mdi-react/CloseIcon';
 import ChevronLeftIcon from 'mdi-react/ChevronLeftIcon';
 import { useHover } from 'use-events';
 import { Logo } from '../logo';
@@ -11,6 +10,17 @@ import { ContinueWithDataVault } from '../screens/sign-in';
 import { useConnect } from '../../hooks/useConnect';
 import { States } from '../connect/context';
 
+const CloseIcon = ({ size = 16 }) => (
+  <svg width={size} height={size} viewBox="0 0 16 16">
+    <path
+      fill="#C1C3CC"
+      fillRule="evenodd"
+      d="M4.817 3.403a1 1 0 00-1.414 1.414L6.586 8l-3.183 3.183a1 1 0 001.414 1.415L8 9.415l3.183 3.183a1 1 0 101.415-1.415L9.415 8l3.183-3.183a1.002 1.002 0 00-.325-1.631 1 1 0 00-1.09.217L8 6.586 4.817 3.403z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
 interface HeaderTitleProps {
   title: string;
   hideIcon?: boolean;
@@ -19,7 +29,7 @@ interface HeaderTitleProps {
 const HeaderTitle: React.FC<HeaderTitleProps> = ({ hideIcon = false, title }) => (
   <Flex align="center">
     {hideIcon ? null : <Logo mr={2} />}
-    <Text fontWeight="bold" fontSize={'12px'}>
+    <Text fontWeight={500} fontSize={'12px'}>
       {title}
     </Text>
   </Flex>
@@ -32,13 +42,13 @@ interface ModalHeader {
   hideIcon?: boolean;
 }
 
-const ModalHeaderIconButton = (props: any) => {
+const ModalHeaderIconButton = ({ size, ...props }: any) => {
   const [hover, bind] = useHover();
   const Icon = props.icon;
 
   return (
-    <Box as="button" cursor={hover ? 'pointer' : 'unset'} opacity={hover ? 1 : 0.5} {...bind} {...props}>
-      <Icon size={20} />
+    <Box as="button" cursor={hover ? 'pointer' : 'unset'} {...bind} {...props}>
+      <Icon size={size} />
     </Box>
   );
 };
@@ -48,7 +58,7 @@ const ModalHeader = ({ title, back, hideIcon, close, ...rest }: ModalHeader) =>
 
   return (
     <Flex
-      p={[4, 5]}
+      p={4}
       borderRadius={['unset', '6px 6px 0 0']}
       bg="white"
       align="center"
@@ -58,11 +68,11 @@ const ModalHeader = ({ title, back, hideIcon, close, ...rest }: ModalHeader) =>
       borderBottomColor="inherit"
       {...rest}
     >
-      {back ? <ModalHeaderIconButton onClick={() => doChangeScreen(back)} icon={ChevronLeftIcon} /> : null}
+      {back ? <ModalHeaderIconButton onClick={() => doChangeScreen(back)} icon={ChevronLeftIcon} size={20} /> : null}
       <Flex align="center" mx={back ? 'auto' : 'unset'} transform={back ? 'translateX(-15px)' : 'unset'}>
         <HeaderTitle hideIcon={hideIcon} title={title} />
       </Flex>
-      {close ? <ModalHeaderIconButton icon={CloseIcon} onClick={doCloseDataVault} /> : null}
+      {close ? <ModalHeaderIconButton size={16} icon={CloseIcon} onClick={doCloseDataVault} /> : null}
     </Flex>
   );
 };
diff --git a/src/react/components/screen/screen-body.tsx b/src/react/components/screen/screen-body.tsx
index 182bc1e..53a088d 100644
--- a/src/react/components/screen/screen-body.tsx
+++ b/src/react/components/screen/screen-body.tsx
@@ -1,23 +1,21 @@
 import React from 'react';
 
-import { Stack, BoxProps } from '@blockstack/ui';
+import { Flex, FlexProps } from '@blockstack/ui';
 import { Title, Body, Pretitle } from '../typography';
 
-export interface ScreenBodyProps extends BoxProps {
+export interface ScreenBodyProps extends FlexProps {
   title?: string;
   pretitle?: string | React.ElementType;
   body?: (string | JSX.Element)[];
   fullWidth?: boolean;
 }
 
-export const ScreenBody = ({ title, body, pretitle, fullWidth, ...rest }: ScreenBodyProps) => (
-  <Stack spacing={3} mx={fullWidth ? 0 : 6} {...rest}>
-    {pretitle && <Pretitle>{pretitle}</Pretitle>}
-    {title && <Title>{title}</Title>}
-    {body && (
-      <Stack spacing={[3, 4]}>
-        {body && body.length ? body.map((text, key) => <Body key={key}>{text}</Body>) : body}
-      </Stack>
-    )}
-  </Stack>
-);
+export const ScreenBody = ({ title, body, pretitle, fullWidth, ...rest }: ScreenBodyProps) => {
+  return (
+    <Flex mx={fullWidth ? 0 : 6} flexDirection="column" {...rest}>
+      {pretitle && <Pretitle>{pretitle}</Pretitle>}
+      {title && <Title>{title}</Title>}
+      {body && body.length ? body.map((text, key) => <Body key={key}>{text}</Body>) : body}
+    </Flex>
+  );
+};
diff --git a/src/react/components/screen/screen-header.tsx b/src/react/components/screen/screen-header.tsx
index 0161be1..cfb6b86 100644
--- a/src/react/components/screen/screen-header.tsx
+++ b/src/react/components/screen/screen-header.tsx
@@ -13,7 +13,7 @@ interface HeaderTitleProps {
 const HeaderTitle: React.FC<HeaderTitleProps> = ({ hideLogo, title }) => (
   <Flex align="center">
     {hideLogo ? null : <Logo mr={2} />}
-    <Text fontWeight="bold" fontSize={'12px'}>
+    <Text fontWeight={500} fontSize={'12px'}>
       {title}
     </Text>
   </Flex>
@@ -50,7 +50,7 @@ export const ScreenHeader = ({
   return (
     <Flex
       p={[4, 5]}
-      mb={6}
+      height="56px"
       borderBottom="1px solid"
       borderBottomColor="inherit"
       borderRadius={['unset', '6px 6px 0 0']}
diff --git a/src/react/components/screen/screen.tsx b/src/react/components/screen/screen.tsx
index 344b26e..3e1cd01 100644
--- a/src/react/components/screen/screen.tsx
+++ b/src/react/components/screen/screen.tsx
@@ -1,41 +1,25 @@
 import React from 'react';
 
-import { Stack, BoxProps, StackProps } from '@blockstack/ui';
+import { Flex, FlexProps } from '@blockstack/ui';
 import { ScreenLoader } from './screen-loader';
 
-interface ScreenBodyProps extends BoxProps, StackProps {
+interface ScreenBodyProps extends FlexProps {
   noMinHeight?: boolean;
   isLoading?: boolean;
 }
 
-export const Screen: React.FC<ScreenBodyProps> = ({
-  isInline,
-  spacing = 4,
-  align,
-  justify,
-  shouldWrapChildren,
-  noMinHeight,
-  isLoading,
-  children,
-  ...rest
-}) => (
+export const Screen: React.FC<ScreenBodyProps> = ({ noMinHeight, isLoading, children, ...rest }) => (
   <>
     <ScreenLoader isLoading={isLoading} />
-    <Stack
+    <Flex
       width="100%"
       flexDirection="column"
-      letterSpacing="tighter"
       minHeight={noMinHeight ? undefined : ['calc(100vh - 57px)', 'unset']}
       style={{ pointerEvents: isLoading ? 'none' : 'unset' }}
-      spacing={spacing}
-      isInline={isInline}
-      align={align}
-      justify={justify}
-      shouldWrapChildren={shouldWrapChildren}
       pb={6}
       {...rest}
     >
       {children}
-    </Stack>
+    </Flex>
   </>
 );
diff --git a/src/react/components/screens/finished.tsx b/src/react/components/screens/finished.tsx
index b9cfaaf..9580ff0 100644
--- a/src/react/components/screens/finished.tsx
+++ b/src/react/components/screens/finished.tsx
@@ -1,24 +1,19 @@
 import React from 'react';
 import { Box, BoxProps, Button } from '@blockstack/ui';
 
-import { AppIcon } from '../app-icon';
-
 import { useConnect } from '../../hooks/useConnect';
-import { Logo } from '../logo';
 import { useAppDetails } from '../../hooks/useAppDetails';
 import { Screen, ScreenBody, ScreenActions } from '../screen';
+import { CheckmarkIcon } from '../checkmark';
 
 interface AppElementProps extends BoxProps {
   name: string;
   icon: string;
 }
 
-const AppElement = ({ name, icon, ...rest }: AppElementProps) => (
+const FinishedIcon = ({ ...rest }: AppElementProps) => (
   <Box mx="auto" size="70px" position="relative" {...rest}>
-    <Box position="absolute" top="-4px" right="-4px">
-      <Logo />
-    </Box>
-    <AppIcon size="64px" src={icon} alt={name} borderRadius="0" />
+    <CheckmarkIcon />
   </Box>
 );
 
@@ -28,13 +23,18 @@ export const Finished = () => {
 
   return (
     <Screen textAlign="center" noMinHeight>
-      <AppElement mt={5} name={name} icon={icon} />
+      <FinishedIcon mt={10} name={name} icon={icon} />
       <ScreenBody
         title={`${name} has been connected to your Data Vault`}
-        body={[`Everything you do in ${name} will be private, secure, and only accessible with your Secret Key.`]}
+        mt={4}
+        body={[
+          <Box mt={2}>
+            Everything you do in {name} will be private, secure, and only accessible with your Secret Key.
+          </Box>,
+        ]}
       />
       <ScreenActions>
-        <Button width="100%" onClick={() => doCloseDataVault()}>
+        <Button width="100%" mt={4} onClick={() => doCloseDataVault()}>
           Close
         </Button>
       </ScreenActions>
diff --git a/src/react/components/screens/how-it-works.tsx b/src/react/components/screens/how-it-works.tsx
index 651887c..31dd344 100644
--- a/src/react/components/screens/how-it-works.tsx
+++ b/src/react/components/screens/how-it-works.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Text, Stack, Button } from '@blockstack/ui';
+import { Box, Text, Button } from '@blockstack/ui';
 
 import { useAppDetails } from '../../hooks/useAppDetails';
 import { BlockchainIcon, AppsIcon, EncryptionIcon } from '../vector';
@@ -7,10 +7,7 @@ import { useConnect } from '../../hooks/useConnect';
 
 import { Screen, ScreenBody, ScreenActions } from '../screen/index';
 
-const howDataVaultWorks = (appName: string) => [
-  {
-    body: `Usually, apps store your data on their servers for their own use. Data Vault isolates your encrypted data from use by others so that apps like ${appName} (and even Data Vault) can’t use it.`,
-  },
+const howDataVaultWorks = [
   {
     icon: <EncryptionIcon />,
     title: 'Encryption',
@@ -39,23 +36,32 @@ export const HowItWorks: React.FC = () => {
       <ScreenBody
         pretitle="How it works"
         title={`Data Vault keeps what you do in ${name} private`}
-        body={howDataVaultWorks(name).map(({ title, body, icon: Icon }, key) => (
-          <Box px={0} key={key}>
-            <Stack spacing={3}>
-              {Icon && (
+        body={[
+          <Text mt={2} display="block">
+            Usually, apps store your data on their servers for their own use. Data Vault isolates your encrypted data
+            from use by others so that apps like {name} (and even Data Vault) can’t use it.
+          </Text>,
+          <Box mt={2}>
+            {howDataVaultWorks.map(({ title, body, icon }, key) => (
+              <Box mt={8} key={key}>
                 <Box size="24px" color="blue" borderRadius="8px">
-                  {Icon && Icon}
+                  {icon}
                 </Box>
-              )}
-              {title && <Text fontWeight="semibold">{title}</Text>}
-              <Text pb={2}>{body}</Text>
-            </Stack>
-          </Box>
-        ))}
+                <Text mt={3} display="block" fontWeight="semibold">
+                  {title}
+                </Text>
+                <Text mt={2} display="block">
+                  {body}
+                </Text>
+              </Box>
+            ))}
+          </Box>,
+        ]}
       />
       <ScreenActions>
         <Button
           width="100%"
+          mt={6}
           onClick={() => {
             // eslint-disable-next-line @typescript-eslint/no-floating-promises
             authenticate(authOptions);
diff --git a/src/react/components/screens/intro.tsx b/src/react/components/screens/intro.tsx
index e7d7c36..76652b1 100644
--- a/src/react/components/screens/intro.tsx
+++ b/src/react/components/screens/intro.tsx
@@ -20,7 +20,7 @@ const AppElement = ({
   name: string;
   icon: string;
 }) => (
-  <Box mx="auto" size="70px" position="relative" {...rest}>
+  <Box mx="auto" height="70px" position="relative" {...rest}>
     <Box position="absolute" top="-4px" right="-4px">
       <Logo />
     </Box>
@@ -34,33 +34,37 @@ export const Intro = () => {
 
   return (
     <Screen noMinHeight textAlign="center">
-      <AppElement mt={5} name={name} icon={icon} />
+      <AppElement mt={8} mb={4} name={name} icon={icon} />
       <ScreenBody
         fullWidth
+        mt={4}
         title={`Use ${name} privately and securely with Data Vault`}
         body={[
-          <Box mx="auto" width="100%" height="1px" bg="#E5E5EC" />,
-          <CheckList
-            items={[
-              {
-                icon: () => <AppIcon alt={name} src={icon} />,
-                text: `You will use your Data Vault to sign into ${name} privately`,
-              },
-              {
-                icon: EncryptionIcon,
-                text: `Data Vault keeps what you do in ${name} private using encryption and blockchain`,
-              },
-              {
-                icon: AppsIcon,
-                text: 'Data Vault is free to use with over 300 apps',
-              },
-            ]}
-          />,
+          <Box mt={4} mx="auto" width="100%" height="1px" bg="#E5E5EC" />,
+          <Box>
+            <CheckList
+              items={[
+                {
+                  icon: () => <AppIcon alt={name} src={icon} />,
+                  text: `You will use your Data Vault to sign into ${name} privately`,
+                },
+                {
+                  icon: EncryptionIcon,
+                  text: `Data Vault keeps what you do in ${name} private using encryption and blockchain`,
+                },
+                {
+                  icon: AppsIcon,
+                  text: 'Data Vault is free to use with over 300 apps',
+                },
+              ]}
+            />
+          </Box>,
         ]}
       />
       <ScreenActions>
         <Button
           width="100%"
+          mt={2}
           onClick={() => {
             doStartAuth();
             // eslint-disable-next-line @typescript-eslint/no-floating-promises
@@ -77,8 +81,9 @@ export const Intro = () => {
         </Button>
       </ScreenActions>
       <ScreenFooter>
-        <Stack spacing={4} isInline>
+        <Stack mt={5} spacing={4} isInline>
           <Link
+            color="blue"
             onClick={() => {
               doStartAuth();
               // eslint-disable-next-line @typescript-eslint/no-floating-promises
@@ -95,6 +100,7 @@ export const Intro = () => {
             Sign in to Data Vault
           </Link>
           <Link
+            color="blue"
             onClick={() => {
               doGoToHowItWorksScreen();
             }}
diff --git a/src/react/components/screens/sign-in.tsx b/src/react/components/screens/sign-in.tsx
index e469bd0..7f1232a 100644
--- a/src/react/components/screens/sign-in.tsx
+++ b/src/react/components/screens/sign-in.tsx
@@ -19,6 +19,7 @@ const ContinueWithDataVault: React.FC = props => {
       py={3}
       borderRadius="6px"
       boxShadow="mid"
+      height={14}
       transition="250ms all"
       cursor={hovered ? 'pointer' : 'unset'}
       bg={hovered ? 'rgba(0,0,0,0.02)' : 'white'}
@@ -31,7 +32,7 @@ const ContinueWithDataVault: React.FC = props => {
       {...props}
     >
       <Logo mr={2} />
-      <Text>Continue with Data Vault</Text>
+      <Text fontWeight={500}>Continue with Data Vault</Text>
     </Flex>
   );
 };
diff --git a/src/react/components/typography/index.tsx b/src/react/components/typography/index.tsx
index 4c7878f..b35cce0 100644
--- a/src/react/components/typography/index.tsx
+++ b/src/react/components/typography/index.tsx
@@ -6,7 +6,7 @@ const Title: React.FC = props => <Text width="100%" fontWeight="medium" fontSize
 
 const Pretitle: React.FC = props => (
   <Text
-    pt={5}
+    pt={6}
     width="100%"
     fontWeight="medium"
     fontSize={['11px']}
diff --git a/webpack.config.js b/webpack.config.js
index deb5d82..f364179 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -34,12 +34,12 @@ module.exports = {
     ],
   },
   resolve: {
-    extensions: [ '.tsx', '.ts', '.js' ],
+    extensions: ['.tsx', '.ts', '.js'],
   },
   output: {
     filename: 'bundle.js',
     path: path.resolve(__dirname, 'dist'),
     library: 'blockstackConnect',
-    libraryTarget: 'var'
-  }
-};
\ No newline at end of file
+    libraryTarget: 'var',
+  },
+};