diff --git a/packages/web/components/Landing/Signup/Cards.tsx b/packages/web/components/Landing/Signup/Cards.tsx
index 0f0997664..95e82c2d1 100644
--- a/packages/web/components/Landing/Signup/Cards.tsx
+++ b/packages/web/components/Landing/Signup/Cards.tsx
@@ -3,39 +3,49 @@ import {
   Box,
   Button,
   Flex,
+  Icon,
   IconButton,
   Image,
   Link,
   List,
   ListIcon,
   ListItem,
+  Table,
+  TableContainer,
+  Tbody,
+  Td,
   Text,
+  Th,
+  Thead,
+  Tr,
   useBreakpointValue,
 } from '@metafam/ds';
 import { useRouter } from 'next/router';
+import React from 'react';
 import { BsFillCheckCircleFill } from 'react-icons/bs';
 import { FaCircle } from 'react-icons/fa';
 import { MdChevronRight } from 'react-icons/md';
 
-import { RoleTitle } from './data';
+import { Perk, PerkList } from './data';
 
-export interface Perk {
-  perk: string;
-  checked: boolean;
+interface PerksChecklistProps {
+  perks: Perk[];
+  id: keyof Perk;
+  altBackground?: boolean;
 }
 
-type CardProps = {
+interface CardProps {
   title?: string;
   type?: string;
   image?: string;
   price?: string;
+  id?: keyof Perk;
   description?: string;
   action?: string;
   list?: Perk[];
   width?: string;
   background?: string;
   badgeColor?: string;
-  info?: string;
   route?: string;
   link?: string;
   recommended?: boolean;
@@ -47,19 +57,17 @@ export const RoleCard: React.FC<CardProps> = ({
   description,
   recommended,
   action,
-  info,
   route,
   link,
 }) => {
   const router = useRouter();
-  const activeTab = router.query.tab ?? RoleTitle.Player;
   const isMobile = useBreakpointValue({
     base: true,
     lg: false,
   });
   return (
     <Box
-      h={{ sm: 'full', lg: '494px' }}
+      h="full"
       w={{ sm: 'full', lg: '320px' }}
       border={{ base: '1px solid #FF00FF', lg: '4px solid #FF00FF' }}
       borderRadius={18}
@@ -131,38 +139,24 @@ export const RoleCard: React.FC<CardProps> = ({
           fontSize={{ base: 'md', lg: '2xl' }}
           align={{ base: 'start', lg: 'center' }}
         >
-          {description}{' '}
-          {description.includes('Detailed instructions') &&
-            activeTab === RoleTitle.Patron &&
-            (isMobile ? '👉' : '👇')}
-        </Text>
-      )}
-      {info && (
-        <Text
-          fontSize={{ base: 'md', lg: '2xl' }}
-          align={{ base: 'start', lg: 'center' }}
-          fontWeight="bold"
-        >
-          {info}
+          {description}
         </Text>
       )}
       {!isMobile && (
         <>
           {route && (
             <Button
-              colorScheme="pink"
               textTransform="uppercase"
+              colorScheme="pink"
               onClick={() => router.push(route)}
             >
               {action}
             </Button>
           )}
           {link && (
-            <Link href={link}>
-              <Button textTransform="uppercase" colorScheme="pink">
-                {action}
-              </Button>
-            </Link>
+            <Button textTransform="uppercase" colorScheme="pink" onClick={() => { window.location.href = link; }} >
+              {action}
+            </Button>
           )}
         </>
       )}
@@ -173,62 +167,132 @@ export const RoleCard: React.FC<CardProps> = ({
 export const PerksCard: React.FC<CardProps> = ({
   title,
   type,
+  id,
   list,
   price,
   width = 'md',
   description,
   background,
   badgeColor,
-}) => (
+}) => {
+  const isMobile = useBreakpointValue({
+    base: true,
+    lg: false,
+  });
+  return (
+    <Box
+      h="full"
+      w={{ base: 'full', lg: width }}
+      bg={background}
+      display="flex"
+      flexDir="column"
+      alignItems="center"
+      gap={3}
+      p={6}
+    >
+      {title && !isMobile && (
+        <Badge
+          borderRadius="full"
+          variant="subtle"
+          textTransform="uppercase"
+          colorScheme={badgeColor}
+          p={2}
+          fontSize="0.4em"
+        >
+          {title}
+        </Badge>
+      )}
+      {price && (
+        <Text fontSize="xl" fontWeight="semibold">
+          {price}
+        </Text>
+      )}
+      {description && (
+        <Text fontSize="xl" fontWeight="light">
+          {description}
+        </Text>
+      )}
+      {type && (
+        <Text fontSize="xl" textTransform="uppercase">
+          {type}
+        </Text>
+      )}
+      {list && list.length > 0 && (
+        <List fontSize="md" fontWeight="light" justifyContent='center' spacing="12px">
+          {list?.map((item, idx) => (
+            <ListItem key={idx} color={!!id && item?.[id] ? 'white' : 'gray.400'}>
+              <ListIcon
+                as={!!id && item?.[id] ? BsFillCheckCircleFill : FaCircle}
+                color={!!id && item?.[id] ? 'green.500' : 'gray.600'}
+                h={!!id && item?.[id] ? 4 : 3}
+                w={!!id && item?.[id] ? 4 : 3}
+              />
+              {item.title}
+            </ListItem>
+          ))}
+        </List>
+      )}
+    </Box>
+  )
+};
+
+export const PerksChecklist: React.FC<PerksChecklistProps> = ({ perks, id, altBackground }) => (
   <Box
-    h={list && list.length > 10 ? '620px' : 'full'}
-    w={{ base: 'full', lg: width }}
-    bg={background}
+    h="full"
+    w="129px"
+    bg={altBackground ? "#00000029" : "#FFFFFF0A"}
     display="flex"
     flexDir="column"
     alignItems="center"
-    gap={3}
-    p={6}
+    gap="20px"
+    p="20px 20px 10px 20px"
   >
-    {title && (
+    {id && (
       <Badge
         borderRadius="full"
         variant="subtle"
         textTransform="uppercase"
-        colorScheme={badgeColor}
+        colorScheme={
+          (() => {
+            if (id === 'free') return 'green';
+            if (id === 'basic') return 'purple';
+            if (id === 'pro') return 'pink';
+            return 'gray';
+          })()
+        }
         p={2}
         fontSize="0.4em"
       >
-        {title}
+        {id}
       </Badge>
     )}
-    {price && (
-      <Text fontSize="xl" fontWeight="semibold">
-        {price}
-      </Text>
-    )}
-    {description && (
-      <Text fontSize="xl" fontWeight="light">
-        {description}
-      </Text>
-    )}
-    {type && (
-      <Text fontSize="xl" textTransform="uppercase">
-        {type}
-      </Text>
-    )}
-    {list && list.length > 0 && (
-      <List fontSize="md" fontWeight="light">
-        {list?.map((item, idx) => (
-          <ListItem key={idx}>
-            <ListIcon
-              as={item?.checked ? BsFillCheckCircleFill : FaCircle}
-              color={item?.checked ? 'green.500' : 'gray.600'}
-            />
-            {item.perk}
-          </ListItem>
-        ))}
-      </List>
-    )}
-  </Box>
-);
+    <List fontSize="md" fontWeight="light" spacing="14px">
+      {perks?.map((perk, idx) => (
+        <ListItem key={idx}>
+          <ListIcon
+            as={
+              (perk.type === 'Player' && perk[id]) ||
+                (perk.type === 'Guild' && perk[id]) ||
+                (perk.type === 'Patron' && perk[id])
+                ? BsFillCheckCircleFill
+                : FaCircle
+            }
+            color={
+              (perk.type === 'Player' && perk[id]) ||
+                (perk.type === 'Guild' && perk[id]) ||
+                (perk.type === 'Patron' && perk[id])
+                ? 'green.500'
+                : 'gray.600'
+            }
+            h={perk[id] ? 4 : 3}
+            w={perk[id] ? 4 : 3}
+          />
+        </ListItem>
+      ))}
+    </List>
+  </Box >
+)
+
+
+
+
diff --git a/packages/web/components/Landing/Signup/data.ts b/packages/web/components/Landing/Signup/data.ts
index 3ff1d6b0a..e25d9c0f0 100644
--- a/packages/web/components/Landing/Signup/data.ts
+++ b/packages/web/components/Landing/Signup/data.ts
@@ -4,9 +4,21 @@ import BabyOctopus from 'assets/quests/baby_octo.webp';
 import Octopus from 'assets/quests/octopus.webp';
 import YoungPlant from 'assets/young-plant.webp';
 
-interface Perk {
-  perk: string;
-  checked: boolean;
+export enum PerkType {
+  Free = 'free',
+  Basic = 'basic',
+  Pro = 'pro',
+}
+
+export interface Perk {
+  title: string;
+  type: 'Player' | 'Guild' | 'Patron';
+  visitor?: boolean;
+  member?: boolean;
+  free?: boolean;
+  basic?: boolean;
+  pro?: boolean;
+  checked?: boolean;
 }
 
 export interface Role {
@@ -22,11 +34,11 @@ export interface Role {
   price?: string;
 }
 
-interface PerkList {
+export interface PerkList {
   list: Perk[];
   background: string;
+  type: string;
   title?: string;
-  type?: string;
   price?: string;
   description?: string;
 }
@@ -37,115 +49,228 @@ export enum RoleTitle {
   Patron = 'patron',
 }
 
-export const playerVisitorList: Perk[] = [
-  { perk: 'Access to educational resources', checked: true },
-  { perk: 'Access to community calls', checked: true },
-  { perk: 'List of MetaAlliance guilds', checked: true },
-  { perk: 'Free newsletter', checked: true },
-  { perk: 'Search & filter people', checked: false },
-  { perk: 'Access to the community', checked: false },
-  { perk: 'Ability to earn reputation', checked: false },
-  { perk: 'Ability to earn Seed tokens', checked: false },
-  { perk: 'Get ranked & unlock perks', checked: false },
-];
-
-export const playerMemberList: Perk[] = [
-  { perk: 'Access to educational resources', checked: true },
-  { perk: 'Access to community calls', checked: true },
-  { perk: 'List of MetaAlliance guilds', checked: true },
-  { perk: 'Free newsletter', checked: true },
-  { perk: 'Search & filter people', checked: true },
-  { perk: 'Access to the community', checked: true },
-  { perk: 'Ability to earn reputation', checked: true },
-  { perk: 'Ability to earn Seed tokens', checked: true },
-  { perk: 'Get ranked & unlock perks', checked: true },
-];
-
-export const guildFreeList: Perk[] = [
-  { perk: 'Guild page in MG', checked: true },
-  { perk: 'Members directory', checked: true },
-  { perk: 'Your leaderboard', checked: true },
-  { perk: 'Onboarding paths', checked: true },
-  { perk: 'A guild2guild meetup', checked: true },
-  { perk: 'Your news inside MG', checked: true },
-  { perk: 'Post calls to action', checked: false },
-  { perk: 'Search & filter people', checked: false },
-  { perk: 'We shill your grant', checked: false },
-  { perk: 'X thread about you', checked: false },
-  { perk: 'In the follow list on X', checked: false },
-  { perk: 'Your news in the newsletter', checked: false },
-  { perk: 'A podcast interview', checked: false },
-  { perk: 'Part of MetaAlliance', checked: false },
-  { perk: 'A post about you', checked: false },
-  { perk: 'Branch in The Onboarding Game', checked: false },
-];
-
-export const guildBasicList: Perk[] = [
-  { perk: 'Guild page in MG', checked: true },
-  { perk: 'Members directory', checked: true },
-  { perk: 'Your leaderboard', checked: true },
-  { perk: 'Onboarding paths', checked: true },
-  { perk: 'A guild2guild meetup', checked: true },
-  { perk: 'Your news inside MG', checked: true },
-  { perk: 'Post calls to action', checked: true },
-  { perk: 'Search & filter people', checked: true },
-  { perk: 'We shill your grant', checked: true },
-  { perk: 'X thread about you', checked: true },
-  { perk: 'In the follow list on X', checked: true },
-  { perk: 'Your news in the newsletter', checked: true },
-  { perk: 'A podcast interview', checked: true },
-  { perk: 'Part of MetaAlliance', checked: false },
-  { perk: 'A post about you', checked: false },
-  { perk: 'Branch in The Onboarding Game', checked: false },
-];
-
-export const guildProList: Perk[] = [
-  { perk: 'Guild page in MG', checked: true },
-  { perk: 'Members directory', checked: true },
-  { perk: 'Your leaderboard', checked: true },
-  { perk: 'Onboarding paths', checked: true },
-  { perk: 'A guild2guild meetup', checked: true },
-  { perk: 'Your news inside MG', checked: true },
-  { perk: 'Post calls to action', checked: true },
-  { perk: 'Search & filter people', checked: true },
-  { perk: 'We shill your grant', checked: true },
-  { perk: 'X thread about you', checked: true },
-  { perk: 'In the follow list on X', checked: true },
-  { perk: 'Your news in the newsletter', checked: true },
-  { perk: 'A podcast interview', checked: true },
-  { perk: 'Part of MetaAlliance', checked: true },
-  { perk: 'A post about you', checked: true },
-  { perk: 'Branch in The Onboarding Game', checked: true },
+export const playerPerksList: Perk[] = [
+  {
+    title: 'Access to educational resources',
+    type: 'Player',
+    visitor: true,
+    member: true,
+  },
+  {
+    title: 'Access to community calls',
+    type: 'Player',
+    visitor: true,
+    member: true,
+  },
+  {
+    title: 'List of MetaAlliance guilds',
+    type: 'Player',
+    visitor: true,
+    member: true,
+  },
+  { title: 'Free newsletter', type: 'Player', visitor: true, member: true },
+  {
+    title: 'Search & filter people',
+    type: 'Player',
+    visitor: false,
+    member: true,
+  },
+  {
+    title: 'Access to the community',
+    type: 'Player',
+    visitor: false,
+    member: true,
+  },
+  {
+    title: 'Ability to earn reputation',
+    type: 'Player',
+    visitor: false,
+    member: true,
+  },
+  {
+    title: 'Ability to earn Seed tokens',
+    type: 'Player',
+    visitor: false,
+    member: true,
+  },
+  {
+    title: 'Get ranked & unlock perks',
+    type: 'Player',
+    visitor: false,
+    member: true,
+  },
 ];
-
-export const patronFreeList: Perk[] = [
-  { perk: 'Access to educational resources', checked: true },
-  { perk: 'Access to community calls', checked: true },
-  { perk: 'List of MetaAlliance guilds', checked: true },
-  { perk: 'Free newsletter', checked: true },
-  { perk: 'Search & filter people', checked: false },
-  { perk: 'Access to the community', checked: false },
-  { perk: 'Ability to earn reputation', checked: false },
-  { perk: 'Ability to earn Seed tokens', checked: false },
-  { perk: 'Get ranked & unlock perks', checked: false },
+export const guildPerksList: Perk[] = [
+  {
+    title: 'Guild page in MG',
+    type: 'Guild',
+    free: true,
+    basic: true,
+    pro: true,
+  },
+  {
+    title: 'Members directory',
+    type: 'Guild',
+    free: true,
+    basic: true,
+    pro: true,
+  },
+  {
+    title: 'Your leaderboard',
+    type: 'Guild',
+    free: true,
+    basic: true,
+    pro: true,
+  },
+  {
+    title: 'Onboarding paths',
+    type: 'Guild',
+    free: true,
+    basic: true,
+    pro: true,
+  },
+  {
+    title: 'A guild2guild meetup',
+    type: 'Guild',
+    free: true,
+    basic: true,
+    pro: true,
+  },
+  {
+    title: 'Your news inside MG',
+    type: 'Guild',
+    free: true,
+    basic: true,
+    pro: true,
+  },
+  {
+    title: 'Post calls to action',
+    type: 'Guild',
+    free: false,
+    basic: true,
+    pro: true,
+  },
+  {
+    title: 'Search & filter people',
+    type: 'Guild',
+    free: false,
+    basic: true,
+    pro: true,
+  },
+  {
+    title: 'We shill your grant',
+    type: 'Guild',
+    free: false,
+    basic: true,
+    pro: true,
+  },
+  {
+    title: 'X thread about you',
+    type: 'Guild',
+    free: false,
+    basic: true,
+    pro: true,
+  },
+  {
+    title: 'In the follow list on X',
+    type: 'Guild',
+    free: false,
+    basic: true,
+    pro: true,
+  },
+  {
+    title: 'Your news in the newsletter',
+    type: 'Guild',
+    free: false,
+    basic: true,
+    pro: true,
+  },
+  {
+    title: 'A podcast interview',
+    type: 'Guild',
+    free: false,
+    basic: true,
+    pro: true,
+  },
+  {
+    title: 'Part of MetaAlliance',
+    type: 'Guild',
+    free: false,
+    basic: false,
+    pro: true,
+  },
+  {
+    title: 'A post about you',
+    type: 'Guild',
+    free: false,
+    basic: false,
+    pro: true,
+  },
+  {
+    title: 'Branch in The Onboarding Game',
+    type: 'Guild',
+    free: false,
+    basic: false,
+    pro: true,
+  },
 ];
 
-export const patronMemberList: Perk[] = [
-  { perk: 'Access to educational resources', checked: true },
-  { perk: 'Access to community calls', checked: true },
-  { perk: 'List of MetaAlliance guilds', checked: true },
-  { perk: 'Free newsletter', checked: true },
-  { perk: 'Search & filter people', checked: true },
-  { perk: 'Access to the community', checked: true },
-  { perk: 'Ability to earn reputation', checked: true },
-  { perk: 'Ability to earn Seed tokens', checked: true },
-  { perk: 'Get ranked & unlock perks', checked: true },
+export const patronPerksList: Perk[] = [
+  {
+    title: 'Access to educational resources',
+    free: true,
+    member: true,
+    type: 'Patron',
+  },
+  {
+    title: 'Access to community calls',
+    free: true,
+    member: true,
+    type: 'Patron',
+  },
+  {
+    title: 'List of MetaAlliance guilds',
+    free: true,
+    member: true,
+    type: 'Patron',
+  },
+  { title: 'Free newsletter', free: true, member: true, type: 'Patron' },
+  {
+    title: 'Search & filter people',
+    free: false,
+    member: true,
+    type: 'Patron',
+  },
+  {
+    title: 'Access to the community',
+    free: false,
+    member: true,
+    type: 'Patron',
+  },
+  {
+    title: 'Ability to earn reputation',
+    free: false,
+    member: true,
+    type: 'Patron',
+  },
+  {
+    title: 'Ability to earn Seed tokens',
+    free: false,
+    member: true,
+    type: 'Patron',
+  },
+  {
+    title: 'Get ranked & unlock perks',
+    free: false,
+    member: true,
+    type: 'Patron',
+  },
 ];
 
 export const playerReasons: string[] = [
-  'Learn about Web3, DAOs, ReFi & the Metacrisis',
-  'Join the ecosystem & start making friends',
-  'Start accruing reputation (XP) & tokens (Seeds)',
+  'Learn about DAOs, Web3 & the bigger picture',
+  'Join the ecosystem & make friends',
+  'Start accruing XP (reputation) & earning',
   'Gain experience & increase chances of landing gigs',
   'Get help for starting your own project',
 ];
@@ -160,9 +285,9 @@ export const guildReasons: string[] = [
 
 export const patronReasons: string[] = [
   'Because you love the idea of MetaGame',
-  'You want to help fix the onboarding problem for the DAO space',
-  'You want to see building DAOs become 10x easier & better',
-  "Besides Web3 & DAOs, you're into ReFi, Game B & Network States",
+  'You want the onboarding to the DAO space to improve',
+  'You want to see building DAOs become 10x easier',
+  "Besides Web3, you're into Game B & the bigger picture",
   'Membership & platform utility will be paid in Seeds',
 ];
 
@@ -170,17 +295,41 @@ export const playerPerks: PerkList[] = [
   {
     title: 'Visitor',
     type: 'Free',
-    list: playerVisitorList,
+    list: playerPerksList,
     background: '#FFFFFF0A',
   },
   {
     title: 'Member',
     type: 'Few contributions / month',
-    list: playerMemberList,
+    list: playerPerksList,
     background: '#00000029',
   },
 ];
 
+export const guildPerks: PerkList[] = [
+  {
+    type: 'Free',
+    price: '$0',
+    description: 'FOR BROKE GUILDS',
+    list: guildPerksList,
+    background: '#FFFFFF0A',
+  },
+  {
+    type: 'Basic',
+    price: '$800 / year',
+    description: 'FOR ESTABLISHED GUILDS',
+    list: guildPerksList,
+    background: '#00000029',
+  },
+  {
+    type: 'Pro',
+    price: 'Inquire',
+    description: 'FOR WELL-OFF GUILDS',
+    list: guildPerksList,
+    background: '#FFFFFF0A',
+  },
+];
+
 export const roles: Role[] = [
   {
     tab: RoleTitle.Player,
@@ -205,7 +354,7 @@ export const roles: Role[] = [
     tab: RoleTitle.Guild,
     title: 'Player',
     image: PlayerImg.src,
-    description: 'Join MetaGame as an active member.',
+    description: 'An active contributor.',
     action: "Let's Go!",
     route: '/start',
   },
@@ -213,7 +362,7 @@ export const roles: Role[] = [
     tab: RoleTitle.Guild,
     title: 'Patron',
     image: PatronsImg.src,
-    description: 'Join MetaGame as a passive player.',
+    description: 'A passive contributor.',
     action: "Let's Go!",
     route: '/join/patron',
   },
@@ -221,58 +370,33 @@ export const roles: Role[] = [
     tab: RoleTitle.Patron,
     title: 'Do it yourself',
     image: YoungPlant.src,
-    description:
-      'You’ll need some Ether & RAI ready on Polygon. Detailed instructions',
-    action: 'Yes Pls!',
+    description: 'Proceed to joining the regular way.',
+    action: 'Alright!',
     route: '/join/patron',
   },
   {
     tab: RoleTitle.Patron,
     title: 'Buy it & forget it',
     image: PlayerImg.src,
-    description: 'Too busy to do it manually? We got you!',
-    info: 'For amounts over $1k only.',
+    description: 'Too busy to do it manually? $1k minimum!',
     action: 'Perfect!',
     link: 'https://tally.so/r/w4Jb6r',
   },
 ];
 
-export const guildPerks: PerkList[] = [
+export const patronPerks: PerkList[] = [
   {
+    title: 'Visitor',
     type: 'Free',
-    price: '$0',
-    description: 'FOR BROKE GUILDS',
-    list: guildFreeList,
-    background: '#FFFFFF0A',
-  },
-  {
-    type: 'Basic',
-    price: '$800 / year',
-    description: 'FOR ESTABLISHED GUILDS',
-    list: guildBasicList,
-    background: '#00000029',
-  },
-  {
-    type: 'Pro',
-    price: 'Inquire',
-    description: 'FOR WELL-OFF GUILDS',
-    list: guildProList,
+    description: '',
+    list: patronPerksList,
     background: '#FFFFFF0A',
   },
-];
-export const patronPerks: PerkList[] = [
-  // {
-  //   title: 'Visitor',
-  //   type: 'Free',
-  //   description: 'FOR BROKE GUILDS',
-  //   list: patronFreeList,
-  //   background: '#FFFFFF0A',
-  // },
   {
     title: 'Member',
-    type: 'Tiered Memberships',
+    type: '$100/year',
     description: '',
-    list: patronMemberList,
+    list: patronPerksList,
     background: '#00000029',
   },
 ];
diff --git a/packages/web/components/Landing/Signup/index.tsx b/packages/web/components/Landing/Signup/index.tsx
index 91fcd6f74..f9fface41 100644
--- a/packages/web/components/Landing/Signup/index.tsx
+++ b/packages/web/components/Landing/Signup/index.tsx
@@ -4,6 +4,7 @@ import {
   Container,
   Flex,
   Image,
+  List,
   ListItem,
   MetaButton,
   Stack,
@@ -23,17 +24,18 @@ import GuildsImg from 'assets/guilds-sun_800x800.webp';
 import PatronsImg from 'assets/patrons-sun_800x820.webp';
 import PlayerImg from 'assets/players-sun_800x822.webp';
 import { FullPageContainer } from 'components/Container';
-import Link from 'next/link';
 import { useRouter } from 'next/router';
 import React, { Ref, RefObject, useState } from 'react';
 
 import { Rain } from '../OnboardingGame/Rain';
-import { PerksCard, RoleCard } from './Cards';
+import { PerksCard, PerksChecklist, RoleCard } from './Cards';
 import {
   guildPerks,
+  guildPerksList,
   guildReasons,
   patronPerks,
   patronReasons,
+  PerkType,
   playerPerks,
   playerReasons,
   roles,
@@ -43,7 +45,6 @@ import {
 const tabs = ['Player', 'Guild', 'Patron'];
 const bgColors = ['green.200', '#6A88DF', '#ED61C5'];
 const textColors = ['green.900', 'purple.900', 'pink.900'];
-const badgeColors = ['green', 'purple', 'pink'];
 
 const TabImg = ({
   type,
@@ -270,7 +271,7 @@ export const Signup: React.FC = () => {
         zIndex={5}
       >
         <Tabs
-          mt={{ lg: "5em", base: '2em'}}
+          mt={{ lg: "5em", base: '2em' }}
           variant="unstyled"
           index={selectedIndex}
           defaultIndex={selectedIndex}
@@ -314,100 +315,85 @@ export const Signup: React.FC = () => {
                 color="white"
                 overflowY="auto"
               >
-                <VStack spacing={{ base: 2, lg: 4 }} align="stretch">
-                  <Text
-                    fontSize={{ base: '2xl', lg: '4xl' }}
-                    color="#B6A4F4"
-                    align={{ base: 'start', lg: 'center' }}
-                  >
-                    Players are here to learn, get experience, contribute labor
-                    and help build MetaGame.
-                  </Text>
-                  <Text fontSize={{ base: 'xl', lg: '2xl' }} fontWeight="bold">
-                    Why become a player?
-                  </Text>
-                  <Text fontSize={{ base: 'xl', lg: '2xl' }}>
-                    A few reasons!
-                  </Text>
-                  <UnorderedList fontSize="md" fontWeight="light">
-                    {playerReasons.map((reason, idx) => (
-                      <ListItem key={idx}>{reason}</ListItem>
-                    ))}
-                  </UnorderedList>
-                  <Text fontSize={{ base: 'xl', lg: '2xl' }} fontWeight="bold">
-                    Perks of Joining
-                  </Text>
-                  {isMobile ? (
-                    <Tabs variant="soft-rounded" isFitted>
-                      <TabList
-                        bg="blackAlpha.500"
-                        borderRadius="full"
-                        paddingY={2}
-                        paddingX={4}
-                      >
+                <VStack spacing="56px" align="stretch">
+                  <VStack spacing="16px" align="start">
+                    <Text
+                      fontSize={{ base: '2xl', lg: '4xl' }}
+                      color="#B6A4F4"
+                      alignSelf={{ base: 'start', lg: 'center' }}
+                    >
+                      Learn, earn, grow & build MetaGame.
+                    </Text>
+                    <Text fontSize={{ base: 'xl', lg: '2xl' }} fontWeight="bold">
+                      Why become a player?
+                    </Text>
+                    <Text fontSize={{ base: 'xl', lg: '2xl' }}>
+                      A few reasons!
+                    </Text>
+                    <UnorderedList fontSize="md" fontWeight="light" spacing={2}>
+                      {playerReasons.map((reason, idx) => (
+                        <ListItem key={idx}>{reason}</ListItem>
+                      ))}
+                    </UnorderedList>
+                  </VStack>
+                  <VStack spacing="24px" align="start">
+                    <Text fontSize={{ base: 'xl', lg: '2xl' }} fontWeight="bold">
+                      Perks of Joining
+                    </Text>
+                    {isMobile ? (
+                      <Tabs variant="soft-rounded" isFitted>
+                        <TabList
+                          bg="blackAlpha.500"
+                          borderRadius="full"
+                          paddingY={2}
+                          paddingX={4}
+                        >
+                          {playerPerks.map((perk, index) => (
+                            <Tab
+                              key={index}
+                              _selected={{
+                                bg: bgColors[index] || 'defaultColor',
+                                color: textColors[index] || 'defaultColor',
+                              }}
+                              _active={{ bg: 'transparent' }}
+                              textTransform="uppercase"
+                            >
+                              {perk.title}
+                            </Tab>
+                          ))}
+                        </TabList>
+                        <TabPanels>
+                          {playerPerks.map((perk, index) => (
+                            <TabPanel key={index}>
+                              <PerksCard {...perk} id={index === 0 ? 'visitor' : 'member'} />
+                            </TabPanel>
+                          ))}
+                        </TabPanels>
+                      </Tabs>
+                    ) : (
+                      <Stack direction={['column', 'row']} gap={0}>
                         {playerPerks.map((perk, index) => (
-                          <Tab
+                          <PerksCard
                             key={index}
-                            _selected={{
-                              bg: index === 0 ? 'green.200' : 'pink.200',
-                              color: index === 0 ? 'green.900' : 'pink.900',
-                            }}
-                            _active={{ bg: 'transparent' }}
-                            textTransform="uppercase"
-                          >
-                            {perk.title}
-                          </Tab>
-                        ))}
-                      </TabList>
-                      <TabPanels>
-                        {playerPerks.map((perk, index) => (
-                          <TabPanel key={index}>
-                            <PerksCard {...perk} />
-                          </TabPanel>
+                            {...perk}
+                            id={index === 0 ? 'visitor' : 'member'}
+                            badgeColor={index === 0 ? 'green' : 'pink'}
+                          />
                         ))}
-                      </TabPanels>
-                    </Tabs>
-                  ) : (
-                    <Stack direction={['column', 'row']} gap={0}>
-                      {playerPerks.map((perk, index) => (
-                        <PerksCard
-                          key={index}
-                          {...perk}
-                          badgeColor={index === 0 ? 'green' : 'pink'}
-                        />
-                      ))}
-                    </Stack>
-                  )}
-                  <Text fontSize={{ base: 'xl', lg: '2xl' }} fontWeight="bold">
-                    How to become a player?
-                  </Text>
-                  <Text fontSize={{ base: 'xl', lg: '2xl' }}>
-                    Ready to rise & become one of the founders of MetaGame?
-                  </Text>
-                  <Stack
-                    direction={['column', 'row']}
-                    spacing={{ base: 2, lg: 10 }}
-                    align="center"
-                    justify="center"
-                  >
-                    {roles.map((role, index) => (
-                      <React.Fragment key={index}>
-                        {role.tab === activeTab && <RoleCard {...role} />}
-                        {role.tab === activeTab &&
-                          index ===
-                            roles.findIndex(
-                              (r) => r.tab === RoleTitle.Player,
-                            ) && (
-                            <Text
-                              fontSize={{ base: 'xl', lg: '2xl' }}
-                              fontWeight={{ base: 'bold', lg: 'normal' }}
-                            >
-                              OR
-                            </Text>
-                          )}
-                      </React.Fragment>
-                    ))}
-                  </Stack>
+                      </Stack>
+                    )}
+                  </VStack>
+                  <VStack spacing="34px" align="start">
+                    <Text fontSize={{ base: 'xl', lg: '2xl' }} fontWeight="bold">
+                      How to become a player?
+                    </Text>
+                    <Text fontSize={{ base: 'xl', lg: '2xl' }}>
+                      Ready to rise & become one of the founders of MetaGame?
+                    </Text>
+                    <MetaButton textTransform="uppercase" onClick={() => router.push("/onboarding")} alignSelf="center">
+                      Go
+                    </MetaButton>
+                  </VStack>
                 </VStack>
               </Box>
             </TabPanel>
@@ -431,36 +417,39 @@ export const Signup: React.FC = () => {
                 color="white"
                 overflowY="auto"
               >
-                <VStack spacing={4} align="stretch">
-                  <Text
-                    fontSize={{ base: '2xl', lg: '4xl' }}
-                    color="#7DCDDF"
-                    align={{ base: 'start', lg: 'center' }}
-                  >
-                    Guilds are groups of people offering tools or services &
-                    building projects.
-                  </Text>
-                  <Text fontSize={{ base: 'xl', lg: '2xl' }} fontWeight="bold">
-                    Why join as a guild?
-                  </Text>
-                  <Text fontSize={{ base: 'xl', lg: '2xl' }}>
-                    A bunch of reasons, actually!
-                  </Text>
-                  <UnorderedList fontSize="md" fontWeight="light">
-                    {guildReasons.map((reason, idx) => (
-                      <ListItem key={idx}>{reason}</ListItem>
-                    ))}
-                  </UnorderedList>
-                  <Text fontSize={{ base: 'xl', lg: '2xl' }} fontWeight="bold">
-                    Before joining as a guild...
-                  </Text>
-                  <Text
-                    fontSize={{ base: 'xl', lg: '2xl' }}
-                    fontWeight="normal"
-                  >
-                    Before trying to join as a guild, we recommend you join as a
-                    person.
-                  </Text>
+                <VStack spacing="56px" align="stretch">
+                  <VStack spacing="16px" align="start">
+                    <Text
+                      fontSize={{ base: '2xl', lg: '4xl' }}
+                      color="#7DCDDF"
+                      alignSelf={{ base: 'start', lg: 'center' }}
+                    >
+                      Get help, contributors & users to grow.
+                    </Text>
+                    <Text fontSize={{ base: 'xl', lg: '2xl' }} fontWeight="bold">
+                      Why join as a guild?
+                    </Text>
+                    <Text fontSize={{ base: 'xl', lg: '2xl' }}>
+                      A bunch of reasons, actually!
+                    </Text>
+                    <UnorderedList fontSize="md" fontWeight="light" spacing={2}>
+                      {guildReasons.map((reason, idx) => (
+                        <ListItem key={idx}>{reason}</ListItem>
+                      ))}
+                    </UnorderedList>
+                  </VStack>
+                  <VStack spacing="16px" align="start">
+                    <Text fontSize={{ base: 'xl', lg: '2xl' }} fontWeight="bold">
+                      Before joining as a guild...
+                    </Text>
+                    <Text
+                      fontSize={{ base: 'xl', lg: '2xl' }}
+                      fontWeight="normal"
+                    >
+                      Before trying to join as a guild, we recommend you join as a
+                      person.
+                    </Text>
+                  </VStack>
                   <Stack
                     direction={['column', 'row']}
                     spacing={{ base: 2, lg: 10 }}
@@ -472,9 +461,9 @@ export const Signup: React.FC = () => {
                         {role.tab === activeTab && <RoleCard {...role} />}
                         {role.tab === activeTab &&
                           index ===
-                            roles.findIndex(
-                              (r) => r.tab === RoleTitle.Guild,
-                            ) && (
+                          roles.findIndex(
+                            (r) => r.tab === RoleTitle.Guild,
+                          ) && (
                             <Text
                               fontSize={{ base: 'xl', lg: '2xl' }}
                               fontWeight={{ base: 'bold', lg: 'normal' }}
@@ -514,21 +503,22 @@ export const Signup: React.FC = () => {
                       <TabPanels>
                         {guildPerks.map((perk, index) => (
                           <TabPanel key={index}>
-                            <PerksCard {...perk} />
+                            <PerksCard {...perk} id={['free', 'basic', 'pro'][index] as 'free' | 'basic' | 'pro'} />
                           </TabPanel>
                         ))}
                       </TabPanels>
                     </Tabs>
                   ) : (
-                    <Stack direction={['column', 'row']} gap={0}>
-                      {guildPerks.map((perk, index) => (
-                        <PerksCard
-                          key={index}
-                          {...perk}
-                          badgeColor={badgeColors[index]}
-                        />
-                      ))}
-                    </Stack>
+                    <Flex align='end' w="full">
+                      <List spacing="10px" p="0px 24px 0px 24px">
+                        {guildPerksList.map(({ title }, perkIndex) => (
+                          <ListItem key={perkIndex}><Text fontSize={{ base: 'sm', lg: 'lg' }}>{title}</Text></ListItem>
+                        ))}
+                      </List>
+                      <PerksChecklist perks={guildPerksList} id={PerkType.Free} />
+                      <PerksChecklist perks={guildPerksList} id={PerkType.Basic} altBackground />
+                      <PerksChecklist perks={guildPerksList} id={PerkType.Pro} />
+                    </Flex>
                   )}
                   <VStack align="center" spacing={4}>
                     <Text
@@ -539,14 +529,12 @@ export const Signup: React.FC = () => {
                     </Text>
                     <Text
                       fontSize={{ base: 'xl', lg: '2xl' }}
+                      color="#A5B9F6"
                       fontWeight="light"
                     >
-                      Ready to become one of the Founding Guilds of MetaGame?
-                      Apply now 👇
+                      Ready to become one of the founding guilds?
                     </Text>
-                    <Link href="https://tally.so/r/3EdORl">
-                      <MetaButton maxW="xs">APPLY AS GUILD</MetaButton>
-                    </Link>
+                    <MetaButton maxW="xs" href="https://tally.so/r/3EdORl">APPLY AS GUILD</MetaButton>
                   </VStack>
                 </VStack>
               </Box>
@@ -571,76 +559,82 @@ export const Signup: React.FC = () => {
                 color="white"
                 overflowY="auto"
               >
-                <VStack spacing={4} align="stretch">
-                  <Text
-                    fontSize={{ base: '2xl', lg: '4xl' }}
-                    color="#E190E1"
-                    align={{ base: 'start', lg: 'center' }}
-                  >
-                    Patrons are here to teach, contribute liquidity & support
-                    MetaGame.
-                  </Text>
-                  <Text fontSize={{ base: 'xl', lg: '2xl' }} fontWeight="bold">
-                    Why join as a patron?
-                  </Text>
-                  <Text fontSize={{ base: 'xl', lg: '2xl' }}>
-                    Here are a few reasons:
-                  </Text>
-                  <UnorderedList fontSize="md" fontWeight="light">
-                    {patronReasons.map((reason, idx) => (
-                      <ListItem key={idx}>{reason}</ListItem>
-                    ))}
-                  </UnorderedList>
-                  <Text fontSize={{ base: 'xl', lg: '2xl' }} fontWeight="bold">
-                    Perks of joining
-                  </Text>
-                  {isMobile ? (
-                    <Tabs variant="soft-rounded" isFitted>
-                      <TabList
-                        bg="blackAlpha.500"
-                        borderRadius="full"
-                        paddingY={2}
-                        paddingX={4}
-                      >
+                <VStack spacing="56px" align="stretch">
+                  <VStack spacing="16px" align="start">
+                    <Text
+                      fontSize={{ base: '2xl', lg: '4xl' }}
+                      color="#E190E1"
+                      alignSelf={{ base: 'start', lg: 'center' }}
+                    >
+                      Buy, hodl & support passively.
+                    </Text>
+                    <Text fontSize={{ base: 'xl', lg: '2xl' }} fontWeight="bold">
+                      Why join as a patron?
+                    </Text>
+                    <Text fontSize={{ base: 'xl', lg: '2xl' }}>
+                      Here are a few reasons:
+                    </Text>
+                    <UnorderedList fontSize="md" fontWeight="light" spacing={2}>
+                      {patronReasons.map((reason, idx) => (
+                        <ListItem key={idx}>{reason}</ListItem>
+                      ))}
+                    </UnorderedList>
+                  </VStack>
+                  <VStack spacing="24px" align="start">
+                    <Text fontSize={{ base: 'xl', lg: '2xl' }} fontWeight="bold">
+                      Perks of joining
+                    </Text>
+                    {isMobile ? (
+                      <Tabs variant="soft-rounded" isFitted>
+                        <TabList
+                          bg="blackAlpha.500"
+                          borderRadius="full"
+                          paddingY={2}
+                          paddingX={4}
+                        >
+                          {patronPerks.map((perk, index) => (
+                            <Tab
+                              key={index}
+                              _selected={{
+                                bg: index === 0 ? 'green.200' : 'pink.200',
+                                color: index === 0 ? 'green.900' : 'pink.900',
+                              }}
+                              _active={{ bg: 'transparent' }}
+                              textTransform="uppercase"
+                            >
+                              {perk.title}
+                            </Tab>
+                          ))}
+                        </TabList>
+                        <TabPanels>
+                          {patronPerks.map((perk, index) => (
+                            <TabPanel key={index}>
+                              <PerksCard {...perk} id="member" />
+                            </TabPanel>
+                          ))}
+                        </TabPanels>
+                      </Tabs>
+                    ) : (
+                      <Stack direction={['column', 'row']} gap={0}>
                         {patronPerks.map((perk, index) => (
-                          <Tab
+                          <PerksCard
                             key={index}
-                            _selected={{
-                              bg: index === 0 ? 'green.200' : 'pink.200',
-                              color: index === 0 ? 'green.900' : 'pink.900',
-                            }}
-                            _active={{ bg: 'transparent' }}
-                            textTransform="uppercase"
-                          >
-                            {perk.title}
-                          </Tab>
+                            {...perk}
+                            id={index === 0 ? 'free' : 'member'}
+                            badgeColor={index === 0 ? 'green' : 'pink'}
+                          />
                         ))}
-                      </TabList>
-                      <TabPanels>
-                        {patronPerks.map((perk, index) => (
-                          <TabPanel key={index}>
-                            <PerksCard {...perk} />
-                          </TabPanel>
-                        ))}
-                      </TabPanels>
-                    </Tabs>
-                  ) : (
-                    <Stack direction={['column', 'row']} gap={0}>
-                      {patronPerks.map((perk, index) => (
-                        <PerksCard
-                          key={index}
-                          {...perk}
-                          badgeColor={index === 0 ? 'green' : 'pink'}
-                        />
-                      ))}
-                    </Stack>
-                  )}
-                  <Text fontSize={{ base: 'xl', lg: '2xl' }} fontWeight="bold">
-                    How to become a patron?
-                  </Text>
-                  <Text fontSize={{ base: 'xl', lg: '2xl' }} fontWeight="light">
-                    Ready to become one of the founding patrons of MetaGame?
-                  </Text>
+                      </Stack>
+                    )}
+                  </VStack>
+                  <VStack spacing="16px" align="start">
+                    <Text fontSize={{ base: 'xl', lg: '2xl' }} fontWeight="bold">
+                      How to become a patron?
+                    </Text>
+                    <Text fontSize={{ base: 'xl', lg: '2xl' }} fontWeight="light">
+                      Ready to become one of the founding patrons of MetaGame?
+                    </Text>
+                  </VStack>
                   <Stack
                     direction={['column', 'row']}
                     spacing={{ base: 2, lg: 10 }}
@@ -652,9 +646,9 @@ export const Signup: React.FC = () => {
                         {role.tab === activeTab && <RoleCard {...role} />}
                         {role.tab === activeTab &&
                           index ===
-                            roles.findIndex(
-                              (r) => r.tab === RoleTitle.Patron,
-                            ) && (
+                          roles.findIndex(
+                            (r) => r.tab === RoleTitle.Patron,
+                          ) && (
                             <Text
                               fontSize={{ base: 'xl', lg: '2xl' }}
                               fontWeight={{ base: 'bold', lg: 'normal' }}
@@ -665,26 +659,6 @@ export const Signup: React.FC = () => {
                       </React.Fragment>
                     ))}
                   </Stack>
-                  <VStack align="center" spacing={{ base: 2, lg: 4 }}>
-                    <Text
-                      fontSize={{ base: '2xl', lg: '4xl' }}
-                      fontWeight="semibold"
-                    >
-                      Not ready?
-                    </Text>
-                    <MetaButton maxW="xs" href="/start">
-                      THE RABBIT HOLE
-                    </MetaButton>
-                    <Text
-                      fontSize={{ base: 'xl', lg: '2xl' }}
-                      fontWeight="light"
-                    >
-                      & / OR
-                    </Text>
-                    <Link href="https://docs.google.com/document/d/1RoOaW8CR0puEanY0VGtcMbDYH77djkzOPgRSd1nCFJ4/edit#">
-                      <MetaButton maxW="xs">THE PURPLEPAPER</MetaButton>
-                    </Link>
-                  </VStack>
                 </VStack>
               </Box>
             </TabPanel>