diff --git a/web/satellite/src/components/accessGrants/ProgressBar.vue b/web/satellite/src/components/accessGrants/ProgressBar.vue
index 5cfec69c5..b1edd62d9 100644
--- a/web/satellite/src/components/accessGrants/ProgressBar.vue
+++ b/web/satellite/src/components/accessGrants/ProgressBar.vue
@@ -36,28 +36,28 @@ export default class ProgressBar extends Vue {
      * Indicates if current route is on name step.
      */
     public get isNameStep(): boolean {
-        return this.$route.name === RouteConfig.NameStep.name;
+        return this.$route.name === RouteConfig.NameStep.name || this.$route.name === RouteConfig.AccessGrantName.name;
     }
 
     /**
      * Indicates if current route is on permissions step.
      */
     public get isPermissionsStep(): boolean {
-        return this.$route.name === RouteConfig.PermissionsStep.name;
+        return this.$route.name === RouteConfig.PermissionsStep.name || this.$route.name === RouteConfig.AccessGrantPermissions.name;
     }
 
     /**
      * Indicates if current route is on passphrase step.
      */
     public get isPassphraseStep(): boolean {
-        return this.$route.name === RouteConfig.CreatePassphraseStep.name || this.$route.name === RouteConfig.EnterPassphraseStep.name;
+        return this.$route.name === RouteConfig.CreatePassphraseStep.name || this.$route.name === RouteConfig.EnterPassphraseStep.name || this.$route.name === RouteConfig.AccessGrantPassphrase.name;
     }
 
     /**
      * Indicates if current route is on result step.
      */
     public get isResultStep(): boolean {
-        return this.$route.name === RouteConfig.ResultStep.name;
+        return this.$route.name === RouteConfig.ResultStep.name || this.$route.name === RouteConfig.AccessGrantResult.name;
     }
 }
 </script>
diff --git a/web/satellite/src/components/accessGrants/permissions/BucketsSelection.vue b/web/satellite/src/components/accessGrants/permissions/BucketsSelection.vue
index 8cbc05aa0..0b93c813a 100644
--- a/web/satellite/src/components/accessGrants/permissions/BucketsSelection.vue
+++ b/web/satellite/src/components/accessGrants/permissions/BucketsSelection.vue
@@ -5,6 +5,7 @@
     <div class="buckets-selection">
         <div
             class="buckets-selection__toggle-container"
+            :class="{ disabled: isOnboardingTour }"
             @click.stop="toggleDropdown"
         >
             <h1 class="buckets-selection__toggle-container__name">{{ selectionLabel }}</h1>
@@ -27,6 +28,7 @@ import { Component, Vue } from 'vue-property-decorator';
 import BucketsDropdown from '@/components/accessGrants/permissions/BucketsDropdown.vue';
 
 import ExpandIcon from '@/../static/images/common/BlackArrowExpand.svg';
