diff --git a/web/satellite/src/components/account/billing/paymentMethods/TokenDepositSelection.vue b/web/satellite/src/components/account/billing/paymentMethods/TokenDepositSelection.vue
index 6c118fa97..5bbf28f5a 100644
--- a/web/satellite/src/components/account/billing/paymentMethods/TokenDepositSelection.vue
+++ b/web/satellite/src/components/account/billing/paymentMethods/TokenDepositSelection.vue
@@ -199,7 +199,7 @@ export default class TokenDepositSelection extends Vue {
      * Indicates if app state is in onboarding tour state.
      */
     private get isOnboardingTour(): boolean {
-        return this.$route.name === RouteConfig.OnboardingTour.name;
+        return this.$route.path.includes(RouteConfig.OnboardingTour.path);
     }
 }
 </script>
diff --git a/web/satellite/src/components/header/projectsDropdown/ProjectSelection.vue b/web/satellite/src/components/header/projectsDropdown/ProjectSelection.vue
index 42aa6b229..d146b95e8 100644
--- a/web/satellite/src/components/header/projectsDropdown/ProjectSelection.vue
+++ b/web/satellite/src/components/header/projectsDropdown/ProjectSelection.vue
@@ -60,7 +60,7 @@ export default class ProjectSelection extends Vue {
      * Indicates if current route is onboarding tour.
      */
     public get isOnboardingTour(): boolean {
-        return this.$route.name === RouteConfig.OnboardingTour.name;
+        return this.$route.path.includes(RouteConfig.OnboardingTour.path);
     }
 
     /**
diff --git a/web/satellite/src/components/header/resourcesDropdown/ResourcesDropdown.vue b/web/satellite/src/components/header/resourcesDropdown/ResourcesDropdown.vue
index 75f389a3e..57642ccc1 100644
--- a/web/satellite/src/components/header/resourcesDropdown/ResourcesDropdown.vue
+++ b/web/satellite/src/components/header/resourcesDropdown/ResourcesDropdown.vue
@@ -24,7 +24,7 @@ export default class ResourcesDropdown extends Vue {
      * Indicates if current route is onboarding tour.
      */
     public get isOnboardingTour(): boolean {
-        return this.$route.name === RouteConfig.OnboardingTour.name;
+        return this.$route.path.includes(RouteConfig.OnboardingTour.path);
     }
 }
 </script>
diff --git a/web/satellite/src/components/header/resourcesDropdown/ResourcesSelection.vue b/web/satellite/src/components/header/resourcesDropdown/ResourcesSelection.vue
index bdb8481a0..f2603eaac 100644
--- a/web/satellite/src/components/header/resourcesDropdown/ResourcesSelection.vue
+++ b/web/satellite/src/components/header/resourcesDropdown/ResourcesSelection.vue
@@ -43,7 +43,7 @@ export default class ResourcesSelection extends Vue {
      * Indicates if current route is onboarding tour.
      */
     public get isOnboardingTour(): boolean {
-        return this.$route.name === RouteConfig.OnboardingTour.name;
+        return this.$route.path.includes(RouteConfig.OnboardingTour.path);
     }
 
     /**
diff --git a/web/satellite/src/components/header/settingsDropdown/SettingsSelection.vue b/web/satellite/src/components/header/settingsDropdown/SettingsSelection.vue
index 7774f5158..b618fbe55 100644
--- a/web/satellite/src/components/header/settingsDropdown/SettingsSelection.vue
+++ b/web/satellite/src/components/header/settingsDropdown/SettingsSelection.vue
@@ -43,7 +43,7 @@ export default class SettingsSelection extends Vue {
      * Indicates if current route is onboarding tour.
      */
     public get isOnboardingTour(): boolean {
-        return this.$route.name === RouteConfig.OnboardingTour.name;
+        return this.$route.path.includes(RouteConfig.OnboardingTour.path);
     }
 
     /**
diff --git a/web/satellite/src/components/navigation/NavigationArea.vue b/web/satellite/src/components/navigation/NavigationArea.vue
index dcdaf6a16..97c803077 100644
--- a/web/satellite/src/components/navigation/NavigationArea.vue
+++ b/web/satellite/src/components/navigation/NavigationArea.vue
@@ -67,7 +67,7 @@ export default class NavigationArea extends Vue {
      * Indicates if current route is onboarding tour.
      */
     private get isOnboardingTour(): boolean {
-        return this.$route.name === RouteConfig.OnboardingTour.name;
+        return this.$route.path.includes(RouteConfig.OnboardingTour.path);
     }
 }
 </script>
diff --git a/web/satellite/src/components/onboardingTour/OnboardingTourArea.vue b/web/satellite/src/components/onboardingTour/OnboardingTourArea.vue
index 3f69d11ec..eecbd7b67 100644
--- a/web/satellite/src/components/onboardingTour/OnboardingTourArea.vue
+++ b/web/satellite/src/components/onboardingTour/OnboardingTourArea.vue
@@ -11,34 +11,7 @@
             <CloseImage class="tour-area__info-bar__close-img" @click="disableInfoBar"/>
         </div>
         <div class="tour-area__content">
-            <ProgressBar
-                :is-paywall-enabled="isPaywallEnabled"
-                :is-add-payment-step="isAddPaymentState"
-                :is-create-project-step="isCreateProjectState"
-                :is-create-api-key-step="isCreatApiKeyState"
-                :is-upload-data-step="isUploadDataState"
-            />
-            <OverviewStep
-                v-if="isDefaultState && isPaywallEnabled"
-                @setAddPaymentState="setAddPaymentState"
-            />
-            <OverviewStepNoPaywall
-                v-if="isDefaultState && !isPaywallEnabled"
-                @setCreateProjectState="setCreateProjectState"
-            />
-            <AddPaymentStep
-                v-if="isAddPaymentState"
-                @setProjectState="setCreateProjectState"
-            />
-            <CreateProjectStep
-                v-if="isCreateProjectState"
-                @setApiKeyState="setCreateApiKeyState"
-            />
-            <CreateApiKeyStep
-                v-if="isCreatApiKeyState"
-                @setUploadDataState="setUploadDataState"
-            />
-            <UploadDataStep v-if="isUploadDataState"/>
+            <router-view/>
             <img
                 v-if="isAddPaymentState"
                 class="tour-area__content__tardigrade"
@@ -52,36 +25,16 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 
-import ProgressBar from '@/components/onboardingTour/ProgressBar.vue';
-import AddPaymentStep from '@/components/onboardingTour/steps/AddPaymentStep.vue';
-import CreateApiKeyStep from '@/components/onboardingTour/steps/CreateApiKeyStep.vue';
-import CreateProjectStep from '@/components/onboardingTour/steps/CreateProjectStep.vue';
-import OverviewStep from '@/components/onboardingTour/steps/OverviewStep.vue';
-import OverviewStepNoPaywall from '@/components/onboardingTour/steps/OverviewStepNoPaywall.vue';
-import UploadDataStep from '@/components/onboardingTour/steps/UploadDataStep.vue';
-
-import CheckedImage from '@/../static/images/common/checked.svg';
 import CloseImage from '@/../static/images/onboardingTour/close.svg';
 
 import { RouteConfig } from '@/router';
-import { TourState } from '@/utils/constants/onboardingTourEnums';
 
 @Component({
     components: {
-        OverviewStepNoPaywall,
-        UploadDataStep,
-        CreateApiKeyStep,
-        CreateProjectStep,
-        AddPaymentStep,
-        ProgressBar,
-        OverviewStep,
-        CheckedImage,
         CloseImage,
     },
 })
