diff --git a/packages/web/components/RegisterPlayer.tsx b/packages/web/components/RegisterPlayer.tsx
index ace5c9e8..4781a128 100644
--- a/packages/web/components/RegisterPlayer.tsx
+++ b/packages/web/components/RegisterPlayer.tsx
@@ -5,7 +5,7 @@ import {
   Icon3box,
   MetaHeading,
 } from '@metafam/ds';
-import NextLink from 'next/link';
+import { useRouter } from 'next/router';
 import React from 'react';
 
 import { FlexContainer } from './Container';
@@ -30,10 +30,21 @@ export const RegisterPlayer: React.FC = () => {
 
 type ButtonProps = React.ComponentProps<typeof Button>;
 
-const RegisterButton: React.FC<ButtonProps> = ({ children, ...props }) => (
-  <NextLink href="/profile/success">
-    <Button variant="outline" size="lg" p={8} alignItems="center" {...props}>
+const RegisterButton: React.FC<ButtonProps> = ({ children, ...props }) => {
+  const router = useRouter();
+  const login = () => {
+    router.push('/profile/success');
+  };
+  return (
+    <Button
+      onClick={login}
+      variant="outline"
+      size="lg"
+      p={8}
+      alignItems="center"
+      {...props}
+    >
       {children}
     </Button>
-  </NextLink>
-);
+  );
+};
diff --git a/packages/web/components/SetupDone.tsx b/packages/web/components/SetupDone.tsx
index 3cf710bf..a5cec5cc 100644
--- a/packages/web/components/SetupDone.tsx
+++ b/packages/web/components/SetupDone.tsx
@@ -1,16 +1,15 @@
 import { MetaButton, MetaHeading } from '@metafam/ds';
-import NextLink from 'next/link';
+import { useRouter } from 'next/router';
 import React from 'react';
 
 import { FlexContainer } from './Container';
 
 export const SetupDone: React.FC = () => {
+  const router = useRouter();
   return (
     <FlexContainer flex={1}>
       <MetaHeading mb={10}>Game on!</MetaHeading>
-      <NextLink href="/">
-        <MetaButton>Play</MetaButton>
-      </NextLink>
+      <MetaButton onClick={() => router.push('/')}>Play</MetaButton>
     </FlexContainer>
   );
 };
diff --git a/packages/web/components/SetupHeader.tsx b/packages/web/components/SetupHeader.tsx
index b14d5455..2a35eb7a 100644
--- a/packages/web/components/SetupHeader.tsx
+++ b/packages/web/components/SetupHeader.tsx
@@ -1,49 +1,64 @@
 import { Box, Flex, Grid, Image, ResponsiveText } from '@metafam/ds';
-import React from 'react';
+import React, { useContext } from 'react';
 
+import { SetupContext } from '../contexts/SetupContext';
 import AvatarImage from '../public/images/avatar.png';
 import BackImage from '../public/images/Back.svg';
 import SkipImage from '../public/images/Skip.svg';
 import { FlexContainer } from './Container';
 
-interface HeaderProps {
-  step: number;
-  progress: number;
-}
-
-export const SetupHeader: React.FC<HeaderProps> = ({ step, progress }) => (
-  <Grid templateColumns="0.5fr 1fr 1fr 1fr 0.5fr" gap="1rem" w="100%">
-    <FlexContainer justify="flex-end">
-      <Image src={BackImage} h="1rem" />
-    </FlexContainer>
-    <StepProgress
-      title={['About You', '1. About You']}
-      isActive={step === 0}
-      isDone={step > 0}
-      progress={step > 0 ? 1 : progress}
-    />
-    <StepProgress
-      title={[
-        'Portfolio',
-        '2. Portfolio',
-        '2. Portfolio',
-        '2. Professional Profile',
-      ]}
-      isActive={step === 1}
-      isDone={step > 1}
-      progress={step > 1 ? 1 : progress}
-    />
-    <StepProgress
-      title={['Play', '3. Play', '3. Start Playing']}
-      isDone={false}
-      isActive={step === 2}
-      progress={progress}
-    />
-    <FlexContainer justify="flex-end">
-      <Image src={SkipImage} h="1rem" />
-    </FlexContainer>
-  </Grid>
-);
+export const SetupHeader: React.FC = () => {
+  const { step, progress, setStep, numTotalSteps } = useContext(SetupContext);
+  return (
+    <Grid templateColumns="0.5fr 1fr 1fr 1fr 0.5fr" gap="1rem" w="100%">
+      <FlexContainer
+        justify="flex-end"
+        onClick={() => {
+          if (step > 0) {
+            setStep((_step) => (_step - 1) % numTotalSteps);
+          }
+        }}
+        cursor="pointer"
+      >
+        <Image src={BackImage} h="1rem" />
+      </FlexContainer>
+      <StepProgress
+        title={['About You', '1. About You']}
+        isActive={step === 0}
+        isDone={step > 0}
+        progress={step > 0 ? 1 : progress}
+      />
+      <StepProgress
+        title={[
+          'Portfolio',
+          '2. Portfolio',
+          '2. Portfolio',
+          '2. Professional Profile',
+        ]}
+        isActive={step === 1}
+        isDone={step > 1}
+        progress={step > 1 ? 1 : progress}
+      />
+      <StepProgress
+        title={['Play', '3. Play', '3. Start Playing']}
+        isDone={false}
+        isActive={step === 2}
+        progress={progress}
+      />
+      <FlexContainer
+        justify="flex-end"
+        onClick={() => {
+          if ((step + 1) % numTotalSteps !== 0) {
+            setStep((_step) => (_step + 1) % numTotalSteps);
+          }
+        }}
+        cursor="pointer"
+      >
+        <Image src={SkipImage} h="1rem" />
+      </FlexContainer>
+    </Grid>
+  );
+};
 
 interface StepProps {
   title: any[] | Record<string, any>;
diff --git a/packages/web/components/SetupPersonality.tsx b/packages/web/components/SetupPersonality.tsx
index 56d34d35..d9996df6 100644
--- a/packages/web/components/SetupPersonality.tsx
+++ b/packages/web/components/SetupPersonality.tsx
@@ -1,41 +1,20 @@
 import { MetaButton, MetaHeading } from '@metafam/ds';
-import React, { useEffect, useState } from 'react';
+import React, { useContext } from 'react';
 
+import { SetupContext } from '../contexts/SetupContext';
 import { FlexContainer } from './Container';
 
-interface Props {
-  setStep: React.Dispatch<React.SetStateAction<number>>;
-  setProgress: React.Dispatch<React.SetStateAction<number>>;
-}
-
-export const SetupPersonality: React.FC<Props> = ({ setStep, setProgress }) => {
+export const SetupPersonality: React.FC = () => {
+  const { useProgress } = useContext(SetupContext);
   const numProgressSteps = 2;
-  const [progressStep, setProgressStep] = useState<number>(0);
-
-  useEffect(() => {
-    const progressValue = (progressStep + 1) / numProgressSteps;
-    setProgress(progressValue);
-  }, [progressStep, setProgress]);
-
+  const [currentProgress, onNextPress] = useProgress(numProgressSteps);
   return (
     <FlexContainer flex={1}>
-      {progressStep === 0 && (
+      {currentProgress === 0 && (
         <MetaHeading mb={10}>Personality type</MetaHeading>
       )}
-      {progressStep === 1 && <MetaHeading mb={10}>Player type</MetaHeading>}
-      <MetaButton
-        mb={8}
-        onClick={() =>
-          setProgressStep(
-            (_progressStep) => (_progressStep + 1) % numProgressSteps,
-          )
-        }
-      >
-        Progress
-      </MetaButton>
-      <MetaButton onClick={() => setStep((_step) => (_step + 1) % 4)}>
-        Next Step
-      </MetaButton>
+      {currentProgress === 1 && <MetaHeading mb={10}>Player type</MetaHeading>}
+      <MetaButton onClick={onNextPress}>Next Step</MetaButton>
     </FlexContainer>
   );
 };
diff --git a/packages/web/components/SetupProfession.tsx b/packages/web/components/SetupProfession.tsx
index a7d29813..68c1864b 100644
--- a/packages/web/components/SetupProfession.tsx
+++ b/packages/web/components/SetupProfession.tsx
@@ -1,42 +1,22 @@
 import { MetaButton, MetaHeading } from '@metafam/ds';
-import React, { useEffect, useState } from 'react';
+import React, { useContext } from 'react';
 
+import { SetupContext } from '../contexts/SetupContext';
 import { FlexContainer } from './Container';
 
-interface Props {
-  setStep: React.Dispatch<React.SetStateAction<number>>;
-  setProgress: React.Dispatch<React.SetStateAction<number>>;
-}
-
-export const SetupProfession: React.FC<Props> = ({ setStep, setProgress }) => {
+export const SetupProfession: React.FC = () => {
+  const { useProgress } = useContext(SetupContext);
   const numProgressSteps = 3;
-  const [progressStep, setProgressStep] = useState<number>(0);
-
-  useEffect(() => {
-    const progressValue = (progressStep + 1) / numProgressSteps;
-    setProgress(progressValue);
-  }, [progressStep, setProgress]);
+  const [currentProgress, onNextPress] = useProgress(numProgressSteps);
 
   return (
     <FlexContainer flex={1}>
-      {progressStep === 0 && (
+      {currentProgress === 0 && (
         <MetaHeading mb={10}>What are your superpowers?</MetaHeading>
       )}
-      {progressStep === 1 && <MetaHeading mb={10}>Availability</MetaHeading>}
-      {progressStep === 2 && <MetaHeading mb={10}>Memberships</MetaHeading>}
-      <MetaButton
-        mb={8}
-        onClick={() =>
-          setProgressStep(
-            (_progressStep) => (_progressStep + 1) % numProgressSteps,
-          )
-        }
-      >
-        Progress
-      </MetaButton>
-      <MetaButton onClick={() => setStep((_step) => (_step + 1) % 4)}>
-        Next Step
-      </MetaButton>
+      {currentProgress === 1 && <MetaHeading mb={10}>Availability</MetaHeading>}
+      {currentProgress === 2 && <MetaHeading mb={10}>Memberships</MetaHeading>}
+      <MetaButton onClick={onNextPress}>Next Step</MetaButton>
     </FlexContainer>
   );
 };
diff --git a/packages/web/components/SuccessPlayer.tsx b/packages/web/components/SuccessPlayer.tsx
index 76c7d8b4..9771e856 100644
--- a/packages/web/components/SuccessPlayer.tsx
+++ b/packages/web/components/SuccessPlayer.tsx
@@ -1,5 +1,5 @@
 import { Image, MetaButton, MetaHeading, Text } from '@metafam/ds';
-import NextLink from 'next/link';
+import { useRouter } from 'next/router';
 import React from 'react';
 
 import AvatarImage from '../public/images/avatar.png';
@@ -7,15 +7,14 @@ import { FlexContainer } from './Container';
 import { MetaLink } from './Link';
 
 export const SuccessPlayer: React.FC = () => {
+  const router = useRouter();
   return (
     <FlexContainer h="100%">
       <MetaHeading m={5}>Success!</MetaHeading>
       <Image m={10} src={AvatarImage} />
-      <NextLink href="/profile/setup">
-        <MetaButton mt={5} mb={8}>
-          Set up your profile
-        </MetaButton>
-      </NextLink>
+      <MetaButton mt={5} mb={8} onClick={() => router.push('/profile/setup')}>
+        Set up your profile
+      </MetaButton>
       <Text fontFamily="mono" color="offwhite">
         {`I'll do this later. `}
         <MetaLink href="">Go to my profile</MetaLink>
diff --git a/packages/web/contexts/SetupContext.tsx b/packages/web/contexts/SetupContext.tsx
new file mode 100644
index 00000000..af9a2988
--- /dev/null
+++ b/packages/web/contexts/SetupContext.tsx
@@ -0,0 +1,61 @@
+import React, { useEffect, useState } from 'react';
+
+type SetupContextType = {
+  useProgress: (numProgressSteps: number) => any[];
+  step: number;
+  progress: number;
+  setStep: React.Dispatch<React.SetStateAction<number>>;
+  setProgress: React.Dispatch<React.SetStateAction<number>>;
+  numTotalSteps: number;
+};
+
+export const SetupContext = React.createContext<SetupContextType>({
+  useProgress: (numProgressSteps: number) => [numProgressSteps],
+  step: 0,
+  progress: 0,
+  setStep: () => undefined,
+  setProgress: () => undefined,
+  numTotalSteps: 0,
+});
+
+export const SetupContextProvider: React.FC = ({ children }) => {
+  const [step, setStep] = useState<number>(0);
+  const [progress, setProgress] = useState<number>(0.5);
+  const numTotalSteps = 3;
+
+  const useProgress = (numProgressSteps: number) => {
+    const [currentProgress, setCurrentProgress] = useState<number>(0);
+
+    useEffect(() => {
+      const progressValue = (currentProgress + 1) / numProgressSteps;
+      setProgress(progressValue);
+    }, [currentProgress, numProgressSteps]);
+
+    const onNextPress = () => {
+      if ((currentProgress + 1) % numProgressSteps === 0) {
+        setStep((_step) => (_step + 1) % numTotalSteps);
+      } else {
+        setCurrentProgress(
+          (_currentProgress) => (_currentProgress + 1) % numProgressSteps,
+        );
+      }
+    };
+
+    return [currentProgress, onNextPress];
+  };
+
+  return (
+    <SetupContext.Provider
+      value={{
+        useProgress,
+        step,
+        progress,
+        setStep,
+        setProgress,
+        numTotalSteps,
+      }}
+    >
+      {children}
+    </SetupContext.Provider>
+  );
+};
diff --git a/packages/web/pages/profile/setup.tsx b/packages/web/pages/profile/setup.tsx
index de4712f4..fa57752f 100644
--- a/packages/web/pages/profile/setup.tsx
+++ b/packages/web/pages/profile/setup.tsx
@@ -1,29 +1,32 @@
-import React, { useState } from 'react';
+import React, { useContext } from 'react';
 
 import { PageContainer } from '../../components/Container';
 import { SetupDone } from '../../components/SetupDone';
 import { SetupHeader } from '../../components/SetupHeader';
 import { SetupPersonality } from '../../components/SetupPersonality';
 import { SetupProfession } from '../../components/SetupProfession';
+import {
+  SetupContext,
+  SetupContextProvider,
+} from '../../contexts/SetupContext';
 import BackgroundImage from '../../public/images/profile-background.jpg';
 
 const ProfileSetup: React.FC = () => {
-  const [step, setStep] = useState<number>(0);
-  const [progress, setProgress] = useState<number>(0.33);
-
+  const { step, numTotalSteps } = useContext(SetupContext);
   return (
     <PageContainer backgroundImage={`url(${BackgroundImage})`}>
-      {step % 3 !== 2 && <SetupHeader step={step} progress={progress} />}
-
-      {step === 0 && (
-        <SetupPersonality setStep={setStep} setProgress={setProgress} />
-      )}
-      {step === 1 && (
-        <SetupProfession setStep={setStep} setProgress={setProgress} />
-      )}
+      {(step + 1) % numTotalSteps !== 0 && <SetupHeader />}
+      {step === 0 && <SetupPersonality />}
+      {step === 1 && <SetupProfession />}
       {step === 2 && <SetupDone />}
     </PageContainer>
   );
 };
 
-export default ProfileSetup;
+const ProfileSetupWithContext: React.FC = () => (
+  <SetupContextProvider>
+    <ProfileSetup />
+  </SetupContextProvider>
+);
+
+export default ProfileSetupWithContext;