+import {RouteConfig} from "@/router";
 
 @Component({
     components: {
@@ -41,6 +43,8 @@ export default class BucketsSelection extends Vue {
      * Toggles dropdown visibility.
      */
     public toggleDropdown(): void {
+        if (this.isOnboardingTour) return;
+
         this.isDropdownShown = !this.isDropdownShown;
     }
 
@@ -51,6 +55,13 @@ export default class BucketsSelection extends Vue {
         this.isDropdownShown = false;
     }
 
+    /**
+     * Indicates if current route is onboarding tour.
+     */
+    public get isOnboardingTour(): boolean {
+        return this.$route.path.includes(RouteConfig.OnboardingTour.path);
+    }
+
     /**
      * Returns selection options (all or items count).
      */
@@ -101,4 +112,10 @@ export default class BucketsSelection extends Vue {
             }
         }
     }
+
+    .disabled {
+        pointer-events: none;
+        background: #f5f6fa;
+        border: 1px solid rgba(56, 75, 101, 0.4);
+    }
 </style>
diff --git a/web/satellite/src/components/accessGrants/steps/CreatePassphraseStep.vue b/web/satellite/src/components/accessGrants/steps/CreatePassphraseStep.vue
index 2473e814f..437e750d0 100644
--- a/web/satellite/src/components/accessGrants/steps/CreatePassphraseStep.vue
+++ b/web/satellite/src/components/accessGrants/steps/CreatePassphraseStep.vue
@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <div class="create-passphrase">
+    <div class="create-passphrase" :class="{ 'border-radius': isOnboardingTour }">
         <BackIcon class="create-passphrase__back-icon" @click="onBackClick"/>
         <h1 class="create-passphrase__title">Encryption Passphrase</h1>
         <div class="create-passphrase__warning">
@@ -195,6 +195,18 @@ export default class CreatePassphraseStep extends Vue {
         setTimeout(() => {
             this.isLoading = false;
 
+            if (this.isOnboardingTour) {
+                this.$router.push({
+                    name: RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant.with(RouteConfig.AccessGrantResult)).name,
+                    params: {
+                        access: this.access,
+                        key: this.key,
+                    },
+                });
+
+                return;
+            }
+
             this.$router.push({
                 name: RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.ResultStep)).name,
                 params: {
@@ -210,6 +222,17 @@ export default class CreatePassphraseStep extends Vue {
      * Redirects to previous step.
      */
     public onBackClick(): void {
+        if (this.isOnboardingTour) {
+            this.$router.push({
+                name: RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant.with(RouteConfig.AccessGrantPermissions)).name,
+                params: {
+                    key: this.key,
+                },
+            });
+
+            return;
+        }
+
         this.$router.push({
             name: RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.PermissionsStep)).name,
             params: {
@@ -217,6 +240,13 @@ export default class CreatePassphraseStep extends Vue {
             },
         });
     }
+
+    /**
+     * Indicates if current route is onboarding tour.
+     */
+    public get isOnboardingTour(): boolean {
+        return this.$route.path.includes(RouteConfig.OnboardingTour.path);
+    }
 }
 </script>
 
@@ -363,6 +393,10 @@ export default class CreatePassphraseStep extends Vue {
         border-bottom: 3px solid #0068dc;
     }
 
+    .border-radius {
+        border-radius: 6px;
+    }
+
     /deep/ .label-container {
 
         &__main {
diff --git a/web/satellite/src/components/accessGrants/steps/NameStep.vue b/web/satellite/src/components/accessGrants/steps/NameStep.vue
index 897d45faf..d751cfd55 100644
--- a/web/satellite/src/components/accessGrants/steps/NameStep.vue
+++ b/web/satellite/src/components/accessGrants/steps/NameStep.vue
@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <div class="name-step">
+    <div class="name-step" :class="{ 'border-radius': isOnboardingTour }">
         <h1 class="name-step__title">Name Your Access Grant</h1>
         <p class="name-step__sub-title">Enter a name for your new Access grant to get started.</p>
         <HeaderedInput
@@ -14,6 +14,7 @@
         />
         <div class="name-step__buttons-area">
             <VButton
+                v-if="!isOnboardingTour"
                 class="cancel-button"
                 label="Cancel"
                 width="50%"
@@ -84,7 +85,7 @@ export default class NameStep extends Vue {
         }
 
         if (!this.name) {
-            this.errorMessage = 'Access Grant name can`t be empty';
+            this.errorMessage = 'Access Grant name can\'t be empty';
 
             return;
         }
@@ -113,6 +114,18 @@ export default class NameStep extends Vue {
         }
 
         this.isLoading = false;
+
+        if (this.isOnboardingTour) {
+            await this.$router.push({
+                name: RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant.with(RouteConfig.AccessGrantPermissions)).name,
+                params: {
+                    key: this.key,
+                },
+            });
+
+            return;
+        }
+
         await this.$router.push({
             name: RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.PermissionsStep)).name,
             params: {
@@ -120,6 +133,13 @@ export default class NameStep extends Vue {
             },
         });
     }
+
+    /**
+     * Indicates if current route is onboarding tour.
+     */
+    public get isOnboardingTour(): boolean {
+        return this.$route.path.includes(RouteConfig.OnboardingTour.path);
+    }
 }
 </script>
 
@@ -161,6 +181,7 @@ export default class NameStep extends Vue {
             width: 100%;
             display: flex;
             align-items: center;
+            justify-content: center;
             margin-top: 130px;
         }
     }