-
 export default class OnboardingTourArea extends Vue {
-    public areaState: number = TourState.DEFAULT;
     public isInfoBarVisible: boolean = true;
 
     /**
@@ -89,7 +42,7 @@ export default class OnboardingTourArea extends Vue {
      * Sets area to needed state.
      */
     public mounted(): void {
-        if (this.userHasProject && this.userHasApiKeys) {
+        if (this.userHasProject && this.userHasAccessGrants) {
             try {
                 this.$router.push(RouteConfig.ProjectDashboard.path);
             } catch (error) {
@@ -99,22 +52,22 @@ export default class OnboardingTourArea extends Vue {
             return;
         }
 
-        if (this.userHasProject && !this.userHasApiKeys) {
+        if (this.userHasProject && !this.userHasAccessGrants) {
             this.disableInfoBar();
-            this.setCreateApiKeyState();
+            this.setCreateAccessGrantStep();
 
             return;
         }
 
         if (this.$store.state.paymentsModule.creditCards.length > 0) {
             this.disableInfoBar();
-            this.setCreateProjectState();
+            this.setCreateAccessGrantStep();
 
             return;
         }
 
         if (this.$store.getters.isTransactionProcessing || this.$store.getters.isBalancePositive) {
-            this.setAddPaymentState();
+            this.setAddPaymentStep();
         }
     }
 
@@ -126,67 +79,17 @@ export default class OnboardingTourArea extends Vue {
     }
 
     /**
-     * Indicates if area is in default state.
+     * Sets area's state to adding payment method step.
      */
-    public get isDefaultState(): boolean {
-        return this.areaState === TourState.DEFAULT;
+    public setAddPaymentStep(): void {
+        this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.PaymentStep).path);
     }
 
     /**
-     * Indicates if area is in adding payment method state.
+     * Sets area's state to creating access grant step.
      */
-    public get isAddPaymentState(): boolean {
-        return this.areaState === TourState.ADDING_PAYMENT;
-    }
-
-    /**
-     * Indicates if area is in creating project state.
-     */
-    public get isCreateProjectState(): boolean {
-        return this.areaState === TourState.PROJECT;
-    }
-
-    /**
-     * Indicates if area is in api key state.
-     */
-    public get isCreatApiKeyState(): boolean {
-        return this.areaState === TourState.API_KEY;
-    }
-
-    /**
-     * Indicates if area is in upload data state.
-     */
-    public get isUploadDataState(): boolean {
-        return this.areaState === TourState.UPLOAD;
-    }
-
-    /**
-     * Sets area's state to adding payment method state.
-     */
-    public setAddPaymentState(): void {
-        this.areaState = TourState.ADDING_PAYMENT;
-    }
-
-    /**
-     * Sets area's state to creating project state.
-     */
-    public setCreateProjectState(): void {
-        this.disableInfoBar();
-        this.areaState = TourState.PROJECT;
-    }
-
-    /**
-     * Sets area's state to creating api key state.
-     */
-    public setCreateApiKeyState(): void {
-        this.areaState = TourState.API_KEY;
-    }
-
-    /**
-     * Sets area's state to upload data state.
-     */
-    public setUploadDataState(): void {
-        this.areaState = TourState.UPLOAD;
+    public setCreateAccessGrantStep(): void {
+        this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant).path);
     }
 
     /**
@@ -196,6 +99,13 @@ export default class OnboardingTourArea extends Vue {
         this.isInfoBarVisible = false;
     }
 
+    /**
+     * Indicates if area is on adding payment method step.
+     */
+    public get isAddPaymentState(): boolean {
+        return this.$route.name === RouteConfig.PaymentStep.name;
+    }
+
     /**
      * Indicates if user has at least one project.
      */
@@ -204,10 +114,10 @@ export default class OnboardingTourArea extends Vue {
     }
 
     /**
-     * Indicates if user has at least one API key.
+     * Indicates if user has at least one access grant.
      */
-    private get userHasApiKeys(): boolean {
-        return this.$store.state.apiKeysModule.page.apiKeys.length > 0;
+    private get userHasAccessGrants(): boolean {
+        return this.$store.state.accessGrantsModule.page.accessGrants.length > 0;
     }
 }
 </script>
@@ -246,7 +156,10 @@ export default class OnboardingTourArea extends Vue {
         }
 
         &__content {
-            padding: 0 100px 80px 100px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 110px 0 80px 0;
             position: relative;
 
             &__tardigrade {
@@ -257,24 +170,4 @@ export default class OnboardingTourArea extends Vue {
             }
         }
     }
-
-    @media screen and (max-width: 1550px) {
-
-        .tour-area {
-
-            &__content {
-                padding: 0 50px 80px 50px;
-            }
-        }
-    }
-
-    @media screen and (max-width: 1000px) {
-
-        .tour-area {
-
-            &__content {
-                padding: 0 25px 80px 25px;
-            }
-        }
-    }
 </style>
diff --git a/web/satellite/src/components/onboardingTour/ProgressBar.vue b/web/satellite/src/components/onboardingTour/ProgressBar.vue
deleted file mode 100644
index b8c07483e..000000000
--- a/web/satellite/src/components/onboardingTour/ProgressBar.vue
+++ /dev/null
@@ -1,187 +0,0 @@
-// Copyright (C) 2020 Storj Labs, Inc.
-// See LICENSE for copying information.
-
-<template>
-    <div class="progress-bar-container">
-        <div class="progress-bar-container__progress-area">
-            <div
-                v-if="isPaywallEnabled"
-                class="progress-bar-container__progress-area__circle"
-                :class="{ 'completed-step': isAddPaymentStep || isCreateProjectStep || isCreateApiKeyStep || isUploadDataStep }"
-            >
-                <CheckedImage/>
-            </div>
-            <div
-                v-if="isPaywallEnabled"
-                class="progress-bar-container__progress-area__bar"
-                :class="{ 'completed-step': isCreateProjectStep || isCreateApiKeyStep || isUploadDataStep }"
-            />
-            <div
-                class="progress-bar-container__progress-area__circle"
-                :class="{ 'completed-step': isCreateProjectStep || isCreateApiKeyStep || isUploadDataStep }"
-            >
-                <CheckedImage/>
-            </div>
-            <div
-                class="progress-bar-container__progress-area__bar"
-                :class="{ 'completed-step': isCreateApiKeyStep || isUploadDataStep }"
-            />
-            <div
-                class="progress-bar-container__progress-area__circle"
-                :class="{ 'completed-step': isCreateApiKeyStep || isUploadDataStep }"
-            >
-                <CheckedImage/>
-            </div>
-            <div
-                class="progress-bar-container__progress-area__bar"
-                :class="{ 'completed-step': isUploadDataStep }"
-            />
-            <div
-                class="progress-bar-container__progress-area__circle"
-                :class="{ 'completed-step': isUploadDataStep }"
-            >
-                <CheckedImage/>
-            </div>
-        </div>
-        <div class="progress-bar-container__titles-area" :class="{ 'titles-area-no-paywall': !isPaywallEnabled }">
-            <span
-                v-if="isPaywallEnabled"
-                class="progress-bar-container__titles-area__title"
-                :class="{ 'completed-font-color': isAddPaymentStep || isCreateProjectStep || isCreateApiKeyStep || isUploadDataStep }"
-            >
-                Add Payment
-            </span>
-            <span
-                class="progress-bar-container__titles-area__title name-your-project-title"
-                :class="{ 'completed-font-color': isCreateProjectStep || isCreateApiKeyStep || isUploadDataStep, 'title-no-paywall': !isPaywallEnabled }"
-            >
-                Name Your Project
-            </span>
-            <span
-                class="progress-bar-container__titles-area__title api-key-title"
-                :class="{ 'completed-font-color': isCreateApiKeyStep || isUploadDataStep }"
-            >
-                Create an API Key
-            </span>
-            <span
-                class="progress-bar-container__titles-area__title"
-                :class="{ 'completed-font-color': isUploadDataStep }"
-            >
-                Upload Data
-            </span>
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
-
-import CheckedImage from '@/../static/images/common/checked.svg';
-
-@Component({
-    components: {
-        CheckedImage,
-    },
-})
-
-export default class ProgressBar extends Vue {
-    @Prop({ default: false })
-    public readonly isPaywallEnabled: boolean;
-    @Prop({ default: false })
-    public readonly isAddPaymentStep: boolean;
-    @Prop({ default: false })
-    public readonly isCreateProjectStep: boolean;
-    @Prop({ default: false })
-    public readonly isCreateApiKeyStep: boolean;
-    @Prop({ default: false })
-    public readonly isUploadDataStep: boolean;
-}
-</script>
-
-<style scoped lang="scss">
-    .progress-bar-container {
-        width: 100%;
-
-        &__progress-area {
-            width: calc(100% - 420px);
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 25px 210px 6px 210px;
-
-            &__circle {
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                min-width: 20px;
-                height: 20px;
-                background-color: #c5cbdb;
-                border-radius: 10px;
-            }
-
-            &__bar {
-                width: 100%;
-                height: 4px;
-                background-color: #c5cbdb;
-            }
-        }
-
-        &__titles-area {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 0 188px 0 188px;
-
-            &__title {
-                font-family: 'font_regular', sans-serif;
-                font-size: 10px;
-                line-height: 15px;
-                color: rgba(0, 0, 0, 0.4);
-                text-align: center;
-            }
-        }
-    }
-
-    .name-your-project-title {
-        padding: 0 0 0 10px;
-    }
-
-    .api-key-title {
-        padding: 0 15px 0 0;
-    }
-
-    .completed-step {
-        background-color: #2683ff;
-    }
-
-    .completed-font-color {
-        color: #2683ff;
-    }
-
-    .titles-area-no-paywall {
-        padding: 0 188px 0 178px;
-    }
-
-    .title-no-paywall {
-        padding: 0;
-    }
-
-    @media screen and (max-width: 800px) {
-
-        .progress-bar-container {
-
-            &__progress-area {
-                width: calc(100% - 300px);
-                padding: 25px 150px 6px 150px;
-            }
-
-            &__titles-area {
-                padding: 0 128px 0 128px;
-            }
-        }
-
-        .titles-area-no-paywall {
-            padding: 0 128px 0 118px;
-        }
-    }
-</style>
\ No newline at end of file
diff --git a/web/satellite/src/components/onboardingTour/steps/CreateApiKeyStep.vue b/web/satellite/src/components/onboardingTour/steps/CreateApiKeyStep.vue
deleted file mode 100644
index eab65098a..000000000
--- a/web/satellite/src/components/onboardingTour/steps/CreateApiKeyStep.vue
+++ /dev/null
@@ -1,385 +0,0 @@
-// Copyright (C) 2020 Storj Labs, Inc.
-// See LICENSE for copying information.
-
-<template>
-    <div class="create-api-key-step">
-        <h1 class="create-api-key-step__title">Create an API Key</h1>
-        <p class="create-api-key-step__sub-title">
-            API keys provide access to the project for creating buckets and uploading objects through the command line
-            interface. This will be your first API key, and you can always create more keys later on.
-        </p>
-        <div class="create-api-key-step__container">
-            <div class="create-api-key-step__container__title-area">
-                <h2 class="create-api-key-step__container__title-area__title">Create API Key</h2>
-                <img
-                    v-if="isLoading"
-                    class="create-api-key-step__container__title-area__loading-image"
-                    src="@/../static/images/account/billing/loading.gif"
-                    alt="loading gif"
-                >
-            </div>
-            <HeaderedInput
-                label="API Key Name"
-                placeholder="Enter API Key Name (i.e. Dan’s Key)"
-                class="full-input"
-                width="calc(100% - 4px)"
-                :error="errorMessage"
-                @setData="setApiKeyName"
-            />
-            <div class="create-api-key-step__container__create-key-area" v-if="isCreatingState">
-                <VButton
-                    class="generate-button"
-                    width="100%"
-                    height="40px"
-                    label="Generate API Key"
-                    :is-blue-white="true"
-                    :on-press="createApiKey"
-                />
-            </div>
-            <div class="create-api-key-step__container__copy-key-area" v-else>
-                <div class="create-api-key-step__container__copy-key-area__header">
-                    <InfoImage/>
-                    <span class="create-api-key-step__container__copy-key-area__header__title">
-                        API Keys only appear here once. Copy and paste this key to your preferred method of storing secrets.
-                    </span>
-                </div>
-                <div class="create-api-key-step__container__copy-key-area__key-container">
-                    <span class="create-api-key-step__container__copy-key-area__key-container__key">{{ key }}</span>
-                    <div class="create-api-key-step__container__copy-key-area__key-container__copy-button">
-                        <VButton
-                            width="81px"
-                            height="40px"
-                            label="Copy"
-                            :is-blue-white="true"
-                            :on-press="onCopyClick"
-                        />
-                    </div>
-                </div>
-            </div>
-            <p class="create-api-key-step__container__info" v-if="isCopyState">
-                We don’t record your API Keys, which are only displayed once when generated. If you loose this
-                key, it cannot be recovered – but you can always create new API Keys when needed.
-            </p>
-            <div class="create-api-key-step__container__blur" v-if="isLoading"/>
-        </div>
-        <VButton
-            class="done-button"
-            width="156px"
-            height="48px"
-            label="Done"
-            :on-press="onDoneClick"
-            :is-disabled="isCreatingState"
-        />
-        <SaveApiKeyModal
-            v-if="isSaveApiKeyModalShown"
-            @confirmSave="onConfirmClick"
-        />
-    </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
-
-import HeaderedInput from '@/components/common/HeaderedInput.vue';
-import VButton from '@/components/common/VButton.vue';
-import SaveApiKeyModal from '@/components/onboardingTour/steps/SaveApiKeyModal.vue';
-
-import InfoImage from '@/../static/images/onboardingTour/info.svg';
-
-import { API_KEYS_ACTIONS } from '@/store/modules/apiKeys';
-import { ApiKey } from '@/types/apiKeys';
-import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
-import { SegmentEvent } from '@/utils/constants/analyticsEventNames';
-import { AddingApiKeyState } from '@/utils/constants/onboardingTourEnums';
-
-const {
-    CREATE,
-    FETCH,
-} = API_KEYS_ACTIONS;
-
-@Component({
-    components: {
-        VButton,
-        HeaderedInput,
-        SaveApiKeyModal,
-        InfoImage,
-    },
-})
-export default class CreateApiKeyStep extends Vue {
-    private name: string = '';
-    private addingState: number = AddingApiKeyState.CREATE;
-    private readonly FIRST_PAGE = 1;
-
-    public key: string = '';
-    public errorMessage: string = '';
-    public isLoading: boolean = false;
-
-    /**
-     * Indicates if save API key modal is shown.
-     */
-    public get isSaveApiKeyModalShown(): boolean {
-        return this.$store.state.appStateModule.appState.isSaveApiKeyModalShown;
-    }
-
-    /**
-     * Indicates if view is in creating state.
-     */
-    public get isCreatingState(): boolean {
-        return this.addingState === AddingApiKeyState.CREATE;
-    }
-
-    /**
-     * Indicates if view is in copy state.
-     */
-    public get isCopyState(): boolean {
-        return this.addingState === AddingApiKeyState.COPY;
-    }
-
-    /**
-     * Indicates view state to copy state.
-     */
-    public setCopyState(): void {
-        this.addingState = AddingApiKeyState.COPY;
-    }
-
-    /**
-     * Sets api key name from input value.
-     */
-    public setApiKeyName(value: string): void {
-        this.name = value.trim();
-        this.errorMessage = '';
-    }
-
-    /**
-     * Creates api key and refreshes store.
-     */
-    public async createApiKey(): Promise<void> {
-        if (this.isLoading) {
-            return;
-        }
-
-        if (!this.name) {
-            this.errorMessage = 'API Key name can`t be empty';
-
-            return;
-        }
-
-        this.isLoading = true;
-
-        let createdApiKey: ApiKey;
-
-        try {
-            createdApiKey = await this.$store.dispatch(CREATE, this.name);
-        } catch (error) {
-            await this.$notify.error(error.message);
-            this.isLoading = false;
-
-            return;
-        }
-
-        await this.$notify.success('Successfully created new api key');
-        this.key = createdApiKey.secret;
-
-        this.$segment.track(SegmentEvent.API_KEY_CREATED, {
-            project_id: this.$store.getters.selectedProject.id,
-        });
-
-        try {
-            await this.$store.dispatch(FETCH, this.FIRST_PAGE);
-        } catch (error) {
-            await this.$notify.error(`Unable to fetch API keys. ${error.message}`);
-        }
-
-        this.setCopyState();
-
-        this.isLoading = false;
-    }
-
-    /**
-     * Copies api key secret to buffer.
-     */
-    public onCopyClick(): void {
-        this.$copyText(this.key);
-        this.$notify.success('Key saved to clipboard');
-    }
-
-    /**
-     * Toggles save API key modal visibility.
-     */
-    public onDoneClick(): void {
-        this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_SAVE_API_KEY_MODAL);
-    }
-
-    /**
-     * Sets tour state to last step.
-     */
-    public onConfirmClick(): void {
-        this.onDoneClick();
-        this.$emit('setUploadDataState');
-    }
-}
-</script>
-
-<style scoped lang="scss">
-    h1,
-    h2,
-    p {
-        margin: 0;
-    }
-
-    .create-api-key-step {
-        font-family: 'font_regular', sans-serif;
-        margin-top: 75px;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: space-between;
-        padding: 0 200px;
-
-        &__title {
-            font-size: 32px;
-            line-height: 39px;
-            color: #1b2533;
-            margin-bottom: 25px;
-        }
-
-        &__sub-title {
-            font-size: 16px;
-            line-height: 19px;
-            color: #354049;
-            margin-bottom: 35px;
-            text-align: center;
-            word-break: break-word;
-        }
-
-        &__container {
-            padding: 50px;
-            width: calc(100% - 100px);
-            border-radius: 8px;
-            background-color: #fff;
-            position: relative;
-            margin-bottom: 30px;
-
-            &__title-area {
-                display: flex;
-                align-items: center;
-                justify-content: flex-start;
-                margin-bottom: 10px;
-
-                &__title {
-                    font-family: 'font_medium', sans-serif;
-                    font-size: 22px;
-                    line-height: 27px;
-                    color: #354049;
-                    margin-right: 15px;
-                }
-
-                &__loading-image {
-                    width: 18px;
-                    height: 18px;
-                }
-            }
-
-            &__create-key-area {
-                width: calc(100% - 90px);
-                padding: 40px 45px;
-                margin-top: 30px;
-                background-color: #0c2546;
-                border-radius: 8px;
-            }
-
-            &__copy-key-area {
-                width: 100%;
-                margin-top: 30px;
-
-                &__header {
-                    padding: 10px;
-                    width: calc(100% - 20px);
-                    background-color: #ce3030;
-                    display: flex;
-                    align-items: center;
-                    justify-content: flex-start;
-                    border-radius: 8px 8px 0 0;
-
-                    &__title {
-                        font-size: 12px;
-                        line-height: 16px;
-                        color: #fff;
-                    }
-                }
-
-                &__key-container {
-                    background-color: #0c2546;
-                    display: flex;
-                    align-items: center;
-                    justify-content: space-between;
-                    padding: 20px 25px;
-                    width: calc(100% - 50px);
-                    border-radius: 0 0 8px 8px;
-
-                    &__key {
-                        font-size: 15px;
-                        line-height: 23px;
-                        color: #fff;
-                        margin-right: 50px;
-                        word-break: break-all;
-                    }
-
-                    &__copy-button {
-                        min-width: 85px;
-                    }
-                }
-            }
-
-            &__info {
-                width: 100%;
-                margin-top: 30px;
-                font-size: 12px;
-                line-height: 18px;
-                text-align: center;
-                color: #354049;
-                word-break: break-word;
-            }
-
-            &__blur {
-                position: absolute;
-                top: 0;
-                left: 0;
-                height: 100%;
-                width: 100%;
-                background-color: rgba(229, 229, 229, 0.2);
-                z-index: 100;
-            }
-        }
-    }
-
-    .full-input {
-        width: 100%;
-    }
-
-    .info-svg {
-        min-width: 18px;
-        margin-right: 5px;
-    }
-
-    @media screen and (max-width: 1650px) {
-
-        .create-api-key-step {
-            padding: 0 100px;
-        }
-    }
-
-    @media screen and (max-width: 1450px) {
-
-        .create-api-key-step {
-            padding: 0 60px;
-        }
-    }
-
-    @media screen and (max-width: 900px) {
-
-        .create-api-key-step {
-            padding: 0 50px;
-        }
-    }
-</style>
diff --git a/web/satellite/src/components/onboardingTour/steps/CreateProjectStep.vue b/web/satellite/src/components/onboardingTour/steps/CreateProjectStep.vue
deleted file mode 100644
index 5bf6a7aeb..000000000
--- a/web/satellite/src/components/onboardingTour/steps/CreateProjectStep.vue
+++ /dev/null
@@ -1,280 +0,0 @@
-// Copyright (C) 2020 Storj Labs, Inc.
-// See LICENSE for copying information.
-
-<template>
-    <div class="new-project-step">
-        <h1 class="new-project-step__title">Name Your Project</h1>
-        <p class="new-project-step__sub-title">
-            Projects are where buckets are created for storing data. Within a Project, usage is tracked at the bucket
-            level and aggregated for billing.
-        </p>
-        <div class="new-project-step__container">
-            <div class="new-project-step__container__title-area">
-                <h2 class="new-project-step__container__title-area__title">Project Details</h2>
-                <img
-                    v-if="isLoading"
-                    class="new-project-step__container__title-area__loading-image"
-                    src="@/../static/images/account/billing/loading.gif"
-                    alt="loading gif"
-                >
-            </div>
-            <HeaderedInput
-                label="Project Name"
-                additional-label="Up To 20 Characters"
-                placeholder="Enter Project Name"
-                class="full-input project-name-input"
-                width="100%"
-                is-limit-shown="true"
-                :current-limit="projectName.length"
-                :max-symbols="20"
-                :error="nameError"
-                @setData="setProjectName"
-            />
-            <HeaderedInput
-                label="Description"
-                placeholder="Enter Project Description"
-                additional-label="Optional"
-                class="full-input"
-                is-multiline="true"
-                is-limit-shown="true"
-                :current-limit="description.length"
-                :max-symbols="100"
-                height="60px"
-                width="calc(100% - 42px)"
-                @setData="setProjectDescription"
-            />
-            <div class="new-project-step__container__blur" v-if="isLoading"/>
-        </div>
-        <VButton
-            class="create-project-button"
-            width="156px"
-            height="48px"
-            label="Create Project"
-            :on-press="createProjectClick"
-            :is-disabled="!projectName"
-        />
-    </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
-
-import HeaderedInput from '@/components/common/HeaderedInput.vue';
-import VButton from '@/components/common/VButton.vue';
-
-import { API_KEYS_ACTIONS } from '@/store/modules/apiKeys';
-import { BUCKET_ACTIONS } from '@/store/modules/buckets';
-import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
-import { PROJECTS_ACTIONS } from '@/store/modules/projects';
-import { ProjectFields } from '@/types/projects';
-import { PM_ACTIONS } from '@/utils/constants/actionNames';
-import { SegmentEvent } from '@/utils/constants/analyticsEventNames';
-
-@Component({
-    components: {
-        VButton,
-        HeaderedInput,
-    },
-})
-export default class CreateProjectStep extends Vue {
-    private description: string = '';
-
-    public projectName: string = '';
-    public isLoading: boolean = false;
-    public nameError: string = '';
-
-    /**
-     * Sets project name from input value.
-     */
-    public setProjectName(value: string): void {
-        this.projectName = value;
-        this.nameError = '';
-    }
-
-    /**
-     * Sets project description from input value.
-     */
-    public setProjectDescription(value: string): void {
-        this.description = value;
-    }
-
-    /**
-     * Creates project and refreshes store.
-     */
-    public async createProjectClick(): Promise<void> {
-        if (this.isLoading) {
-            return;
-        }
-
-        this.isLoading = true;
-        this.projectName = this.projectName.trim();
-
-        const project = new ProjectFields(
-            this.projectName,
-            this.description,
-            this.$store.getters.user.id,
-        );
-
-        try {
-            project.checkName();
-        } catch (error) {
-            this.isLoading = false;
-            this.nameError = error.message;
-
-            return;
-        }
-
-        let createdProjectId: string = '';
-
-        try {
-            const createdProject = await this.$store.dispatch(PROJECTS_ACTIONS.CREATE, project);
-            createdProjectId = createdProject.id;
-            this.$segment.track(SegmentEvent.PROJECT_CREATED, {
-                project_id: createdProjectId,
-            });
-        } catch (error) {
-            this.isLoading = false;
-            await this.$notify.error(error.message);
-
-            return;
-        }
-
-        await this.$store.dispatch(PROJECTS_ACTIONS.SELECT, createdProjectId);
-
-        try {
-            await this.fetchProjectMembers();
-            await this.$store.dispatch(PAYMENTS_ACTIONS.GET_PAYMENTS_HISTORY);
-            await this.$store.dispatch(PAYMENTS_ACTIONS.GET_BALANCE);
-            await this.$store.dispatch(PAYMENTS_ACTIONS.GET_PROJECT_USAGE_AND_CHARGES_CURRENT_ROLLUP);
-            await this.$store.dispatch(PROJECTS_ACTIONS.GET_LIMITS, createdProjectId);
-        } catch (error) {
-            await this.$notify.error(`Unable to create project. ${error.message}`);
-        }
-
-        this.clearApiKeys();
-
-        this.clearBucketUsage();
-
-        await this.$notify.success('Project created successfully!');
-
-        this.isLoading = false;
-
-        this.$emit('setApiKeyState');
-    }
-
-    /**
-     * Clears project members store and fetches new.
-     */
-    private async fetchProjectMembers(): Promise<void> {
-        await this.$store.dispatch(PM_ACTIONS.CLEAR);
-        const fistPage = 1;
-        await this.$store.dispatch(PM_ACTIONS.FETCH, fistPage);
-    }
-
-    /**
-     * Clears api keys store.
-     */
-    private clearApiKeys(): void {
-        this.$store.dispatch(API_KEYS_ACTIONS.CLEAR);
-    }
-
-    /**
-     * Clears bucket usage store.
-     */
-    private clearBucketUsage(): void {
-        this.$store.dispatch(BUCKET_ACTIONS.CLEAR);
-    }
-}
-</script>
-
-<style scoped lang="scss">
-    h1,
-    h2,
-    p {
-        margin: 0;
-    }
-
-    .new-project-step {
-        font-family: 'font_regular', sans-serif;
-        margin-top: 75px;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: space-between;
-        padding: 0 200px;
-
-        &__title {
-            font-size: 32px;
-            line-height: 39px;
-            color: #1b2533;
-            margin-bottom: 25px;
-        }
-
-        &__sub-title {
-            font-size: 16px;
-            line-height: 19px;
-            color: #354049;
-            margin-bottom: 35px;
-            text-align: center;
-            word-break: break-word;
-        }
-
-        &__container {
-            padding: 50px;
-            width: calc(100% - 100px);
-            border-radius: 8px;
-            background-color: #fff;
-            position: relative;
-            margin-bottom: 30px;
-
-            &__title-area {
-                display: flex;
-                align-items: center;
-                justify-content: flex-start;
-                margin-bottom: 10px;
-
-                &__title {
-                    font-family: 'font_medium', sans-serif;
-                    font-size: 22px;
-                    line-height: 27px;
-                    color: #354049;
-                    margin-right: 15px;
-                }
-
-                &__loading-image {
-                    width: 18px;
-                    height: 18px;
-                }
-            }
-
-            &__blur {
-                position: absolute;
-                top: 0;
-                left: 0;
-                height: 100%;
-                width: 100%;
-                background-color: rgba(229, 229, 229, 0.2);
-                z-index: 100;
-            }
-        }
-    }
-
-    .full-input {
-        width: 100%;
-        margin-top: 25px;
-    }
-
-    @media screen and (max-width: 1450px) {
-
-        .new-project-step {
-            padding: 0 150px;
-        }
-    }
-
-    @media screen and (max-width: 900px) {
-
-        .new-project-step {
-            padding: 0 50px;
-        }
-    }
-</style>
diff --git a/web/satellite/src/components/onboardingTour/steps/OverviewStepNoPaywall.vue b/web/satellite/src/components/onboardingTour/steps/OverviewStepNoPaywall.vue
deleted file mode 100644
index 5dc93702e..000000000
--- a/web/satellite/src/components/onboardingTour/steps/OverviewStepNoPaywall.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-// Copyright (C) 2020 Storj Labs, Inc.
-// See LICENSE for copying information.
-
-<template src="./overviewStepNoPaywall.html"></template>
-
-<script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
-
-import VButton from '@/components/common/VButton.vue';
-
-import FirstStepIcon from '@/../static/images/common/one.svg';
-import ThirdStepIcon from '@/../static/images/common/three.svg';
-import SecondStepIcon from '@/../static/images/common/two.svg';
-
-@Component({
-    components: {
-        VButton,
-        FirstStepIcon,
-        ThirdStepIcon,
-        SecondStepIcon,
-    },
-})
-export default class OverviewStepNoPaywall extends Vue {
-    /**
-     * Holds button click logic.
-     * Sets tour state to adding project state.
-     */
-    public onClick(): void {
-        this.$emit('setCreateProjectState');
-    }
-}
-</script>
-
-<style scoped lang="scss" src="./overviewStepNoPaywall.scss"></style>
diff --git a/web/satellite/src/components/onboardingTour/steps/SaveApiKeyModal.vue b/web/satellite/src/components/onboardingTour/steps/SaveApiKeyModal.vue
deleted file mode 100644
index 59bc9c6f1..000000000
--- a/web/satellite/src/components/onboardingTour/steps/SaveApiKeyModal.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-// Copyright (C) 2020 Storj Labs, Inc.
-// See LICENSE for copying information.
-
-<template>
-    <div class="save-api-modal">
-        <div class="save-api-modal__container">
-            <OrangeExclamation/>
-            <h1 class="save-api-modal__container__title">Is Your API Key Saved?</h1>
-            <p class="save-api-modal__container__message">
-                API Keys are only displayed once when generated. If you haven’t saved your key, go back to copy and
-                paste the API key to your preferred method of storing secrets (i.e. TextEdit, Keybase, etc.)
-            </p>
-            <div class="save-api-modal__container__buttons-area">
-                <VButton
-                    class="back-button"
-                    width="186px"
-                    height="45px"
-                    label="Go Back"
-                    :on-press="onBackClick"
-                    :is-blue-white="true"
-                />
-                <VButton
-                    width="186px"
-                    height="45px"
-                    label="Yes, it's Saved!"
-                    :on-press="onConfirmClick"
-                />
-            </div>
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
-
-import VButton from '@/components/common/VButton.vue';
-
-import OrangeExclamation from '@/../static/images/onboardingTour/orange-exclamation.svg';
-
-import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
-
-@Component({
-    components: {
-        OrangeExclamation,
-        VButton,
-    },
-})
-
-export default class SaveApiKeyModal extends Vue {
-    /**
-     * Toggles modal visibility.
-     */
-    public onBackClick(): void {
-        this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_SAVE_API_KEY_MODAL);
-    }
-
-    /**
-     * Proceeds to tour's last step.
-     */
-    public onConfirmClick(): void {
-        this.$emit('confirmSave');
-    }
-}
-</script>
-
-<style scoped lang="scss">
-    .save-api-modal {
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background-color: rgba(9, 21, 35, 0.85);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-family: 'font_regular', sans-serif;
-
-        &__container {
-            background-color: #fff;
-            z-index: 1;
-            padding: 35px;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            border-radius: 6px;
-            max-width: 460px;
-
-            &__title {
-                font-family: 'font_bold', sans-serif;
-                font-size: 22px;
-                line-height: 27px;
-                color: #000;
-                margin: 10px 0;
-            }
-
-            &__message {
-                font-size: 16px;
-                line-height: 24px;
-                color: #000;
-                word-break: break-word;
-                text-align: center;
-                margin: 0 0 10px 0;
-            }
-
-            &__buttons-area {
-                display: flex;
-                align-items: center;
-            }
-        }
-    }
-
-    .back-button {
-        margin-right: 10px;
-    }
-</style>
diff --git a/web/satellite/src/components/onboardingTour/steps/UploadDataStep.vue b/web/satellite/src/components/onboardingTour/steps/UploadDataStep.vue
deleted file mode 100644
index faebcbce0..000000000
--- a/web/satellite/src/components/onboardingTour/steps/UploadDataStep.vue
+++ /dev/null
@@ -1,250 +0,0 @@
-// Copyright (C) 2020 Storj Labs, Inc.
-// See LICENSE for copying information.
-
-<template>
-    <div class="upload-data-area">
-        <div class="upload-data-area__container">
-            <h1 class="upload-data-area__container__title">Upload Data</h1>
-            <p class="upload-data-area__container__sub-title">
-                From here, you’ll set up Tardigrade to store data for your project using our S3 Gateway, Uplink CLI, or
-                select from our growing library of connectors to build apps on Tardigrade.
-            </p>
-            <div class="upload-data-area__container__docs-area">
-                <div class="upload-data-area__container__docs-area__option">
-                    <h2 class="upload-data-area__container__docs-area__option__title">
-                        Migrate Data from your Existing AWS buckets
-                    </h2>
-                    <img src="@/../static/images/onboardingTour/s3.png" alt="s3 gateway image">
-                    <h3 class="upload-data-area__container__docs-area__option__sub-title">
-                        S3 Gateway
-                    </h3>
-                    <p class="upload-data-area__container__docs-area__option__info">
-                        Make the switch with Tardigrade’s S3 Gateway.
-                    </p>
-                    <a
-                        class="upload-data-area__container__docs-area__option__link"
-                        href="https://documentation.tardigrade.io/api-reference/s3-gateway"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                    >
-                        S3 Gateway Docs
-                    </a>
-                </div>
-                <div class="upload-data-area__container__docs-area__option uplink-option">
-                    <h2 class="upload-data-area__container__docs-area__option__title">
-                        Upload Data from Your Local Environment
-                    </h2>
-                    <img src="@/../static/images/onboardingTour/uplinkcli.png" alt="uplink cli image">
-                    <h3 class="upload-data-area__container__docs-area__option__sub-title">
-                        Uplink CLI
-                    </h3>
-                    <p class="upload-data-area__container__docs-area__option__info">
-                        Start uploading data from the command line.
-                    </p>
-                    <a
-                        class="upload-data-area__container__docs-area__option__link"
-                        href="https://documentation.tardigrade.io/getting-started/uploading-your-first-object/set-up-uplink-cli"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                    >
-                        Uplink CLI Docs
-                    </a>
-                </div>
-                <div class="upload-data-area__container__docs-area__option">
-                    <h2 class="upload-data-area__container__docs-area__option__title">
-                        Use Tardigrade for your app’s storage layer
-                    </h2>
-                    <img src="@/../static/images/onboardingTour/connectors.png" alt="connectors image">
-                    <h3 class="upload-data-area__container__docs-area__option__sub-title">
-                        App Connectors
-                    </h3>
-                    <p class="upload-data-area__container__docs-area__option__info">
-                        Integrate Tardigrade into your existing stack.
-                    </p>
-                    <a
-                        class="upload-data-area__container__docs-area__option__link"
-                        href="https://tardigrade.io/connectors/"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                    >
-                        App Connectors
-                    </a>
-                </div>
-            </div>
-        </div>
-        <VButton
-            class="go-to-button"
-            width="276px"
-            height="40px"
-            label="Go to Dashboard"
-            :on-press="onButtonClick"
-        />
-        <span class="upload-data-area__support-info">
-            Need help?
-            <a
-                class="upload-data-area__support-info__link"
-                href="https://support.tardigrade.io/hc/en-us"
-                target="_blank"
-                rel="noopener noreferrer"
-            >
-                Contact support
-            </a>
-        </span>
-    </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
-
-import VButton from '@/components/common/VButton.vue';
-
-import { RouteConfig } from '@/router';
-
-@Component({
-    components: {
-        VButton,
-    },
-})
-
-export default class UploadDataStep extends Vue {
-    /**
-     * Holds button click logic.
-     * Ends onboarding tour and redirects to project dashboard.
-     */
-    public onButtonClick(): void {
-        this.$router.push(RouteConfig.ProjectDashboard.path);
-    }
-}
-</script>
-
-<style scoped lang="scss">
-    h1,
-    h2,
-    h3,
-    p {
-        margin: 0;
-    }
-
-    .upload-data-area {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        width: auto;
-        font-family: 'font_regular', sans-serif;
-        margin-top: 25px;
-
-        &__container {
-            padding: 60px;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            background-color: rgba(255, 255, 255, 0.4);
-            border-radius: 8px;
-            margin-bottom: 50px;
-
-            &__title {
-                font-size: 32px;
-                line-height: 39px;
-                color: #1b2533;
-                margin-bottom: 25px;
-            }
-
-            &__sub-title {
-                font-size: 16px;
-                line-height: 19px;
-                color: #354049;
-                margin-bottom: 35px;
-                text-align: center;
-                word-break: break-word;
-                max-width: 800px;
-            }
-
-            &__docs-area {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-
-                &__option {
-                    padding: 30px;
-                    display: flex;
-                    flex-direction: column;
-                    align-items: center;
-                    border: 1px solid rgba(144, 155, 168, 0.4);
-                    border-radius: 8px;
-
-                    &__title {
-                        font-size: 10px;
-                        line-height: 15px;
-                        text-align: center;
-                        letter-spacing: 0.05em;
-                        text-transform: uppercase;
-                        color: #909ba8;
-                        margin-bottom: 25px;
-                        max-width: 181px;
-                        word-break: break-word;
-                    }
-
-                    &__sub-title {
-                        font-family: 'font_bold', sans-serif;
-                        font-size: 16px;
-                        line-height: 26px;
-                        text-align: center;
-                        color: #354049;
-                        margin: 25px 0 5px 0;
-                    }
-
-                    &__info {
-                        font-size: 14px;
-                        line-height: 17px;
-                        text-align: center;
-                        color: #61666b;
-                        max-width: 181px;
-                        word-break: break-word;
-                        margin-bottom: 15px;
-                    }
-
-                    &__link {
-                        width: 181px;
-                        height: 40px;
-                        border: 1px solid #2683ff;
-                        border-radius: 6px;
-                        background-color: #fff;
-                        color: #2683ff;
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-
-                        &:hover {
-                            background-color: #2683ff;
-                            color: #fff;
-                        }
-                    }
-                }
-            }
-        }
-
-        &__support-info {
-            margin-top: 50px;
-            font-family: 'font_bold', sans-serif;
-            font-size: 15px;
-            line-height: 22px;
-            text-align: center;
-            color: #909ba8;
-
-            &__link {
-                text-decoration: underline;
-            }
-        }
-    }
-
-    .uplink-option {
-        margin: 0 45px;
-    }
-
-    @media screen and (max-width: 1350px) {
-
-        .uplink-option {
-            margin: 0 15px;
-        }
-    }
-</style>
diff --git a/web/satellite/src/components/onboardingTour/steps/overviewStepNoPaywall.html b/web/satellite/src/components/onboardingTour/steps/overviewStepNoPaywall.html
deleted file mode 100644
index 6dee5e38e..000000000
--- a/web/satellite/src/components/onboardingTour/steps/overviewStepNoPaywall.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<!--Copyright (C) 2020 Storj Labs, Inc.-->
-<!--See LICENSE for copying information.-->
-
-<div class="overview-area">
-    <h1 class="overview-area__title">Welcome to Storj</h1>
-    <p class="overview-area__sub-title">
-        You’re just a few steps away from uploading your first object to the 100% secure, decentralized cloud. Simply
-        add a payment method any time before your credit runs out to keep using Storj.
-    </p>
-    <div class="overview-area__steps-area">
-        <div class="overview-area__steps-area__step">
-            <FirstStepIcon class="overview-area__steps-area__step__icon"/>
-            <img class="overview-step-image" src="@/../static/images/onboardingTour/project.jpg" alt="project image">
-            <h2 class="overview-area__steps-area__step__title">Name Your Project</h2>
-            <span class="overview-area__steps-area__step__subtitle">
-                Projects are where buckets are created for storing data.
-            </span>
-        </div>
-        <div class="overview-area__steps-area__step second-step">
-            <SecondStepIcon class="overview-area__steps-area__step__icon"/>
-            <img class="overview-step-image" src="@/../static/images/onboardingTour/api-key.jpg" alt="api keys image">
-            <h2 class="overview-area__steps-area__step__title">Create an API Key</h2>
-            <span class="overview-area__steps-area__step__subtitle">
-                Generate access to your project to upload data.
-            </span>
-        </div>
-        <div class="overview-area__steps-area__step">
-            <ThirdStepIcon class="overview-area__steps-area__step__icon"/>
-            <img class="overview-step-image" src="@/../static/images/onboardingTour/uplink.jpg" alt="uplink image">
-            <h2 class="overview-area__steps-area__step__title">Upload Data</h2>
-            <span class="overview-area__steps-area__step__subtitle">
-                Store your data on the secure, decentralized cloud.
-            </span>
-        </div>
-    </div>
-    <VButton
-        class="get-started-button"
-        label="Get Started"
-        width="251px"
-        height="56px"
-        :on-press="onClick"
-    />
-</div>
diff --git a/web/satellite/src/components/onboardingTour/steps/overviewStepNoPaywall.scss b/web/satellite/src/components/onboardingTour/steps/overviewStepNoPaywall.scss
deleted file mode 100644
index fc8135aae..000000000
--- a/web/satellite/src/components/onboardingTour/steps/overviewStepNoPaywall.scss
+++ /dev/null
@@ -1,107 +0,0 @@
-// Copyright (C) 2020 Storj Labs, Inc.
-// See LICENSE for copying information.
-
-p,
-h1,
-h2 {
-    margin: 0;
-}
-
-.overview-area {
-    width: auto;
-    padding: 75px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: space-between;
-    font-family: 'font_regular', sans-serif;
-    background-color: #fff;
-    border-radius: 6px;
-    margin-top: 25px;
-
-    &__title {
-        font-family: 'font_bold', sans-serif;
-        font-size: 32px;
-        line-height: 39px;
-        color: #1b2533;
-        margin-bottom: 25px;
-    }
-
-    &__sub-title {
-        font-size: 16px;
-        line-height: 26px;
-        color: #354049;
-        margin-bottom: 60px;
-        text-align: center;
-        max-width: 815px;
-    }
-
-    &__steps-area {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        margin-bottom: 50px;
-
-        &__step {
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-            align-items: center;
-            position: relative;
-            max-width: 190px;
-            width: 190px;
-
-            &__icon {
-                position: absolute;
-                top: -15px;
-                left: 80px;
-            }
-
-            &__title {
-                font-size: 16px;
-                line-height: 26px;
-                text-align: center;
-                color: #354049;
-                margin: 15px 0 5px 0;
-            }
-
-            &__subtitle {
-                font-family: 'font_regular', sans-serif;
-                font-size: 14px;
-                line-height: 17px;
-                text-align: center;
-                color: #61666b;
-                word-break: break-word;
-            }
-        }
-    }
-}
-
-.second-step {
-    margin: 0 50px 0 50px;
-}
-
-@media screen and (max-width: 1450px) {
-
-    .overview-area {
-        padding: 75px 30px;
-    }
-
-    .second-step {
-        margin: 0 20px 0 20px;
-    }
-}
-
-@media screen and (max-width: 900px) {
-
-    .overview-area {
-
-        &__steps-area {
-            flex-direction: column;
-
-            &__step {
-                margin: 0 0 30px 0;
-            }
-        }
-    }
-}
diff --git a/web/satellite/src/router/index.ts b/web/satellite/src/router/index.ts
index a89a2da97..79e8c7a30 100644
--- a/web/satellite/src/router/index.ts
+++ b/web/satellite/src/router/index.ts
@@ -77,6 +77,10 @@ export abstract class RouteConfig {
     public static OverviewStep = new NavigationLink('overview', 'Onboarding Overview');
     public static PaymentStep = new NavigationLink('payment', 'Onboarding Payment');
     public static AccessGrant = new NavigationLink('access', 'Onboarding Access Grant');
+    public static AccessGrantName = new NavigationLink('name', 'Onboarding Name Access Grant');
+    public static AccessGrantPermissions = new NavigationLink('permissions', 'Onboarding Access Grant Permissions');
+    public static AccessGrantPassphrase = new NavigationLink('create-passphrase', 'Onboarding Access Grant Create Passphrase');
+    public static AccessGrantResult = new NavigationLink('result', 'Onboarding Access Grant Result');
 
     // TODO: disabled until implementation
     // public static Referral = new NavigationLink('referral', 'Referral');
@@ -201,24 +205,24 @@ export const router = new Router({
                             component: CreateAccessGrantStep,
                             children: [
                                 {
-                                    path: RouteConfig.NameStep.path,
-                                    name: RouteConfig.NameStep.name,
+                                    path: RouteConfig.AccessGrantName.path,
+                                    name: RouteConfig.AccessGrantName.name,
                                     component: NameStep,
                                 },
                                 {
-                                    path: RouteConfig.PermissionsStep.path,
-                                    name: RouteConfig.PermissionsStep.name,
+                                    path: RouteConfig.AccessGrantPermissions.path,
+                                    name: RouteConfig.AccessGrantPermissions.name,
                                     component: PermissionsStep,
                                     props: true,
                                 },
                                 {
-                                    path: RouteConfig.CreatePassphraseStep.path,
-                                    name: RouteConfig.CreatePassphraseStep.name,
+                                    path: RouteConfig.AccessGrantPassphrase.path,
+                                    name: RouteConfig.AccessGrantPassphrase.name,
                                     component: CreatePassphraseStep,
                                 },
                                 {
-                                    path: RouteConfig.ResultStep.path,
-                                    name: RouteConfig.ResultStep.name,
+                                    path: RouteConfig.AccessGrantResult.path,
+                                    name: RouteConfig.AccessGrantResult.name,
                                     component: ResultStep,
                                 },
                             ],
diff --git a/web/satellite/src/utils/constants/onboardingTourEnums.ts b/web/satellite/src/utils/constants/onboardingTourEnums.ts
index 43e4cec8a..4bfa2eeea 100644
--- a/web/satellite/src/utils/constants/onboardingTourEnums.ts
+++ b/web/satellite/src/utils/constants/onboardingTourEnums.ts
@@ -1,14 +1,6 @@
 // Copyright (C) 2020 Storj Labs, Inc.
 // See LICENSE for copying information.
 
-export enum TourState {
-    DEFAULT = 1,
-    ADDING_PAYMENT,
-    PROJECT,
-    API_KEY,
-    UPLOAD,
-}
-
 export enum AddingPaymentState {
     ADD_CARD = 1,
     ADD_STORJ,
@@ -19,8 +11,3 @@ export enum AddingStorjState {
     VERIFYING,
     VERIFIED,
 }
-
-export enum AddingApiKeyState {
-    CREATE = 1,
-    COPY,
-}
diff --git a/web/satellite/src/views/DashboardArea.vue b/web/satellite/src/views/DashboardArea.vue
index 958d3ab8a..ece2cd1f9 100644
--- a/web/satellite/src/views/DashboardArea.vue
+++ b/web/satellite/src/views/DashboardArea.vue
@@ -234,7 +234,7 @@ export default class DashboardArea extends Vue {
      * Indicates if no paywall info bar is shown.
      */
     public get isNoPaywallInfoBarShown(): boolean {
-        const isOnboardingTour: boolean = this.$route.name === RouteConfig.OnboardingTour.name;
+        const isOnboardingTour: boolean = this.$route.path.includes(RouteConfig.OnboardingTour.path);
 
         return !this.isPaywallEnabled && !isOnboardingTour &&
             this.$store.state.paymentsModule.balance.coins === 0 &&
diff --git a/web/satellite/static/images/onboardingTour/connectors.png b/web/satellite/static/images/onboardingTour/connectors.png
deleted file mode 100644
index 31a6c7c1e..000000000
Binary files a/web/satellite/static/images/onboardingTour/connectors.png and /dev/null differ
diff --git a/web/satellite/static/images/onboardingTour/info.svg b/web/satellite/static/images/onboardingTour/info.svg
deleted file mode 100644
index f0dbe8630..000000000
--- a/web/satellite/static/images/onboardingTour/info.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg class="info-svg" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M9 -7.86805e-07C4.02944 -1.22135e-06 1.22135e-06 4.02944 7.86805e-07 9C3.52265e-07 13.9706 4.02944 18 9 18C13.9706 18 18 13.9706 18 9C18 4.02944 13.9706 -3.52265e-07 9 -7.86805e-07ZM10 13C10 13.5523 9.55229 14 9 14C8.44772 14 8 13.5523 8 13C8 12.4477 8.44772 12 9 12C9.55229 12 10 12.4477 10 13ZM10 9C10 9.55228 9.55228 10 9 10C8.44771 10 8 9.55228 8 9L8 5C8 4.44771 8.44772 4 9 4C9.55229 4 10 4.44772 10 5L10 9Z" fill="white"/>
-</svg>
diff --git a/web/satellite/static/images/onboardingTour/orange-exclamation.svg b/web/satellite/static/images/onboardingTour/orange-exclamation.svg
deleted file mode 100644
index 3e8812c99..000000000
--- a/web/satellite/static/images/onboardingTour/orange-exclamation.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M0 24C1.15877e-06 10.7452 10.7452 -1.15877e-06 24 0C37.2548 2.09815e-06 48 10.7452 48 24C48 37.2548 37.2548 48 24 48C10.7452 48 -2.09815e-06 37.2548 0 24ZM26.6669 24.0003C26.6669 25.473 25.473 26.6669 24.0003 26.6669C22.5275 26.6669 21.3336 25.473 21.3336 24.0003L21.3336 13.3336C21.3336 11.8609 22.5275 10.6669 24.0003 10.6669C25.473 10.6669 26.6669 11.8609 26.6669 13.3336L26.6669 24.0003ZM24.0003 37.3335C25.473 37.3335 26.6669 36.1396 26.6669 34.6668C26.6669 33.194 25.473 32.0001 24.0003 32.0001C22.5275 32.0001 21.3336 33.194 21.3336 34.6668C21.3336 36.1396 22.5275 37.3335 24.0003 37.3335Z" fill="#F4B000"/>
-</svg>
diff --git a/web/satellite/static/images/onboardingTour/s3.png b/web/satellite/static/images/onboardingTour/s3.png
deleted file mode 100644
index ac6328f6d..000000000
Binary files a/web/satellite/static/images/onboardingTour/s3.png and /dev/null differ
diff --git a/web/satellite/static/images/onboardingTour/uplinkcli.png b/web/satellite/static/images/onboardingTour/uplinkcli.png
deleted file mode 100644
index 10f65841f..000000000
Binary files a/web/satellite/static/images/onboardingTour/uplinkcli.png and /dev/null differ
diff --git a/web/satellite/tests/unit/navigationArea/NavigationArea.spec.ts b/web/satellite/tests/unit/navigationArea/NavigationArea.spec.ts
index f3ad40f41..e5dae71a6 100644
--- a/web/satellite/tests/unit/navigationArea/NavigationArea.spec.ts
+++ b/web/satellite/tests/unit/navigationArea/NavigationArea.spec.ts
@@ -6,6 +6,7 @@ import Vuex from 'vuex';
 
 import NavigationArea from '@/components/navigation/NavigationArea.vue';
 import OnboardingTourArea from '@/components/onboardingTour/OnboardingTourArea.vue';
+import OverviewStep from '@/components/onboardingTour/steps/OverviewStep.vue';
 import ProjectDashboard from '@/components/project/ProjectDashboard.vue';
 
 import { RouteConfig } from '@/router';
@@ -37,11 +38,14 @@ describe('NavigationArea', () => {
         const router = new Router({
             mode: 'history',
             routes: [{
-                path: '/',
+                path: '/onboarding-tour',
                 name: RouteConfig.OnboardingTour.name,
                 component: OnboardingTourArea,
             }],
         });
+
+        router.push('/onboarding-tour');
+
         const wrapper = shallowMount(NavigationArea, {
             store,
             localVue,
@@ -67,6 +71,8 @@ describe('NavigationArea', () => {
         const projects = await store.dispatch('fetchProjects');
         store.commit(PROJECTS_MUTATIONS.SELECT_PROJECT, projects[0].id);
 
+        router.push('/');
+
         const wrapper = shallowMount(NavigationArea, {
             store,
             localVue,
diff --git a/web/satellite/tests/unit/onboardingTour/ProgressBar.spec.ts b/web/satellite/tests/unit/onboardingTour/ProgressBar.spec.ts
deleted file mode 100644
index 7f7fa726c..000000000
--- a/web/satellite/tests/unit/onboardingTour/ProgressBar.spec.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-// Copyright (C) 2020 Storj Labs, Inc.
-// See LICENSE for copying information.
-
-import ProgressBar from '@/components/onboardingTour/ProgressBar.vue';
-
-import { mount } from '@vue/test-utils';
-
-describe('ProgressBar.vue', () => {
-    it('renders correctly if paywall is enabled', (): void => {
-        const wrapper = mount(ProgressBar, {
-            propsData: {
-                isPaywallEnabled: true,
-            },
-        });
-
-        expect(wrapper).toMatchSnapshot();
-    });
-
-    it('renders correctly if paywall is disabled', (): void => {
-        const wrapper = mount(ProgressBar, {
-            propsData: {
-                isPaywallEnabled: false,
-            },
-        });
-
-        expect(wrapper).toMatchSnapshot();
-    });
-
-    it('renders correctly if add payment step is completed', (): void => {
-        const wrapper = mount(ProgressBar, {
-            propsData: {
-                isAddPaymentStep: true,
-                isPaywallEnabled: true,
-            },
-        });
-
-        expect(wrapper.findAll('.completed-step').length).toBe(1);
-        expect(wrapper.findAll('.completed-font-color').length).toBe(1);
-    });
-
-    it('renders correctly if create project step is completed', (): void => {
-        const wrapper = mount(ProgressBar, {
-            propsData: {
-                isCreateProjectStep: true,
-                isPaywallEnabled: true,
-            },
-        });
-
-        expect(wrapper.findAll('.completed-step').length).toBe(3);
-        expect(wrapper.findAll('.completed-font-color').length).toBe(2);
-    });
-
-    it('renders correctly if create api key step is completed', (): void => {
-        const wrapper = mount(ProgressBar, {
-            propsData: {
-                isCreateApiKeyStep: true,
-                isPaywallEnabled: true,
-            },
-        });
-
-        expect(wrapper.findAll('.completed-step').length).toBe(5);
-        expect(wrapper.findAll('.completed-font-color').length).toBe(3);
-    });
-
-    it('renders correctly if upload data step is completed', (): void => {
-        const wrapper = mount(ProgressBar, {
-            propsData: {
-                isUploadDataStep: true,
-                isPaywallEnabled: true,
-            },
-        });
-
-        expect(wrapper.findAll('.completed-step').length).toBe(7);
-        expect(wrapper.findAll('.completed-font-color').length).toBe(4);
-    });
-});
diff --git a/web/satellite/tests/unit/onboardingTour/__snapshots__/ProgressBar.spec.ts.snap b/web/satellite/tests/unit/onboardingTour/__snapshots__/ProgressBar.spec.ts.snap
deleted file mode 100644
index 7910edb70..000000000
--- a/web/satellite/tests/unit/onboardingTour/__snapshots__/ProgressBar.spec.ts.snap
+++ /dev/null
@@ -1,61 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ProgressBar.vue renders correctly if paywall is disabled 1`] = `
-<div class="progress-bar-container">
-  <div class="progress-bar-container__progress-area">
-    <!---->
-    <!---->
-    <div class="progress-bar-container__progress-area__circle"><svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M7.61854 0.302314C8.02258 -0.100771 8.67764 -0.100771 9.08163 0.302314C9.48569 0.705397 9.48569 1.35893 9.08163 1.76202L4.20463 6.62768C3.8006 7.03077 3.14555 7.03077 2.74152 6.62768L0.303018 4.19485C-0.101006 3.79177 -0.101006 3.13823 0.303018 2.73515C0.707044 2.33206 1.3621 2.33206 1.76612 2.73515L3.47307 4.43813L7.61854 0.302314Z" fill="white"></path>
-      </svg></div>
-    <div class="progress-bar-container__progress-area__bar"></div>
-    <div class="progress-bar-container__progress-area__circle"><svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M7.61854 0.302314C8.02258 -0.100771 8.67764 -0.100771 9.08163 0.302314C9.48569 0.705397 9.48569 1.35893 9.08163 1.76202L4.20463 6.62768C3.8006 7.03077 3.14555 7.03077 2.74152 6.62768L0.303018 4.19485C-0.101006 3.79177 -0.101006 3.13823 0.303018 2.73515C0.707044 2.33206 1.3621 2.33206 1.76612 2.73515L3.47307 4.43813L7.61854 0.302314Z" fill="white"></path>
-      </svg></div>
-    <div class="progress-bar-container__progress-area__bar"></div>
-    <div class="progress-bar-container__progress-area__circle"><svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M7.61854 0.302314C8.02258 -0.100771 8.67764 -0.100771 9.08163 0.302314C9.48569 0.705397 9.48569 1.35893 9.08163 1.76202L4.20463 6.62768C3.8006 7.03077 3.14555 7.03077 2.74152 6.62768L0.303018 4.19485C-0.101006 3.79177 -0.101006 3.13823 0.303018 2.73515C0.707044 2.33206 1.3621 2.33206 1.76612 2.73515L3.47307 4.43813L7.61854 0.302314Z" fill="white"></path>
-      </svg></div>
-  </div>
-  <div class="progress-bar-container__titles-area titles-area-no-paywall">
-    <!----> <span class="progress-bar-container__titles-area__title name-your-project-title title-no-paywall">
-            Name Your Project
-        </span> <span class="progress-bar-container__titles-area__title api-key-title">
-            Create an API Key
-        </span> <span class="progress-bar-container__titles-area__title">
-            Upload Data
-        </span>
-  </div>
-</div>
-`;
-
-exports[`ProgressBar.vue renders correctly if paywall is enabled 1`] = `
-<div class="progress-bar-container">
-  <div class="progress-bar-container__progress-area">
-    <div class="progress-bar-container__progress-area__circle"><svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M7.61854 0.302314C8.02258 -0.100771 8.67764 -0.100771 9.08163 0.302314C9.48569 0.705397 9.48569 1.35893 9.08163 1.76202L4.20463 6.62768C3.8006 7.03077 3.14555 7.03077 2.74152 6.62768L0.303018 4.19485C-0.101006 3.79177 -0.101006 3.13823 0.303018 2.73515C0.707044 2.33206 1.3621 2.33206 1.76612 2.73515L3.47307 4.43813L7.61854 0.302314Z" fill="white"></path>
-      </svg></div>
-    <div class="progress-bar-container__progress-area__bar"></div>
-    <div class="progress-bar-container__progress-area__circle"><svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M7.61854 0.302314C8.02258 -0.100771 8.67764 -0.100771 9.08163 0.302314C9.48569 0.705397 9.48569 1.35893 9.08163 1.76202L4.20463 6.62768C3.8006 7.03077 3.14555 7.03077 2.74152 6.62768L0.303018 4.19485C-0.101006 3.79177 -0.101006 3.13823 0.303018 2.73515C0.707044 2.33206 1.3621 2.33206 1.76612 2.73515L3.47307 4.43813L7.61854 0.302314Z" fill="white"></path>
-      </svg></div>
-    <div class="progress-bar-container__progress-area__bar"></div>
-    <div class="progress-bar-container__progress-area__circle"><svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M7.61854 0.302314C8.02258 -0.100771 8.67764 -0.100771 9.08163 0.302314C9.48569 0.705397 9.48569 1.35893 9.08163 1.76202L4.20463 6.62768C3.8006 7.03077 3.14555 7.03077 2.74152 6.62768L0.303018 4.19485C-0.101006 3.79177 -0.101006 3.13823 0.303018 2.73515C0.707044 2.33206 1.3621 2.33206 1.76612 2.73515L3.47307 4.43813L7.61854 0.302314Z" fill="white"></path>
-      </svg></div>
-    <div class="progress-bar-container__progress-area__bar"></div>
-    <div class="progress-bar-container__progress-area__circle"><svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M7.61854 0.302314C8.02258 -0.100771 8.67764 -0.100771 9.08163 0.302314C9.48569 0.705397 9.48569 1.35893 9.08163 1.76202L4.20463 6.62768C3.8006 7.03077 3.14555 7.03077 2.74152 6.62768L0.303018 4.19485C-0.101006 3.79177 -0.101006 3.13823 0.303018 2.73515C0.707044 2.33206 1.3621 2.33206 1.76612 2.73515L3.47307 4.43813L7.61854 0.302314Z" fill="white"></path>
-      </svg></div>
-  </div>
-  <div class="progress-bar-container__titles-area"><span class="progress-bar-container__titles-area__title">
-            Add Payment
-        </span> <span class="progress-bar-container__titles-area__title name-your-project-title">
-            Name Your Project
-        </span> <span class="progress-bar-container__titles-area__title api-key-title">
-            Create an API Key
-        </span> <span class="progress-bar-container__titles-area__title">
-            Upload Data
-        </span></div>
-</div>
-`;
diff --git a/web/satellite/tests/unit/onboardingTour/__snapshots__/onboardingTourArea.spec.ts.snap b/web/satellite/tests/unit/onboardingTour/__snapshots__/onboardingTourArea.spec.ts.snap
index 545a201b1..9f8eccefb 100644
--- a/web/satellite/tests/unit/onboardingTour/__snapshots__/onboardingTourArea.spec.ts.snap
+++ b/web/satellite/tests/unit/onboardingTour/__snapshots__/onboardingTourArea.spec.ts.snap
@@ -9,13 +9,7 @@ exports[`OnboardingTourArea.vue renders correctly 1`] = `
     <closeimage-stub class="tour-area__info-bar__close-img"></closeimage-stub>
   </div>
   <div class="tour-area__content">
-    <progressbar-stub ispaywallenabled="true"></progressbar-stub>
-    <overviewstep-stub></overviewstep-stub>
-    <!---->
-    <!---->
-    <!---->
-    <!---->
-    <!---->
+    <router-view-stub name="default"></router-view-stub>
     <!---->
   </div>
 </div>
diff --git a/web/satellite/tests/unit/onboardingTour/onboardingTourArea.spec.ts b/web/satellite/tests/unit/onboardingTour/onboardingTourArea.spec.ts
index 5c5425997..413286a58 100644
--- a/web/satellite/tests/unit/onboardingTour/onboardingTourArea.spec.ts
+++ b/web/satellite/tests/unit/onboardingTour/onboardingTourArea.spec.ts
@@ -6,6 +6,7 @@ import Vuex from 'vuex';
 import OnboardingTourArea from '@/components/onboardingTour/OnboardingTourArea.vue';
 
 import { PaymentsHttpApi } from '@/api/payments';
+import { router } from '@/router';
 import { makePaymentsModule } from '@/store/modules/payments';
 import { makeProjectsModule } from '@/store/modules/projects';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
@@ -27,6 +28,7 @@ describe('OnboardingTourArea.vue', () => {
         const wrapper = shallowMount(OnboardingTourArea, {
             store,
             localVue,
+            router,
         });
 
         expect(wrapper).toMatchSnapshot();
diff --git a/web/satellite/tests/unit/onboardingTour/steps/CreateApiKeyStep.spec.ts b/web/satellite/tests/unit/onboardingTour/steps/CreateApiKeyStep.spec.ts
deleted file mode 100644
index d68c2a16a..000000000
--- a/web/satellite/tests/unit/onboardingTour/steps/CreateApiKeyStep.spec.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-// Copyright (C) 2020 Storj Labs, Inc.
-// See LICENSE for copying information.
-
-import sinon from 'sinon';
-import Vuex from 'vuex';
-
-import CreateApiKeyStep from '@/components/onboardingTour/steps/CreateApiKeyStep.vue';
-
-import { makeApiKeysModule } from '@/store/modules/apiKeys';
-import { appStateModule } from '@/store/modules/appState';
-import { makeProjectsModule } from '@/store/modules/projects';
-import { ApiKeysPage } from '@/types/apiKeys';
-import { Project } from '@/types/projects';
-import { NotificatorPlugin } from '@/utils/plugins/notificator';
-import { SegmentioPlugin } from '@/utils/plugins/segment';
-import { createLocalVue, mount } from '@vue/test-utils';
-
-import { ApiKeysMock } from '../../mock/api/apiKeys';
-import { ProjectsApiMock } from '../../mock/api/projects';
-
-const localVue = createLocalVue();
-const notificationPlugin = new NotificatorPlugin();
-const segmentioPlugin = new SegmentioPlugin();
-const projectsApi = new ProjectsApiMock();
-const projectsModule = makeProjectsModule(projectsApi);
-const apiKeysApi = new ApiKeysMock();
-const apiKeysModule = makeApiKeysModule(apiKeysApi);
-apiKeysApi.setMockApiKeysPage(new ApiKeysPage());
-const project = new Project('id', 'projectName', 'projectDescription', 'test', 'testOwnerId', true);
-projectsApi.setMockProjects([project]);
-
-localVue.use(Vuex);
-localVue.use(notificationPlugin);
-localVue.use(segmentioPlugin);
-
-const store = new Vuex.Store({ modules: { projectsModule, apiKeysModule, appStateModule }});
-
-describe('CreateApiKeyStep.vue', () => {
-    it('renders correctly', (): void => {
-        const wrapper = mount(CreateApiKeyStep, {
-            store,
-            localVue,
-        });
-
-        expect(wrapper.findAll('.disabled').length).toBe(1);
-        expect(wrapper).toMatchSnapshot();
-    });
-
-    it('create api key works correctly correctly', async (): Promise<void> => {
-        const wrapper = mount(CreateApiKeyStep, {
-            store,
-            localVue,
-        });
-
-        await wrapper.vm.setApiKeyName('testName');
-        await wrapper.vm.createApiKey();
-
-        expect(wrapper.findAll('.disabled').length).toBe(0);
-        expect(wrapper).toMatchSnapshot();
-    });
-});
diff --git a/web/satellite/tests/unit/onboardingTour/steps/CreateProjectStep.spec.ts b/web/satellite/tests/unit/onboardingTour/steps/CreateProjectStep.spec.ts
deleted file mode 100644
index 3caf59d19..000000000
--- a/web/satellite/tests/unit/onboardingTour/steps/CreateProjectStep.spec.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-// Copyright (C) 2020 Storj Labs, Inc.
-// See LICENSE for copying information.
-
-import sinon from 'sinon';
-import Vuex from 'vuex';
-
-import CreateProjectStep from '@/components/onboardingTour/steps/CreateProjectStep.vue';
-
-import { PaymentsHttpApi } from '@/api/payments';
-import { makePaymentsModule } from '@/store/modules/payments';
-import { makeProjectsModule } from '@/store/modules/projects';
-import { createLocalVue, mount, shallowMount } from '@vue/test-utils';
-
-import { ProjectsApiMock } from '../../mock/api/projects';
-
-const localVue = createLocalVue();
-localVue.use(Vuex);
-const paymentsApi = new PaymentsHttpApi();
-const paymentsModule = makePaymentsModule(paymentsApi);
-const projectsApi = new ProjectsApiMock();
-const projectsModule = makeProjectsModule(projectsApi);
-
-const store = new Vuex.Store({ modules: { paymentsModule, projectsModule }});
-
-describe('CreateProjectStep.vue', () => {
-    it('renders correctly', (): void => {
-        const wrapper = shallowMount(CreateProjectStep, {
-            store,
-            localVue,
-        });
-
-        expect(wrapper).toMatchSnapshot();
-    });
-
-    it('click works correctly', async (): Promise<void> => {
-        const clickSpy = sinon.spy();
-        const wrapper = mount(CreateProjectStep, {
-            store,
-            localVue,
-        });
-
-        wrapper.vm.createProjectClick = clickSpy;
-
-        expect(wrapper.findAll('.disabled').length).toBe(1);
-
-        await wrapper.vm.setProjectName('test');
-
-        expect(wrapper.findAll('.disabled').length).toBe(0);
-
-        await wrapper.find('.create-project-button').trigger('click');
-
-        expect(clickSpy.callCount).toBe(1);
-    });
-});
diff --git a/web/satellite/tests/unit/onboardingTour/steps/SaveApiKeyModal.spec.ts b/web/satellite/tests/unit/onboardingTour/steps/SaveApiKeyModal.spec.ts
deleted file mode 100644
index 81dc82396..000000000
--- a/web/satellite/tests/unit/onboardingTour/steps/SaveApiKeyModal.spec.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-// Copyright (C) 2020 Storj Labs, Inc.
-// See LICENSE for copying information.
-
-import SaveApiKeyModal from '@/components/onboardingTour/steps/SaveApiKeyModal.vue';
-
-import { mount } from '@vue/test-utils';
-
-describe('SaveApiKeyModal.vue', () => {
-    it('renders correctly', (): void => {
-        const wrapper = mount(SaveApiKeyModal);
-
-        expect(wrapper).toMatchSnapshot();
-    });
-});
diff --git a/web/satellite/tests/unit/onboardingTour/steps/UploadDataStep.spec.ts b/web/satellite/tests/unit/onboardingTour/steps/UploadDataStep.spec.ts
deleted file mode 100644
index 5a1990d17..000000000
--- a/web/satellite/tests/unit/onboardingTour/steps/UploadDataStep.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-// Copyright (C) 2020 Storj Labs, Inc.
-// See LICENSE for copying information.
-
-import UploadDataStep from '@/components/onboardingTour/steps/UploadDataStep.vue';
-
-import { createLocalVue, mount } from '@vue/test-utils';
-
-const localVue = createLocalVue();
-
-describe('UploadDataStep.vue', () => {
-    it('renders correctly', (): void => {
-        const wrapper = mount(UploadDataStep, {
-            localVue,
-        });
-
-        expect(wrapper).toMatchSnapshot();
-    });
-});
diff --git a/web/satellite/tests/unit/onboardingTour/steps/__snapshots__/CreateApiKeyStep.spec.ts.snap b/web/satellite/tests/unit/onboardingTour/steps/__snapshots__/CreateApiKeyStep.spec.ts.snap
deleted file mode 100644
index 6b33a87e7..000000000
--- a/web/satellite/tests/unit/onboardingTour/steps/__snapshots__/CreateApiKeyStep.spec.ts.snap
+++ /dev/null
@@ -1,85 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CreateApiKeyStep.vue create api key works correctly correctly 1`] = `
-<div class="create-api-key-step">
-  <h1 class="create-api-key-step__title">Create an API Key</h1>
-  <p class="create-api-key-step__sub-title">
-    API keys provide access to the project for creating buckets and uploading objects through the command line
-    interface. This will be your first API key, and you can always create more keys later on.
-  </p>
-  <div class="create-api-key-step__container">
-    <div class="create-api-key-step__container__title-area">
-      <h2 class="create-api-key-step__container__title-area__title">Create API Key</h2>
-      <!---->
-    </div>
-    <div class="input-container full-input">
-      <div class="label-container">
-        <div class="label-container__main">
-          <!---->
-          <h3 class="label-container__main__label">API Key Name</h3>
-          <h3 class="label-container__main__label add-label"></h3>
-          <!---->
-        </div>
-        <!---->
-      </div>
-      <!---->
-      <!----> <input id="API Key Name" placeholder="Enter API Key Name (i.e. Dan’s Key)" type="text" class="headered-input" style="height: 48px;">
-    </div>
-    <div class="create-api-key-step__container__copy-key-area">
-      <div class="create-api-key-step__container__copy-key-area__header"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="info-svg">
-          <path fill-rule="evenodd" clip-rule="evenodd" d="M9 -7.86805e-07C4.02944 -1.22135e-06 1.22135e-06 4.02944 7.86805e-07 9C3.52265e-07 13.9706 4.02944 18 9 18C13.9706 18 18 13.9706 18 9C18 4.02944 13.9706 -3.52265e-07 9 -7.86805e-07ZM10 13C10 13.5523 9.55229 14 9 14C8.44772 14 8 13.5523 8 13C8 12.4477 8.44772 12 9 12C9.55229 12 10 12.4477 10 13ZM10 9C10 9.55228 9.55228 10 9 10C8.44771 10 8 9.55228 8 9L8 5C8 4.44771 8.44772 4 9 4C9.55229 4 10 4.44772 10 5L10 9Z" fill="white"></path>
-        </svg> <span class="create-api-key-step__container__copy-key-area__header__title">
-                    API Keys only appear here once. Copy and paste this key to your preferred method of storing secrets.
-                </span></div>
-      <div class="create-api-key-step__container__copy-key-area__key-container"><span class="create-api-key-step__container__copy-key-area__key-container__key">testKey</span>
-        <div class="create-api-key-step__container__copy-key-area__key-container__copy-button">
-          <div class="container blue-white" style="width: 81px; height: 40px;"><span class="label">Copy</span></div>
-        </div>
-      </div>
-    </div>
-    <p class="create-api-key-step__container__info">
-      We don’t record your API Keys, which are only displayed once when generated. If you loose this
-      key, it cannot be recovered – but you can always create new API Keys when needed.
-    </p>
-    <!---->
-  </div>
-  <div class="done-button container" style="width: 156px; height: 48px;"><span class="label">Done</span></div>
-  <!---->
-</div>
-`;
-
-exports[`CreateApiKeyStep.vue renders correctly 1`] = `
-<div class="create-api-key-step">
-  <h1 class="create-api-key-step__title">Create an API Key</h1>
-  <p class="create-api-key-step__sub-title">
-    API keys provide access to the project for creating buckets and uploading objects through the command line
-    interface. This will be your first API key, and you can always create more keys later on.
-  </p>
-  <div class="create-api-key-step__container">
-    <div class="create-api-key-step__container__title-area">
-      <h2 class="create-api-key-step__container__title-area__title">Create API Key</h2>
-      <!---->
-    </div>
-    <div class="input-container full-input">
-      <div class="label-container">
-        <div class="label-container__main">
-          <!---->
-          <h3 class="label-container__main__label">API Key Name</h3>
-          <h3 class="label-container__main__label add-label"></h3>
-          <!---->
-        </div>
-        <!---->
-      </div>
-      <!---->
-      <!----> <input id="API Key Name" placeholder="Enter API Key Name (i.e. Dan’s Key)" type="text" class="headered-input" style="height: 48px;">
-    </div>
-    <div class="create-api-key-step__container__create-key-area">
-      <div class="generate-button container blue-white" style="width: 100%; height: 40px;"><span class="label">Generate API Key</span></div>
-    </div>
-    <!---->
-    <!---->
-  </div>
-  <div class="done-button container disabled" style="width: 156px; height: 48px;"><span class="label">Done</span></div>
-  <!---->
-</div>
-`;
diff --git a/web/satellite/tests/unit/onboardingTour/steps/__snapshots__/CreateProjectStep.spec.ts.snap b/web/satellite/tests/unit/onboardingTour/steps/__snapshots__/CreateProjectStep.spec.ts.snap
deleted file mode 100644
index d1e5468cb..000000000
--- a/web/satellite/tests/unit/onboardingTour/steps/__snapshots__/CreateProjectStep.spec.ts.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CreateProjectStep.vue renders correctly 1`] = `
-<div class="new-project-step">
-  <h1 class="new-project-step__title">Name Your Project</h1>
-  <p class="new-project-step__sub-title">
-    Projects are where buckets are created for storing data. Within a Project, usage is tracked at the bucket
-    level and aggregated for billing.
-  </p>
-  <div class="new-project-step__container">
-    <div class="new-project-step__container__title-area">
-      <h2 class="new-project-step__container__title-area__title">Project Details</h2>
-      <!---->
-    </div>
-    <headeredinput-stub label="Project Name" placeholder="Enter Project Name" height="48px" width="100%" error="" maxsymbols="20" initvalue="" additionallabel="Up To 20 Characters" currentlimit="0" islimitshown="true" class="full-input project-name-input"></headeredinput-stub>
-    <headeredinput-stub label="Description" placeholder="Enter Project Description" height="60px" width="calc(100% - 42px)" error="" maxsymbols="100" initvalue="" additionallabel="Optional" currentlimit="0" islimitshown="true" ismultiline="true" class="full-input"></headeredinput-stub>
-    <!---->
-  </div>
-  <vbutton-stub label="Create Project" width="156px" height="48px" isdisabled="true" onpress="function () { [native code] }" class="create-project-button"></vbutton-stub>
-</div>
-`;
diff --git a/web/satellite/tests/unit/onboardingTour/steps/__snapshots__/SaveApiKeyModal.spec.ts.snap b/web/satellite/tests/unit/onboardingTour/steps/__snapshots__/SaveApiKeyModal.spec.ts.snap
deleted file mode 100644
index e6f69ae92..000000000
--- a/web/satellite/tests/unit/onboardingTour/steps/__snapshots__/SaveApiKeyModal.spec.ts.snap
+++ /dev/null
@@ -1,19 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SaveApiKeyModal.vue renders correctly 1`] = `
-<div class="save-api-modal">
-  <div class="save-api-modal__container"><svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M0 24C1.15877e-06 10.7452 10.7452 -1.15877e-06 24 0C37.2548 2.09815e-06 48 10.7452 48 24C48 37.2548 37.2548 48 24 48C10.7452 48 -2.09815e-06 37.2548 0 24ZM26.6669 24.0003C26.6669 25.473 25.473 26.6669 24.0003 26.6669C22.5275 26.6669 21.3336 25.473 21.3336 24.0003L21.3336 13.3336C21.3336 11.8609 22.5275 10.6669 24.0003 10.6669C25.473 10.6669 26.6669 11.8609 26.6669 13.3336L26.6669 24.0003ZM24.0003 37.3335C25.473 37.3335 26.6669 36.1396 26.6669 34.6668C26.6669 33.194 25.473 32.0001 24.0003 32.0001C22.5275 32.0001 21.3336 33.194 21.3336 34.6668C21.3336 36.1396 22.5275 37.3335 24.0003 37.3335Z" fill="#F4B000"></path>
-    </svg>
-    <h1 class="save-api-modal__container__title">Is Your API Key Saved?</h1>
-    <p class="save-api-modal__container__message">
-      API Keys are only displayed once when generated. If you haven’t saved your key, go back to copy and
-      paste the API key to your preferred method of storing secrets (i.e. TextEdit, Keybase, etc.)
-    </p>
-    <div class="save-api-modal__container__buttons-area">
-      <div class="back-button container blue-white" style="width: 186px; height: 45px;"><span class="label">Go Back</span></div>
-      <div class="container" style="width: 186px; height: 45px;"><span class="label">Yes, it's Saved!</span></div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/web/satellite/tests/unit/onboardingTour/steps/__snapshots__/UploadDataStep.spec.ts.snap b/web/satellite/tests/unit/onboardingTour/steps/__snapshots__/UploadDataStep.spec.ts.snap
deleted file mode 100644
index 2174fccfe..000000000
--- a/web/satellite/tests/unit/onboardingTour/steps/__snapshots__/UploadDataStep.spec.ts.snap
+++ /dev/null
@@ -1,59 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`UploadDataStep.vue renders correctly 1`] = `
-<div class="upload-data-area">
-  <div class="upload-data-area__container">
-    <h1 class="upload-data-area__container__title">Upload Data</h1>
-    <p class="upload-data-area__container__sub-title">
-      From here, you’ll set up Tardigrade to store data for your project using our S3 Gateway, Uplink CLI, or
-      select from our growing library of connectors to build apps on Tardigrade.
-    </p>
-    <div class="upload-data-area__container__docs-area">
-      <div class="upload-data-area__container__docs-area__option">
-        <h2 class="upload-data-area__container__docs-area__option__title">
-          Migrate Data from your Existing AWS buckets
-        </h2> <img src="@/../static/images/onboardingTour/s3.png" alt="s3 gateway image">
-        <h3 class="upload-data-area__container__docs-area__option__sub-title">
-          S3 Gateway
-        </h3>
-        <p class="upload-data-area__container__docs-area__option__info">
-          Make the switch with Tardigrade’s S3 Gateway.
-        </p> <a href="https://documentation.tardigrade.io/api-reference/s3-gateway" target="_blank" rel="noopener noreferrer" class="upload-data-area__container__docs-area__option__link">
-          S3 Gateway Docs
-        </a>
-      </div>
-      <div class="upload-data-area__container__docs-area__option uplink-option">
-        <h2 class="upload-data-area__container__docs-area__option__title">
-          Upload Data from Your Local Environment
-        </h2> <img src="@/../static/images/onboardingTour/uplinkcli.png" alt="uplink cli image">
-        <h3 class="upload-data-area__container__docs-area__option__sub-title">
-          Uplink CLI
-        </h3>
-        <p class="upload-data-area__container__docs-area__option__info">
-          Start uploading data from the command line.
-        </p> <a href="https://documentation.tardigrade.io/getting-started/uploading-your-first-object/set-up-uplink-cli" target="_blank" rel="noopener noreferrer" class="upload-data-area__container__docs-area__option__link">
-          Uplink CLI Docs
-        </a>
-      </div>
-      <div class="upload-data-area__container__docs-area__option">
-        <h2 class="upload-data-area__container__docs-area__option__title">
-          Use Tardigrade for your app’s storage layer
-        </h2> <img src="@/../static/images/onboardingTour/connectors.png" alt="connectors image">
-        <h3 class="upload-data-area__container__docs-area__option__sub-title">
-          App Connectors
-        </h3>
-        <p class="upload-data-area__container__docs-area__option__info">
-          Integrate Tardigrade into your existing stack.
-        </p> <a href="https://tardigrade.io/connectors/" target="_blank" rel="noopener noreferrer" class="upload-data-area__container__docs-area__option__link">
-          App Connectors
-        </a>
-      </div>
-    </div>
-  </div>
-  <div class="go-to-button container" style="width: 276px; height: 40px;"><span class="label">Go to Dashboard</span></div> <span class="upload-data-area__support-info">
-        Need help?
-        <a href="https://support.tardigrade.io/hc/en-us" target="_blank" rel="noopener noreferrer" class="upload-data-area__support-info__link">
-            Contact support
-        </a></span>
-</div>
-`;