@@ -168,4 +189,8 @@ export default class NameStep extends Vue {
     .cancel-button {
         margin-right: 15px;
     }
+
+    .border-radius {
+        border-radius: 6px;
+    }
 </style>
diff --git a/web/satellite/src/components/accessGrants/steps/PermissionsStep.vue b/web/satellite/src/components/accessGrants/steps/PermissionsStep.vue
index 6d98eea69..516691b17 100644
--- a/web/satellite/src/components/accessGrants/steps/PermissionsStep.vue
+++ b/web/satellite/src/components/accessGrants/steps/PermissionsStep.vue
@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <div class="permissions">
+    <div class="permissions" :class="{ 'border-radius': isOnboardingTour }">
         <BackIcon class="permissions__back-icon" @click="onBackClick"/>
         <h1 class="permissions__title">Access Permissions</h1>
         <p class="permissions__sub-title">
@@ -55,7 +55,7 @@
             :on-press="onContinueInBrowserClick"
             :is-disabled="isLoading"
         />
-        <p class="permissions__cli-link" @click.stop="onContinueInCLIClick">
+        <p v-if="!isOnboardingTour" class="permissions__cli-link" @click.stop="onContinueInCLIClick">
             Continue in CLI
         </p>
     </div>
@@ -179,6 +179,17 @@ export default class PermissionsStep extends Vue {
         setTimeout(() => {
             this.isLoading = false;
 
+            if (this.isOnboardingTour) {
+                this.$router.push({
+                    name: RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant.with(RouteConfig.AccessGrantPassphrase)).name,
+                    params: {
+                        key: this.restrictedKey,
+                    },
+                });
+
+                return;
+            }
+
             if (this.accessGrantsAmount > 1) {
                 this.$router.push({
                     name: RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.EnterPassphraseStep)).name,
@@ -199,6 +210,13 @@ export default class PermissionsStep extends Vue {
         }, 1000);
     }
 
+    /**
+     * Indicates if current route is onboarding tour.
+     */
+    public get isOnboardingTour(): boolean {
+        return this.$route.path.includes(RouteConfig.OnboardingTour.path);
+    }
+
     /**
      * Returns stored selected bucket names.
      */
@@ -359,4 +377,8 @@ export default class PermissionsStep extends Vue {
             color: #0068dc;
         }
     }
+
+    .border-radius {
+        border-radius: 6px;
+    }
 </style>
diff --git a/web/satellite/src/components/accessGrants/steps/ResultStep.vue b/web/satellite/src/components/accessGrants/steps/ResultStep.vue
index 7e337fb05..689acec7c 100644
--- a/web/satellite/src/components/accessGrants/steps/ResultStep.vue
+++ b/web/satellite/src/components/accessGrants/steps/ResultStep.vue
@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <div class="generate-grant">
+    <div class="generate-grant" :class="{ 'border-radius': isOnboardingTour }">
         <BackIcon class="generate-grant__back-icon" @click="onBackClick"/>
         <h1 class="generate-grant__title">Generate Access Grant</h1>
         <div class="generate-grant__warning">
@@ -192,6 +192,17 @@ export default class ResultStep extends Vue {
      * Redirects to previous step.
      */
     public onBackClick(): void {
+        if (this.isOnboardingTour) {
+            this.$router.push({
+                name: RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant.with(RouteConfig.AccessGrantPassphrase)).name,
+                params: {
+                    key: this.$route.params.key,
+                },
+            });
+
+            return;
+        }
+
         if (this.accessGrantsAmount > 1) {
             this.$router.push({
                 name: RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.EnterPassphraseStep)).name,
@@ -216,6 +227,12 @@ export default class ResultStep extends Vue {
      * Proceed to upload data step.
      */
     public onDoneClick(): void {
+        if (this.isOnboardingTour) {
+            this.$router.push(RouteConfig.ProjectDashboard.path);
+
+            return;
+        }
+
         this.$router.push({
             name: RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.UploadStep)).name,
             params: {
@@ -243,6 +260,13 @@ export default class ResultStep extends Vue {
         }
     }
 
+    /**
+     * Indicates if current route is onboarding tour.
+     */
+    public get isOnboardingTour(): boolean {
+        return this.$route.path.includes(RouteConfig.OnboardingTour.path);
+    }
+
     /**
      * Returns generated gateway credentials from store.
      */
@@ -292,7 +316,7 @@ export default class ResultStep extends Vue {
 
         &__warning {
             padding: 20px;
-            width: calc(100% - 40px);
+            width: calc(100% - 42px);
             background: #fff9f7;
             border: 1px solid #f84b00;
             border-radius: 8px;
@@ -336,7 +360,7 @@ export default class ResultStep extends Vue {
                 align-items: center;
                 border-radius: 9px;
                 padding: 10px;
-                width: calc(100% - 20px);
+                width: calc(100% - 22px);
                 border: 1px solid rgba(56, 75, 101, 0.4);
 
                 &__value {
@@ -446,4 +470,8 @@ export default class ResultStep extends Vue {
             margin-top: 30px;
         }
     }
+
+    .border-radius {
+        border-radius: 6px;
+    }
 </style>
diff --git a/web/satellite/src/components/onboardingTour/steps/CreateAccessGrantStep.vue b/web/satellite/src/components/onboardingTour/steps/CreateAccessGrantStep.vue
index 72c00962c..89d31c4a5 100644
--- a/web/satellite/src/components/onboardingTour/steps/CreateAccessGrantStep.vue
+++ b/web/satellite/src/components/onboardingTour/steps/CreateAccessGrantStep.vue
@@ -1,11 +1,99 @@
 // Copyright (C) 2020 Storj Labs, Inc.
 // See LICENSE for copying information.
 
-<template></template>
+<template>
+    <div class="onboarding-access">
+        <h1 class="onboarding-access__title">Create an Access Grant</h1>
+        <p class="onboarding-access__sub-title">
+            Access Grants are keys that allow access to upload, delete, and view your project’s data.
+        </p>
+        <div
+            class="onboarding-access__content"
+            :class="{
+                'permissions-margin': isPermissionsStep,
+                'passphrase-margin': isPassphraseStep,
+                'result-margin': isResultStep,
+            }"
+        >
+            <ProgressBar/>
+            <router-view/>
+        </div>
+    </div>
+</template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 
-@Component
-export default class CreateAccessGrantStep extends Vue {}
+import ProgressBar from '@/components/accessGrants/ProgressBar.vue';
+
+import { RouteConfig } from '@/router';
+
+@Component({
+    components: {
+        ProgressBar,
+    },
+})
+export default class CreateAccessGrantStep extends Vue {
+    /**
+     * Indicates if current route is access grant permissions step.
+     */
+    public get isPermissionsStep(): boolean {
+        return this.$route.name === RouteConfig.AccessGrantPermissions.name;
+    }
+
+    /**
+     * Indicates if current route is access grant passphrase step.
+     */
+    public get isPassphraseStep(): boolean {
+        return this.$route.name === RouteConfig.AccessGrantPassphrase.name;
+    }
+
+    /**
+     * Indicates if current route is access grant result step.
+     */
+    public get isResultStep(): boolean {
+        return this.$route.name === RouteConfig.AccessGrantResult.name;
+    }
+}
 </script>
+
+<style scoped lang="scss">
+    .onboarding-access {
+        font-family: 'font_regular', sans-serif;
+        font-style: normal;
+
+        &__title {
+            font-family: 'font_bold', sans-serif;
+            font-size: 32px;
+            line-height: 39px;
+            text-align: center;
+            color: #1b2533;
+            margin: 0 0 15px 0;
+        }
+
+        &__sub-title {
+            font-size: 16px;
+            line-height: 21px;
+            color: #000;
+            margin: 0 0 50px 0;
+        }
+
+        &__content {
+            display: flex;
+            align-items: center;
+            margin-left: -145px;
+        }
+    }
+
+    .permissions-margin {
+        margin-left: -210px;
+    }
+
+    .passphrase-margin {
+        margin-left: -180px;
+    }
+
+    .result-margin {
+        margin-left: -175px;
+    }
+</style>
diff --git a/web/satellite/src/router/index.ts b/web/satellite/src/router/index.ts
index 79e8c7a30..e376e7a69 100644
--- a/web/satellite/src/router/index.ts
+++ b/web/satellite/src/router/index.ts
@@ -312,6 +312,12 @@ router.beforeEach((to, from, next) => {
         return;
     }
 
+    if (navigateToDefaultSubTab(to.matched, RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant))) {
+        next(RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant).with(RouteConfig.NameStep).path);
+
+        return;
+    }
+
     if (navigateToDefaultSubTab(to.matched, RouteConfig.OnboardingTour)) {
         next(RouteConfig.OnboardingTour.with(RouteConfig.OverviewStep).path);